生活中有許多東西都是瞬息萬(wàn)變的，不變的東西并不多，躲不過(guò)的死亡，和雷打不動(dòng)晚七點(diǎn)新聞聯(lián)播。在如此復(fù)雜多變的時(shí)代，要如何做好用戶體驗(yàn)設(shè)計(jì)呢？作為一個(gè)用戶學(xué)習(xí)者，這一年半的學(xué)習(xí)，試圖尋找關(guān)于用戶體驗(yàn)設(shè)計(jì)的答案。

在設(shè)計(jì)過(guò)程中、之前和之后都要持續(xù)不斷地做用戶體驗(yàn)設(shè)計(jì)，這是一個(gè)永無(wú)止境的過(guò)程。在任何時(shí)候都要考慮用戶行為，這對(duì)于設(shè)計(jì)者是一個(gè)極大的挑戰(zhàn)。

為了產(chǎn)品設(shè)計(jì)始終走在對(duì)的道路之上，我總結(jié)了5個(gè)關(guān)于UI設(shè)計(jì)基礎(chǔ)，并且用它作為為設(shè)計(jì)過(guò)程的參考。理解用戶體驗(yàn)設(shè)計(jì)決策并為團(tuán)隊(duì)成員作出解釋，最終落實(shí)到產(chǎn)品中，更是需要走很長(zhǎng)的路。

• 概念篇：什么是UI
• 規(guī)范篇：沒(méi)有規(guī)矩，不成方圓
• 工具篇：工欲善其事，必先利其器
• 思路篇：多看、多想、多做
• 寫在最后

1. 概念篇：

什么是UI？UI是用戶界面，是英文User Interface的縮寫。從字面上看是用戶與界面2個(gè)單詞組成部分，但實(shí)際上還包括用戶與界面之間的關(guān)系，所以這樣可分3個(gè)方向，分別是：用戶研究（研究人）、交互設(shè)計(jì)（研究人與界面）、視覺(jué)設(shè)計(jì)（研究界面）。

什么是設(shè)計(jì)？設(shè)計(jì)是把一種設(shè)想通過(guò)合理的規(guī)劃、周密的計(jì)劃、通過(guò)各種感覺(jué)形式傳達(dá)出來(lái)的過(guò)程。人類通過(guò)勞動(dòng)改造世界，創(chuàng)造文明，創(chuàng)造物質(zhì)財(cái)富和精神財(cái)富，而最基礎(chǔ)、最主要的創(chuàng)造活動(dòng)是造物。設(shè)計(jì)便是造物活動(dòng)進(jìn)行預(yù)先的計(jì)劃，可以把任何造物活動(dòng)的計(jì)劃技術(shù)和計(jì)劃過(guò)程理解為設(shè)計(jì)。

“設(shè)計(jì)不僅僅是簡(jiǎn)單的組裝，控制，抑或編輯，它是增加價(jià)值和意義，啟發(fā)和明晰，化繁為簡(jiǎn)，修正和勸說(shuō)，包裝和講故事，甚至逗樂(lè)。”

——保羅·蘭德

UI設(shè)計(jì)原則。在APP開(kāi)發(fā)中，UI的設(shè)計(jì)尤為重要，因?yàn)樗苯佑绊懼脩趔w驗(yàn)，好的UI設(shè)計(jì)可以人APP的用戶體驗(yàn)加倍。如果UI設(shè)計(jì)不過(guò)關(guān)，那么你的APP功能再齊全，可能是留不住用戶。

清晰：清晰度是界面設(shè)計(jì)中，第一步也最重要的工作。要想你設(shè)計(jì)的界面有效并被人喜歡，首先必須讓用戶能夠識(shí)別出它？讓用戶知道為什么會(huì)使用它？比如用戶使用時(shí)，能夠預(yù)料到發(fā)生什么，并成功的與它交互。

簡(jiǎn)單：我們?cè)陂喿x的時(shí)候，總是會(huì)有許多事物分散我們的注意力使我們很難集中注意力安靜地閱讀。因此在進(jìn)行界面設(shè)計(jì)的時(shí)候，能夠吸引用戶的注意力是很關(guān)鍵的，不應(yīng)該為了好看而增加沒(méi)有必要的設(shè)計(jì)，造成用戶瀏覽和記憶的疲勞。

