關注▲Clip設計夾後台回復「進群」加入設計成長群
設計夾的第110篇文章分享
鄰近性
鄰近性是指頁面中有關聯的元素比其他元素的距離更近。頁面中的內容或元素按照鄰近性分組，比按照形狀或者顏色分組更直觀。
相似性
同一頁面中表達相同功能的元素，通過相同的形狀表示。相似性是視覺上相似元素的組合，通常通過大小、形狀和顏色來區分。
相似的元素會表現出相似的行為，比如下圖右邊的選項中，都使用了一致的單選框，更利於用戶做出選擇。
連續性
現在很多移動端產品都採用feed流的形式，可以無限加載內容，用戶怎麼滑都滑不到底。這樣的場景下就要考慮feed流內容的連續性，通過將內容進行合理地對齊，保證閱讀上的連續性。
對齊的作用除了可以讓頁面的內容看起來更整齊，還能夠下意識地影響用戶的瀏覽視線和閱讀順序。比如F型和Z型視覺動線，通過不同的對齊排版方式來引導用戶的視線。
閉合性
閉合性是通過排版布局元素自身的邊距以及元素間的間距，來減少用戶的認知負荷。現在流行的卡片式布局就用到了這個原則，通過將元素整合到一個卡片中，合理安排元素的間距來達到整齊的效果。
比如在「左圖右文」的卡片布局中，要考慮圖片與標題的間距、標題是否需要和圖片頂部對齊、在規定空間內標題如果字數過多怎麼折行和省略處理、標題和注釋之間的距離和對齊方式等等一系列問題。
看到這裡會發現，想要把一個簡單的卡片式布局排版好，並不簡單，需要考慮到很多的細節。
共同命運
具有相同概念的元素需要設計為具有相同的行為。當元素沿同一方向移動時，它們被識別為同一級別的元素。比如在手機中有時候會看到橫向排版的內容，這些內容處於用一個層級，用戶左右滑動來觀看。
前景和背景
設計使前景和背景清晰區分。當我們的視線感知到元素重疊時，會根據焦點分別識別前景和背景。
為了減少混亂，可以使用深色蒙版或者彈窗陰影來分離前景和背景。當頁面中有彈窗跳出，通常背景會有一層深色的遮罩，以此來突出彈窗中的內容。
分組
當我們想把不同類別的內容進行分組時，可以添加線條或背景來區分。
聚集在同一區域的元素被看做為屬於同一板塊的元素，因此這些內容需要與其他元素有明顯的區別。常用的方法是改變背景的顏色或者在背景中插入圖片，讓這個板塊的內容和其他內容有強烈的對比。
單位
設定有效設計的最小單位。要在多個倍數（如1.5x 2x）中使用設計元素，使用可以整除的偶數。
其中，8點網格系統被廣泛使用，它可以將主顯示器的整個像素除以一個整數。但是8點網格並不能適用於所有的設計，比如iOS的375和750的屏幕尺寸。
網格
網格是一種高效設計的工具，通過定義一個大的框架來進行元素排版。網格系統易於構建，而且能提供一致的視覺節奏，非常適合應用在日常的設計工作中。
網格系統的具體用法可以看這篇文章👉🏻多案例幫你掌握柵格系統的布局設計
屏幕尺寸
設計的時候要考慮移動設備的屏幕尺寸問題。就iOS而言，手機機型都是固定的，因此主要基於旗艦機型的尺寸進行設計。
由於使用Android系統的手機品牌太多，因此不可能優化所有屏幕，因此傾向於遵循谷歌提供的規範。
密度
為了在屏幕放大時顯示相同的大小，需要了解屏幕的密度。PPI是常用的單位，代表每英寸的像素數，是指在1英寸x1英寸的屏幕區域中物理顯示的像素數。
以DP和PX為單位進行設計，以便在任何屏幕尺寸上都能物理顯示相同的大小。
響應式
對於同時支持移動端和桌面端的產品，可以使用響應式設計來提升效率和體驗，常用的結構形式分為導航欄、工具欄和內容區。
導航欄：頂級導航菜單區，如分類、菜單。
工具欄：搜索、書籤等工具。
內容區域：文本、圖像、列表等內容顯示區。
最後
以上就是排版設計中要注意的細節和技巧，希望通過這些內容能幫助你對排版和布局有更多的思考。
添加微信,邀你進設計成長群🌟
🔥文章合集
致2020：設計文章合集
留言列表