第四集！值得每個人收藏的《完美像素使用手冊》之設(shè)計與開發(fā)篇

這本紀(jì)念碑谷團(tuán)隊出品的《完美像素使用手冊》，有設(shè)計師說是她見過的最全面，最毫無保留，最生動有趣的界面設(shè)計指南，而且不止是設(shè)計，還包括和程序員的合作經(jīng)驗(yàn)，AI、PS的操作小技巧等等。現(xiàn)在終于有中文版了，強(qiáng)烈建議收藏閱讀。

雖然這個冊子確實(shí)出來挺久了，大概14年的時候優(yōu)設(shè)網(wǎng)就有推薦過它：http://www.czdes.cn/pixel-perfect-precision-handbook（內(nèi)附PDF英文原版），但里面的知識依然沒有過時。

前三集回顧：

1. 《值得每個設(shè)計師收藏的《完美像素使用手冊》之原理篇》
2. 《中文版來了！值得每個設(shè)計師收藏的《完美像素使用手冊》之細(xì)節(jié)篇》
3. 《第三集！值得每個設(shè)計師收藏的《完美像素使用手冊》之易用性篇》

關(guān)于設(shè)計指南，這里有一個絕對不能錯過的：

1. 《中文版來了！新版Material Design 官方動效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（三）》

今天是第三章節(jié)：易用性篇

設(shè)計與開發(fā)

對于發(fā)布一個產(chǎn)品來說，設(shè)計和開發(fā)一樣重要。之前這兩個過程是割裂的，但通常會產(chǎn)生一些不大理想的結(jié)果。所以之后就更強(qiáng)調(diào)團(tuán)隊協(xié)作了，也更重視怎樣省時省力地完成，從設(shè)計到開發(fā)的過渡。

關(guān)鍵點(diǎn)（溝通）

首要就是要溝通。

關(guān)鍵點(diǎn)（合作）

不要固執(zhí)己見，要合作。如果需要開會討論方案，那你也得把負(fù)責(zé)開發(fā)的人拉進(jìn)來。不僅可以提供不同的視角，而且他們也知道什么樣的設(shè)計在技術(shù)上可行。歸根到底，每個人投入得更多，那設(shè)計出來的產(chǎn)品也會更好。

關(guān)鍵點(diǎn)（了解別人）

團(tuán)隊合作會讓你更了解其他設(shè)計師的想法，或者你自己的設(shè)計弱點(diǎn)，這樣才有機(jī)會修正。只有這樣的心態(tài)，你才不需要總是問別人：“我的設(shè)計行不行啊？行不行啊？”因?yàn)槟阒朗裁词强尚械模蛘吒_信自己的選擇，知道為什么得這么做。

關(guān)鍵點(diǎn)（現(xiàn)實(shí)一點(diǎn)）

設(shè)計師和開發(fā)人員之間的絆腳石就是——最初設(shè)想和成型的APP長得不一樣啊！然而團(tuán)隊合作可以完美解決這個問題。但是設(shè)計師也要務(wù)實(shí)一點(diǎn)，與其花時間糾結(jié)，不如把時間花在修改或者糾錯上。設(shè)計得漂亮卻很難用或者經(jīng)常崩的APP你要它做甚？

準(zhǔn)備（規(guī)格）

設(shè)計開始前，要先了解使用平臺。屏幕大小、分辨率、屏幕能呈現(xiàn)多少顏色，或者影響交互、動畫的因素。也要考慮程序能不能實(shí)現(xiàn)，比如說，可以用多大的字號呈現(xiàn)出效果怎樣等等。

準(zhǔn)備（能實(shí)現(xiàn)什么東西）

有些規(guī)格的確定是要以程序能否做得出來為基準(zhǔn)。格式用PNG，PSD還是矢量圖？如果要用代碼呈現(xiàn)，對顏色和效果是不是有限制？要不要用九宮格？這些信息一開始就掌握好，設(shè)計才能有的放矢。

準(zhǔn)備（工作流程）

除了要知道呈現(xiàn)什么之外，還要跟程序員討論到底怎么個合作法？嚴(yán)格按順序來還是靈活機(jī)動？多久確認(rèn)一次APP的樣子？從彼此各需要什么資源支持？文件怎么傳遞？變動怎么跟蹤？并且在開始階段，還要安排好時間，隔多久一起討論一次進(jìn)程。

準(zhǔn)備（跟蹤）

