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

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

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

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

1. 概念篇：

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

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

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

——保羅·蘭德

UI設(shè)計原則。在APP開發(fā)中，UI的設(shè)計尤為重要，因為它直接影響著用戶體驗，好的UI設(shè)計可以人APP的用戶體驗加倍。如果UI設(shè)計不過關(guān)，那么你的APP功能再齊全，可能是留不住用戶。

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

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

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

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

2. 規(guī)范篇：

（1）尺寸

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

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

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

*dpi:表示每英寸有多少個顯示點

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

例：屏幕密度160時，1dp=1sp=1px

（2）字體：

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

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

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

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

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

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

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

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

（4）注意事項：

Android平臺不支持“-”，所以請用“_”作為連接符。

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

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

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

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

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

3. 工具篇

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

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

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

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

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

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

（4）切圖工具：

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

（5）壓縮軟件：

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

（6）一鍵展示：

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

4. 思路篇

（1）多看

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

（2）多想：

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

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

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

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

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

（3）站在用戶這邊

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

5. 寫在最后

（1）易于消化

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

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

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

（2）清晰

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

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

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

（3）信任感

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

（4）熟悉性

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

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

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

（5）令人愉悅

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

思考的維度越高，能夠解決的問題就越多，就越有價值。不要因為職位而限制做的事情。并不是職位決定了做什么事情，而是想做什么事情，決定了能成為什么樣的人。

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

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