不知道大家是否工作中經(jīng)常聽到有人點(diǎn)評(píng)某個(gè)作品說：這個(gè)設(shè)計(jì)缺乏細(xì)節(jié)？過去在擬物化時(shí)期，設(shè)計(jì)師細(xì)節(jié)能很好的在質(zhì)感，圖標(biāo)，光影處理等方面去體現(xiàn)，但是現(xiàn)在越來越扁平的設(shè)計(jì)風(fēng)格，色彩、規(guī)范都千篇一律，仿佛設(shè)計(jì)都能被AI智能取代，今天就來聊聊UI設(shè)計(jì)師該如何在設(shè)計(jì)中體現(xiàn)細(xì)節(jié)！

 UI的組成元素？

界面大多都是由字體，圖形，色彩構(gòu)成的，這也是設(shè)計(jì)三大要素。那么在設(shè)計(jì)中，我們?nèi)绾稳ヌ幚砗美锩娴年P(guān)系呢，今天和大家分享一些常用的設(shè)計(jì)技巧，幫助大家在做設(shè)計(jì)時(shí)候更好去排版，英文示例只說明技巧中文同樣適用。

▲我們嘗試把上圖這個(gè)UI界面拆分一下，可以看到界面基本都是由字體、色彩、圖形三大板塊組成的。

▲同理：上圖我們按照同樣的方式去拆分，依然可以獲得三部分的內(nèi)容

 字重創(chuàng)建層級(jí)

▲我們都知道字體是有重量的，不同的字重可以體現(xiàn)界面層級(jí)，特別是現(xiàn)在的iOS風(fēng)格中，更強(qiáng)調(diào)通過字重對(duì)比來提升視覺層次，但是很多設(shè)計(jì)師只知道運(yùn)用字體大小去做對(duì)比，卻忽略了：運(yùn)用字重和顏色去做層級(jí)區(qū)分同樣適用。

▲這段文字比較重要，就加大，這個(gè)文字次要就縮小,這是大多數(shù)設(shè)計(jì)師做設(shè)計(jì)的習(xí)慣，但是不要過多依賴大小對(duì)比去區(qū)分層級(jí)

▲我們可以嘗試通過加大字重，同樣可以達(dá)到效果

▲可以感受一下當(dāng)視覺字重變化時(shí)，整體版面的層級(jí)區(qū)分

▲字重的對(duì)比在平面設(shè)計(jì)，版式設(shè)計(jì)運(yùn)用比較多

▲品牌設(shè)計(jì)中，不同字重帶來視覺感受和舒適度是截然不同的

▲商品卡片設(shè)計(jì)中，通過字重區(qū)分層級(jí)的視覺效果，信息捕捉效率顯然要比整個(gè)版面都用統(tǒng)一字重要更快。

 顏色創(chuàng)建層級(jí)

在UI排版中，除了字體層級(jí)，顏色也是很重要排版手法之一，做界面時(shí)候不要只用一種顏色，主要內(nèi)容黑色，次要內(nèi)容灰色（文章日期等）輔助內(nèi)容淺灰色，然后結(jié)合前面所說字重運(yùn)用，能很好的和信息組成視覺節(jié)奏。

▲界面中的線條和色塊都是區(qū)分層級(jí)的輔助手段，按照界面調(diào)性去實(shí)際調(diào)整

▲錯(cuò)誤做法：讓文字變成淺色比較適合在白色背景下，如果不彩色背景上面使用灰色，因?yàn)閹时尘昂突疑绻黄鹗褂茫瑫?huì)顯得界面特別臟，識(shí)別度還低

▲通過對(duì)圖片，彩色背景通過降低透明度的效果會(huì)更加好

▲通過降低文字透明度也能拉開視覺層級(jí)

▲選擇與背景相同的色相，直到飽和度合適為止

 投影運(yùn)用創(chuàng)建層級(jí)

市面流行風(fēng)格里面，投影運(yùn)用大都比較多，但是在用投影的時(shí)候，我們需要盡量保持它的干凈和利索，不要使用過大的投影值和擴(kuò)散范圍，盡量使用柔和投影或者垂直投影。

 間距創(chuàng)建層級(jí)

▲我們?cè)谧龊芏嘣O(shè)計(jì)的時(shí)候，容易用到很多分割，什么時(shí)候用線什么時(shí)候用投影，如何讓界面更加干凈，有時(shí)候通過留白來區(qū)分層級(jí)，效果會(huì)比線更加干凈清爽。

 中心軸創(chuàng)建層級(jí)

▲這個(gè)頁(yè)面中，很明顯左邊比右邊好，右邊信息缺少對(duì)齊和呼吸感，左邊有一條明顯中心軸讓頁(yè)面更加的清晰。

 總結(jié)

今天和大家分享的只是UI界面中一部分經(jīng)典區(qū)分層級(jí)的要素特點(diǎn)，希望大家都能舉一反三，運(yùn)用到自己的作品中去，做出更多具備細(xì)節(jié)感受的作品！

原文地址：我們的設(shè)計(jì)日記

作者：sky

我們的設(shè)計(jì)日記

微信號(hào) helloskys

功能介紹

通常，硬件的外觀僅僅是作為一種體驗(yàn)的容器存在，而軟件用戶界面（User Interface）的體驗(yàn)，則決定了我們是否喜歡這個(gè)設(shè)備。下面，就和大家看看 Apple 在界面方面做的努力。

01. 高度統(tǒng)一的設(shè)計(jì)語言

蘋果的設(shè)計(jì)語言有四個(gè)標(biāo)志性特征：平滑圓角矩形 (Squircle)、陰影 (Shadows)、半透明 (Translucency) 和高斯模糊 (Blurring)，它們幾乎貫穿整個(gè)系統(tǒng)。從原生應(yīng)用：相冊(cè)、App Store 應(yīng)用商店、音樂都有這些元素，并且高度統(tǒng)一。
 

App Store 十年變化

– 圓角矩形

從 iOS 7 轉(zhuǎn)型扁平化的今天，蘋果完成了對(duì)「圓角矩形」的終極運(yùn)用。蘋果引入了工業(yè)設(shè)計(jì)中連續(xù)曲率概念，應(yīng)用在圓角圖標(biāo)的輪廓之上。

圓角矩形

但真正意義上的運(yùn)用，體現(xiàn)在 iPhone X 發(fā)布之后。得益于 OLED 柔性屏和 COP 封裝，iPhone X 四邊等寬的機(jī)身達(dá)到了最高的設(shè)計(jì)美學(xué)，屏幕的外輪廓也追隨機(jī)身形態(tài)，于是就有了圓角的 Dock。

蝸牛讀書 App

在《致匠心，以設(shè)計(jì)》這本書中有提到蝸牛讀書App，在大的彈窗和卡片引入了曲率圓角。雖然這是一個(gè)很細(xì)節(jié)的設(shè)計(jì)，甚至感知不到。但它就是設(shè)計(jì)師不斷追求的東西。

– 陰影、半透明和高斯模糊

投影可以凸顯內(nèi)容的重要性，半透明和高斯模糊暗示背后有更多的內(nèi)容，同時(shí)可以保持界面輕盈、通透。

Apple Music iOS 13 版本
 

相對(duì)于 iOS 12，iOS 13 將半透明的特性更進(jìn)一步。除了迷你播放器之外，Apple Music 的底部導(dǎo)航菜單也變成半透明+高斯模糊了。

細(xì)心觀察，微信同樣認(rèn)同這種語言，在頂欄和底欄做了微弱的半透明和模糊。

相冊(cè) iOS 13 版本

而系統(tǒng)相冊(cè)的更新，則延續(xù)了 App Store 應(yīng)用商店的卡片樣式。至此，圓角、投影、半透明和高斯模糊，這四個(gè)特征在相冊(cè)界面皆得到了印證。

02. 極致的圖標(biāo)細(xì)節(jié)

– 語音備忘錄

就拿語音備忘錄來說，它的音軌圖形并不是隨意畫出來的。而是用錄音功能，說出“Apple”這個(gè)單詞，所呈現(xiàn)的音軌波形。

語音備忘錄 & Apple單詞的音軌

而且，還有一個(gè)小細(xì)節(jié)是，語音備忘錄是唯一支持180°豎屏旋轉(zhuǎn)的自帶應(yīng)用。因?yàn)樗Ｒ姷氖褂脠?chǎng)景是采訪，需要將手機(jī)底部的麥克風(fēng)對(duì)著受訪者，而這時(shí)圖形界面是反的。所以支持旋轉(zhuǎn)，這是一個(gè)基于用戶使用場(chǎng)景的細(xì)節(jié)設(shè)計(jì)。

– 地圖

在蘋果地圖 App 圖標(biāo)上有一個(gè)角標(biāo)「280」，它代表的是蘋果所在的總部位置，一條位于美國(guó)加州 280 州際公路附近。

