本篇文章為大家分享的是熱門游戲“紀念碑谷”團隊出品的“完美像素手冊”，干貨滿滿！

今天想要分享的是熱門游戲“紀念碑谷”團隊出品的“完美像素手冊”：

“14年出品，至今已經(jīng)四歲，在這四年中我們也從關注純粹的像素上開始轉(zhuǎn)變到我們的工作方式上。從移動銀行的應用到物理解密游戲，一直都沿襲這些原則。適合慢慢品讀。”

用戶

做產(chǎn)品首先要考慮的就是用戶，你要知道用戶真正想要的是什么？用戶如何通過你的產(chǎn)品去達到目的？什么才是最適合他們的？

只有掌握了這些需求點，才能著手去設計產(chǎn)品。

環(huán)境

環(huán)境不僅僅指的是你要為之設計的平臺，還包括用戶的使用場景、物理環(huán)境。

把自己代入用戶畫像，才能設計出好的用戶體驗。

可達性

做設計的時候，我們都會考慮到某些方面有殘疾的人群，但是這些都必須建立在產(chǎn)品能夠服務于普通大眾的基礎之上，我們再去多做一步，以達到特殊人群的使用，這樣才是更好的可達性。

Ios系統(tǒng)設置中，可以根據(jù)個人需求修改系統(tǒng)文字大小。

最差的場景

我們在做設計稿的時候，往往會把頁面設計的很完美，可是我們忽略了現(xiàn)實的用戶操作。

實際的場景可能是有空白或者長段的文本、有缺失的圖片等等。我們必須為此保留備選項，以備不時之需。

ZAKER新聞中，個人簡介部分過長導致的頁面不美觀。

功能可見性

任何對象都應該可以通過感官的手段，傳達出自身的功能，引導用戶去進行交互。

在數(shù)字化設計中，盡量去模擬真實世界，讓產(chǎn)品簡單易用。

微信掃一掃中，在掃描框內(nèi)有模擬現(xiàn)實掃描儀器的光線。

文本口吻

設計中的文字除了作為設計元素，其本身的內(nèi)容含義更為重要。好的文案設計不僅能讓內(nèi)容更易理解，好的口吻也會賦予產(chǎn)品人的個性。

機器般生硬的語言沒法和用戶產(chǎn)生情感的聯(lián)系，好的口吻能創(chuàng)造良好的產(chǎn)品體驗。

石墨文檔與用戶的對話，覺得很人性化。

色彩和形狀

某些特定的色彩和形狀搭配具有一定的固有意義，使用的時候要特別小心，因為混搭會讓客戶產(chǎn)生誤解。

keep會員系統(tǒng)中，采用黑金配色，凸顯會員的尊貴。

視覺層級

想要用戶以什么樣的順序來閱讀頁面，頁面就應該設計成這樣的層級。版面、色彩和文字都在影響著視覺注意力。

通過強對比抓住觀者的注意力，或者減弱對比以達到和諧的頁面。

美團外賣中，內(nèi)容層級明確，以品牌黃色作為視覺引導。

動效

界面的設計除了好看好用之外，微妙的動畫能夠賦予它們性格和可操作性。

組織

好的文件組織能夠在項目協(xié)作時候幫助成員之間節(jié)省時間，設計師在尋找文件的時候也不會浪費過多時間，而開發(fā)人員也更樂于和你一起工作。

邊緣

垂直、水平的邊線都應該是一整像素，拒絕模糊邊緣，意味著圖形的長寬都是整數(shù)，不帶小數(shù)點。

對齊和留白

頁面上的所有元素都應該有合理的對齊線和留白空間，這是造型藝術的基礎。

知乎中，所有的頁面都嚴格按照既有的輔助性布局。

一致性

通過拉網(wǎng)格線來確定產(chǎn)品所有頁面的對齊，確保整個應用的通用元素在不同頁面上保持一致，防止元素跳來跳去。

開眼中，不同的頁面都按照既有的輔助線布局。

文字的寬度換和高度

每種中文字體的長寬都是固定的，而英文單詞卻變化多樣。

利用A和y的組合來確定輸入框的最大高度，利用W來確定輸入框的最小尺寸，。因為A是所有字母中最高點，y是最低點，W則是最寬的。

對象狀態(tài)

可交互元素的狀態(tài)要比默認界面中所展示的多，應該在事先就設計出所有的狀態(tài)，以確定所有狀態(tài)在界面中是不是合適。

巴塞電影中，輸入框只有填寫了內(nèi)容，右上角的發(fā)布按鈕才可以點擊。

邊框和圓角

對于直線邊框，我們更常用圓角邊框確定內(nèi)外的圓角半徑（外圓角半徑=內(nèi)圓角+邊框?qū)挾龋┮赃_到最連貫的樣式。

清晰

保持頁面的簡單精煉，避免一次性塞給用戶過多的信息。在有大量信息的情況下，選擇折疊的方式，在用戶需要的時候，逐步展示給他們。

微博中，設置頁面層級清晰，通過點擊展開查看更多內(nèi)容。

精簡步驟

上一個法則指出把所有東西都塞在一個屏幕上不是一個好主意，但是也別弄出太多的步驟，超過四步才能抵達目的頁面，會讓用戶產(chǎn)生挫敗感。

輸入框標簽

我們建議不要把標簽放在輸入框里面，因為一旦選中輸入框，提示信息消失，用戶可能不知道他們需要輸入的內(nèi)容應該是什么。

愛彼迎中，登錄頁面的提示信息置于輸入框上方。

交互點擊區(qū)域

在使用觸屏設備的時候往往會有誤操作的產(chǎn)生，原因可能是某一個icon過小，導致點擊不準確。其實在設備上，手指的最小交互區(qū)域是7mm2，即使設計的icon達不到最小區(qū)域要求，對應的熱區(qū)也應該要復核最小區(qū)域要求。

自由文本

輸入框和下拉框都具有數(shù)據(jù)輸入的作用，而用戶操作提供選項的下拉框要比輸入框簡單的多。可能的話，為用戶提供若干默認選項而不是空白的輸入框，這樣也能減少錯誤的產(chǎn)生。

滴滴出行中，位置通過下拉框選擇。

錯誤預防

使用產(chǎn)品的過程中難免會有錯誤的操作，好的產(chǎn)品會把錯誤操作帶來糟糕后果的可能性降到最低。常用的預防措施有：前置正向元素、隱藏危險操作、提示警告和再次確認等。

Ios桌面刪除app，彈出二次確認框。

反饋

不管是正向操作還是反向操作，都應該給予用戶反饋，讓他們感覺到放心。用戶不希望看到產(chǎn)品突然卡住，連續(xù)點擊按鈕也沒有反應。這個時候應該有一些不通形式的提醒，讓用戶知道當前的狀態(tài)。

微博國際版中，清除緩沖會有一小段時間的加載中提示。

報錯信息

如果產(chǎn)品出錯了，最好以一種用戶能夠理解的形式告訴他們，并且提供可以到達正確操作的選項。

Pinterest中，登錄界面輸入錯誤，錯誤信息就近提示。

作者：設計師日記，公眾號：設計師的私人日記

本文由 @設計師日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議