統(tǒng)一：無(wú)論是從設(shè)計(jì)風(fēng)格上，還是按鈕的排版布局、信息提示、系統(tǒng)文字等都要做到統(tǒng)一，這樣用戶才會(huì)完全熟悉和記住產(chǎn)品的行為路徑，而不會(huì)造成不必要的錯(cuò)誤。

人性：高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級(jí)和初級(jí)玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。

2. 規(guī)范篇：

（1）尺寸

很多新人在開(kāi)始做移動(dòng)端UI設(shè)計(jì)的時(shí)候，往往對(duì)界面的一些尺寸規(guī)范不是十分清楚，很多時(shí)候都是憑借自己的感覺(jué)和經(jīng)驗(yàn)去繪制界面，心里并沒(méi)有一個(gè)清晰的概念，導(dǎo)致做出來(lái)的頁(yè)面總是不那么盡如人意。

（iOS系統(tǒng)）中常用的一些尺寸規(guī)范和方法，如控件間距、適配、標(biāo)注、切圖等，設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解，并融會(huì)貫通。在iOS平臺(tái)交互設(shè)計(jì)規(guī)范中都有詳細(xì)的描述。

Android設(shè)備的屏幕設(shè)計(jì)尺寸：

*dpi:表示每英寸有多少個(gè)顯示點(diǎn)

*dp：安卓系統(tǒng)中單位，也就是DPI-設(shè)備獨(dú)立像素。系統(tǒng)會(huì)根據(jù)屏幕密度自動(dòng)進(jìn)行轉(zhuǎn)換

例：屏幕密度160時(shí)，1dp=1sp=1px

（2）字體：

Ios8的中文：Heiti，英文和數(shù)字：helvetica Neue

Ios9的中文：蘋方，英文和數(shù)字：San Francisco

Android平臺(tái)中Android4.X中文：Droid Sans Fallback，英文和數(shù)字：Roboto

Android5.0的中文：恩源黑體，英文和數(shù)字：Roboto

（3）切圖的命名規(guī)范

iOS平臺(tái)輸出的規(guī)范為：XXX@2x.png、XXX@3x.png。其中，2x屏幕的設(shè)備會(huì)自動(dòng)加載 xxx@2x.png 命名的圖片資源，3x屏幕的設(shè)備會(huì)自動(dòng)加載 xxx@3x.png 的圖片。

Android平臺(tái)輸出的規(guī)范為：XXX.png，一般切片格式為png24

切圖命名的萬(wàn)能公式：模塊_別類_功能_轉(zhuǎn)態(tài).png。例如：tab_ button_search_normal.png

（4）注意事項(xiàng)：

Android平臺(tái)不支持“-”，所以請(qǐng)用“_”作為連接符。

按鈕一共有四種狀態(tài)：

Normal：正常情況下的轉(zhuǎn)態(tài)。

Highlighted：突出顯示，即用戶點(diǎn)擊按鈕不放時(shí)按鈕的狀態(tài)。

Selected：選中的狀態(tài)。

Disabled：不可用狀態(tài)。

3. 工具篇

（1）實(shí)時(shí)預(yù)覽工具

Ps Play是一個(gè)通過(guò)WiFi網(wǎng)絡(luò)，實(shí)時(shí)在終端設(shè)備上預(yù)覽電腦上Photoshop的設(shè)計(jì)稿，可同步調(diào)試及截圖保存到移動(dòng)終端，并可以通過(guò)Email、微信等工具即時(shí)分享的跨終端應(yīng)用。由騰訊ISUX出品。

（2）圖標(biāo)制作工具

Icon Template是一款運(yùn)行在Photoshop中的插件，可以根據(jù)你的APP ICON，生成ios/android平臺(tái)下各種尺寸的圖標(biāo)

（3）標(biāo)注神器：

與其他切圖標(biāo)記軟件不同的是，Assistor PS是完全獨(dú)立于PS本身的，說(shuō)是一個(gè)外掛更加合適，旨中 提高切圖標(biāo)記的效率及速度。雖然不是一個(gè)插件，但是它與PS是連通的，當(dāng)你在PS選擇一個(gè)圖層在后，即可使用它的功能

（4）切圖工具：

Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出， 以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。 它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便在pc、ios、Android等端上使用。 它不需要記住一堆的語(yǔ)法、規(guī)則，純點(diǎn)擊操作，方便、快捷，易于上手。

（5）壓縮軟件：

