完美畫素入門指南，魔鬼都在細節裡。
完美畫素手冊
今天想要分享的是熱門遊戲“紀念碑谷”團隊出品的“完美畫素手冊”。
“14年出品，至今已經四歲，在這四年中我們也從關注純粹的畫素上開始轉變到我們的工作方式上。從移動銀行的應用到物理解密遊戲，一直都沿襲這些原則。適合慢慢品讀。”
▐ 使用者
做產品首先要考慮的就是使用者，你要知道使用者真正想要的是什麼？使用者如何通過你的產品去達到目的？什麼才是最適合他們的？只有掌握了這些需求點，才能著手去設計產品。
▐ 環境
環境不僅僅指的是你要為之設計的平臺，還包括使用者的使用場景、物理環境。把自己代入使用者畫像，才能設計出好的使用者體驗。
▐ 可達性
做設計的時候，我們都會考慮到某些方面有殘疾的人群，但是這些都必須建立在，產品能夠服務於普通大眾的基礎之上，我們再去多做一步，以達到特殊人群的使用，這樣才是更好的可達性。
Ios系統設定中，可以根據個人需求修改系統文字大小。
▐ 最差的場景
我們在做設計稿的時候，往往會把頁面設計的很完美，可是我們忽略了現實的使用者操作。實際的場景可能是有空白或者長段的文字、有缺失的圖片等等。我們必須為此保留備選項，以備不時之需。
ZAKER新聞中，個人簡介部分過長導致的頁面不美觀。
▐ 功能可見性
任何物件都應該可以通過感官的手段，傳達出自身的功能，引導使用者去進行互動。在數字化設計中，儘量去模擬真實世界，讓產品簡單易用。
微信掃一掃中，在掃描框內有模擬現實掃描器器的光線。
▐ 文字口吻
設計中的文字除了作為設計元素，其本身的內容含義更為重要。好的文案設計不僅能讓內容更易理解，好的口吻也會賦予產品人的個性。機器般生硬的語言沒法和使用者產生情感的聯絡，好的口吻能創造良好的產品體驗。
石墨文件與使用者的對話，覺得很人性化。
▐ 色彩和形狀
某些特定的色彩和形狀搭配具有一定的固有意義，使用的時候要特別小心，因為混搭會讓客戶產生誤解。
keep會員系統中，採用黑金配色，凸顯會員的尊貴。
▐ 視覺層級
想要使用者以什麼樣的順序來閱讀頁面，頁面就應該設計成這樣的層級。版面、色彩和文字都在影響著視覺注意力。通過強對比抓住觀者的注意力，或者減弱對比以達到和諧的頁面。
美團外賣中，內容層級明確，以品牌黃色作為視覺引導。
▐ 動效
介面的設計除了好看好用之外，微妙的動畫能夠賦予它們性格和可操作性。
▐ 組織
好的檔案組織能夠在專案協作時候幫助成員之間節省時間，設計師在尋找檔案的時候也不會浪費過多時間，而開發人員也更樂於和你一起工作。
▐ 邊緣
垂直、水平的邊線都應該是一整畫素，拒絕模糊邊緣，意味著圖形的長寬都是整數，不帶小數點。
▐ 對齊和留白
頁面上的所有元素都應該有合理的對齊線和留白空間，這是造型藝術的基礎。
知乎中，所有的頁面都嚴格按照既有的輔助性佈局。
▐ 一致性
通過拉網格線來確定產品所有頁面的對齊，確保整個應用的通用元素在不同頁面上保持一致，防止元素跳來跳去。
開眼中，不同的頁面都按照既有的輔助線佈局。
▐ 文字的寬度換和高度
每種中文字型的長寬都是固定的，而英文單詞卻變化多樣。利用A和y的組合來確定輸入框的最大高度，利用W來確定輸入框的最小尺寸，。因為A是所有字母中最高點，y是最低點，W則是最寬的。
▐ 物件狀態
可互動元素的狀態要比預設介面中所展示的多，應該在事先就設計出所有的狀態，以確定所有狀態在介面中是不是合適。
巴塞電影中，輸入框只有填寫了內容，右上角的釋出按鈕才可以點選。
▐ 邊框和圓角
對於直線邊框，我們更常用圓角邊框。確定內外的圓角半徑（外圓角半徑=內圓角+邊框寬度）以達到最連貫的樣式。
▐ 清晰
保持頁面的簡單精煉，避免一次性塞給使用者過多的資訊。在有大量資訊的情況下，選擇摺疊的方式，在使用者需要的時候，逐步展示給他們。
微博中，設定頁面層級清晰，通過點選展開檢視更多內容。
▐ 精簡步驟
上一個法則指出把所有東西都塞在一個螢幕上不是一個好主意，但是也別弄出太多的步驟，超過四步才能抵達目的頁面，會讓使用者產生挫敗感。
▐ 輸入框標籤
我們建議不要把標籤放在輸入框裡面，因為一旦選中輸入框，提示資訊消失，使用者可能不知道他們需要輸入的內容應該是什麼。
愛彼迎中，登入頁面的提示資訊置於輸入框上方。
▐ 互動點選區域
在使用觸屏裝置的時候往往會有誤操作的產生，原因可能是某一個icon過小，導致點選不準確。其實在裝置上，手指的最小互動區域是7mm²，即使設計的icon達不到最小區域要求，對應的熱區也應該要複核最小區域要求。
▐ 自由文字
輸入框和下拉框都具有資料輸入的作用，而使用者操作提供選項的下拉框要比輸入框簡單的多。可能的話，為使用者提供若干預設選項而不是空白的輸入框，這樣也能減少錯誤的產生。
滴滴出行中，位置通過下拉框選擇。
▐ 錯誤預防
使用產品的過程中難免會有錯誤的操作，好的產品會把錯誤操作帶來糟糕後果的可能性降到最低。常用的預防措施有：前置正向元素、隱藏危險操作、提示警告和再次確認等。
Ios桌面刪除app，彈出二次確認框。
▐ 反饋
不管是正向操作還是反向操作，都應該給予使用者反饋，讓他們感覺到放心。使用者不希望看到產品突然卡住，連續點選按鈕也沒有反應。這個時候應該有一些不通形式的提醒，讓使用者知道當前的狀態。
微博國際版中，清除緩衝會有一小段時間的載入中提示。
▐ 報錯資訊
如果產品出錯了，最好以一種使用者能夠理解的形式告訴他們，並且提供可以到達正確操作的選項。
Pinterest中，登入介面輸入錯誤，錯誤資訊就近提示。
福利
在公眾號後臺回覆 “完美畫素”，我們將會分享這份經典的文件給您。
---end---
推薦閱讀：
版式篇
ofollow,noindex">《關於排版，給你幾個甲方不懟你的理由！（一）》
色彩篇