蘋果地圖 App

另外，新的圖標(biāo)里，右上角露出了 Apple Park ，也就是我們熟知的飛船圖形，這和實(shí)際的平面地圖完全吻合。

蘋果新總部位置

– Safari 瀏覽器

新的 Safari 圖標(biāo)，磁針的角度由原來的45°變成了50°。有一個(gè)頗有意思的解釋是，地磁的北極在一直在持續(xù)向北移動(dòng)，在過去的150年里偏移超過1000公里。這個(gè)說法顯然更具有故事性，但事實(shí)并非如此。因?yàn)榇艠O向北，那么磁針角度應(yīng)該越來越小才對(duì)，而不是增大。 

Safari 瀏覽器

實(shí)際上，45° 改為 50° 是出于視覺上的修正。左邊舊的圖標(biāo)，45°磁針剛覆蓋的是短的刻度條，被倆長(zhǎng)刻度條相夾，略顯擁擠。而新的圖標(biāo)剛好相反，50°磁針相鄰是短刻度，視覺上更具空間感和韻律感。

– 時(shí)鐘

大家都知道時(shí)鐘 App 的圖標(biāo)時(shí)間是和系統(tǒng)時(shí)間同步的，秒針也會(huì)勻速轉(zhuǎn)動(dòng)。重點(diǎn)來了，長(zhǎng)按時(shí)鐘 App ，秒針的運(yùn)動(dòng)方式由勻速變成滴答滴答機(jī)械式轉(zhuǎn)動(dòng)了。

時(shí)鐘 App 滴答動(dòng)畫

03. 利用視覺線索

為什么蘋果系統(tǒng)上手容易？在現(xiàn)實(shí)世界中，有些東西你一看就知道它如何使用，比如門把手、無印良品的CD機(jī)。

這里有個(gè)心理學(xué)的概念：示能 （Affordance），在 iOS 中也建立了類似的機(jī)制。用戶借助以往的經(jīng)驗(yàn)，通過圖形，預(yù)期下一步的行為或感知它的是做什么的。

滾動(dòng)內(nèi)容 & 多頁(yè)內(nèi)容

比如，左邊有一列滾動(dòng)內(nèi)容，你可以在底部裁剪掉半個(gè)文字，讓人嘗試著去發(fā)現(xiàn)下面還有更多的內(nèi)容。如果有好幾頁(yè)內(nèi)容，那就可以用頁(yè)面指示物，來引導(dǎo)還有其他幾頁(yè)內(nèi)容。

滑動(dòng)窗口
 

對(duì)于滑動(dòng)窗口內(nèi)容，你可以用像這樣的一個(gè)把手來暗示它是可以被抓取并滑動(dòng)的。

04. 隱喻

好的設(shè)計(jì)是有溝通力的，隱喻 (Metaphors) 就是一種很好的方式，它同時(shí)也是 iOS 六大設(shè)計(jì)原則之一。

– 時(shí)間隱喻

很多人覺得 UI，不就是顏色、間距那些東西嗎，好像沒什么可設(shè)計(jì)的。那我們且看，iOS 短信界面是怎么處理的：

• 短信氣泡的背景顏色是有深淺變化的，信息越早，顏色越淡。
• 連發(fā)兩條信息，它們上下的間矩是很小的，并且只有下面的信息氣泡有角標(biāo)。
• 如果發(fā)送的間隔時(shí)間長(zhǎng)一點(diǎn)，短信的上下間距會(huì)變大。

短信界面

蘋果就這樣通過顏色漸變、間距，完成了對(duì)時(shí)間的隱喻。

– 速度隱喻

蘋果系統(tǒng)有一項(xiàng)“朗讀屏幕”的功能，雙指從屏幕頂部向下輕掃，即可呼出。將 iPhone 或 iPad 上的文檔、網(wǎng)頁(yè)或微信里的文字讀出來，幫助你將閱讀變?yōu)槔首x。

當(dāng)然，你也可以控制系統(tǒng)朗讀的語速，Apple 很形象的將龜兔賽跑的圖標(biāo)，隱喻在速度之上。當(dāng)一個(gè)應(yīng)用程序的虛擬界面是植根于熟悉的真實(shí)世界時(shí)，那么用戶會(huì)學(xué)習(xí)的更快。

龜兔賽跑

05. 設(shè)備同步

蘋果的音頻產(chǎn)品線有很多，諸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3，每一個(gè)都有各自的圖標(biāo)。不管你連接哪個(gè)，都會(huì)同步顯示具體設(shè)備。

比如，當(dāng)你手機(jī)連接了 AirPods Pro ，電話界面的音頻喇叭 icon 會(huì)變成  AirPods Pro 的 icon。另外，AirPlay 功能可以連接多個(gè)揚(yáng)聲器，甚至新舊款的 iPhone 圖標(biāo)都有區(qū)分。

AirPods Pro 圖標(biāo) & 全面屏 iPhone 圖標(biāo)

同樣，如果你有 Powerbeats3 耳機(jī)，并且系統(tǒng)是最新的iOS 13。當(dāng)你調(diào)節(jié)音量的時(shí)候，喇叭 icon 同樣會(huì)變成 Powerbeats3 耳機(jī)圖標(biāo)。

Powerbeats3 圖標(biāo)

06. San Francisco 字體的秘密

舊金山字體現(xiàn)在是 Apple 平臺(tái)統(tǒng)一的標(biāo)準(zhǔn)字體：被應(yīng)用在 Apple Watch，iPhone，iPad和Mac上，取代了以前的 Helvetica Neue。

冒號(hào)的居中對(duì)齊優(yōu)化

新字體有些微妙的變化，最讓我印象深刻的是冒號(hào)「 : 」的顯示方式。正常情況下，冒號(hào)是在基線上，視覺感知會(huì)偏下。但如果冒號(hào)是放在數(shù)字中間，系統(tǒng)會(huì)將它垂直居中對(duì)齊。

符號(hào)的優(yōu)化

除此之外，「 #」符號(hào)中間的開口是個(gè)非平行切口，這是特意被增大處理的。因?yàn)?# 的字號(hào)在縮小到一定程度的時(shí)候，切口會(huì)難以識(shí)別。所以視覺上需要更多的空白，提高可讀性。

07. 非線性動(dòng)畫

用戶體驗(yàn)有一個(gè)重要性能指標(biāo)是：響應(yīng)速度（Speed Index）。隨著硬件設(shè)備的不斷提升，不可否認(rèn)的是，現(xiàn)在的 Android 啟動(dòng)速度比 iOS 更快，但是，蘋果加入了很多非線性動(dòng)畫，以及穩(wěn)定的幀率表現(xiàn)，在流暢度方面 iOS 更勝一籌。

iOS 13 黑暗模式切換動(dòng)畫
 

解釋下非線性動(dòng)畫，就是一開始很快，最后慢慢慢下來。比如，打開任意一個(gè) App 的過程動(dòng)畫、鍵盤拉起時(shí)的瞬間，以及 iOS 13 控制中心黑暗模式快捷切換，這個(gè)icon 動(dòng)畫同樣用了非線性。

iOS 13 靜音開關(guān)動(dòng)畫

還有一直被詬病的音量和靜音調(diào)節(jié)，終于得到解決。原先的大 Toast 提示會(huì)擋住當(dāng)前內(nèi)容，現(xiàn)在改到居頂顯示，并加入物理衰減鈴鐺動(dòng)畫，極為真實(shí)。

總結(jié)

在 Apple 的界面視覺中，我們看到了各種隱喻和暗示，我們看到了非線性動(dòng)畫帶來的流暢體驗(yàn)，我們看到了雕刻細(xì)節(jié)的過程。它是設(shè)計(jì)師不斷追求的東西，最終給用戶呈現(xiàn)的是額外禮遇般的的產(chǎn)品體驗(yàn)。

原文地址：洋爺（公眾號(hào)）

作者：洋爺

1. 3D圖形

許多設(shè)計(jì)師開始從靜態(tài)圖形轉(zhuǎn)而使用3D動(dòng)畫，動(dòng)態(tài)的圖形可以承載更多信息，更加令人印象深刻。另外，3D圖形最大的優(yōu)勢(shì)就在于能夠不斷突破想象，渲染出一個(gè)夢(mèng)幻的世界。

2. 版式

你的電腦里是不是安裝了上百款字體，然后再盯著屏幕選擇一個(gè)最適合界面展示的字體。

其實(shí)只要一個(gè)不錯(cuò)的排版就能解決字體選擇困難癥了，而且可以清晰地展現(xiàn)文字信息。目前Dribbble網(wǎng)頁(yè)設(shè)計(jì)中的熱門趨勢(shì)之一就是將多種字體、大小字號(hào)和不同的圖案混合在一起，這樣的頁(yè)面更加有視覺沖擊力。

