|
如果把網(wǎng)頁設計成這樣,你一定喜歡看时间:2017-11-22 阅读
極簡主義最早出現(xiàn)于后二戰(zhàn)時期的藝術(shù)運動,F(xiàn)代網(wǎng)頁設計中,極簡主義也是主流的設計技巧之一。它有時也被視為「內(nèi)容大過于形式」的典型代表。 運用恰當?shù)脑挘瑯O簡主義可以使設計師更加關(guān)注「簡化用戶任務」。此外,它還有其他優(yōu)點,比如網(wǎng)頁加載速度更快,大小不一的各種設備上兼容性更好等等。 極簡主義提倡的「簡」,看起來的確簡單,但透過現(xiàn)象看本質(zhì),「簡而未減」。這篇文章,帶你了解極簡主義應該要注意的幾個設計原則和案例。 一、什么是極簡主義網(wǎng)頁設計?極簡主義最初流行于 21 世紀初。如今,大多數(shù)流行設計趨勢(比如扁平設計、網(wǎng)站首圖、以及隱藏式全局導航等等)都受極簡主義直接影響。 Google 常被稱為極簡主義網(wǎng)頁界面的先驅(qū)者。自上個世紀 90 年代的測試版開始,極簡主義一直都是其界面設計始終不變的遵循規(guī)則。  盡管 Google 推出了各種各樣的產(chǎn)品,但過去 15 年以來其主頁設計風格基本依然如故。 Google 搜索主頁設計的成功,為極簡主義的流行發(fā)展奠定了基礎(chǔ)。 關(guān)于極簡主義網(wǎng)頁設計的特征,雖然眾說紛紜,但總體來說,包含以下幾個基本受認可的方面: 1. 只保留必要元素極簡主義的核心聽起來也非常簡單——簡而未減(Less is More)。在網(wǎng)頁設計中,要做到簡而未減,只要在既定設計環(huán)境中保留必要元素即可。 極簡主義網(wǎng)頁設計的戰(zhàn)略在于,省去不支持用戶任務的多余元素或內(nèi)容,簡化頁面。因為屏幕上的元素越少,其余元素的關(guān)注度就更高。 也就是說,如果屏幕上只有單一元素,那該元素背后的信息肯定可以成功地傳達給用戶。  頁面上元素越少,用戶的認知負荷也相對較輕。 簡而未減,就是要省去任何影響用戶注意力的界面元素。但同時,確保用戶所需元素沒被移除或隱藏,否則用戶其首要任務將變得更復雜。 所以,設計要以內(nèi)容為核心,省去大量二級元素(比如主導航),用戶才不會那么困惑。 2. 負空間要問極簡主義設計最常用的元素是什么?若回答什么元素都不用,這個答案也不足為奇。 負空間(亦稱留白),是極簡主義設計最重要的特征,也是使極簡主義設計最賦亮點的一個特征。它對引導用戶視覺流向也是很有幫助的: 某元素周圍的負空間越多,該元素受關(guān)注的可能性越大。 負空間是用戶最熟悉的極簡主義設計元素。圖片來源:Bouguessa 3. 視覺特征在極簡主義設計中,每個細節(jié)都有其存在價值。所以留下的都是精華:
最少的視覺層次結(jié)合扁平設計——現(xiàn)代網(wǎng)頁設計的「黃金搭檔」。圖片來源:F-Secure
極簡主義設計的最具代表的藝術(shù)形式——網(wǎng)站首圖,整個網(wǎng)頁就一張引人注目的圖片。圖片來源:Ada Blackjack
用戶看到的視覺信息越少,顏色元素就更顯著,該網(wǎng)站更有影響力。圖片來源:Mixd
使用字體排版來創(chuàng)造視覺吸引力,傳達信息。
大量極簡主義設計都只使用一種鮮明顏色,通過單一色調(diào)來突出頁面最重要的元素。圖片來源:WE AIN’T PLASTIC 二、極簡主義網(wǎng)頁設計最佳實踐極簡主義聽起來什么都簡化了,但「站著說話不腰疼」——不能因為元素相對較少,可用性也跟著降低。 1. 一屏一焦點遵循「一頁一概念」原則,在設計時,每個頁面/屏幕只出現(xiàn)一個概念,并輔以單一視覺內(nèi)容為核心。  圖片來源:Bureau Tonic 2. 「頁面上半部分」有所預期在頁面上半部分留足負空間,并加入高質(zhì)量元素,隨著頁面滾動,內(nèi)容密度也不斷增加。 Apple 主頁(頁面上半部分) A 君注:AppSo(微信公眾號 AppSo)之前分享本文原作者 Nick Babich 的另一篇文章,成功吸引你注意的網(wǎng)站橫幅,究竟做對了什么?,提到過「折疊以上部分」,即頁面上半部分,這部分是用戶點開網(wǎng)址后直接看到的頁面。 3. 文本簡潔在斯特倫克和懷特共同出版的《風格的要素(The Elements of Style)》一書中,他們提出了「省去多余文字」這一觀點。這也適用于極簡主義設計——認真編輯頁面文本,只留下必要元素,但留下的必須是精華,可以幫你清晰明了地傳遞訊息。  省去所有多余的文字,以最簡潔的方式與用戶交互。圖片來源:BFF 4. 簡化(但不是隱藏)導航簡便導航,自始自終都是網(wǎng)頁設計的目標之一。但簡便并不等于直接隱藏。若使用漢堡包菜單,在用它來簡化界面內(nèi)容前,要確認你有合理理由。同時,漢堡包菜單還會減少導航的可發(fā)現(xiàn)性。大多數(shù)情況下,隨時可見的導航選擇更佳。 A 君注:漢堡包菜單是導航方式的一種,通常在導航欄左側(cè)有一個由三條橫杠(三層漢堡)組成的圖標,這就是漢堡包菜單。 先看看下圖的導航:  主要導航菜單僅在用戶操作下才可見 再對比下圖導航:  隨時可見的導航菜單 5. 加入動效在設計中,動效的影響越來越大。沒有動效,即便是極簡主義設計,可能也會「坐冷板凳」。不過,加入動效仍需遵循極簡主義的設計原則:簡潔,并且只保留必要元素。  動效使交互過程更具活力。圖片來源:Intercom 6. 著陸頁和作品集頁面一定要極簡設計雖然內(nèi)容驅(qū)動型極簡主義設計適用于任何網(wǎng)站,但有時極簡主義美學可能會「文不對題」。不過,極簡主義設計一定適用于著陸頁和作品集頁面。比如下圖示例,設計目的簡潔明確,內(nèi)容相對較少。 
三、資源和工具
結(jié)束語省去不支持用戶任務的多余元素或內(nèi)容,極簡主義網(wǎng)站在簡化界面這條道路上越走越穩(wěn)。為什么這類網(wǎng)站如此給人啟發(fā)?答案一望而知:其設計兼顧了「簡潔性」和「可用性」兩方面。 能簡易導航的「輕負荷」網(wǎng)頁,照樣能傳達訊息,且不亞于其它。何須淺碧深紅色,自是花中第一流。簡而不減,你值得擁有。 |