分別給UI設(shè)計(jì)師和UX設(shè)計(jì)一些工作 & 學(xué)習(xí)小建議

這篇文章我會(huì)詳細(xì)介紹一下：用戶界面設(shè)計(jì)師（UI）和用戶體驗(yàn)設(shè)計(jì)師（UX）的區(qū)別爪喘，這些內(nèi)容可以幫你在工作中更好地自我定位车遂，有針對(duì)性地得到專業(yè)提升。

首先杜漠，我們先來(lái)解答這個(gè)問(wèn)題：UI設(shè)計(jì)和UX設(shè)計(jì)到底是什么甚淡？他們之間有什么具體的區(qū)別呢瘟栖？

簡(jiǎn)單來(lái)講横蜒，UI解決的是產(chǎn)品看上去是什么樣的，UX解決的是產(chǎn)品是如何使用的右核。UI是可交付的產(chǎn)品效果汉操，UX專注的是產(chǎn)品流程設(shè)計(jì)。

下面我們來(lái)更詳細(xì)地看一下兩者的區(qū)別：

用戶界面設(shè)計(jì) User Interface

Design（UI）

UI的領(lǐng)域很大蒙兰，理論上講，它包括了：內(nèi)容（文件芒篷、文本搜变、圖像、視頻等）针炉，形態(tài)（按鈕挠他、標(biāo)簽、文本填寫(xiě)區(qū)域篡帕、復(fù)選框殖侵、下拉列表、平面設(shè)計(jì)等）镰烧，還有表現(xiàn)形式（如果我點(diǎn)擊/拖拽/輸入會(huì)呈現(xiàn)出怎樣的效果拢军？）。

這就需要設(shè)計(jì)師有一雙好眼睛怔鳖，經(jīng)過(guò)很多的聯(lián)系茉唉、很多的嘗試、撕掉很多錯(cuò)誤的設(shè)計(jì)稿后得到最滿意的效果结执。作為一位UI設(shè)計(jì)師度陆，你的目標(biāo)是把你的產(chǎn)品設(shè)計(jì)得迷人、漂亮献幔，能讓用戶沉浸進(jìn)來(lái)懂傀，愛(ài)上它。

我初入U(xiǎn)I這一行時(shí)蜡感，從一位前輩身上學(xué)到了一個(gè)很好的習(xí)慣——把你的產(chǎn)品想象成為一段旅程蹬蚁。每一位用戶從 App Store或網(wǎng)頁(yè)上下載了這個(gè) App開(kāi)始，經(jīng)歷了使用它铸敏，并通過(guò)這個(gè)App達(dá)成了某個(gè)目標(biāo)缚忧，或者完成了某個(gè)任務(wù)，這整個(gè)過(guò)程是完整的旅程杈笔，而這段旅程全程都應(yīng)該是令人身心愉悅的闪水。

而你作為整個(gè)App的導(dǎo)游，為了使這段旅行充滿趣味，你需要有能力把控用戶的注意力球榆，將他們的注意力從一個(gè)地方指引向另一個(gè)地方朽肥。

設(shè)計(jì)不僅僅只是去學(xué)習(xí)設(shè)計(jì)工具如何使用，雖然這些技能很重要持钉。設(shè)計(jì)工具是設(shè)計(jì)師的武器衡招，你需要武器去幫你戰(zhàn)斗，但是這不是全部每强，你還需要學(xué)習(xí)能夠幫你獲得戰(zhàn)斗/游戲勝利的策略始腾、流程、技巧空执、秘訣浪箭。

在UI設(shè)計(jì)中，你需要善用頭腦風(fēng)暴辨绊、需要經(jīng)驗(yàn)奶栖、反復(fù)的測(cè)試、懂你的用戶并了解用戶使用產(chǎn)品的整個(gè)流程门坷。

一款工具如果有一套非常棒的UI設(shè)計(jì)宣鄙，那么會(huì)得到比較高的用戶留存率。

在UI設(shè)計(jì)中需要注意的事項(xiàng)：

1.用戶的關(guān)注點(diǎn)

在一個(gè)屏幕上默蚌，人們首先看到的是最大的冻晤、最粗的、最閃耀的元素敏簿。作為一位設(shè)計(jì)師明也，你需要善用各種格式來(lái)引導(dǎo)用戶的注意力。

2.排列對(duì)齊的重要性

排列對(duì)齊是UI設(shè)計(jì)的基礎(chǔ)技巧惯裕，UI設(shè)計(jì)中有一條非常重要的原則：對(duì)期限最少化温数。這條原則提升了頁(yè)面的易讀性，且對(duì)用戶的觀感比較友好蜻势。

