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