此外，文字的排列方向也不局限于傳統(tǒng)的水平排列，可以按照垂直、對(duì)角線方向排列，甚至是圍繞特定的形狀。這些獨(dú)特的編排方式無疑可以增加布局的新穎程度，但是在使用時(shí)也要注意保證文字的可讀性。

3. 紋理材質(zhì)

雖然扁平化設(shè)計(jì)依然是占據(jù)主流，但Dribbble中另一個(gè)引人注目的趨勢(shì)就是在網(wǎng)頁(yè)或者UI界面中使用可以反映真實(shí)生活的紋理背景，比如細(xì)致的紙張紋理、柔軟的織物紋理或者粗糙的木材紋理等。

這樣的背景通常也會(huì)用在海報(bào)或者PPT的設(shè)計(jì)中，可以為設(shè)計(jì)作品增加質(zhì)感，紋理能夠簡(jiǎn)化現(xiàn)實(shí)生活中的視覺效果帶入到平面設(shè)計(jì)中，快速建立和觀眾的視覺聯(lián)系。類似的背景可以前往這邊下載。

4. 全屏視頻和圖像

許多設(shè)計(jì)師都開始嘗試使用全屏的圖像或者視頻作為網(wǎng)頁(yè)的背景，可以在用戶剛開始進(jìn)行交互動(dòng)作的短時(shí)間內(nèi)傳達(dá)出網(wǎng)頁(yè)的主題和氛圍。

當(dāng)然了，全屏背景圖像和視頻的加載需要一定時(shí)間，想要使用這種方式還需要多方面考慮和測(cè)試，以便頁(yè)面看起來更加自然。

5. 無圖像網(wǎng)頁(yè)

這就和上面所說的趨勢(shì)相反了，Dribbble上也有一群設(shè)計(jì)師更加青睞不包含任何圖像或者視頻的頁(yè)面。

這類網(wǎng)頁(yè)或者交互頁(yè)面通常是基于文字和字體的，借助字體的大小、襯線等特點(diǎn)來增加吸引力。流暢的交互動(dòng)畫也可以增強(qiáng)純文字頁(yè)面的表現(xiàn)力，從大量以圖片為主的頁(yè)面中脫穎而出。

6. 數(shù)字插畫

插畫在網(wǎng)頁(yè)和手機(jī)UI中的使用非常廣泛，比文字更有表現(xiàn)力，更清晰和時(shí)尚。一方面是因?yàn)椴瀹嬁梢猿鲇|發(fā)用戶情緒，從線條、色彩再到面部表情和曲線，無一例外地都在詮釋一個(gè)故事，營(yíng)造某種氛圍。

另一方面，數(shù)字插畫對(duì)于交互動(dòng)效來說十分方便。通過軟件處理后，動(dòng)起來的插畫就具備了更多的可能性，在網(wǎng)頁(yè)、手機(jī)UI、廣告和視頻中都可以使用，不同的玩法還可以帶來全新的體驗(yàn)。

雖然我們介紹了6種在Dribbble上最流行的設(shè)計(jì)趨勢(shì)，但這并不代表在實(shí)際工作中的應(yīng)用就非常廣泛，大多數(shù)時(shí)候設(shè)計(jì)師還是要根據(jù)產(chǎn)品屬性和甲方需求來決定設(shè)計(jì)風(fēng)格。

我們討論這些流行趨勢(shì)的意義在于突破設(shè)計(jì)原力，吸引設(shè)計(jì)師不斷創(chuàng)作出新的表現(xiàn)形式。畢竟設(shè)計(jì)也是一個(gè)圈，誰又能知道下一個(gè)流行的設(shè)計(jì)趨勢(shì)究竟會(huì)是什么呢？

來源：25xt

1 使用光柵來更好的設(shè)計(jì)圖標(biāo)

UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對(duì)角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會(huì)發(fā)現(xiàn)它們具有相同的視覺重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

圖標(biāo)越緊湊，所需空間就越小。圖標(biāo)的邊緣越銳利，細(xì)節(jié)越多，它們占據(jù)的畫板空間就越多。

請(qǐng)注意，不要過分的依賴于網(wǎng)格來設(shè)計(jì)圖標(biāo)。它們是用來幫你而不是限制你的。如果一個(gè)圖標(biāo)的某些元素伸展出來更好看，那就順其自然讓它們伸出來。

2注意像素網(wǎng)格的重要性

在非視網(wǎng)膜屏幕上設(shè)計(jì)圖形的時(shí)候，要特別遵循使用像素網(wǎng)格，并優(yōu)先選用2像素的邊框作為圖標(biāo)的線條。因?yàn)樗梢宰寛D標(biāo)在這些顯示屏上更加清晰。

如果為圖標(biāo)設(shè)置1像素的邊框，這個(gè)時(shí)候，這些邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區(qū)別。

居中描邊的一像素邊框，雖然在放大它們的時(shí)候，它們看起來很清晰。但在100%比例大小顯示的時(shí)候，它們會(huì)模糊掉。所以，慎用~下面兩張圖是圖標(biāo)在居中描邊的時(shí)候所產(chǎn)生的效果：

根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點(diǎn)和終點(diǎn)，會(huì)讓你的圖標(biāo)看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時(shí)候，清晰度會(huì)比一些不常見的角度效果會(huì)更好，比如13.7°，81°等等。所以，盡量避免用這樣的數(shù)值。

3保持一定的圖標(biāo)細(xì)節(jié)

從一套圖標(biāo)中最復(fù)雜的那個(gè)開始來設(shè)計(jì)通常是最有效的，因?yàn)樗鼤?huì)幫助我們定義相同的視覺重量，讓所有的圖標(biāo)視覺重量保持一致。

當(dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引用戶更多的注意力，而且視覺上看上去更重。

4控制最小的間隙尺寸

圖標(biāo)的相鄰元素之間空間在整個(gè)圖標(biāo)集中不應(yīng)太小或不一致。在任何情況下，都要定義最小間隙，以避免輪廓“粘滯”。比如下方的圖標(biāo)，太小的間隙，所產(chǎn)生的粘滯感要特別注意：

下面這個(gè)則是調(diào)整后的效果，是不是好多了？

對(duì)于線性圖標(biāo)來說，圖標(biāo)線段的最小間隙應(yīng)該等于線的粗度。另外，線條應(yīng)該明確的分開或者準(zhǔn)確的閉合連接。下圖是從錯(cuò)誤的例子：

下面這個(gè)則是修改后的效果，是不是好多了？

5去除重復(fù)部分

在一套圖標(biāo)集中，你很可能會(huì)重復(fù)一些細(xì)節(jié)，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數(shù)學(xué)中的分?jǐn)?shù)簡(jiǎn)化一樣。您看到的圖形噪聲越少，用戶的理解就越清晰。

比如下方這個(gè)郵件收發(fā)主題的圖標(biāo)，當(dāng)用戶已經(jīng)非常熟知自己的具體操作，比如收郵件，發(fā)郵件，回復(fù)等等。那就不要在設(shè)計(jì)圖標(biāo)的時(shí)候反復(fù)強(qiáng)調(diào)“信封”這個(gè)圖形了。將它們簡(jiǎn)化，效果反而更好。

此規(guī)則還涉及圖標(biāo)周圍的各種裝飾，框架，背景。如果它們沒有幫助幫助更好的閱讀圖標(biāo)，就讓它們更加簡(jiǎn)化一點(diǎn)比較好。

6保持圖標(biāo)風(fēng)格統(tǒng)一

下面的兩幅圖可以很好的展示正確的和錯(cuò)誤的例子，比如一套家具的圖標(biāo)，如果一個(gè)圖標(biāo)的繪制角度是斜45°，那么其他的圖標(biāo)也盡量保持這樣的角度。而不能一個(gè)是正視，一個(gè)是斜視?？纯聪旅鎯煞鶊D，哪幅圖是正確的呢？

相同的原理適用于線性圖標(biāo)和填充圖標(biāo)。 如果你把它們混為一談，人們可能會(huì)認(rèn)為它們具有不同的重要性或地位。 當(dāng)然，除非你刻意想要那個(gè)。 例如，填充圖標(biāo)用于鍵命令，線圖標(biāo)用于其他命令。

當(dāng)然，我們可以用填充圖標(biāo)表示當(dāng)前態(tài)，線性圖標(biāo)代表非選中狀態(tài)，這樣也是不錯(cuò)的選擇。

7基于二倍數(shù)的度量系統(tǒng)來設(shè)計(jì)

與基于十進(jìn)制的大小調(diào)整相比，8像素網(wǎng)格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標(biāo)區(qū)域已成為標(biāo)準(zhǔn)。 如果需要更大的尺寸，可以縮放這些圖標(biāo)。是時(shí)候補(bǔ)習(xí)下數(shù)學(xué)啦！

