如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，?請(qǐng)點(diǎn)這里 

有一些UI設(shè)計(jì)師，他們從不考慮「這樣設(shè)計(jì)稿交出去，工程師做不做得出來」的問題，也不愿意去了解什么叫「限制」和「規(guī)則」。不注重設(shè)計(jì)稿能否實(shí)現(xiàn)，也不在乎限制和規(guī)則，這不是真正意義上的UI設(shè)計(jì)師。文章總結(jié)了四個(gè)UI設(shè)計(jì)師容易忽略的現(xiàn)實(shí)問題，看看你中槍了沒。

1:可行性

「輪胎為什么不可以做成三角型？三角型比較帥??！」

想了解 UI/UX，就一定要了解這張圖，這是 Jesse James Garrett 在2000年發(fā)表的用戶經(jīng)驗(yàn)元素一書中所提出：使用者的經(jīng)驗(yàn)可分成抽象到具體，也就是由策略、范圍、結(jié)構(gòu)、骨架、表層所構(gòu)成。

以上這張圖是同一位作者提出的概念，同樣他也寫了很多說明。

這篇文的重點(diǎn)從這里開始，兩張圖合在一起比對(duì)，合并后可以清楚看到每個(gè)階段包含的面向。

策略

使用者需求和開發(fā)的目的。

用戶需要什么、建立這個(gè)App/Web的目標(biāo)是什么，這些都是整個(gè)項(xiàng)目最底層的根基，也是一切發(fā)源的基礎(chǔ)?；A(chǔ)不穩(wěn)越往上發(fā)展問題就會(huì)越多越大，所有炫又酷的接口、多到爆炸的功能通通比不上這個(gè)階段的重要程度。

這個(gè)階段主要活躍的角色會(huì)是BD、PM、UI/UX。有時(shí)候PM和BD不那么清楚要怎么問才能從「出張嘴」的金主口中挖出開發(fā)所需要的情報(bào)，可以把這份工作交給UI/UX，在這個(gè)階段加入U(xiǎn)I/UX做訪談得到更多的信息，能減少未來開發(fā)遇到問題的機(jī)率。

比如客戶說「我要能查詢美食餐廳、要有會(huì)員系統(tǒng)、能有社交功能」。這聽起來超龐大的對(duì)吧！但實(shí)際上客戶想要的搞不好就只是個(gè)列表、關(guān)鍵詞查詢熱門餐廳信息，賬號(hào)串接FB后能對(duì)餐廳按贊或按干這樣而已，項(xiàng)目規(guī)模瞬間縮小很多。

范圍

找出需求與目的后以需求為基礎(chǔ)，整理出所有用戶可能會(huì)需要的信息及功能，以愉快且有效的運(yùn)用各種功能為出發(fā)點(diǎn)建構(gòu)合理的互動(dòng)模式與流程。

這個(gè)階段就是把抽象需求內(nèi)容轉(zhuǎn)成可實(shí)行的功能，并訂定出Spec。把所有需要的信息、功能等全部列出，并歸納分類，以「策略」層決議的目標(biāo)和需求為出發(fā)點(diǎn)，考慮各種操作方式。（再強(qiáng)調(diào)一次，同樣都是音樂播放器，列表型的和很炫型的就算功能大同小異，操作方式和接口設(shè)計(jì)還是會(huì)差很多。）

把所有可能會(huì)用上的功能、所有必需呈現(xiàn)的信息、圖片等等全部用樹形圖條列出來，方便UI/UX未來畫UI Flow、方便SA制定API，也方便RD計(jì)算人日、PM控管項(xiàng)目時(shí)程，好處多多。發(fā)現(xiàn)沒？這階段就是在做Functional Map啦！

結(jié)構(gòu)

把所有信息整合起來，依用戶能直覺理解的方式組織成完整的概念。既然「范圍」層在制作Functional Map，那「結(jié)構(gòu)」層就是在做UI Flow了，這個(gè)階段必需定義信息、功能等要用什么方式呈現(xiàn)。

比如說iPhone上小張的美食照片只是預(yù)覽功能、需要「開大圖」，那大圖要怎么個(gè)開法？點(diǎn)擊放大？只放大單張圖嗎？需不需要Page Control ？還是在該頁把手機(jī)橫拿就會(huì)自動(dòng)把圖片放大滿版？這階段訂定的Flow會(huì)左右界面的長相。

骨架

結(jié)合接口設(shè)計(jì)、信息設(shè)計(jì)、導(dǎo)覽設(shè)計(jì)三者將信息做可視化的呈現(xiàn)，協(xié)助用戶理解信息。畫Wireframe的時(shí)候到了。

表層

以視覺與感覺為基礎(chǔ)，設(shè)計(jì)接口元素如文字、頁面的視覺圖像、導(dǎo)覽組件等。

簡(jiǎn)單來說就是「最終這個(gè)App/Web要帶給人什么感覺？」要注意的事項(xiàng)太多了，Guideline、UI Style、Graphic……在這階段牽涉的東西非常廣泛，不止是視覺，連聲音、震動(dòng)等等都可包含在內(nèi)。

當(dāng)你看到這行字，表示文章已大略看過，多少了解我想表達(dá)什么。請(qǐng)卷到最上層重看一遍 Jesse James Garrett 提出的這2張圖。相信能夠更理解用戶經(jīng)驗(yàn)元素和實(shí)現(xiàn)方式。

