手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

移動(dòng)端界面中的版式設(shè)計(jì)原理(上)

2016-1-4    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

justinlam:“我總覺(jué)得頁(yè)面不太好看但是我又說(shuō)不出來(lái)”,“我不懂設(shè)計(jì),但是我就是覺(jué)得不協(xié)調(diào)”,“你覺(jué)得這好看?你的審美要加強(qiáng)啊”這些 聽(tīng)著熟悉的話往往是產(chǎn)品和設(shè)計(jì)產(chǎn)生矛盾的開(kāi)端。還有一種評(píng)價(jià)叫說(shuō)不出哪里好也說(shuō)不出哪里不好,相信很多人也有過(guò)感同身受的無(wú)奈。

其實(shí)設(shè)計(jì)本身就是一門理性的學(xué)科,審美因人而異,只有言之有理的設(shè)計(jì)才能夠說(shuō)服別人。當(dāng)設(shè)計(jì)師拿到產(chǎn)品的原型開(kāi)始做設(shè)計(jì)時(shí),如果只是單純的按照原型進(jìn)行而不考慮任何規(guī)則,那么很多時(shí)候就會(huì)產(chǎn)生一些不協(xié)調(diào)的結(jié)果。設(shè)計(jì)完之后產(chǎn)品不滿意,自己也不滿意。

UI設(shè)計(jì)中其實(shí)也存在大量的版式設(shè)計(jì)原理,如果產(chǎn)品和設(shè)計(jì)都能對(duì)版式設(shè)計(jì)有一定的了解,那么設(shè)計(jì)師拿到原型的時(shí)候,評(píng)審設(shè)計(jì)輸出稿的時(shí)候大家都能更好地理解對(duì)方的設(shè)計(jì)。以下我總結(jié)了幾種常見(jiàn)的版式設(shè)計(jì)原理,是工作當(dāng)中做出良好視覺(jué)效果的前提。

1. 信息的排布

對(duì)任何信息進(jìn)行排布的時(shí)候,首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比,貫穿設(shè)計(jì)的四大原則。

對(duì)齊除了能建立一種清晰精巧的外觀,還能方便開(kāi)發(fā)的實(shí)現(xiàn)?;趶淖笊现劣蚁碌拈喿x習(xí)慣,移動(dòng)端界面中內(nèi)容的排布通常使用左對(duì)齊和居中對(duì)齊,表單填寫的輸入項(xiàng)使用右對(duì)齊。

設(shè)計(jì)和做其他事情一樣,也要有輕重緩急之分,不要讓用戶去找重點(diǎn)/需要注意的地方,應(yīng)該讓用戶流暢地接收到我們想要傳達(dá)的重要的信息。重復(fù)和對(duì)比是 一套組合拳,讓設(shè)計(jì)中的視覺(jué)元素在整個(gè)設(shè)計(jì)中重復(fù)出現(xiàn)既能增加條理性也可以加強(qiáng)統(tǒng)一性,降低用戶認(rèn)知的難度。那么在需要突出重點(diǎn)的時(shí)候就可以使用對(duì)比的手 法,例如圖片大小的不同或者顏色的不同表示強(qiáng)調(diào),讓用戶直觀地感受到最重要的信息。

在排布復(fù)雜信息的時(shí)候,如果沒(méi)有規(guī)則地排布那么文本的可讀性就會(huì)降低。組織信息可以根據(jù)親密性的原則,把彼此相關(guān)的信息靠近,歸組在一起。如果多個(gè)項(xiàng)相互之間存在很近的親密性,它們就會(huì)成為一個(gè)視覺(jué)單元,而不是多個(gè)孤立的元素。這有助于減少混亂,為讀者提供清晰的結(jié)構(gòu)。

設(shè)計(jì)表達(dá)的時(shí)候,一定要考慮內(nèi)容的易讀性。適當(dāng)使用圖形可以增加易讀性和設(shè)計(jì)感,而且圖形的理解比文字更。那些用文字方式表現(xiàn)時(shí)顯得冗長(zhǎng)的說(shuō)明,一旦換成可視化的表現(xiàn)方式也會(huì)變得簡(jiǎn)明清晰,可視化的圖形可以將說(shuō)明/標(biāo)題/數(shù)值這種比較生硬的內(nèi)容,以比較柔和的方式呈現(xiàn)出來(lái)。

2. 圖片的使用

