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