簡潔不等於簡單:簡潔的Web頁面設計風格

來源:互聯網
上載者:User

文章描述:簡潔至上的Web設計 - 創意要素及設計技巧.

周五了,將今次的譯文發上來,以紀念一周的過去。眼看著天氣突然就這麼熱了起來,坐在空調風口下面不到一米的距離內,周身熱乎乎的,雙眼也似有若無的迷離了起來,這是鬧那樣呢。

這周有兩大喜事。一是終於不用每天回家一直泡在iOS Wow Factor一書的翻譯工作當中了,具體情況會在接下來一篇文章當中進行嘀咕。第二是公司UED新總監的到任。看到了一些希望在裡面,這兩件事都是如此。我們來看正題吧。

簡潔,不等於簡單。這與彈琴是一個道理,你也許有能力彈得很快,但你並不需要在所有地方都彈得這麼快。在很多時候,讓速度慢下來反而比彈得飛快要來的更加困難。實際上,味道往往最能體現在從容自然、舒緩平淡的韻律當中。接下來進入原文作者人格;我發現自己在很大程度上就是一Dummy System來著。

簡潔的Web頁面設計風格是當前圈子當中的風潮之一。在本文中,我們首先將對這類風格當中的那些最具代表性的組成要素進行分析,隨後,我(英文原文作者)還會向各位分享一些工作中的實戰技巧。

簡潔風格的創意組成要素

固定寬度的頁面配置結構

花時間觀察一些簡潔風格的網站,你會發現它們當中的絕大多數都有用到經過良好規劃的網格布局系統。如果哪位朋友對網格布局還不大瞭解的話,可以設想一下,在著手進行實際的視覺設計工作之前,使用輔助線將頁面劃分為若干等寬的列,通過這種方式對頁面結構及元素的布局進行更精準的規劃。網格布局可以使設計方案當中的資訊結構更加清晰,在視覺上具有強烈的節奏感與一致性。

固定寬度的網格布局結構可以為頁面帶來秩序與效率。舉個例子,雖然Creative Review當中的頁面配置會根據內容類型的不同而有所區別,但我們能夠感受到的瀏覽體驗卻是相當連貫的,因為這些頁面都是基於同一套網格布局架構進行設計的。下圖展示了他家的首頁和About頁面:

對於線上雜誌或報紙一類需要呈現大量內容的網站來說,要打造簡潔的頁面設計方案則更加困難。不過英國的衛報(The Guardian)以及一些同類型的線上報紙網站倒是向我們展示了通過固定寬度的網格布局實現簡潔設計方案的可行性:

配色有些許兇殘麼——譯者C7210注。

如果不使用固定寬度的布局方式來組織這些內容,幾乎可以說,首頁將會亂的一塌糊塗。然而,在網格布局的協助下,模組之間的留白及層次關係都相當清晰,整個內容結構的健壯性得到了提升。

下面兩篇文章(英文)可以協助你更好的理解與實踐網格布局的概念:

A Brief Look at Grid-Based Layouts in Web Design

The 960 Grid System Made Easy

也不是什麼新概念了,國產好文章也蠻多,有欲求的同學可自行覓食——譯者C7210注。

[1] [2] [3] [4]  下一頁



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。