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

雖然這個冊子確實出來挺久了，大概14年的時候優設網就有推薦過它：http://www.hx168888.com/pixel-perfect-precision-handbook（內附PDF英文原版），但里面的知識依然沒有過時。

上一期回顧：《值得每個設計師收藏的《完美像素使用手冊》之原理篇》

關于設計指南，這里有一個絕對不能錯過的：

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

今天是第二章節：細節篇

邊緣要清晰

邊邊角角一定要清晰，模模糊糊的不行！

對齊和間距

變成大師，第一步是要清晰，第二步就是要確保對齊和間距！

一致性

多個對象的對齊也很重要。標題欄、后退按鈕、頁腳等的邊距要保持一致。最好的方法就是用網格，這樣就不會亂啦！

顏色模型

HSB絕殺！創建色板時候用HSB，一用你就知道細微差別了。

上面的例子里H（色調）不變，調整S（飽和度）和B（亮度）就可以調配出不同的顏色。對照看看是不是比RGB牛？

顏色管理

色彩管理在打印時比較方便，但是用在數字化上可能麻煩很多。

你在創作時能夠控制顏色，但是當摻和進什么代碼之類的，可能就會配錯了。

所以就不要想那么多，試試就知道了，反正幾秒鐘就試好了，又不花錢~

文本高和寬

這兩點是建立在動態文本上的，比如說翻譯、或者是用戶創建的文本。

你可以用“A”和“y”就知道文本最高有多少，同樣，如果要試試一個文本框能打幾個字，可以用大寫的“W”，因為這個是最胖的字母了，它都能裝得下，其他的肯定也行。

文本長度

如果你設計的產品是面向國際的，那你還要考慮到用其他語言時文本的長短。

看看下面那個例子，你就能發現settings變成德文和葡萄牙語時長度增長多至75%。

按鈕上的文本對齊

下面的是三個按鈕文本對齊的例子。哪種最好，要看具體參數，比如說字體不同（以大寫字母為參照的高度和以字母“x”為參照的高度，比例就不一樣）、大小寫、數字或者是三個都有。

要確保一旦你選定了一個原則，就要從一而終。這是王道！

文本和對象對齊

為了視覺效果，基本都是以字母“x”高度為基準，而不是以大寫字母高度為基準的。下面兩個例子就是示范。

對象狀態

所謂的交互性，可能需要你除了默認狀態，還要多畫幾個不同的對象狀態。

要根據具體平臺和輸入方法不同決定需要畫幾個，這樣能增強設計的交互性。

邊框和圓角半徑

界面里的元素經常需要一些邊框，直角邊框很容易做，但是怎么根據內部圓角半徑計算出外部圓角半徑呢？

這有幾個例子，最常用的就是：內外部圓角半徑一樣，按內部圓角半徑的比例縮放，或者是把邊框寬度和內部圓角半徑相加。

后者是最好的，因為邊角不會凸出來厚厚的一塊。

邊框和圓角半徑（圓角命令）

如果把上面第三個方法反向操作，你就能得到內部圓角全變直角的形狀。

在這種情況下，可以小小的加一點半徑，雖然在算法上這樣是不對的，但是視覺效果會好一點。這種方法就是圓角化，或者叫通過圓角命令（CAD制圖里面好像有這個）使每個內角都是圓角。

等邊三角形

有些繪圖軟件默認繪出的三角形不是等邊，而是高寬相等的三角形（等腰三角形）。

這時候把縱向的高度的參數改成底邊的86.6%就能得到一個等邊三角形了。

版本控制

雖然現在設計師可用的軟件很多，但是最后還是免不了要自己整理文件，有時候還挺耗時間的。

下面這個系統就很好，最新文件是置頂的。

在一天的開始或者某個重要的時間結點，把文件復制好就放在上面那個Archive（檔案）文件夾里，命名按照年月日來，寫清楚是第幾稿就可以了。清爽吧！

休息一下，未完待續。期待第三章喔

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

譯文地址：uik.me

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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