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

當然，下面的這些app設(shè)計知識點是來自《寫給大家看的設(shè)計書》這本書。有興趣的小伙伴可以去購買看全部的。

25學堂推薦：移動端UI設(shè)計必看的三本APP設(shè)計書籍

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

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

圖1

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

見下（圖2）

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

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

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

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

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

?

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

比如微信的底部功能欄，不管當前在哪個功能模塊，它都以相同的風格樣式、功能數(shù)量、排列順序出現(xiàn)。不會因為從微信切換到通訊錄，就突然多出一個或減少一個功能，或者改變排列順序。見下（圖5）

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

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

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

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

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

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

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

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

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

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

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

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

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