8保持輪廓的干凈和準(zhǔn)確

對(duì)于完美主義，設(shè)計(jì)師不能鉆牛角尖，因?yàn)闆]有完美的事物。但是在你的最終設(shè)計(jì)稿里邊，正確的，不扭曲的圖標(biāo)設(shè)計(jì)還是非常重要的。特別要注意，確保相鄰的節(jié)點(diǎn)和相鄰的元素是完全對(duì)齊或者沒有間隙的。

一定要避免 “8.999 px”或“100.001 px”這樣的尺寸。如果節(jié)點(diǎn)定位準(zhǔn)確，圖標(biāo)邊緣看起來很清晰。這個(gè)非常必要，保持整數(shù)吧！

9清理SVG圖標(biāo)中的垃圾代碼

我們都知道SVG圖標(biāo)最終是一串代碼。在Sketch中生成的SVG圖標(biāo)通常會(huì)包含很多不必要的冗余代碼，比如組，顏色圖層還有遮罩。下面的這個(gè)圖標(biāo)在Sketch中看起來很棒，但是…….

我們把Sketch生成的SVG圖標(biāo)在AI中打開的時(shí)候，你會(huì)發(fā)現(xiàn)它的圖層非?；靵y。這些混亂的圖層都可以會(huì)讓前端開發(fā)工程師在轉(zhuǎn)換代碼的時(shí)候出現(xiàn)問題。

我們可以把這些不必要的圖層刪除掉，這樣看起來簡(jiǎn)潔多了：

10不要把本文當(dāng)公式

當(dāng)然，以上我們討論的建議只是建議，他們不是刻板的公式。如果你知道自己在做什么，則可以僅僅把它們當(dāng)作參考，而不一定要完全遵從它們。設(shè)計(jì)是靈活多變的，只要符合用戶體驗(yàn)的規(guī)律，都可以被我們所用。

作者：Slava Shestopalov

原文：https://medium.muz.li/icon-set-3b4fc87dc6b5

翻譯：靜電

許多人對(duì)現(xiàn)代藝術(shù)的評(píng)價(jià)是這樣的：“這不就是一團(tuán)亂麻嗎！”“一灘爛泥！”“復(fù)制粘貼而已，我也會(huì)。”（請(qǐng)自行腦補(bǔ)該類文字所描述的作品）。每當(dāng)一個(gè)藝術(shù)家的作品在國(guó)際藝術(shù)品拍賣會(huì)上拍得天價(jià)時(shí)，總有幾個(gè)圍觀的吃瓜群眾會(huì)潑下幾滴自信的冷水：“這是什么玩意兒！我也能做好不好！”
 

然而，有一幅圖是這么機(jī)智地反駁的：

圖1，QUOTE BY CRAIG DAMRAUER

作者默默地表示贊同…誰叫你想到的時(shí)候沒有做呢？
 

然而，無論你是否能真的創(chuàng)作出與大師相同的作品，你都需要先對(duì)大師創(chuàng)作的動(dòng)機(jī)有些了解。即使說有許多作品的確很容易復(fù)制（想想那些專業(yè)復(fù)制名畫的油畫村吧），如果不去思考作畫背后的過程和背景的話，所作出來的畫也只能是形似，達(dá)不到神似，更不用提自己創(chuàng)作了。這篇文章就是想討論幾點(diǎn)現(xiàn)代藝術(shù)家在創(chuàng)作過程中的思考，并扯一扯這些思考與用戶界面設(shè)計(jì)的一些微妙的聯(lián)系。
 

雖然從事著UI這個(gè)行業(yè)，作者的大學(xué)專業(yè)卻是藝術(shù)史。經(jīng)過了四年的專業(yè)洗（cui）禮（can），對(duì)從古至今的藝術(shù)的變革歷程有了一個(gè)客觀的、系統(tǒng)的了解。當(dāng)看到吃瓜群眾們從媒體引用有關(guān)藝術(shù)品的觀點(diǎn)時(shí)，作者時(shí)不時(shí)要為他們擦一把冷汗。許多看上去好似極易上手、平庸無奇的作品實(shí)際上是藝術(shù)家做了無數(shù)次加減法的結(jié)果。

圖2

當(dāng)時(shí)作者的期末考試便是背畫名，畫家，及作畫時(shí)間。想象一下，每日盯著幾百幅畫作背誦它們創(chuàng)作的時(shí)間、地點(diǎn)、創(chuàng)作媒介是件多么美（nao）好（can）的事情！所以在經(jīng)歷了這樣的洗禮后，作者每接觸一個(gè)與曾經(jīng)背過的畫有類似元素的圖像時(shí)，腦中就如數(shù)據(jù)庫(kù)般調(diào)出那幅畫的圖像記錄。自然到好似自己已變成一個(gè)移動(dòng)的藝術(shù)品數(shù)據(jù)庫(kù)（真是感動(dòng)不已）。
 

這種感覺作者稱之為“回光返照”之感，即在有意識(shí)的情況下，你所接收到的信息令你回想到了過去所接觸到的信息，下意識(shí)地與之形成對(duì)比。那么在UI的世界里，我們能否尋覓到現(xiàn)代藝術(shù)的影子呢？

一、格子，格子，格子

先看它：

圖3，大眾點(diǎn)評(píng)APP 主界面

在許多令作者印象深刻的UI風(fēng)格中，最典型的就數(shù)已遍地開花的“方格子風(fēng)格”，或“網(wǎng)格化風(fēng)格”。比如上面大眾點(diǎn)評(píng)的APP主界面，也如Windows Surface Pro的主屏界面：

圖4 ，WINDOWS 移動(dòng)端操作系統(tǒng)主界面

大家一定在想，作者的數(shù)據(jù)庫(kù)此時(shí)調(diào)出的是哪位藝術(shù)家的作品？

？

？

？

？

？

？

？

？

？

？

答案是：

圖5，COMPOSITION A, PIET MONDRIAN, 1923 (OIL ON CANVAS)

方格子的設(shè)計(jì)讓作者分分鐘聯(lián)想到了蒙德里安?。?br />  

網(wǎng)格化風(fēng)格在近年來已被廣泛地應(yīng)用于許多主界面的設(shè)計(jì)當(dāng)中，如上面截圖的Windows Surface Pro和許多文件管理APP和游戲APP。對(duì)于Windows Surface Pro來說，這樣的設(shè)計(jì)旨在將多樣化的軟件和文件快捷方式均勻且富有變化地排布在桌面上，它相比于傳統(tǒng)的Windows桌面快捷方式更為生動(dòng)，并可以緩解用戶使用時(shí)的乏味感。有人這么總結(jié)過，“網(wǎng)格的最重要的用處是為一個(gè)構(gòu)圖中如何定位元素而建立一套規(guī)則。一個(gè)有效的網(wǎng)格不僅定義著它的度量，也為設(shè)計(jì)增添了韻律，。”（引用1）之所以作者想到了蒙德里安，不僅因?yàn)楸砻嫔峡梢钥吹降?ldquo;網(wǎng)格”風(fēng)，更在于它與網(wǎng)格化設(shè)計(jì)共同想體現(xiàn)的一種富有變化的韻律。下面這幅畫的靈感取自于紐約曼哈頓的百老匯街道。

圖6，PIET MONDRIAN. BROADWAY BOOGIE WOOGIE. 1942-43 (OIL ON CANVAS)

繁榮熱鬧的百老匯街道被蒙德里安用抽象化的方式濃縮進(jìn)橫豎交錯(cuò)的網(wǎng)格，而散布在網(wǎng)格上的較小的方格則代表了川流不息的車流和人群。在表現(xiàn)“歡騰、熱鬧”這一主題時(shí)，除了錯(cuò)落的網(wǎng)格，網(wǎng)格中填充的顏色同時(shí)起到了至關(guān)重要的作用。當(dāng)作者看到Windows Surface Pro的主界面時(shí)，第一個(gè)感受到的也是界面的非靜止性。當(dāng)代表著不同意義的方格被同時(shí)呈現(xiàn)在一個(gè)界面、由直線相互連接著時(shí)，觀者的目光不再是靜定的，而是沿著各色格子的邊框而不斷跳躍。

二、極簡(jiǎn)的標(biāo)志

