起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識“完美像素”入門指南
本篇文章為大家分享的是熱門游戲“紀念碑谷”團隊出品的“完美像素手冊”，干貨滿滿！
今天想要分享的是熱門游戲“紀念碑谷”團隊出品的“完美像素手冊”：
“14年出品，至今已經四歲，在這四年中我們也從關注純粹的像素上開始轉變到我們的工作方式上。從移動銀行的應用到物理解密游戲，一直都沿襲這些原則。適合慢慢品讀?！?/p>
用戶
做產品首先要考慮的就是用戶，你要知道用戶真正想要的是什么？用戶如何通過你的產品去達到目的？什么才是最適合他們的？
只有掌握了這些需求點，才能著手去設計產品。
環境
環境不僅僅指的是你要為之設計的平臺，還包括用戶的使用場景、物理環境。
把自己代入用戶畫像，才能設計出好的用戶體驗。
可達性
做設計的時候，我們都會考慮到某些方面有殘疾的人群，但是這些都必須建立在產品能夠服務于普通大眾的基礎之上，我們再去多做一步，以達到特殊人群的使用，這樣才是更好的可達性。
Ios系統設置中，可以根據個人需求修改系統文字大小。
最差的場景
我們在做設計稿的時候，往往會把頁面設計的很完美，可是我們忽略了現實的用戶操作。
實際的場景可能是有空白或者長段的文本、有缺失的圖片等等。我們必須為此保留備選項，以備不時之需。
ZAKER新聞中，個人簡介部分過長導致的頁面不美觀。
功能可見性
任何對象都應該可以通過感官的手段，傳達出自身的功能，引導用戶去進行交互。
在數字化設計中，盡量去模擬真實世界，讓產品簡單易用。
微信掃一掃中，在掃描框內有模擬現實掃描儀器的光線。
文本口吻
設計中的文字除了作為設計元素，其本身的內容含義更為重要。好的文案設計不僅能讓內容更易理解，好的口吻也會賦予產品人的個性。
機器般生硬的語言沒法和用戶產生情感的聯系，好的口吻能創造良好的產品體驗。
石墨文檔與用戶的對話，覺得很人性化。
色彩和形狀
某些特定的色彩和形狀搭配具有一定的固有意義，使用的時候要特別小心，因為混搭會讓客戶產生誤解。
keep會員系統中，采用黑金配色，凸顯會員的尊貴。
視覺層級
想要用戶以什么樣的順序來閱讀頁面，頁面就應該設計成這樣的層級。版面、色彩和文字都在影響著視覺注意力。
通過強對比抓住觀者的注意力，或者減弱對比以達到和諧的頁面。
美團外賣中，內容層級明確，以品牌黃色作為視覺引導。
動效
界面的設計除了好看好用之外，微妙的動畫能夠賦予它們性格和可操作性。
組織
好的文件組織能夠在項目協作時候幫助成員之間節省時間，設計師在尋找文件的時候也不會浪費過多時間，而開發人員也更樂于和你一起工作。
邊緣
垂直、水平的邊線都應該是一整像素，拒絕模糊邊緣，意味著圖形的長寬都是整數，不帶小數點。
對齊和留白
頁面上的所有元素都應該有合理的對齊線和留白空間，這是造型藝術的基礎。
知乎中，所有的頁面都嚴格按照既有的輔助性布局。
一致性
通過拉網格線來確定產品所有頁面的對齊，確保整個應用的通用元素在不同頁面上保持一致，防止元素跳來跳去。
開眼中，不同的頁面都按照既有的輔助線布局。
文字的寬度換和高度
每種中文字體的長寬都是固定的，而英文單詞卻變化多樣。
利用A和y的組合來確定輸入框的最大高度，利用W來確定輸入框的最小尺寸，。因為A是所有字母中最高點，y是最低點，W則是最寬的。
對象狀態
可交互元素的狀態要比默認界面中所展示的多，應該在事先就設計出所有的狀態，以確定所有狀態在界面中是不是合適。
巴塞電影中，輸入框只有填寫了內容，右上角的發布按鈕才可以點擊。
邊框和圓角
對于直線邊框，我們更常用圓角邊框確定內外的圓角半徑（外圓角半徑=內圓角+邊框寬度）以達到最連貫的樣式。
清晰
保持頁面的簡單精煉，避免一次性塞給用戶過多的信息。在有大量信息的情況下，選擇折疊的方式，在用戶需要的時候，逐步展示給他們。
微博中，設置頁面層級清晰，通過點擊展開查看更多內容。
精簡步驟
上一個法則指出把所有東西都塞在一個屏幕上不是一個好主意，但是也別弄出太多的步驟，超過四步才能抵達目的頁面，會讓用戶產生挫敗感。
輸入框標簽
我們建議不要把標簽放在輸入框里面，因為一旦選中輸入框，提示信息消失，用戶可能不知道他們需要輸入的內容應該是什么。
愛彼迎中，登錄頁面的提示信息置于輸入框上方。
交互點擊區域
在使用觸屏設備的時候往往會有誤操作的產生，原因可能是某一個icon過小，導致點擊不準確。其實在設備上，手指的最小交互區域是7mm2，即使設計的icon達不到最小區域要求，對應的熱區也應該要復核最小區域要求。
自由文本
輸入框和下拉框都具有數據輸入的作用，而用戶操作提供選項的下拉框要比輸入框簡單的多?？赡艿脑挘瑸橛脩籼峁┤舾赡J選項而不是空白的輸入框，這樣也能減少錯誤的產生。
滴滴出行中，位置通過下拉框選擇。
錯誤預防
使用產品的過程中難免會有錯誤的操作，好的產品會把錯誤操作帶來糟糕后果的可能性降到最低。常用的預防措施有：前置正向元素、隱藏危險操作、提示警告和再次確認等。
Ios桌面刪除app，彈出二次確認框。
反饋
不管是正向操作還是反向操作，都應該給予用戶反饋，讓他們感覺到放心。用戶不希望看到產品突然卡住，連續點擊按鈕也沒有反應。這個時候應該有一些不通形式的提醒，讓用戶知道當前的狀態。
微博國際版中，清除緩沖會有一小段時間的加載中提示。
報錯信息
如果產品出錯了，最好以一種用戶能夠理解的形式告訴他們，并且提供可以到達正確操作的選項。
Pinterest中，登錄界面輸入錯誤，錯誤信息就近提示。
作者：設計師日記，公眾號：設計師的私人日記
本文由 @設計師日記 原創發布于人人都是產品經理?，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
請問文字的寬度換和高度那點，A上面為什么要加個小圓圈呢?那不是比A又更高了點么？然后右邊的WWW，為啥要連著3個呀？一般校準高度和寬度，不是以單個字母為準就好了嗎？
我特地去搜索了下，?是一個長元音，語法中存在這個?，所以要考慮到這個情況；至于www的意思是，如果一個輸入項允許輸入10個字符，則最長的情況是10個w，這里的三個不是固定的，是根據具體情況去考慮的。??
贊一個