App的頁(yè)面結(jié)構(gòu)和文本確定之后,就要開(kāi)始安排圖標(biāo)/按鈕/圖片的安排了,這時(shí)頁(yè)面也就從單純文本的“閱讀”型結(jié)構(gòu)調(diào)整為“觀看”型結(jié)構(gòu),對(duì)于頁(yè)面 的易讀性以及頁(yè)面整體的效果會(huì)產(chǎn)生巨大的影響。頁(yè)面中圖片所占的比率叫做圖版率,通常情況下降低圖版率會(huì)給人一種寧?kù)o典雅、高級(jí)的感覺(jué)。提升圖版率會(huì)有充 滿活力,使畫面有富有感染力的效果。

實(shí)際中也跟選取圖片的元素/色調(diào)/表達(dá)出來(lái)的情感有關(guān)系,合適的圖片也能散發(fā)出整個(gè)應(yīng)用的氣質(zhì),直接傳達(dá)給人“高級(jí)”,“平民化”,“友好”等不同的感覺(jué)。

在內(nèi)容比較少但是又想提高版面率的話可以采用一些色塊,或者抽象化模擬現(xiàn)實(shí)存在的物件,例如電影票,書本紙張,優(yōu)惠券,便簽等的效果,使界面更友好 也降低空洞的感覺(jué)。通過(guò)這種方式也可以改變頁(yè)面所呈現(xiàn)出的視覺(jué)感受,只是這種方法最多改變頁(yè)面的色調(diào)/質(zhì)感,并不能改改變“閱讀”內(nèi)容的比例,這點(diǎn)是需要 注意的。

3. 顏色的使用

不同的顏色可以帶給用戶不同的感覺(jué),這點(diǎn)應(yīng)該是常識(shí)。在移動(dòng)端界面中通常需要選取主色,標(biāo)準(zhǔn)色,點(diǎn)晴色。移動(dòng)端與網(wǎng)頁(yè)端稍微不同,主色雖然是決定了 畫面風(fēng)格的色彩但是往往不會(huì)被大面積的使用。通常在導(dǎo)航欄/部分按鈕/icon/特殊頁(yè)面等地方出現(xiàn),會(huì)有點(diǎn)晴,定調(diào)的作用。統(tǒng)一的主色調(diào)也能讓用戶找到 品牌感的歸屬,例如網(wǎng)易紅/騰訊藍(lán)/京東紅/阿里橙等等。標(biāo)準(zhǔn)色指的是整套移動(dòng)界面的色彩規(guī)范,確定文本/線段/圖標(biāo)/背景等等的顏色。點(diǎn)晴色通常會(huì)用在 標(biāo)題文本/按鈕/icon等地方,通常起強(qiáng)調(diào)和引導(dǎo)閱讀的作用。

主色在選擇上可能不止一個(gè),點(diǎn)睛色通常也由兩三個(gè)顏色組成,標(biāo)準(zhǔn)色更是一套從強(qiáng)到弱的標(biāo)準(zhǔn)群,那么在點(diǎn)晴色與主色,主色與主色之間的選擇上便有不同的方法。第一種是鄰近色配色(色相環(huán)上鄰近的顏色),這種方法比較常用因?yàn)樯嗳岷瓦^(guò)渡也非常自然。

第二種是同色系配色(色相一致,飽和度不同),主色和點(diǎn)晴色都在統(tǒng)一的色相上,給用戶一種一致化的感受。

第三種是點(diǎn)亮色配色,主色用相對(duì)沉穩(wěn)的顏色,點(diǎn)晴色采用一個(gè)高亮的顏色,起帶動(dòng)頁(yè)面氣氛,強(qiáng)調(diào)重點(diǎn)的作用。

第四種是中性色配色,用一些中性的色彩為基調(diào)搭配,弱化干擾。這種方法在移動(dòng)端是最常見(jiàn)的方法。

還有一些漸變,明暗調(diào)對(duì)比,多色搭配等方法在這里不一一說(shuō)明,你感受一下。

未完待續(xù)。

內(nèi)容預(yù)告:

4. 留白的藝術(shù)
5. 視覺(jué)心理的靈活運(yùn)用
6. 沒(méi)有設(shè)計(jì)的設(shè)計(jì)

相關(guān)推薦:
如何搞定應(yīng)用界面設(shè)計(jì)-構(gòu)圖篇
版式在移動(dòng)界面中的應(yīng)用
設(shè)計(jì)的骨骼:版式設(shè)計(jì)中的點(diǎn)線面構(gòu)成

原文地址:zhuanlan.zhihu

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