在藝術(shù)不斷被“現(xiàn)代化”的過程中，有一個(gè)非常關(guān)鍵的詞匯，那就是“簡(jiǎn)化（simplify）”。幾乎所有經(jīng)典的，傳統(tǒng)的畫作中常見的特點(diǎn)，如精致的人像或物件輪廓、一絲不茍的質(zhì)地描繪、對(duì)眼見之物準(zhǔn)確完整的再現(xiàn)，都在藝術(shù)的現(xiàn)代化進(jìn)程中，被一點(diǎn)一點(diǎn)地抹去了。簡(jiǎn)化有一個(gè)關(guān)鍵的目的：讓觀看者更加專注于剩下的部分。通過做減法，藝術(shù)家們逐漸學(xué)會(huì)了有目的性的只留下他們想呈現(xiàn)的部分。古典藝術(shù)很像是復(fù)刻了照片，每一個(gè)細(xì)節(jié)都完美展現(xiàn)，而現(xiàn)代藝術(shù)作品則是往截然相反的方向發(fā)展，盡可能地簡(jiǎn)化現(xiàn)實(shí)中的景象，濃縮成簡(jiǎn)化的形態(tài)。
 

請(qǐng)看Picasso不同時(shí)期的作品對(duì)比：

圖7左，AUTOPORTRAIT, PABLO PICASSO, UNKNOWN DATE (OIL ON CANVAS)

圖7右，AUTOPORTRAIT, PABLO PICASSO, 1907 (OIL ON CANVAS)

人們熟知的畢加索是右邊這張圖代表的風(fēng)格，而孰不知風(fēng)格大膽的畢加索也曾經(jīng)做過循規(guī)蹈矩的好學(xué)生。同樣是自畫像，畢加索把自己化成了完全不同的樣子。事實(shí)上，從寫實(shí)到抽象的描繪方式的不同，是現(xiàn)代藝術(shù)相對(duì)于古典藝術(shù)的一大革新之處。
 

如果上面畢加索作品的對(duì)比不夠深刻，請(qǐng)參考這組：

圖8左，米老鼠, WALT DISNEY

圖8右，DAMIEN HIRST – MICKEY (2014)

米老鼠竟還可以這樣畫？而如此幾何化之后，我們竟然還能認(rèn)得出它是什么。這與UI設(shè)計(jì)中的扁平化好像如出一轍？是的，無需完整的邊描，僅僅使用基本的幾何形狀依然可以呈現(xiàn)物件最基本的結(jié)構(gòu)，UI設(shè)計(jì)也是如此。
 

若要談UI設(shè)計(jì)，就不得不談icon這個(gè)不可或缺的基本元素，以及近年來被極度推崇的扁平化設(shè)計(jì)。而從擬物化到扁平化的設(shè)計(jì)發(fā)展，就如古典藝術(shù)至現(xiàn)代藝術(shù)的進(jìn)程。過度的設(shè)計(jì)容易使人產(chǎn)生視覺審美疲勞。在電腦普及的短短幾十年內(nèi)，icon的風(fēng)格已從最早的精致刻畫逐漸發(fā)展到今日扁平化、極簡(jiǎn)化、幾何化的風(fēng)格。
 

iOS 6 和 iOS 7 的對(duì)比：

圖9

陰影被弱化，紋路被舍去，字體纖細(xì)了，也不再有攝影精度的圖片出現(xiàn)在icon內(nèi)，取代而之的是平鋪的色塊和精簡(jiǎn)的幾何形狀。生活中的物件被不斷抽象化，提取至幾條簡(jiǎn)單的線條。icon的設(shè)計(jì)進(jìn)化似乎借鑒了藝術(shù)的現(xiàn)代化，不再具象、立體。因而不得不說，不管是在藝術(shù)作品還是UI設(shè)計(jì)中，精簡(jiǎn)化都是一個(gè)必要的走勢(shì)。

三、模糊的意義

最后要比較的一個(gè)UI效果是它：

圖10，WINDOWS VISTA

沒錯(cuò)，就是毛玻璃效果。對(duì)此類設(shè)計(jì)最早的接觸來自于Windows vista的窗口欄。那時(shí)作者對(duì)印象派的了解并不深。而后正式學(xué)習(xí)了印象派的定義時(shí)，才意識(shí)到，如今在OS 8.0中隨處可見的毛玻璃效果原來與印象派有著異曲同工之妙。請(qǐng)看莫奈的霧蓮系列作品：

圖11，CLAUDE MONET, WATER LILIES, CA. 1915-1926

被譽(yù)為最喜愛霧霾的藝術(shù)家，莫奈的創(chuàng)作特點(diǎn)是舍去對(duì)具象物體的描繪，而反過來通過描繪光影對(duì)物體的效果來呈現(xiàn)物體本身。他的目的是營(yíng)造一種光影的氛圍，而不是具體體現(xiàn)任何一個(gè)具體的物件。
 

莫奈這樣描述他的“Water-Lilies”，’創(chuàng)造一種沒有盡頭的整體感，一種沒有水平線或邊岸的水平面’（引用2）。距離和角度已被摒棄，水好似無限地延伸到了我們整個(gè)的視覺中。
 

而作者轉(zhuǎn)念一想，在UI中對(duì)毛玻璃的運(yùn)用不亦如此嗎？通過模糊背景、卻保留背景的光影，使得原背景中較為銳化的顆粒得以模糊化，為浮于上層的功能性控件提供了極好的背景效果。它使窗口內(nèi)的文字清晰呈現(xiàn)，卻又維持了大環(huán)境的色澤、光影的流向，得以讓我們的視覺沉浸在無限廣闊的背景當(dāng)中。試著把莫奈的作品置于常用的天氣APP的背景，即是如下的效果：

圖12，IOS UI

毛玻璃的作用效果與莫奈的光影處理如此相似，著實(shí)耐人尋味，讓人不禁感嘆到藝術(shù)的博大精深。

最后，寫給吃瓜群眾這些話：

籠統(tǒng)得說，設(shè)計(jì)和藝術(shù)的區(qū)別在于，設(shè)計(jì)更有目的性，它為特定的用戶、需求而存在，而藝術(shù)更加自由、主觀。盡管如此，在現(xiàn)代藝術(shù)的極簡(jiǎn)化道路中也不乏與UI設(shè)計(jì)思路相謀的地方。上面列舉的只是作者發(fā)現(xiàn)的UI設(shè)計(jì)中與現(xiàn)代藝術(shù)的幾處微妙的聯(lián)系。拋開商業(yè)化、功能化、用戶需求這些詞語，設(shè)計(jì)和藝術(shù)的區(qū)別也許并沒有那么明顯。我們只是需要用一雙開闊的眼睛去感受這些視覺的變化，這些不同時(shí)空里的匠心獨(dú)運(yùn)。
 

怎么樣，是不是對(duì)藝術(shù)和設(shè)計(jì)的關(guān)系有了全新的認(rèn)識(shí)？想不想嘗試一下回光返照的美好感受？快去豐富下自己的數(shù)據(jù)庫(kù)，開始背畫吧?？梢韵葟摹督棠憧?00幅世界名作》開始。來，作者悄悄告訴你一個(gè)快速背畫的秘訣……：

…

…

…

…

…

…

…

…

那就是，

沒有秘訣。

原文鏈接: dianrong

    UI的本意是用戶界面，是英文User和interface的縮寫。從字面上看是用戶與界面2個(gè)組成部分，但實(shí)際上還包括用戶與界面之間的交互關(guān)系，所以這樣可分為3個(gè)方向，他們分別是：用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)。

1、用戶研究

    用戶研究包含兩個(gè)方面：一是可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計(jì)更容易被人使用、學(xué)習(xí)和記憶；二是通過可用性工程學(xué)的研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法（consumer insight）。所以有：Usability is all about making things easier to use so people can focus more on the work and less on the tools that help them do the work.

    用戶研究是一個(gè)跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場(chǎng)研究學(xué)、教育學(xué)、設(shè)計(jì)學(xué)等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設(shè)計(jì)中。

   用戶研究通過對(duì)于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對(duì)于產(chǎn)品功能的期望、對(duì)設(shè)計(jì)和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計(jì)或者探索一個(gè)新產(chǎn)品概念。

    他是得到用戶需求和反饋的途徑，也是檢驗(yàn)界面與交互設(shè)計(jì)是否合理的重要標(biāo)準(zhǔn)。

2、交互設(shè)計(jì)

    這部分指人與機(jī)之間的交互工程，在過去交互設(shè)計(jì)也由程序員來做，其實(shí)程序員擅長(zhǎng)編碼，而不善于與最終用戶交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設(shè)計(jì)很粗糙，繁瑣難用，學(xué)習(xí)困難。使用這樣的軟件后，不是使人聰明與進(jìn)步而是讓人感到愚弄與羞辱。許多人因?yàn)椴荒懿僮麟娔X軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設(shè)計(jì)從程序員的工作中分離出來單獨(dú)成為一個(gè)學(xué)科，也就是人機(jī)交互設(shè)計(jì)。他的目的在于加強(qiáng)軟件的易用、易學(xué)、易理解，使計(jì)算機(jī)真正成為方便地為人類服務(wù)的工具。