TinyPNG使用智能有損壓縮技術(shù)來(lái)減少PNG文件的文件大小。通過(guò)選擇性地減少圖像中的顏色數(shù)量，存儲(chǔ)數(shù)據(jù)所需的字節(jié)更少。效果幾乎不可見(jiàn)的，但它在文件大小上產(chǎn)生了很大的差異！

（6）一鍵展示：

一款PS插件，可以瞬間實(shí)現(xiàn)3D立體效果，從此告別腳本，拋棄動(dòng)作，只需要一個(gè)按鈕。同時(shí)提供了幾十款設(shè)計(jì)模型模板,讓設(shè)計(jì)稿展示更加精美!

4. 思路篇

（1）多看

多看書(shū)比如：《寫給大家看的設(shè)計(jì)書(shū)》、《UI設(shè)計(jì)黃金法則》、《設(shè)計(jì)師要懂心理學(xué)》等等......，再有多看視頻和其他高手的作品

（2）多想：

是配色上吸引了你？為什么這2個(gè)顏色配搭起來(lái)這么舒服了，我要趕緊截屏到PS里吸取它的顏色看看，整理到一個(gè)色彩配搭素材庫(kù)里，下次我也這么干。

某一句廣告語(yǔ)言打動(dòng)了你，讓你記憶猶新？看看人家的廣告語(yǔ)多好，下次要記得說(shuō)服公司的策劃人員給點(diǎn)有個(gè)性的能打動(dòng)人心的標(biāo)題文案。

背景烘托的很有檔次嗎？這飄落的綠葉和花瓣是怎么做的，是用素材還是自己畫(huà)的，這素材哪里有，我去找找看。

字體變形，字體排版上很牛？太美妙了，想法太好了，圖形切割的也很有美感，趕緊收藏了。

細(xì)節(jié)處理的很有新意嗎？這個(gè)按鈕的高光做的太好了，、這是怎么做到啊，我要好好研究下。找?guī)讉€(gè)討論下，到群里問(wèn)問(wèn)大家。

（3）站在用戶這邊

在清晰明確的意圖之下構(gòu)建貼心的產(chǎn)品，這是你真正關(guān)注產(chǎn)品設(shè)計(jì)的明證。這樣的產(chǎn)品讓用戶更舒服地做出選擇，營(yíng)造更優(yōu)秀的用戶體驗(yàn)。產(chǎn)品設(shè)計(jì)是否用心其實(shí)很好判斷，是否誠(chéng)實(shí)地設(shè)計(jì)，用心地為用戶考慮。一雙鞋好不好，穿著它走上十公里，當(dāng)拖著疲憊的身軀回家的時(shí)候，仔細(xì)回味穿著它的每一步，就知道它好不好。而這也是我們面對(duì)自己的產(chǎn)品，要做的事情。

5. 寫在最后

（1）易于消化

好設(shè)計(jì)應(yīng)該是易于用戶消化的——大腦不應(yīng)該花費(fèi)巨量的腦細(xì)胞來(lái)費(fèi)神分析眼睛看到的東西。如果設(shè)計(jì)得易于理解，訪客和用戶會(huì)很快“Get it”而無(wú)需要花費(fèi)半個(gè)小時(shí)來(lái)查看下方一千多字分6段解釋的說(shuō)明文字

這不僅僅是設(shè)計(jì)清晰易讀的文案這么單純。用戶需要在適合的視覺(jué)引導(dǎo)下作出對(duì)的決定，內(nèi)嵌12個(gè)純文本的菜單，這樣的設(shè)計(jì)是令人發(fā)指的比如（亞馬遜的Fire Phone的設(shè)置菜單就這樣，已經(jīng)被吐槽得體無(wú)完膚了）。通過(guò)字體大小/粗細(xì)、色彩和圖標(biāo)來(lái)組織信息，拉開(kāi)層級(jí)，可以突出重要的信息/選項(xiàng)，讓用戶更快地找到想要的東西。

想想看，你費(fèi)盡心思讓用戶去獲取的信息、去做的事情，最后會(huì)像漏斗里的水一樣流走，這真的是對(duì)你的努力和產(chǎn)品信息的極大浪費(fèi)。每個(gè)人的大腦獲取信息的效率和數(shù)量是相當(dāng)有限的，合理運(yùn)用，別太粗暴。

（2）清晰

