大家好,今天分享的是「排版技巧」。頁麵的排版很靈活,但在排版時我們不單單要考慮視覺上的好看,還要考慮使用上的體驗。
將頁麵中的內容和元素通過合理的方式方法進行排版,保證重點內容突出而且容易閱讀是首要目的。
這次總結一些在頁麵排版和布局中需要注意的技巧,掌握這些容易上手的排版技巧能夠大力提升設計效率。
一、鄰近性
鄰近性是指頁麵中有關聯的元素比其他元素的距離更近。頁麵中的內容或元素按照鄰近性分組,比按照形狀或者顏色分組更直觀。
二、相似性
同一頁麵中表達相同功能的元素,通過相同的形狀表示。相似性是視覺上相似元素的組合,通常通過大小、形狀和顏色來區分。
相似的元素會表現出相似的行為,比如下圖右邊的選項中,都使用了一致的單選框,更利於用戶做出選擇。
如果像左圖一樣,單選框的樣式不統一,那麼用戶在選擇的時候可能就會產生疑問,是不是點擊不同樣式的單選框會有不同的意思,造成不必要的困擾。
三、連續性
現在很多移動端產品都采用feed流的形式,可以無限加載內容,用戶怎麼滑都滑不到底。這樣的場景下就要考慮feed流內容的連續性,通過將內容進行合理地對齊,保證閱讀上的連續性。
對齊的作用除了可以讓頁麵的內容看起來更整齊,還能夠下意識地影響用戶的瀏覽視線和閱讀順序。比如F型和Z型視覺動線,通過不同的對齊排版方式來引導用戶的視線。
四、閉合性
閉合性是通過排版布局元素自身的邊距以及元素間的間距,來減少用戶的認知負荷。現在流行的卡片式布局就用到了這個原則,通過將元素整合到一個卡片中,合理安排元素的間距來達到整齊的效果。
比如在“左圖右文”的卡片布局中,要考慮圖片與標題的間距、標題是否需要和圖片頂部對齊、在規定空間內標題如果字數過多怎麼折行和省略處理、標題和注釋之間的距離和對齊方式等等一係列問題。
看到這裏會發現,想要把一個簡單的卡片式布局排版好,並不簡單,需要考慮到很多的細節。
另外,卡片式的排版不一定必須帶有外邊框,如果每個卡片中內容排版很整齊,就算不用額外邊框,用戶也可以清晰地閱讀。
五、共同命運
具有相同概念的元素需要設計為具有相同的行為。當元素沿同一方向移動時,它們被識別為同一級別的元素。比如在手機中有時候會看到橫向排版的內容,這些內容處於用一個層級,用戶左右滑動來觀看。
六、前景和背景
設計使前景和背景清晰區分。當我們的視線感知到元素重疊時,會根據焦點分別識別前景和背景。
為了減少混亂,可以使用深色蒙版或者彈窗陰影來分離前景和背景。當頁麵中有彈窗跳出,通常背景會有一層深色的遮罩,以此來突出彈窗中的內容。
七、分組
當我們想把不同類別的內容進行分組時,可以添加線條或背景來區分。
聚集在同一區域的元素被看做為屬於同一板塊的元素,因此這些內容需要與其他元素有明顯的區別。常用的方法是改變背景的顏色或者在背景中插入圖片,讓這個板塊的內容和其他內容有強烈的對比。
八、單位
設定有效設計的最小單位。要在多個倍數(如1.5x 2x)中使用設計元素,使用可以整除的偶數。
其中,8點網格係統被廣泛使用,它可以將主顯示器的整個像素除以一個整數。但是8點網格並不能適用於所有的設計,比如iOS的375和750的屏幕尺寸。
九、網格
網格是一種高效設計的工具,通過定義一個大的框架來進行元素排版。網格係統易於構建,而且能提供一致的視覺節奏,非常適合應用在日常的設計工作中。
十、屏幕尺寸
設計的時候要考慮移動設備的屏幕尺寸問題。就iOS而言,手機機型都是固定的,因此主要基於旗艦機型的尺寸進行設計。
由於使用Android係統的手機品牌太多,因此不可能優化所有屏幕,因此傾向於遵循穀歌提供的規範。
十一、密度
為了在屏幕放大時顯示相同的大小,需要了解屏幕的密度。PPI是常用的單位,代表每英寸的像素數,是指在1英寸x1英寸的屏幕區域中物理顯示的像素數。
以DP和PX為單位進行設計,以便在任何屏幕尺寸上都能物理顯示相同的大小。
十二、響應式
對於同時支持移動端和桌麵端的產品,可以使用響應式設計來提升效率和體驗,常用的結構形式分為導航欄、工具欄和內容區。
導航欄:頂級導航菜單區,如分類、菜單。
工具欄:搜索、書簽等工具。
內容區域:文本、圖像、列表等內容顯示區。
十三、最後
以上就是排版設計中要注意的細節和技巧,希望通過這些內容能幫助你對排版和布局有更多的思考。
原文地址:Clip設計夾(公眾號)
作者:Clippp
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題,火星幫你解答這篇文章詳細介紹了如何學習使用UE4進行可視化製作,以及火星時代教育對此方麵培訓的專業性
麵對繁多的移動端UI培訓機構,如何選擇一個適合自己的呢? 本文將為你解答疑問,而火星時代教育,我們敢說是最好的選擇!
基於火星時代教育的高質量課程體驗, 揭示遊戲開發的前瞻性和職業發展前景。
以UE4作為工具來建構智慧城市,能大大提高其實用性和創新性。火星時代教育通過專業的UE4課程培訓來助力學習者掌握UE4建構智慧城市的技巧。
對於很多熱愛製作遊戲特效的朋友來說,擔心的一個問題就是,學習遊戲特效需要多少時間?火星時代教育為您詳細分析和解答。
了解影視原畫設計的基本知識和學習路徑,尤其是在火星時代教育的專業指導下,你將擁有更好的學習體驗。
1. 打開微信掃一掃,掃描左側二維碼
2. 添加老師微信,馬上領取免費課程資源
同學您好!