3、界面設(shè)計(jì)

    在漫長(zhǎng)的軟件發(fā)展中，界面設(shè)計(jì)工作一直沒有被重視起來。做界面設(shè)計(jì)的人也被貶義的稱為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要買點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)即不是某個(gè)項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見也不是項(xiàng)目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計(jì)要和用戶研究緊密結(jié)合，是一個(gè)不斷為最終用戶設(shè)計(jì)滿意視覺效果的過程。

現(xiàn)在我們的軟件產(chǎn)品存在的一些問題有技術(shù)方面的問題，但是更多的問題來源于各個(gè)部門、各個(gè)項(xiàng)目小組的之間的配合。我們現(xiàn)有的開發(fā)流程一般都是由市場(chǎng)部門提出客戶需求，產(chǎn)品設(shè)計(jì)人員提出產(chǎn)品設(shè)計(jì)報(bào)告，開發(fā)部門設(shè)計(jì)開發(fā)計(jì)劃，由各個(gè)小組分別開發(fā)一個(gè)模塊，最后整合成為一個(gè)完整的軟件產(chǎn)品。在這些流程之間UI設(shè)計(jì)應(yīng)該參與那一個(gè)部分，每一個(gè)部分應(yīng)該做到什么地步才可以使產(chǎn)品得到最好的UI設(shè)計(jì)效果呢？下面我們會(huì)在每一個(gè)部分具體分析。

首先分析一下現(xiàn)在的問題所在，在一些軟件業(yè)比較發(fā)達(dá)的國(guó)家軟件產(chǎn)品的UI設(shè)計(jì)過程貫穿了軟件開發(fā)的自始至終，而且是必不可少的。而在中國(guó)產(chǎn)品UI設(shè)計(jì)并沒有被廣泛接受，就算是已經(jīng)有了UI設(shè)計(jì)師的一些企業(yè)也沒有對(duì)產(chǎn)品的UI有著足夠的重視，一般來講他們大都會(huì)把重點(diǎn)放在如何使用代碼實(shí)現(xiàn)所需要的功能，在我看來這只是一個(gè)成功軟件產(chǎn)品的一個(gè)部分。一個(gè)優(yōu)秀軟件產(chǎn)品的開發(fā)過程應(yīng)該是由四個(gè)部分組成：
1.軟件產(chǎn)品的設(shè)計(jì)（業(yè)務(wù)建模）
2.系統(tǒng)的設(shè)計(jì)（技術(shù)建模）
3.分單元的開發(fā)（把軟件各個(gè)部分拆分分單元編寫代碼）
4.測(cè)試（分為單元測(cè)試、系統(tǒng)集成測(cè)試和產(chǎn)品功能測(cè)試），這些是由軟件研發(fā)部門做的工作。
除去以上軟件開發(fā)過程的四個(gè)部分還有用戶需求和用戶驗(yàn)收測(cè)試，這兩個(gè)過程是由市場(chǎng)部門和產(chǎn)品用戶一起完成。所以說用代碼實(shí)現(xiàn)產(chǎn)品功能（coding過程）只是軟件開發(fā)的一個(gè)步驟?，F(xiàn)在我們回到UI設(shè)計(jì)的角度來看，作為UI設(shè)計(jì)人員我們需要全程參與到軟件開發(fā)過程中，而不只是在某一個(gè)步驟參與，現(xiàn)在在大多數(shù)軟件企業(yè)里UI設(shè)計(jì)師只是在產(chǎn)品的coding過程的時(shí)候才實(shí)質(zhì)性的參與到軟件開發(fā)過程里，而在其它幾個(gè)步驟里只是參加甚至根本沒有參加（在這里我要強(qiáng)調(diào)“參與”和“參加”是兩個(gè)詞的不同概念，“參與”指的是完全加入到開發(fā)行列開始進(jìn)入設(shè)計(jì)階段，而“參加”指的只是旁聽會(huì)議或者提出一些簡(jiǎn)單的意見并沒有開始進(jìn)入設(shè)計(jì)階段），這樣就會(huì)大大降低軟件產(chǎn)品的開發(fā)效率使開發(fā)成本成倍上升甚至導(dǎo)致整個(gè)產(chǎn)品的不成功！這并不是危言聳聽，下面我們分析一下在一個(gè)軟件產(chǎn)品的開發(fā)過程中UI設(shè)計(jì)應(yīng)該怎么做、做到什么地步才能避免上邊提到的那些問題？

下面我會(huì)根據(jù)軟件開發(fā)的過程解釋上邊的問題，剛才我提過軟件開發(fā)過程的幾個(gè)步驟，
1.產(chǎn)品建模
2.技術(shù)建模
3.分模塊開發(fā)
4.測(cè)試，那么我們也分為這四個(gè)部分進(jìn)行討論：

一.產(chǎn)品建模時(shí)期：

我們首先來了解一下“輸入”和“輸出”，在UI設(shè)計(jì)里是很重要的兩個(gè)概念，經(jīng)常會(huì)有人過來對(duì)我說“我們有一個(gè)軟件產(chǎn)品需要美化一下”然后再也沒有什么深入的解釋了，僅僅這句話我的工作就要開始了，然而這個(gè)軟件是給誰用的？是干什么的？我們卻一無所知！成功的UI設(shè)計(jì)首先要有完整的“輸入”，怎么才能叫做完整的“輸入”呢？也就需要UI設(shè)計(jì)師從整個(gè)軟件產(chǎn)品的策劃階段就開始介入，在產(chǎn)品用戶（也就是客戶）向市場(chǎng)部門或者產(chǎn)品部門提出產(chǎn)品需求的時(shí)候就要開始參與到產(chǎn)品策劃開發(fā)過程中來，這一部分對(duì)于UI設(shè)計(jì)師而言就是第一個(gè)輸入階段，并且在這個(gè)階段里UI設(shè)計(jì)師也需要提出一些對(duì)產(chǎn)品交互設(shè)計(jì)的意見，以便產(chǎn)品部門在做產(chǎn)品設(shè)計(jì)的時(shí)候更多的考慮到產(chǎn)品的交互性和功能的簡(jiǎn)單表現(xiàn)原則，有很多軟件在設(shè)計(jì)階段就被加入了許多并不是用的附加功能，其實(shí)一個(gè)好的軟件設(shè)計(jì)就是要用最簡(jiǎn)單的結(jié)構(gòu)實(shí)現(xiàn)用戶的想法，一些可有可無的功能看上去很花哨往往會(huì)影響用戶的判斷能力，這些就是產(chǎn)品優(yōu)化的一些概念了在此我需要簡(jiǎn)單的提一下如果想要深入研究可以看一些有關(guān)于產(chǎn)品優(yōu)化的書籍甚至是心理學(xué)的書籍，有很多人認(rèn)為軟件的優(yōu)化就是代碼的優(yōu)化（用最少的代碼實(shí)現(xiàn)產(chǎn)品功能），在我看來這只是程序的優(yōu)化是針對(duì)程序員而言的而不是整個(gè)軟件產(chǎn)品的優(yōu)化，產(chǎn)品優(yōu)化包含了交互設(shè)計(jì)在現(xiàn)在的多數(shù)軟件企業(yè)沒有專門做這一部分的交互設(shè)計(jì)師所以往往這一部分被忽略，我認(rèn)為這一部分應(yīng)該又UI設(shè)計(jì)師承擔(dān)起來，從文章的開頭我就說過UI設(shè)計(jì)不只是圖形界面的設(shè)計(jì)，就算是有企業(yè)里邊有這樣的優(yōu)化人員或者交互設(shè)計(jì)師他們也要和UI設(shè)計(jì)師一起配合完成產(chǎn)品交互設(shè)計(jì)，作為UI設(shè)計(jì)師產(chǎn)品的交互性和易用性是在做設(shè)計(jì)的時(shí)候必須考慮的！
言歸正傳，產(chǎn)品設(shè)計(jì)人員經(jīng)常不會(huì)過多考慮簡(jiǎn)單易用原理也就是產(chǎn)品出來用什么樣的組合形式體現(xiàn)給用戶，這也是UI設(shè)計(jì)師考慮最多的事情，所以UI設(shè)計(jì)師一定要在產(chǎn)品建模期間參與設(shè)計(jì)，給產(chǎn)品設(shè)計(jì)師一些意見。作為一名優(yōu)秀的UI設(shè)計(jì)師我們還要在了解了產(chǎn)品的需求之后更深入了解這個(gè)產(chǎn)品的使用環(huán)境和用戶群體的使用習(xí)慣。我們還需要了解市場(chǎng)上的同類軟件產(chǎn)品的設(shè)計(jì)方案，研究他們的優(yōu)缺點(diǎn)，以便在我們?cè)O(shè)計(jì)的時(shí)候吸取它們的長(zhǎng)處避免它們的錯(cuò)誤。在產(chǎn)品建模之后一般的都會(huì)由產(chǎn)品設(shè)計(jì)人員給客戶做一次功能設(shè)計(jì)講解，往往這樣的講解只是文字性質(zhì)的需要讓客戶想象著理解，這就會(huì)造成很大的隱患有的客戶根本無法理解你的講解甚至對(duì)這樣的講解根本不認(rèn)真聽，因?yàn)樗麄兏静欢?，在討論過程中他們經(jīng)常會(huì)同意產(chǎn)品設(shè)計(jì)人員的一切設(shè)計(jì)想法但是產(chǎn)品測(cè)試的時(shí)候他們又會(huì)提出種種不滿意，我想這是一般的軟件公司都會(huì)遇到的也是最最頭疼的事情，但這并不能怪客戶我說過客戶只會(huì)關(guān)心視覺效果和軟件的操作而并不會(huì)去關(guān)心我們是怎么實(shí)現(xiàn)這一切的。這種情況帶來的直接后果就是產(chǎn)品的反復(fù)修改開發(fā)成本成倍上升，怎么避免呢？這就要靠UI設(shè)計(jì)師了，俗話說“眼見為實(shí)，耳聽為虛”，所以需要UI設(shè)計(jì)師做出一個(gè)產(chǎn)品整體效果的demo。這個(gè)demo用圖片的形式表現(xiàn)就可以，我們只需要將要體現(xiàn)的產(chǎn)品界面做一個(gè)拼湊就可以了，因?yàn)檫@并不是產(chǎn)品的最后樣子，只是協(xié)助產(chǎn)品設(shè)計(jì)人員給客戶講解產(chǎn)品設(shè)計(jì)。產(chǎn)品建模時(shí)期UI設(shè)計(jì)師要了解客戶的要求想法和產(chǎn)品設(shè)計(jì)人員對(duì)產(chǎn)品功能的要求深入了解產(chǎn)品，采集用戶的使用需求、使用環(huán)境和使用習(xí)慣，了解市場(chǎng)同類產(chǎn)品的設(shè)計(jì)分析它們的優(yōu)缺點(diǎn)。協(xié)助產(chǎn)品設(shè)計(jì)人員完成產(chǎn)品建模過程并制作產(chǎn)品展示demo模擬用戶對(duì)主要功能的操作過程和界面呈現(xiàn)，生成交互原型（基本上產(chǎn)品的交互性和易用性問題都需要在產(chǎn)品建模的時(shí)期解決）。如果時(shí)間允許我們甚至可以提出一份“UI設(shè)計(jì)分析報(bào)告”，這份報(bào)告可以附在產(chǎn)品設(shè)計(jì)說明后，更有效的幫助客戶了解我們的產(chǎn)品設(shè)計(jì)并且?guī)椭_發(fā)人員更好的遵循UI的整體要求來完成開發(fā)工作。這個(gè)時(shí)期的關(guān)鍵是“交互設(shè)計(jì)”。