好的設(shè)計(jì)是誠(chéng)實(shí)的，這句話也是設(shè)計(jì)大師Dieter Rams說(shuō)的。除了要通過(guò)內(nèi)容和設(shè)計(jì)傳達(dá)你的價(jià)值觀，還需要讓用戶明白其中的實(shí)際價(jià)值。模棱兩表述和不干脆的產(chǎn)品是無(wú)法贏得粉絲。

明確了產(chǎn)品的核心價(jià)值，圍繞著它將所有的內(nèi)容都清晰地表達(dá)出來(lái)。用戶如果不知道你的支付系統(tǒng)的細(xì)節(jié)，是不會(huì)毫無(wú)顧慮地點(diǎn)擊“立即購(gòu)買”的。盡管許多團(tuán)隊(duì)選擇使用“免費(fèi)使用”來(lái)獲取用戶信息過(guò)度到自動(dòng)付款，但是這種做法真的獲得用戶的信任和認(rèn)可么？

雖然聽(tīng)起來(lái)很俗氣，但是解決產(chǎn)品清晰度問(wèn)題的黃金準(zhǔn)則，就是解釋清楚，讓所有的東西都透明而清晰地呈現(xiàn)出來(lái)，你希望你用的東西都是清晰直觀的，那么你也不要去蒙蔽你的用戶。

（3）信任感

好設(shè)計(jì)是應(yīng)該是值得信任，也容易被相信的。在要求用戶執(zhí)行某一動(dòng)作的時(shí)候，盡一切努力幫他們理解為什么這個(gè)操作是必要的。每一步都需要借誠(chéng)實(shí)和清晰的表述來(lái)建立信任，逐步的積累，一點(diǎn)點(diǎn)提升用戶的信任感。

（4）熟悉性

突破性的設(shè)計(jì)自然是炫酷無(wú)比，但是走心的設(shè)計(jì)才更好。Dribbble上炫酷的效果和全新的框架看起來(lái)不錯(cuò)，但是如果人點(diǎn)擊夠買按鈕，那你就麻煩了。

各個(gè)平臺(tái)的設(shè)計(jì)規(guī)范的存在是有理由的。雖然看起來(lái)設(shè)計(jì)規(guī)范是想讓產(chǎn)品在各個(gè)平臺(tái)看起來(lái)更加一致，但是請(qǐng)注意那些一致而富有粘性的設(shè)計(jì)細(xì)節(jié)，熟悉的模式、相同的圖標(biāo)。統(tǒng)一的風(fēng)格，本質(zhì)上營(yíng)造出原生的感覺(jué)，讓用戶感到熟悉。

這些設(shè)計(jì)方案在實(shí)際的設(shè)備上進(jìn)行測(cè)試過(guò)之后才知道是否可行，如果想在各個(gè)平臺(tái)上都讓用戶有熟悉而賓至如歸的感覺(jué)，還有很長(zhǎng)的一段路要走的。

（5）令人愉悅

一般說(shuō)來(lái)，僅有好想法是不夠的，有良好的執(zhí)行才能贏得競(jìng)爭(zhēng)。設(shè)計(jì)團(tuán)隊(duì)執(zhí)行得越多，用戶需要做的就越少。復(fù)雜的問(wèn)題被簡(jiǎn)化得越好，用戶從解決方案中所獲得的愉悅感就越強(qiáng)。

思考的維度越高，能夠解決的問(wèn)題就越多，就越有價(jià)值。不要因?yàn)槁毼欢拗谱龅氖虑?。并不是職位決定了做什么事情，而是想做什么事情，決定了能成為什么樣的人。

總的來(lái)說(shuō)平面設(shè)計(jì)師可以思考品牌、營(yíng)銷策略，UI設(shè)計(jì)師亦可以去思考產(chǎn)品策略、商業(yè)策略。逐漸的就會(huì)突破所謂的[職位]，進(jìn)入更高的層級(jí)?？梢猿蔀橘Y深廣告人、品牌大師、營(yíng)銷專家、產(chǎn)品設(shè)計(jì)專家，甚至是擁有極高設(shè)計(jì)修養(yǎng)的企業(yè)家（比如喬布斯），讓設(shè)計(jì)賦予商業(yè)。產(chǎn)品更多價(jià)值。

我是林羅以，是走在UI世界的小白，讓我們一起走進(jìn)奇妙的UI世界吧。