用戶體驗的(de)界面設計細節——布局篇
發布時(shí)間:2017/08/12
1.合理的(de)模塊區分
界面設計中不(bù)乏内容信息很多,需要(yào / yāo)折疊的(de)情況。因此經常存在(zài)信息的(de)層級關系,而(ér)這(zhè)時(shí)就(jiù)需要(yào / yāo)利用不(bù)同的(de)顔色對各個(gè)模塊進行區分,利用同色系不(bù)同明度來(lái)體現這(zhè)樣的(de)層級關系。這(zhè)樣也(yě)讓用戶更容易理解當前所處的(de)模塊。也(yě)讓頁面看起來(lái)更豐滿些。
2.正确的(de)文字層級關系
工作中我們拿到(dào)的(de)需求總會出(chū)現大(dà)篇幅的(de)文案,不(bù)能像概念設計那樣任性的(de)删減,在(zài)進行文字排版的(de)時(shí)候,正确的(de)處理信息之(zhī)間的(de)層級關系将會提高用戶對信息的(de)識别度。我們通常會通過字體大(dà)小、顔色、留白、層級分割等技巧來(lái)處理,把相同屬性的(de)信息歸類設計,通過留白的(de)不(bù)同達到(dào)層級的(de)區分,讓整個(gè)信息排列主次分明,層級清晰。
3.合理的(de)内容歸納
應該善用色塊和(hé / huò)分割線對頁面的(de)内容進行合理的(de)歸納和(hé / huò)整理。線條通常用于(yú)分割同一(yī / yì /yí)類别或擁有相同屬性的(de)元素;而(ér)色塊更多的(de)是(shì)用于(yú)分割不(bù)同類别或者區分不(bù)同屬性的(de)元 素,以(yǐ)達到(dào)層次清晰,歸類明确的(de)目的(de)。但是(shì)所有的(de)一(yī / yì /yí)切都應該服務于(yú)信息的(de)準确表達,切忌不(bù)可爲(wéi / wèi)了(le/liǎo)視覺上(shàng)的(de)協調而(ér)強行的(de)合并或折疊。
4.預估内容承載範圍
新人(rén)總是(shì)會忘記規範信息呈現的(de)邊界寬度。程序在(zài)開發的(de)時(shí)候總會問,你這(zhè)個(gè)超過長度之(zhī)後如何顯示。有一(yī / yì /yí)些程序更是(shì)直接用右圖的(de)”…”顯示。但是(shì)在(zài)這(zhè)樣的(de)情況下,作爲(wéi / wèi)地(dì / de)址這(zhè)樣的(de)簡單信息的(de)展示,還需要(yào / yāo)用戶去點擊一(yī / yì /yí)次才能看見全部地(dì / de)址,明顯是(shì)不(bù)合理的(de)交互。因此我們在(zài)設計界面應該要(yào / yāo)考慮到(dào)超過展示邊界的(de)時(shí)候該如何展示,如何取舍。
5.尊重App用戶的(de)使用習慣
許多App的(de)設計師都是(shì)由網頁設計師轉行而(ér)來(lái)的(de),但是(shì)App界面有其特殊性。它界面小,過小的(de)按鈕無法像鼠标一(yī / yì /yí)樣能夠精确點擊。因爲(wéi / wèi)有一(yī / yì /yí)些網頁的(de)設計習慣不(bù)應該帶到(dào)App的(de)設計中來(lái),這(zhè)也(yě)是(shì)交互設計師在(zài)App的(de)設計過程中需要(yào / yāo)去把關和(hé / huò)注意的(de)。