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

今天是第三章節：易用性篇

設計與開發

對于發布一個產品來說，設計和開發一樣重要。之前這兩個過程是割裂的，但通常會產生一些不大理想的結果。所以之后就更強調團隊協作了，也更重視怎樣省時省力地完成，從設計到開發的過渡。

關鍵點（溝通）

首要就是要溝通。

關鍵點（合作）

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

關鍵點（了解別人）

團隊合作會讓你更了解其他設計師的想法，或者你自己的設計弱點，這樣才有機會修正。只有這樣的心態，你才不需要總是問別人：“我的設計行不行啊?行不行啊?”因為你知道什么是可行的，或者更確信自己的選擇，知道為什么得這么做。

關鍵點（現實一點）

設計師和開發人員之間的絆腳石就是——最初設想和成型的APP長得不一樣啊!然而團隊合作可以完美解決這個問題。但是設計師也要務實一點，與其花時間糾結，不如把時間花在修改或者糾錯上。設計得漂亮卻很難用或者經常崩的APP你要它做甚?

準備（規格）

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

準備（能實現什么東西）

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

準備（工作流程）

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

準備（跟蹤）

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

設計（易于程序實現）

你已經知道了設計中的一些基準，接下來就是要程序幫助實現了。在設計中所使用的特殊字體，要確保可以通過程序實現。傾斜、陰影之類的字體效果還算容易，但更為復雜的效果就可能不好實現了，所以這個時候得提前和程序員溝通，是否能實現你想要的效果。

設計

大家都要理性點，東西要設計得實際點。如果因為文本地方不夠了，設計就要返工，你會炸掉的!而且字太多或者圖像缺失，你還得改善一下。否則，萬一這個app就這樣放出去了，那就悲劇了。

設計（每個東西都要可編輯）

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

設計（對象狀態）

記住要設計不同的對象狀態，而且要大小一致、還要對齊，像素準確。

設計（設計樣式）

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

設計（代碼設計）

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

設計（屏幕顏色修改）

正如在其他章節中提到的，盡量避免使用顏色配置文件，因為它們可能會導致素材和代碼之間的不匹配。

呈現（交稿要有時間觀念）

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

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

呈現（命名原則）

命名系統很重要，可以建立一個好的組織結構。項目一開始就要和程序員一起討論怎樣命名，因為大家通常都有自己的習慣。最好的方法是按等級來命名文件，最初就是一個泛泛的命名，然后再加上細節。比如說下面這個例子：

呈現（命名系統）

呈現（不要壓縮文件）

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

呈現（規格）

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

呈現（檢查！再檢查!）

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

休息一下，未完待續。期待最后一章喔

歡迎關注譯者微信公眾號：UIBANG