上面的兩張圖中撑刺，左邊的只有1條對(duì)齊線，而右邊的有2條握玛。

下面我再給一個(gè)例子够傍，展示越少的對(duì)齊線，能讓你的設(shè)計(jì)圖越好看挠铲。

左邊的頁(yè)面有太多的對(duì)齊線冕屯，而右邊也只有1條，對(duì)視覺(jué)感官非常友好拂苹。

通常來(lái)講安聘，我們有兩條關(guān)于對(duì)齊的基礎(chǔ)知識(shí)點(diǎn)：邊對(duì)齊和中心對(duì)齊。

· 邊對(duì)齊指的是所有元素某一側(cè)，連線排列對(duì)齊浴韭；

· 中心對(duì)齊指的是所有元素中心點(diǎn)丘喻，連線排列對(duì)齊。

根據(jù)實(shí)際情況念颈，你可以適當(dāng)選擇用那種泉粉。不過(guò)通常情況下，邊對(duì)齊會(huì)好一些榴芳。

3.要關(guān)注產(chǎn)品構(gòu)架

具體解釋分為兩點(diǎn)：

（1）你需要用你的設(shè)計(jì)去抓住用戶的注意力嗡靡；

（2）你需要關(guān)注你設(shè)計(jì)中每一個(gè)細(xì)微的元素。

如果想成為一名優(yōu)秀的設(shè)計(jì)師窟感，這兩點(diǎn)你都需要做到叽躯。而其中只有做好了第（2）點(diǎn)，才能實(shí)現(xiàn)第（1）點(diǎn)肌括。

UI設(shè)計(jì)師通過(guò)引導(dǎo)用戶將注意力不斷地轉(zhuǎn)向不同的很重要的元素/功能上來(lái)為用戶定制使用體驗(yàn)。

利用文本吸引用戶注意力方式匯總：

· 文字尺寸放大或縮泻选谍夭；

· 把字體加粗，或顏色調(diào)亮憨募；或者（如果整個(gè)頁(yè)面是明亮的）把字體顏色調(diào)暗紧索；

· 利用字體本身的規(guī)格來(lái)變化字體線條的粗細(xì)。

· 善用斜體菜谣、大小寫(xiě)珠漂；

· 適度增加每個(gè)字母之間的間距，這樣能使整個(gè)文本所占據(jù)的空間加大尾膊。

最最重要的一點(diǎn)是：整個(gè)設(shè)計(jì)過(guò)程其實(shí)就是一個(gè)不斷測(cè)試的過(guò)程媳危，你需要確定你在這個(gè)過(guò)程中嘗試過(guò)所有不同的方式：顏色、字體冈敛、字號(hào)待笑、色調(diào)、角度抓谴、對(duì)齊方式暮蹂、布局等等。只有嘗試過(guò)不同的設(shè)計(jì)癌压，你才能從中找出最佳方案仰泻，能使你的用戶在使用你的產(chǎn)品時(shí)身心愉悅。

用戶體驗(yàn)設(shè)計(jì)師User

Experience Design（UX）

UX設(shè)計(jì)師就是為了為用戶設(shè)計(jì)無(wú)痛的滩届、友好的產(chǎn)品體驗(yàn)集侯。

這里有7方面的問(wèn)題供你參考，去審核你的產(chǎn)品的UX設(shè)計(jì)是否優(yōu)秀：

1.適用性

用戶使用我的產(chǎn)品是要做什么？

我的產(chǎn)品主要功能是什么浅悉？

為了讓用戶使用趟据，哪些功能是必須有的？

我應(yīng)該怎樣盡量減少用戶使用我的app去達(dá)到他的目的的步驟术健？

我應(yīng)該怎樣讓用戶體驗(yàn)更順暢汹碱、更快、讓用戶用起來(lái)更愉快荞估？

2.用戶分析

你需要知道你的用戶是誰(shuí)咳促，他們使用你的產(chǎn)品要達(dá)成什么目的？這時(shí)候你就需要進(jìn)行用戶分析了勘伺。

首先你需要分析你的市場(chǎng)跪腹，縮小目標(biāo)用戶范圍。

有一個(gè)關(guān)鍵的問(wèn)題你需要反復(fù)地詢問(wèn)自己：我的產(chǎn)品最核心的功能是什么飞醉？經(jīng)過(guò)不斷地用戶分析后冲茸，你同時(shí)也需要不斷地重新評(píng)估這個(gè)問(wèn)題。