二.技術(shù)建模時(shí)期：

在這個(gè)時(shí)期作為UI設(shè)計(jì)師我們已經(jīng)了解了軟件產(chǎn)品的功能需求并且拿到了一份產(chǎn)品設(shè)計(jì)人員的產(chǎn)品設(shè)計(jì)說明，可以進(jìn)入界面樣式的設(shè)計(jì)過程了。這個(gè)時(shí)候我們應(yīng)該考慮更多的應(yīng)該是產(chǎn)品的整體風(fēng)格和界面的設(shè)計(jì)，通常我們也會(huì)做出幾份方案給客戶選擇。有些客戶會(huì)要求產(chǎn)品遵循一個(gè)整體的VI設(shè)計(jì)標(biāo)準(zhǔn)，那么我們就需要按照一個(gè)整體的已定的風(fēng)格去設(shè)計(jì)軟件的界面，要與客戶公司的企業(yè)形象吻合。在這個(gè)時(shí)期軟件的UI設(shè)計(jì)進(jìn)入到了美術(shù)設(shè)計(jì)階段，我們需要制定整個(gè)軟件的風(fēng)格，塑造軟件的整體形象，并且具體的描述每一個(gè)界面中的元素和布局、文字字體等信息。在這個(gè)階段我也不應(yīng)過多的說什么，主要是每個(gè)UI設(shè)計(jì)師各自發(fā)揮你們的藝術(shù)專長(zhǎng)用最簡(jiǎn)潔、最漂亮的界面表現(xiàn)軟件產(chǎn)品。需要注意的就是在我們?cè)O(shè)計(jì)整體風(fēng)格的時(shí)候一定要深入了解這個(gè)產(chǎn)品的理念，看看它是干什么用的。不同的產(chǎn)品要有不同的風(fēng)格，這里邊有很多的細(xì)節(jié)注意，不同的產(chǎn)品、同類的產(chǎn)品不同的內(nèi)容、不同的傳播介質(zhì)，這些都會(huì)決定UI設(shè)計(jì)的風(fēng)格。1.不同的產(chǎn)品：比如一個(gè)游戲產(chǎn)品就需要將界面做的花哨一些或者用大的圖片充斥；如果要是一個(gè)應(yīng)用軟件就需要突出使用方便和強(qiáng)大的功能設(shè)計(jì)要簡(jiǎn)潔。2.同類不同的內(nèi)容：比如一個(gè)可愛的游戲產(chǎn)品（像是卡通類游戲）就需要將界面做的活潑生動(dòng)可愛一點(diǎn)；如果是一個(gè)角色扮演的戰(zhàn)斗類游戲（像是槍戰(zhàn)闖關(guān)類游戲）就要做的酷一點(diǎn)深沉一些。3.不同的傳播介質(zhì)：我們要做的軟件產(chǎn)品有的需要在網(wǎng)絡(luò)上傳播那么就需要我們考慮到網(wǎng)絡(luò)速度的問題；有的就是利用光盤當(dāng)作介質(zhì)那么這樣的軟件就可以做一些比較花哨的效果。所以說不同的產(chǎn)品還需要單獨(dú)考慮，這也需要UI設(shè)計(jì)師多多了解產(chǎn)品，保持與客戶交流。還需要重點(diǎn)注意的就是我們?cè)谧鰣D形化設(shè)計(jì)的過程中千萬要貫徹在前一個(gè)階段做好的交互設(shè)計(jì)，始終注意產(chǎn)品的交互性和易用性。在設(shè)計(jì)過程中我們一定要做出每種結(jié)構(gòu)每一個(gè)步驟的效果圖，不能只提供圖標(biāo)、按鈕、背景圖等圖片，這樣的話程序員根本不知道往那放這些東西，在這個(gè)時(shí)期我們就要最終確定軟件界面的呈現(xiàn)形式。技術(shù)建模一般是由高級(jí)程序員完成的，他們會(huì)將整個(gè)軟件開發(fā)分為一個(gè)一個(gè)功能模塊，分配給一個(gè)一個(gè)的開發(fā)小組。但是這些負(fù)責(zé)技術(shù)建模的高級(jí)程序員考慮更多的往往是如何將整個(gè)設(shè)計(jì)用代碼實(shí)現(xiàn)、怎么才能更有效的復(fù)用以前已有的模塊等等，而不是軟件是什么模樣會(huì)有什么樣的風(fēng)格，所以作為UI設(shè)計(jì)師我們必須主動(dòng)出擊，多多和他們交流以保證我們的想法能夠完整的實(shí)現(xiàn)，如果有技術(shù)實(shí)現(xiàn)的問題我們還要及時(shí)做出修改。有時(shí)候我們還需要根據(jù)客戶或者產(chǎn)品的特定需求做一些延伸性的設(shè)計(jì)（也叫UI產(chǎn)品設(shè)計(jì)的外延），包括：軟件的安裝導(dǎo)航界面、產(chǎn)品的演示宣傳動(dòng)畫、一些附帶的桌面壁紙或者屏幕保護(hù)、代表軟件的卡通小精靈、有時(shí)還會(huì)被要求設(shè)計(jì)軟件的logo和廣告banner等等。技術(shù)建模時(shí)期的關(guān)鍵是“風(fēng)格和界面設(shè)計(jì)”。

三.分模塊開發(fā)時(shí)期：

