WEB設計中的排版
排版就是將有限的視覺元素進行有機的排列組合,讓邏輯清晰、閱讀順暢、互動便捷,產生良好體驗。
首先談一下“Metro”——由微軟公司開發內部名稱為“ typography-based design language”(基於排版的設計語言)。
Metro是基於瑞士平面設計的設計原則(清晰,真實,美觀),來源於交通指示牌。生活中人們行色匆匆,更需要提供快速,簡潔,直接,明確的設計。現在的網際網路又何嘗不是如此,快捷獲取資訊的同時,資訊氾濫、龐雜無序,簡潔之風深入人心——減少元素,以顯現本質。良好的排版有助於Web設計更加簡潔有效。
概念:
排版就是將有限的視覺元素進行有機的排列組合,讓邏輯清晰、閱讀順暢、互動便捷,產生良好的體驗。
Rams的10條關於優秀設計的原則(創新、實用、美感、簡單易懂、謙虛、誠實、時間考驗、細節、重視環境、簡潔)
排版早已廣泛應用於平面媒體中的報紙、書刊雜誌,同樣也適用於Web設計,但Web的特性使之又有所不同:
互動性(可操作、即時響應、狀態變化,要求不但美觀更要易用)
呈現媒介(PC、手機、平板、電視、投影等,需要考慮呈現尺寸及色彩)
技術性(HTML和CSS的不斷升級,對Web排版的支援更加優秀和高效)
多媒體(文字、圖片、視訊)
致使Web設計中的排版更復雜,更困難,更有挑戰性;
原則:
萬變不離其宗,排版依然要遵循平面構成的基本原則——
重複與交錯、節奏與韻律、對稱與均衡、對比與調和、比例與適度、變異與秩序、虛實與留白、變化與統一
同時還要強調:
功能與形式(深入理解功能和內容,使之形式更好的體現主題思想)
相容與響應(跨平臺,不同的解析度、不同的裝置環境下的呈現效果)
型別:
1. 文字
通過對字號、字型、字色、粗細、間距、行距等屬性來體現出內容的層次結構。
2. 顏色
運用顏色的形體、位置、面積,及色相、明度、純度等屬性並結合內容與環境來組織色彩。
3. 圖片
Pinterest引領瀑布流排版的流行風潮
4. 表單
精心的表單排版,能讓使用者感到心情舒暢,愉快地註冊、付款和進行內容建立和管理。
5. 介面
和平面排版最大的區別在於,Web介面可操作的功能性,需要強調設計的可用性,排版上也要兼顧使用者的瀏覽、操作習慣。
6. 導航/圖表
通過對資訊資料的歸納整理,有效分類、排布,將複雜資訊高效、清晰地傳遞給使用者——清晰、直觀。
總結:
Web設計中排版很重要。好的排版設計,不但要美觀,更多的是要將資訊內容有效的組織、排布,使其規範有序、清晰明確,便於使用者高效、準確獲取相關資訊,讓Web設計更友好、易用、真實可信。
這需要設計師深入理解所設計的資訊內容,提高資訊內容的組織、加工能力,將內容本身作為設計元素,依照設計原理有效排布。良好的排版有助於Web設計更加簡潔有效。
相關文章
- 在網頁設計中如何排版網頁
- 如何將斐波那契數列應用到排版設計中
- 電商平臺的商品詳情頁如何排版?輕鬆搞定詳情頁的排版設計!
- 用Vue實現海報排版設計功能Vue
- 設計排版神器:Affinity Publisher for Mac 直裝版Mac
- QuarkXPress 2021 for Mac(專業排版設計軟體)Mac
- 擺脫詳情頁設計的文案排版困難!解決你的設計煩惱!
- QuarkXPress 2021 for Mac(圖文設計排版佈局工具)Mac
- InDesign 2022 for mac(頁面佈局、排版設計工具)Mac
- 如何設計出“好看”的UI介面(一):排版的六項原則UI
- 蘋果Mac電腦專業的頁面排版設計工具蘋果Mac
- 好程式設計師web前端分享web測試之Js中的變數程式設計師Web前端JS變數
- 不用自己動手排版,一鍵就能搞定的海報設計工具!
- web的一些設計Web
- CNCKAD數衝鐳射程式設計排版軟體介紹程式設計
- UI設計培訓技術教程之字型排版規則UI
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- 不會設計主圖也沒關係,不用自己動手排版也能設計!
- 好程式設計師解析Web前端中的IoC是什麼程式設計師Web前端
- mac設計排版軟體 Affinity Publisher v2.2.1啟用版Mac
- Web應用的快取設計模式Web快取設計模式
- 蘋果Mac電腦設計排版神器:Affinity Publisher破解中文版蘋果Mac
- InDesign 2022 for mac(id專業排版設計軟體)支援m1Mac
- 跟著教程操作,教你網頁上也能設計排版主圖!網頁
- 好程式設計師web前端學習路線分享web測試之Js中的函式程式設計師Web前端JS函式
- [譯] UX 設計實踐:如何設計可掃描的 Web 介面UXWeb
- 好程式設計師web前端教程分享js中的模組化二程式設計師Web前端JS
- 好程式設計師web前端教程分享js中的模組化一程式設計師Web前端JS
- 好程式設計師Web前端中的js能運用到哪些方面程式設計師Web前端JS
- 專業設計和排版推薦:QuarkXPress CopyDesk 2023啟用中文版
- 商品詳情頁設計排版工具,零門檻入門使用指南!
- 21款國外網頁UI設計欣賞,文字排版不再單調!網頁UI
- WEB程式設計開發常用的程式碼Web程式設計
- .Net WEB 程式設計師需要掌握的技能Web程式設計師
- Web伺服器程式設計Web伺服器程式設計
- 好程式設計師web前端培訓React中事件的寫法總結程式設計師Web前端React事件
- 碼農如何學設計 - Web UI 設計學習心得WebUI
- 這個詳情頁設計工具,能幫你搞定摳圖文案和排版!
- Web 魔方模擬器的設計與實現Web