火星網(wǎng)校
學(xué)習(xí)UI設(shè)計交互設(shè)計細(xì)節(jié)
發(fā)布時間：2024-03-16 13:29:41 瀏覽量：180次
作為交互設(shè)計師，最常聽到的設(shè)計思路，大概就數(shù)「要考慮用戶行為」了。今天給大家?guī)韮蓚€小例子，看看在這些小問題中，是如何通過用戶行為來優(yōu)化交互設(shè)計的。
一、功能呈現(xiàn)的樣式
用戶行為會影響功能呈現(xiàn)的樣式。來看看一位讀者朋友給我的提問：
“ 今天在使用兩款網(wǎng)頁郵箱時，發(fā)現(xiàn)兩款郵箱在導(dǎo)航交互方面有差異：
網(wǎng)易 163 郵箱每新開一封郵件，頁面上方會增加一個類似瀏覽器標(biāo)簽頁的 tab，支持手動切換瀏覽；
QQ 郵箱則是展開一個新層級，只展示當(dāng)前郵件內(nèi)容頁面，點擊按鈕返回即關(guān)閉。為什么郵箱的導(dǎo)航會有所不同呢？該怎么評價這兩個導(dǎo)航交互設(shè)計呢？”
相信不少使用過兩款郵箱的朋友們都會覺得 QQ 郵箱體驗要好一些，因為網(wǎng)易 163 郵箱標(biāo)簽頁瀏覽一次后，基本不會再看，但開了多個 tab 頁面，還需要手動一個個的關(guān)閉，很容易出現(xiàn)標(biāo)簽頁堆積的情況。
我曾經(jīng)也有同感，但有一次在寫郵件時，同時又收到了其他的新郵件，這才發(fā)現(xiàn)去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面繼續(xù)寫郵件，沒有任何多余的操作，瞬間感覺真香！
在我看來，這兩種方式其實是基于不同的用戶使用情景設(shè)計的：
網(wǎng)易 163 郵箱側(cè)重于工作的多線程，所以會呈現(xiàn)用戶的閱讀行為路徑。郵件內(nèi)容頁會采用 Tab 標(biāo)簽式，目的是便于用戶查看自己的工作和閱讀軌跡。
而騰訊 qq 郵箱側(cè)重于郵件內(nèi)容，采用單一的內(nèi)容展示，不保留閱讀痕跡，清晰簡潔，不給用戶增加額外的負(fù)擔(dān)。
所以「存在即合理」。在分析組件 / 元素 / 某些功能的合理性時，有兩個經(jīng)驗：
1. 先考慮的不是表層樣式，而是其背后所對應(yīng)的用戶群體的操作情景和行為。
2. 切換立場，不要總用“我覺得…”，而要多思考“該產(chǎn)品的用戶覺得…”。
二、功能的定義與布局
用戶的行為同樣會影響到功能的定義與布局。來看看另一位讀者朋友給我的提問：
“為什么在大多數(shù) B 端產(chǎn)品的 Table 中，【編輯】和【刪除】功能是分開的？正常邏輯是【編輯】應(yīng)該包含了【刪除】功能呀。為什么不把【刪除】放到【編輯】功能中呢？”
相信你看了問題，可能也會有一樣的疑惑。小問題折射大道理。其實字面的定義是一個方面，這個情景下的用戶操作的行為路徑和操作頻率相對來說更為重要：
1、行為路徑
通常來說用戶想要【刪除】某個內(nèi)容，是不會在編輯內(nèi)容之后再刪除的，刪除相對來說是一種干脆直接的行為，因此沒有必要先點擊編輯再進(jìn)行刪除。
而用戶想要【編輯】某個內(nèi)容，通常也不會在編輯完內(nèi)容之后就想要刪除。一般來說編輯完內(nèi)容，重置、保存、取消等功能更為常用。這個時候增加刪除功能，也有可能讓用戶產(chǎn)生歧義。
所以兩者在字面定義上似乎有關(guān)系，但在交互行為上并不具備連貫的邏輯。如要追求用戶體驗，分開并列排布會更好。
2、使用頻率
另一個需要考慮的要素是用戶對于功能的使用頻率。如果刪除是很常用的功能，放在外面也會大大減少用戶的操作時長，包括點擊、瀏覽和頁面加載等時長。
所以你看，交互設(shè)計不是簡單的語文題，字面上的邏輯所有人都可以想得到，但將這些文字語義和邏輯與用戶交互行為結(jié)合起來，就是設(shè)計師的價值所在。
來源網(wǎng)絡(luò)
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
最新文章