工作流的一個重要部分就是跟蹤系統(tǒng)。程序員需要有個地方可以說明額外的、缺失的內(nèi)容，記錄bug，或者設(shè)計師也要更新一些視覺上的改動。來回發(fā)email做這件事是很煩的，所以可以通過一些軟件來實(shí)現(xiàn)，大家也可以在里面共享文件。

設(shè)計（易于程序?qū)崿F(xiàn)）

你已經(jīng)知道了設(shè)計中的一些基準(zhǔn)，接下來就是要程序幫助實(shí)現(xiàn)了。在設(shè)計中所使用的特殊字體，要確保可以通過程序?qū)崿F(xiàn)。傾斜、陰影之類的字體效果還算容易，但更為復(fù)雜的效果就可能不好實(shí)現(xiàn)了，所以這個時候得提前和程序員溝通，是否能實(shí)現(xiàn)你想要的效果。

設(shè)計

大家都要理性點(diǎn)，東西要設(shè)計得實(shí)際點(diǎn)。如果因?yàn)槲谋镜胤讲粔蛄耍O(shè)計就要返工，你會炸掉的！而且字太多或者圖像缺失，你還得改善一下。否則，萬一這個app就這樣放出去了，那就悲劇了。

設(shè)計（每個東西都要可編輯）

設(shè)計很少能一步到位，所以所有的文件都要是可編輯狀態(tài)，可以迅速做改動或者更新。而且，萬一程序猿想要源文件參考呢？

設(shè)計（對象狀態(tài)）

記住要設(shè)計不同的對象狀態(tài)，而且要大小一致、還要對齊，像素準(zhǔn)確。

設(shè)計（設(shè)計樣式）

有了設(shè)計樣式圖，你就能在一個地方找到很多你要用的風(fēng)格或者元素，確保所有風(fēng)格一致，而且還能給程序員做參考。如果不斷更新，你還能慢慢積攢自己的樣式庫。

設(shè)計（代碼設(shè)計）

為了確保所有的設(shè)計都能被實(shí)現(xiàn)，最好是用代碼設(shè)計。可以從零開始學(xué)嘛，但是更快速的方法是畫原型圖，然后每個圖層和樣式直接輸出到CSS。一旦用這種方式生成了代碼，那么你設(shè)計的東西在HTML里面就能實(shí)現(xiàn)簡單的交互原型了。也可以在設(shè)備上展示。

設(shè)計（屏幕顏色修改）

正如在其他章節(jié)中提到的，盡量避免使用顏色配置文件，因?yàn)樗鼈兛赡軙?dǎo)致素材和代碼之間的不匹配。

呈現(xiàn)（交稿要有時間觀念）

交稿要按時，要不然給人家印象不好，而且會成為項(xiàng)目中的創(chuàng)作瓶頸。如果的確需要時間久一些，那也要跟團(tuán)隊提前打聲招呼，大家日程進(jìn)度都要跟著調(diào)整。可能這也不是什么大問題，畢竟找點(diǎn)事做還不容易嘛？

項(xiàng)目文件要組織好，這樣從設(shè)計師轉(zhuǎn)給程序員會省很多事。命名要有邏輯，前后保持一致，大家就都好懂了，比如PS圖層也是這個道理，大家看得懂才好操作。

呈現(xiàn)（命名原則）

命名系統(tǒng)很重要，可以建立一個好的組織結(jié)構(gòu)。項(xiàng)目一開始就要和程序員一起討論怎樣命名，因?yàn)榇蠹彝ǔ６加凶约旱牧?xí)慣。最好的方法是按等級來命名文件，最初就是一個泛泛的命名，然后再加上細(xì)節(jié)。比如說下面這個例子：

呈現(xiàn)（命名系統(tǒng)）

呈現(xiàn)（不要壓縮文件）

傳文件時，不要傳壓縮格式，比如PNG，反正開發(fā)人員也會自己壓縮的。

呈現(xiàn)（規(guī)格）

把設(shè)計傳給程序員之前，要給足信息。一下列出所有的文件可能太多，反而容易被忽略，但是原型圖之類的能夠顯示出app的工作原理。當(dāng)然你還可以用小視頻來做展示~

呈現(xiàn)（檢查！再檢查!）

把東西交給程序員之前，看看你是不是把他們需要的所有東西都打包進(jìn)去了，然后再檢查一遍！

休息一下，未完待續(xù)。期待最后一章喔

歡迎關(guān)注譯者微信公眾號：UIBANG

譯文地址：uik.me

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com