APP界面設計寫給大家看的設計書移動端界面轉化版

這本書通過簡潔明了的語言、通俗易懂的示例，將優秀設計通用的原則總結歸納為四點：親密性、對齊、重復、對比。適合所有能夠進行基礎閱讀的人學習，跟書名非常貼切。

（圖0）《寫給大家看的設計書》

當我把這本書推薦給產品組的開發人員時，得到的反饋是：示例都是印刷品設計，跟移動開發沒有半毛錢關系。orz,這背后的愛恨情仇，如果展開則實在沒有必要，否則將是通篇的吐槽。所以下面將這本書的描述語言、示范案例進行移動端界面的轉化。

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

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

（圖1）如果微信的信息列表長成這樣，肯定不會有現在的用戶量

實際的處理方式僅僅是采用了合理的列表項間距，以及每一項當中名稱、時間、摘要的分布距離，就能輕松區分出列表項、每一項中內容的關系。秩序井然，符合邏輯，保證了良好的可讀性。見下（圖2）

（圖2）現在這樣，已經成為“理所當然”

通過組織界面元素，體現親疏關系，保證條理清晰，不僅做設計時要注意，開發的時候也要重視。

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

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

（圖3）散亂擺放的圖書信息和操作按鈕

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

（圖4）干凈整齊的排版

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

(編輯：小酷)