這個(gè)時(shí)期軟件開發(fā)過程進(jìn)入實(shí)現(xiàn)階段，也是需要人力最多的時(shí)期，這樣就會(huì)分散UI設(shè)計(jì)師的精力。軟件會(huì)被切分為若干個(gè)小的模塊進(jìn)行代碼編寫，最后整合成一個(gè)完整的軟件產(chǎn)品。對(duì)于一個(gè)程序員來講他們大多根本不會(huì)考慮到產(chǎn)品應(yīng)該是什么樣子應(yīng)該有什么整體風(fēng)格，他們所考慮的只是如何用代碼實(shí)現(xiàn)設(shè)計(jì)的要求，而且在現(xiàn)在的軟件企業(yè)多都實(shí)現(xiàn)了模塊的復(fù)用，這樣會(huì)大大節(jié)約人力成本，那么程序員只是對(duì)原有模板進(jìn)行修改使之適應(yīng)新的軟件產(chǎn)品，這樣就會(huì)對(duì)UI設(shè)計(jì)的最終貫徹和實(shí)現(xiàn)帶來很大的麻煩。做出的每一個(gè)模塊雖然已經(jīng)能夠使用但是都是“各自為政”沒有統(tǒng)一，因此我們也需要主動(dòng)的協(xié)助和監(jiān)督程序員完整的實(shí)現(xiàn)UI設(shè)計(jì)的要求，如果有技術(shù)無法實(shí)現(xiàn)的問題需要及時(shí)溝通改正設(shè)計(jì)方案。有的時(shí)候有些模塊需要有單獨(dú)的風(fēng)格，比如一些已有的軟件產(chǎn)品需要集合到某一個(gè)新的產(chǎn)品中去，這樣就會(huì)加大了設(shè)計(jì)師的設(shè)計(jì)難度，我們必須要在保證產(chǎn)品整體風(fēng)格不變的情況下將原有產(chǎn)品的設(shè)計(jì)風(fēng)格集合進(jìn)去，使之更加適合新的產(chǎn)品表現(xiàn)形式。如果我們?nèi)耘f保持原有產(chǎn)品的風(fēng)格那么當(dāng)各個(gè)模塊集合起來之后往往會(huì)使新的產(chǎn)品感覺很松散，進(jìn)入每一個(gè)功能都會(huì)覺得是另外一個(gè)軟件，使人對(duì)軟件的印象不深刻。在這個(gè)階段我們還是要主動(dòng)一些，跟進(jìn)各個(gè)模塊界面的實(shí)現(xiàn)?，F(xiàn)在很多軟件企業(yè)都存在很多UI設(shè)計(jì)師和程序員的協(xié)作問題，不是程序員做不到UI設(shè)計(jì)的要求，就是UI設(shè)計(jì)師堅(jiān)持一些自己的想法不能改動(dòng)，還有的時(shí)候經(jīng)常會(huì)有人過來沒頭沒尾的說幫我做點(diǎn)東西吧！當(dāng)軟件集成到一起再一看，就是很多不同風(fēng)格的東西堆砌到一起，從頭到尾都不舒服，領(lǐng)導(dǎo)或者客戶看了以后極度不滿狂批一陣，最后得出結(jié)果UI設(shè)計(jì)做的不到位。有人說UI設(shè)計(jì)師就要背著軟件不成功的黑鍋，因?yàn)槿藗兏究床灰姶a怎么寫的，功能是怎么實(shí)現(xiàn)的，他們只知道對(duì)軟件的樣子和使用進(jìn)行評(píng)論。讓一個(gè)用戶評(píng)論一個(gè)軟件他們只會(huì)說這個(gè)軟件好用看上去也不錯(cuò)挺漂亮的，但是做為一個(gè)普通用戶決不會(huì)有人說這個(gè)軟件程序?qū)懙牟诲e(cuò)。這么一看我們會(huì)聯(lián)想到現(xiàn)在軟件開發(fā)之中主要的沖突在UI設(shè)計(jì)師和程序員之間，其實(shí)這只是表面的表現(xiàn)形式。實(shí)質(zhì)上這個(gè)現(xiàn)象體現(xiàn)了現(xiàn)在軟件企業(yè)的一個(gè)通病就是這個(gè)開發(fā)組之間的協(xié)作關(guān)系混亂，程序員和UI設(shè)計(jì)師之間是平級(jí)協(xié)作關(guān)系，程序員是不會(huì)對(duì)產(chǎn)品負(fù)責(zé)的，這樣看來UI設(shè)計(jì)師只應(yīng)該聽項(xiàng)目經(jīng)理的，無論對(duì)設(shè)計(jì)做什么樣的改動(dòng)或者增添什么樣的東西，都應(yīng)該由開發(fā)項(xiàng)目經(jīng)理和產(chǎn)品經(jīng)理協(xié)商之后決定，只有他們可以對(duì)最終的產(chǎn)品負(fù)責(zé)。這樣也可以避免很多程序員和UI設(shè)計(jì)師之間的爭(zhēng)執(zhí)和矛盾。但是現(xiàn)在大多說軟件企業(yè)的產(chǎn)品經(jīng)理和開發(fā)項(xiàng)目經(jīng)理沒有做到這一點(diǎn)，他們也根本不了解UI設(shè)計(jì)師和程序員的工作，也無法把握他們的工作量，這樣無序的管理會(huì)造成很麻煩的后果。其實(shí)可以建立一些合理的流程管理制度，就算企業(yè)沒有作為UI設(shè)計(jì)師也可以自己起草一份適合自己和企業(yè)的“UI設(shè)計(jì)需求申請(qǐng)單”，里邊應(yīng)該列出我們需要的“輸入”內(nèi)容、工作時(shí)間、最終的“輸出”結(jié)果等等欄目（可以自己根據(jù)要求靈活決定）。這樣形成一個(gè)有參與人、有依據(jù)、有存底的工作流程，出現(xiàn)問題或者爭(zhēng)執(zhí)的時(shí)候我們有據(jù)可依，這只是一個(gè)習(xí)慣性的東西因不同的企業(yè)而議不一定都要建立需求單。在分模塊開發(fā)時(shí)期UI設(shè)計(jì)師應(yīng)該做的是，在模塊開發(fā)的前期做出產(chǎn)品每個(gè)模塊的效果demo（可以用圖片的形式表現(xiàn)）要求程序員按照demo的樣式進(jìn)行模塊開發(fā)，協(xié)助和監(jiān)督程序員嚴(yán)格按照UI設(shè)計(jì)要求生成最終產(chǎn)品，把握各個(gè)模塊的統(tǒng)一，經(jīng)常了解程序員的工作進(jìn)展及時(shí)對(duì)不合理或者難以實(shí)現(xiàn)的設(shè)計(jì)進(jìn)行討論設(shè)計(jì)出新的方案。分模塊開發(fā)時(shí)期的關(guān)鍵是“協(xié)助和監(jiān)督程序員生成最終產(chǎn)品”。

四.測(cè)試時(shí)期的輸入和輸出：

軟件產(chǎn)品的測(cè)試會(huì)分為三個(gè)測(cè)試階段，第一個(gè)是分模塊開發(fā)完成之后每一個(gè)模塊進(jìn)行的單元測(cè)試；第二個(gè)是將各個(gè)單元集成為一個(gè)整體的產(chǎn)品進(jìn)行集成測(cè)試；第三個(gè)就是整個(gè)產(chǎn)品在交付使用前進(jìn)行的整體測(cè)試。在測(cè)試過程中UI設(shè)計(jì)師的任務(wù)相對(duì)會(huì)輕松一些，我們只需要跟著測(cè)試人員走幾遍流程，如果在其中發(fā)現(xiàn)沒有按照UI設(shè)計(jì)要求的部分及時(shí)要求改正就好了。我們還會(huì)經(jīng)常遇到客戶在測(cè)試過程中突然覺得那里不合適需要修改，這也是最最頭疼的事情了，有的時(shí)候他們說的并不一定對(duì)，只要我們?cè)O(shè)計(jì)的每一個(gè)步驟都有一定的道理能夠說服他們就一切ok了。如果他們執(zhí)意要修改設(shè)計(jì)方案，那么我們沒辦法只能按照客戶需求修改。但是如果前邊按照本文的流程走下來我想這樣的可能性不大就算是修改也不會(huì)是大動(dòng)干戈。在修改過程中我們還是需要先做出效果圖，讓客戶確定再具體實(shí)施，這樣也會(huì)避免很多麻煩的。測(cè)試時(shí)期的關(guān)鍵是“檢查整個(gè)產(chǎn)品發(fā)現(xiàn)問題及時(shí)改正”。

如今軟件的越來越多的考慮到人的因素，“以人為本”的設(shè)計(jì)理念貫穿了整個(gè)軟件產(chǎn)品開發(fā)的始終，因此軟件產(chǎn)品的UI設(shè)計(jì)過程最重要的兩個(gè)部分就是行為和構(gòu)造，也就是交互設(shè)計(jì)和界面設(shè)計(jì)。上面我們按照軟件開發(fā)的四個(gè)階段，逐個(gè)的分析了每個(gè)時(shí)期UI設(shè)計(jì)的任務(wù)。由此我們可以看出UI設(shè)計(jì)并不完全是一個(gè)美術(shù)設(shè)計(jì)的過程，還有很重要的一個(gè)部分就是交互性和易用性的設(shè)計(jì)。我們要時(shí)刻把自己放在軟件的用戶角度來考慮，設(shè)計(jì)出最簡(jiǎn)單易用，界面友好的軟件產(chǎn)品。