<progress id="hhndr"><dl id="hhndr"><th id="hhndr"></th></dl></progress>
<cite id="hhndr"><video id="hhndr"><thead id="hhndr"></thead></video></cite> <ins id="hhndr"></ins>
<noframes id="hhndr"><th id="hhndr"><progress id="hhndr"></progress></th>
<var id="hhndr"><video id="hhndr"></video></var>
<var id="hhndr"><span id="hhndr"><menuitem id="hhndr"></menuitem></span></var><progress id="hhndr"><ruby id="hhndr"></ruby></progress><var id="hhndr"><span id="hhndr"><menuitem id="hhndr"></menuitem></span></var>
服務熱線:400-889-1636
業務聯系:021-5230 0317
客戶服務:021-5230 0319
在線咨詢: 
網站建設,網站制作,企業網站建設,網上商城,網站推廣,域名注冊,求創科技
網站建設,網站制作,企業網站建設,網上商城,網站推廣,域名注冊,求創科技
首頁 > 關于求創 > 求創博客

UI設計不可或缺的元素——留白

時間: 2016.08.03 來源:本站
分享到:

適當留白不僅是出自審美的考量,它還能提供 3 個相當實際的功能:1.提高用戶的理解能力;2.明確視覺元素之間的關系;3.吸引注意力。

 


1、提高用戶的理解能力

 

如果你在網頁中胡亂堆積太多視覺元素,就會使得你的用戶信息過載,反之,將網頁精簡將提高用戶對其內容的理解程度。


留白可以以 4 種形式存在于網頁設計之中:視覺留白(在圖形、圖標與圖片四周留有空間);排版中留白(段落兩邊留有空間,內邊距、裝訂線);文本留白(行間距以及字母之間了空隙);內容留白(在文本列與列之間用空白分隔。



Medium 是一個綜合使用了這 4 種留白方式的好例子。首先,從交互的角度來看它充分考慮了用戶的目的:用戶想要盡快讀到有趣的閱讀內容。Medium 主頁滿足用戶這一需求的直接做法就是將內容安排到中心靠前的位置,同時在內容兩側使用了大塊留白來強調文本內容。Medium 主頁上的圖片周圍和行與行之間都留有充足的空間,雖然其圖片的內邊距設計還有提升的空間(注意:圖片左下角的文字與圖片之間并沒有充分留白。

 

 

除了提升用戶的理解能力之外,留白還能夠幫助他們創造出自己的意境地圖(譯者注:即人類頭腦中的空間意象)。在頂部導航條與內容瀑布流之間的微小留白也可以促使讀者深入閱讀內容。網頁右側的導航欄目的在于讓用戶創建并保存內容,因此需要使用更多的留白讓其與文章內容分隔開來。在 Medium 的這個案例中,我們可以看到留白指引用戶在不同的區域完成不同的功能。當用戶點擊標題進去閱讀文章具體內容時,留白可以幫助他們集中注意力在最關心的內容之上。文章行與行之間的適當留白提高了其整體可讀性。


2、明確視覺元素之間的關系

 

當在觀察人類個體如何組織視覺信息時,格式塔心理學家無意中發現了所謂的相似定律,即相鄰的圖像看上去是相似的。比如說,看看下面這張圖:

 

 

幾乎每一個人都看到了兩組圖標,而不是單獨的 20 個圖標。其實這些圖標都是相同的,唯一的用來區分它們的就是用來分隔的留白。這種行為觀察在交互設計中有著一些重要的應用,尤其是在輸入表格的時候,下面有2 點是需要記住的:


將標簽靠近相關字段。在你所看到的如下示例中,當標簽放置的更加靠近相關字段時,其中的信息交流將變得非常清晰明了。在我們先前的實踐中也已經證明,即使是最微小的猶豫不決也會傷害形式的完整性,在這種情況下僅僅調整一下間距就會提升用戶在填寫表單時的信心,這將提升完成率。


組織相關話題。當處理較長表單時,完成該表格填寫的任務會看上去如此艱巨,有些用戶甚至連試都不試就直接放棄了。利用留白將信息分成適當的幾組,可以讓那些長表單看上去更容易處理一些。在右邊的表格之中,將 15 個字段分成 3 組讓這個填寫過程看上去似乎更容易一些。雖然內容是相同的,但是給用戶留下的印象是完全不同的。雖然這一原則通常運用于表單之中讓它更能吸引用戶填寫,但是同樣的原則也適用于導航欄和網站內容。相對于在頂部導航欄安排20個選項,你可以使用下拉目錄將頂部導航欄分成4 到7 欄,余下的內容都可以收入到下拉框中。


3、吸引注意力

 

正如我們在上文中提到的,缺乏其他的元素將使得剩下的元素更加突出。Yelp 的頁面重新設計就是一個很好的例子,在這樣一個高保真的原型當中,設計者添加了大量留白將分類目錄內容與搜索功能進行區隔。在如此設計之后,分類圖標變得更加引人注目(布局也比先前凌亂的垂直設計顯得更加整潔)。同時將顏色填充其中,分類目錄部分將更具吸引力,還能夠提供給用戶更好的反饋。但是因為人類的注意力是有選擇性的,可能會有意無意就忽略了橫幅式樣的信息比如橫幅廣告,這通常被稱作「旗幟盲點」,因此你在使用留白的時候后還需要指導如何削減或者調整其幅度。


最后,你需要明白的是留白的力量來自于人們注意力與記憶力的局限。你可以比較一下Yahoo 與Google 的交互設計,Yahoo 在其網頁中安排了太多的按鈕,而 Google 深知用戶使用網站的基本需求就是使用搜索功能找到其想要的東西。正因為 Google 能夠對于用戶的需求進行現實的考量,因此其網頁設計創造了更為積極有效的交互。


大多數的設計師都屬于「不要讓用戶動腦子」學派,這不僅僅是因為用戶通常是懶惰的,還因為他們在瀏覽網頁的時候腦海中已經存有很多信息了,如果還要填鴨式地向其腦中灌輸信息,只會使得他們感覺無力閱讀。這種在交互設計中傳遞太多信息而導致用戶無力接受的現象通常被稱作【認知負荷】。

 

 

網頁設計中減少認知負荷不僅僅會讓 UI 設計更為實用,也會讓用戶更加樂于使用,適當的留白會增添和諧感,讓用戶的瀏覽體驗更具流暢性。

上一篇文章: HTML5并非聽上去那么完美
下一篇文章: 域名更換Q&A
返回

業務咨詢

客戶服務

我要留言

節假日咨詢電話

136-1188-9500

關于我們

上海求創科技有限公司成立于2001年,是一家專注于為客戶提供高端網站策劃、網站建設、網頁設計、品牌網絡營銷以及相關的基于互聯網應用服務的專業公司。

更多

全國客戶服務熱線

400-889-1636

網站建設,網站制作,企業網站建設,網上商城,網站推廣,域名注冊,求創科技-微官網 網站建設,網站制作,企業網站建設,網上商城,網站推廣,域名注冊,求創科技-手機網
域名超市 | 蘇州網站優化 | 北京網站建設 | 邯鄲網站建設 | h5建站 | 手機網站建設 | 營銷型網站建設 | 沈陽seo優化 | 企業網站建設 | 網頁設計 |
業務熱線:021-52300315 021-52300317 業務部:[email protected] 售后服務:ser[email protected] 投訴郵箱:[email protected] 域名和主機服務:021-52300319
地址:上海市靜安區鎮寧路168號16樓A室 郵政編碼:200040
版權所有?上海求創科技有限公司 滬ICP備13005298號-24  網站地圖
山东十一选五网址