3.權(quán)限授權(quán)

如果你的手機(jī)app需要推送通知信息缅帘，需要定位服務(wù)轴术、與社交媒體打通、發(fā)送E-mail等等钦无，那么你需要得到用戶的授權(quán)逗栽，當(dāng)他們使用手機(jī)時(shí)，你推送的信息可以自動(dòng)出現(xiàn)在他們手機(jī)的屏幕上失暂。不要一上來(lái)就向用戶索要所有的授權(quán)彼宠，這樣會(huì)讓用戶產(chǎn)生抵觸心理。利用本杰明·富蘭克林效應(yīng)：在請(qǐng)求別人幫你一個(gè)大忙之前弟塞，先請(qǐng)他幫你一個(gè)小忙凭峡。即溫水煮青蛙。

確保你的請(qǐng)求授權(quán)消息是在用戶在使用相應(yīng)功能的時(shí)候發(fā)出的决记，而不是在他一運(yùn)行app便一股腦發(fā)出的想罕。

4.形式與功能

設(shè)計(jì)不光要考慮形式：漂亮的色彩、字體霉涨、布局這些按价，還要考慮功能性。通常來(lái)說(shuō)笙瑟，功能性要高于形式楼镐。

5.一致性

我的app設(shè)計(jì)有保持一致性嗎？

我的app和其品牌保持了一致性嗎往枷？

如果設(shè)計(jì)上出現(xiàn)不一致的情況框产，會(huì)導(dǎo)致使用者認(rèn)知混亂凄杯。

因此，保持設(shè)計(jì)一致性并不單純?yōu)榱撕每幢蓿彩菫樘岣弋a(chǎn)品功能性體驗(yàn)戒突。

6.簡(jiǎn)潔

我能讓它更簡(jiǎn)潔一些嗎？

確保你的app即使是年紀(jì)很大的爺爺描睦、奶奶也可以很輕松上手膊存。

一個(gè)讓人產(chǎn)生困擾的app一般會(huì)有成排成排的按鈕、五花八門的顏色和擁擠不堪的界面忱叭。

7.別讓用戶思考

我的app會(huì)讓我的用戶在使用時(shí)覺(jué)得困難嗎隔崎？

人們不喜歡遭遇困惑的感覺(jué)。

當(dāng)我們?cè)诰幊虝r(shí)韵丑，我們會(huì)盡量讓我們的代碼盡量輕量爵卒、盡量高效。

當(dāng)我們?cè)谠O(shè)計(jì)時(shí)撵彻，我們會(huì)盡量讓界面簡(jiǎn)潔钓株、盡量讓用戶不要遇到產(chǎn)生疑惑的地方，當(dāng)然陌僵，還要漂亮享幽！

同時(shí)，也盡量讓你的文案精簡(jiǎn)下來(lái)拾弃。

給UX設(shè)計(jì)師的一些建議：

1.別在用戶一打開(kāi)app時(shí)就給出一個(gè)長(zhǎng)長(zhǎng)的使用教程。而是應(yīng)該當(dāng)用戶需要使用哪個(gè)功能時(shí)摆霉，給出相應(yīng)的引導(dǎo)豪椿。利用用簡(jiǎn)短的貼士和指引，讓用戶很快地了解app的使用方法携栋。

2.有一些手勢(shì)/指令在用戶的概念里已經(jīng)根深蒂固搭盾，比如上下拉刷新，再比如雙指縮放畫(huà)面婉支，那么在你的app里也要延續(xù)這些規(guī)則鸯隅，不要給這些手勢(shì)賦予新的含義。

3.不要把用戶完全當(dāng)成一個(gè)白癡向挖。不要在用戶進(jìn)行操作行為時(shí)頻繁地彈出“確認(rèn)”按鈕框蝌以。只有當(dāng)用戶的行為可能會(huì)造成有害后果時(shí)，才需要給出警示何之，讓用戶再次確認(rèn)跟畅，比如：刪除某些東西、付款等溶推。

不必要且頻繁的彈窗會(huì)打斷用戶使用的流程徊件，用戶體驗(yàn)會(huì)變得很糟糕奸攻。

總結(jié)

我希望這篇文章能幫助你理解UI設(shè)計(jì)師和UX設(shè)計(jì)師的基本概念，還有二者之間的區(qū)別虱痕，也希望能為你的職業(yè)規(guī)劃帶來(lái)幫助睹耐。

原文作者：Harshita Arora

翻譯：藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作