使用者經(jīng)驗(yàn)元素很明顯就說了，視覺設(shè)計(jì)在最后一層。不過我遇到的設(shè)計(jì)師不少都喜歡從五樓開始蓋，蓋完五樓再回頭打地基。他們覺得只有第五層的視覺才是設(shè)計(jì)師的工作，其他都與他無關(guān)。

可行性？當(dāng)然不是設(shè)計(jì)師的工作啰，這不是工程師要處理的嗎？非常多這樣子的設(shè)計(jì)師，他們從不考慮「這樣設(shè)計(jì)稿交出去，工程師做不做得出來」的問題，也不愿意去了解什么叫「限制」和「規(guī)則」。認(rèn)為自己設(shè)計(jì)出來的東西就是要100%完整呈現(xiàn)，辦不到就是工程師能力差，所以在RWD上驕傲自己有像素眼和F2E在刁1px的差距。

很多設(shè)計(jì)師只想追版軟件，跟他說HIG有版要不要多少瞄一下他會(huì)翻白眼給你看。常炫耀自己第一手掌握XX大師出新作品，高手給你小畫家都能畫出蒙娜莉薩，XX大師的作品也不是你的作品有什么好得意的？讓別人覺得自己品味非凡高格調(diào)？

別理別人怎么樣了，管管自己做出來的圖稿會(huì)不會(huì)整死工程師先吧……很多時(shí)候不是美不美的問題，是各種限制辦不到啊！

2:視覺至上

「廣告會(huì)破壞美美的畫面，拿掉啊拿掉！」

「為什么要放廣告？不管是使用者調(diào)查或是實(shí)驗(yàn)，他們都討厭廣告?。槭裁床荒玫?？」

「放了廣告超丑的，破壞版面美感?！?/span>

「他們都不懂設(shè)計(jì)，硬要放廣告，設(shè)計(jì)師講話根本不被重視?！?/span>

先生/小姐，公司營運(yùn)非常燒錢的，很多公司甚至得靠廣告補(bǔ)貼，你不放廣告是不想領(lǐng)薪水了嗎？

原本以為是個(gè)案，沒想到還不只一位設(shè)計(jì)師這樣想。不懂功能就算了，連自己的薪水怎么來、公司靠什么賺錢都不知道……只會(huì)注意視覺，其他都事不關(guān)己的「設(shè)計(jì)師美工」在公司講話沒地位，理所當(dāng)然的事情。

在工程師眼里，只會(huì)做視覺，其他都不懂也不肯學(xué)的不配稱為設(shè)計(jì)師，就是美工而已。

3:無視數(shù)據(jù)源

「開水龍頭就有水啦，管線？又不關(guān)我的事?！?/span>

很多UI設(shè)計(jì)師認(rèn)為數(shù)據(jù)源不關(guān)自己的事，甚至覺得數(shù)據(jù)源是工程師的事。其實(shí)UI設(shè)計(jì)師和數(shù)據(jù)源有很大的關(guān)系。

一張圖片是內(nèi)建、還是網(wǎng)絡(luò)更新下載？內(nèi)建在App里的話好辦事，需連網(wǎng)絡(luò)下載的圖片需不需要思考多種狀態(tài)？

理想狀況（正常連網(wǎng)情況下顯示的圖。）

下載中（圖片很大張的情況下要提醒用戶圖片下載中，不能空一塊在那。）

默認(rèn)圖片（例：使用者未上傳頭像時(shí)，F(xiàn)B 大頭照要放哪張圖？）

發(fā)生錯(cuò)誤（圖片掛了讀不出來，常見于網(wǎng)頁。）

這些在不在UI設(shè)計(jì)師的工作范圍？是啊，那數(shù)據(jù)源為什么設(shè)計(jì)師可以不用理解，推給工程師懂就好？不知道數(shù)據(jù)源要怎么設(shè)計(jì)UI？

4:邏輯？可以吃嗎？

能用道理溝通的設(shè)計(jì)師是個(gè)寶。

不要用平面設(shè)計(jì)的思維做UI，不少設(shè)計(jì)師在某個(gè)角度上呈現(xiàn)「放棄學(xué)習(xí)」的狀態(tài)。比如「合作項(xiàng)目」。他們認(rèn)為合作項(xiàng)目不就是一群人把項(xiàng)目做完，有什么好學(xué)的？設(shè)計(jì)師就顧好手上的工作畫美美的圖就好了。跟他討論功能、行為、狀態(tài)，會(huì)被抱怨這不是設(shè)計(jì)師的工作范圍，為什么要把工作推給他。

如果你遇到的設(shè)計(jì)師能討論問題、知道什么叫功能、有邏輯、能講理，不會(huì)歪樓去該什么設(shè)計(jì)理念、這樣才漂亮、工程師不懂美學(xué)、工程師只會(huì)說辦不到。請(qǐng)好好珍惜，這是稀有動(dòng)物。

（注：本文轉(zhuǎn)自UI網(wǎng)）

 

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com?)是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)?、 cs界面設(shè)計(jì)?、 ipad界面設(shè)計(jì)?、 包裝設(shè)計(jì)?、 圖標(biāo)定制?、 用戶體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?、平面設(shè)計(jì)服務(wù)