在逛簡(jiǎn)書的時(shí)候，無意之間看到了這樣的一篇非常有意思的app設(shè)計(jì)博文。顧25學(xué)堂的摘錄了其中的一些關(guān)于移動(dòng)端APP界面設(shè)計(jì)的精華。分享給25學(xué)堂的app設(shè)計(jì)師們。

當(dāng)然，下面的這些app設(shè)計(jì)知識(shí)點(diǎn)是來自《寫給大家看的設(shè)計(jì)書》這本書。有興趣的小伙伴可以去購(gòu)買看全部的。

25學(xué)堂推薦：移動(dòng)端UI設(shè)計(jì)必看的三本APP設(shè)計(jì)書籍

親密性：將界面中相關(guān)的元素組織在一起，成為一個(gè)組，讓它們不被視作一堆散亂且彼此無關(guān)的片段。

如果微信的信息列表頁面，每一項(xiàng)的名稱、時(shí)間、摘要只是樣式區(qū)別卻未經(jīng)組織，就會(huì)變得不那么容易閱讀，如下（圖1）。尤其在列表項(xiàng)很多的時(shí)候，將擁擠不堪，讓人窒息。

圖1

實(shí)際的處理方式僅僅是采用了合理的列表項(xiàng)間距，以及每一項(xiàng)當(dāng)中名稱、時(shí)間、摘要的分布距離，就能輕松區(qū)分出列表項(xiàng)、每一項(xiàng)中內(nèi)容的關(guān)系。秩序井然，符合邏輯，保證了良好的可讀性。

見下（圖2）

通過組織界面元素，體現(xiàn)親疏關(guān)系，保證條理清晰，不僅做設(shè)計(jì)時(shí)要注意，開發(fā)的時(shí)候也要重視。

對(duì)齊：任何元素都不能在界面中隨意擺放，應(yīng)該跟界面中的其他元素存在相應(yīng)的視覺關(guān)系。

如果多看閱讀的圖書詳情頁面，簡(jiǎn)介信息和操作按鈕隨機(jī)擺放，像尚未完成的拼圖零件，會(huì)讓人無比煩亂（強(qiáng)迫癥患者不要看），如下（圖3）。

實(shí)際頁面見下（圖4），書名、作者、評(píng)分、價(jià)格左對(duì)齊，評(píng)分標(biāo)記星星與評(píng)價(jià)人數(shù)水平方向?qū)R，閱讀與購(gòu)買、收藏與贈(zèng)送等根據(jù)操作類型分組，各自在水平方向?qū)R。整潔的排版布局，提供流暢的視覺引導(dǎo)。

通過將文字信息、操作按鈕的分別對(duì)齊，來明確它們要傳遞的信息。一般在設(shè)計(jì)過程中，很少會(huì)出現(xiàn)這種混亂的情況。更多是在開發(fā)測(cè)試階段，界面中的類似問題會(huì)比較多，尤其是不同尺寸屏幕適配的時(shí)候。

?

重復(fù)：界面中的元素、樣式、空間關(guān)系等有意識(shí)地在整個(gè)產(chǎn)品中重復(fù)，以保持良好的一致性。

比如微信的底部功能欄，不管當(dāng)前在哪個(gè)功能模塊，它都以相同的風(fēng)格樣式、功能數(shù)量、排列順序出現(xiàn)。不會(huì)因?yàn)閺奈⑿徘袚Q到通訊錄，就突然多出一個(gè)或減少一個(gè)功能，或者改變排列順序。見下（圖5）

又比如簡(jiǎn)書，統(tǒng)一采用曙光色作為焦點(diǎn)狀態(tài)；根據(jù)使用場(chǎng)景出現(xiàn)的元素，比如搜索和提醒，采用同樣的樣式和位置；文章列表在不同的分類下也是統(tǒng)一的卡片樣式（白天和夜間模式卡片底色、文字顏色有區(qū)別，但是在同一個(gè)模式下，對(duì)應(yīng)的樣式會(huì)始終保持一致）。

聰明地使用重復(fù)的手法，不僅可以強(qiáng)化設(shè)計(jì)效果、提高信息清晰度，使用戶能夠快速熟悉和習(xí)慣產(chǎn)品，增加認(rèn)同感，還可以營(yíng)造成熟、穩(wěn)定的產(chǎn)品形象。對(duì)開發(fā)來說，可以減少代碼量、便于統(tǒng)一管理和修改。

對(duì)比：如果兩個(gè)界面元素要傳遞的信息不完全相同，就應(yīng)該在視覺上加以區(qū)別，有利于信息閱讀。

如多看閱讀書城分類列表的書籍信息，見下（圖7）。左邊的文字樣式未做對(duì)比區(qū)分，雖然能夠正常閱讀，但是信息層級(jí)顯然不如右邊有對(duì)比區(qū)分的明確。左邊沒有字號(hào)、顏色的對(duì)比，顯得呆板不夠美觀；右邊則能夠讓人閱讀得很輕松，并感到愉悅。

手機(jī)QQ的聊天界面，見下（圖8）。左邊對(duì)界面中現(xiàn)有圖形元素作了統(tǒng)一的樣式處理，消除了對(duì)比，于是可以發(fā)現(xiàn)無法區(qū)分操作層級(jí)，是否可以點(diǎn)擊也辨別不出來，并且失去重點(diǎn)。右邊是實(shí)際界面，圖形元素有樣式對(duì)比，層級(jí)明確，是否可點(diǎn)非常明顯，業(yè)務(wù)邏輯體現(xiàn)得充分合理。

對(duì)比可以有效地組織界面信息，體現(xiàn)信息層級(jí)關(guān)系，幫助用戶理解產(chǎn)品操作邏輯。

實(shí)際上，很少有一個(gè)設(shè)計(jì)，會(huì)只應(yīng)用這四個(gè)原則中的某一個(gè)。親密性、對(duì)齊、重復(fù)、對(duì)比，它們相互協(xié)作，服務(wù)整體效果。

以上這些移動(dòng)APP設(shè)計(jì)師知識(shí)來自《寫給大家看的設(shè)計(jì)書》這本書，同樣來自這本書的色彩搭配知識(shí)：APP色彩搭配方案是由主色、輔助色和點(diǎn)綴色構(gòu)成。

這本書幾乎可以視為形式美法則與格式塔原理的交集設(shè)計(jì)書籍：

形式美法則：變化與統(tǒng)一、對(duì)稱與均衡、節(jié)奏與韻律；

格式塔原理：接近性、相似性、連續(xù)性、封閉性、對(duì)稱性、主體/背景、共同命運(yùn)；

然后又可以促進(jìn)對(duì)形式美法則與格式塔原理之間差異的理解。

以上內(nèi)容來源：http://www.jianshu.com/p/616fc9395a98# ?同時(shí)25學(xué)堂也非常感謝作者lkl_ue 的分享。