在這篇文章中,
濟(jì)南網(wǎng)站建設(shè)公司小編將從色彩、圖形、插畫、字體、圖標(biāo)五個(gè)維度講述了成功設(shè)計(jì)的五大要素,如何打造UI,如何成功打造UI。
什么是UI
UI是用戶界面的縮寫。一般是指用戶的操作界面,包括移動(dòng)APP、網(wǎng)頁、智能穿戴設(shè)備等。上海vi設(shè)計(jì)公司肖斌表示,UI設(shè)計(jì)主要是指界面風(fēng)格、美觀程度。另一方面,人機(jī)交互的整體設(shè)計(jì)、軟件的操作邏輯和優(yōu)美的界面也同樣重要。一個(gè)好的UI不僅要使軟件具有個(gè)性化的味道,還要使軟件的操作變得舒適、簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。
顏色
毫無疑問,每年都有很多產(chǎn)品的更新,或者迭代會(huì)更新顏色,好的顏色可以讓人記憶深刻,平庸的顏色只會(huì)讓人忽視,所以在塑造一個(gè)的時(shí)候,顏色一定不要土,要讓人記住。
顏色必須符合產(chǎn)品目標(biāo)。如果你的產(chǎn)品主要由年輕人組成,比如instagram,你的顏色可以更加飽和和明亮。如果你的產(chǎn)品更具有商業(yè)包容性,它可以是Facebook的藍(lán)色。
Adobe產(chǎn)品每年更新迭代,2年改變,目的是區(qū)分這些不同版本,你可以發(fā)現(xiàn)年度更新除了更新的視覺風(fēng)格,整體顏色也更新,版本的PS顏色是更多的業(yè)務(wù),更穩(wěn)定,和潘通色卡時(shí)尚顏色非常接近!
在這些公司每年的升級(jí)中,他們都會(huì)關(guān)注顏色的更新和迭代。一方面,他們會(huì)占據(jù)用戶心中的色彩,如微信綠、支付寶藍(lán)、美團(tuán)黃、淘寶橙。另一方面,他們的目標(biāo)是讓與戰(zhàn)略更緊密地聯(lián)系在一起。
2019年更明顯的例子應(yīng)該是美團(tuán)黃。由藍(lán)色、綠色逐漸過渡到黃色,顏色由LOGO過渡到主頁,讓用戶能夠清晰的感知到變化。
所以當(dāng)我們需要重塑必須優(yōu)先考慮顏色,因?yàn)轭伾歉菀赘兄娜?也是更明顯的意義上,淘寶每年修訂是的改變顏色,從平面橙色是調(diào)整的梯度,從漸變到現(xiàn)在版本的白色,每次都是讓用戶理解清楚。
圖形
除了色彩、紙板、圖像等的優(yōu)化之外,還有一個(gè)非常重要的元素就是形狀,這一點(diǎn)很容易被很多設(shè)計(jì)師忽視,其實(shí)圖形也是情感化的。
我們?cè)诮缑嬷薪?jīng)常使用的卡片、按鈕、菜單、圖像等都是由形狀組成的。這一點(diǎn)在材料設(shè)計(jì)中得到了明確的強(qiáng)調(diào)。的谷歌材質(zhì)設(shè)計(jì)清楚地告訴設(shè)計(jì)師,我們需要使用形狀來增加的吸引力!
設(shè)計(jì)中突出了圓形浮動(dòng)操作按鈕和下沉式應(yīng)用導(dǎo)航條。
所選的卡具有表示其所選狀態(tài)的曲線弧。
如果你想讓你的產(chǎn)品在競(jìng)爭(zhēng)中脫穎而出,除了顏色,形狀是一個(gè)很好的表達(dá)方式,一致的形狀與顏色可以為帶來良好的記憶點(diǎn)。
不同的圖形,通過用戶心理的感覺是不一樣的,三角形是一個(gè)充滿活力和動(dòng)態(tài)的表達(dá),通常與方向有關(guān),三角形圖形會(huì)吸引我們的眼睛自動(dòng)根據(jù)位置和取向不同的三角形是完全不同的視覺感知,等邊三角形給人穩(wěn)定平衡的感覺,倒三角形給人看起來像冒險(xiǎn)和容易緊張的感覺!
矩形和圓角是更常用的,很多產(chǎn)品在生活中也都是由這些圖形組成的,手機(jī)、電腦、書籍、相機(jī)等都是矩形組織,矩形的形狀和直角給人以可靠性和安全性!此外,包豪斯的建筑風(fēng)格主要是直角和圓角,所以如果你的產(chǎn)品有一種安全感和性,那么就使用矩形和圓角
圓與太陽和地球的性質(zhì)密切相關(guān),橢圓與宇宙相似。因此,圓形給人一種永恒、未來、神秘的感覺。與其他人物不同的是,圓圈更柔和。
因?yàn)橐粋€(gè)圓沒有結(jié)束,軟線,特別是國內(nèi)手機(jī)的形狀變得越來越圓和手機(jī)的屏幕適應(yīng)更靈活,在許多運(yùn)動(dòng),年輕,基本圓可以被看作是產(chǎn)品設(shè)計(jì)的主要趨勢(shì)圖形的使用,手道是一個(gè)非常好的情況下,從“道”這個(gè)詞標(biāo)志一個(gè)點(diǎn),進(jìn)入界面圓形符號(hào),等等!因此,當(dāng)你需要升級(jí)你的設(shè),請(qǐng)記住,圖形永遠(yuǎn)不應(yīng)該被忽視。
除了上面的圖形,還有各種各樣的自然圖形,如樹葉、花朵、動(dòng)物等等。這些圖形往往被設(shè)計(jì)師和藝術(shù)家作為創(chuàng)意的靈感來源,因?yàn)樽匀坏男螤钣幸粋€(gè)明確的意義,使人與自然聯(lián)系!作為設(shè)計(jì)師,我們需要了解這些圖形的視覺效果,然后將它們應(yīng)用到我們的設(shè)計(jì)中!
插圖
插圖的也是一個(gè)非常重要的因素,都在界面設(shè)計(jì)中,還是在營銷很多情況下我們都需要插圖創(chuàng)建氛圍和氣質(zhì),我們的產(chǎn)品說明將幫助我們的故事向觀眾,所以在構(gòu)建,說明是非常重要的一個(gè)點(diǎn),但我們必須盡可能地了解之前,我們?yōu)榭蛻籼峁┑脑O(shè)計(jì)價(jià)值,只有通過理解用戶價(jià)值,去定義專題報(bào)道,幫助產(chǎn)品!
字體
自從騰訊在20周年紀(jì)念日發(fā)布騰訊字體以來,越來越多的公司在他們的升級(jí)中加入了字體。
阿里巴巴2019年番干預(yù)會(huì)議阿里普惠的身體,為了解決物質(zhì)需求和版權(quán)的高成本之間的矛盾,字體采用現(xiàn)代簡(jiǎn)潔的中風(fēng),適用于多種業(yè)務(wù)場(chǎng)景,字體不是一個(gè)單純的某些es或擴(kuò)展中文字體的造型特點(diǎn),但在九個(gè)作為切入點(diǎn),身體感覺單詞轉(zhuǎn)換身體感覺和弦字體樣式。
OPPO字體,隨著整個(gè)的升級(jí),OPPO也更新了自己的字體,圍繞科技之美進(jìn)行探索,以獨(dú)特的語言打造出標(biāo)志性、與眾不同的體驗(yàn)。
小米發(fā)布了小米蘭亭體,整個(gè)字體可以動(dòng)態(tài)改變厚度是一大創(chuàng)新,可以看出現(xiàn)在的設(shè)計(jì)越來越難做,作為一個(gè)大公司的設(shè)計(jì),一套專屬的字體似乎已經(jīng)成為了標(biāo)準(zhǔn)。
有條件的設(shè)計(jì)字體團(tuán)隊(duì),我們應(yīng)該學(xué)會(huì)借鑒!另一個(gè)是要注意字體版權(quán)。
圖標(biāo)
圖標(biāo)是界面除文字外經(jīng)常使用的一點(diǎn),一個(gè)好的圖標(biāo)能把產(chǎn)品的特點(diǎn)體現(xiàn)得淋漓盡致!
讓我們來看看設(shè)計(jì)師如何結(jié)合元素到圖標(biāo)使用一個(gè)實(shí)際的例子:
這是產(chǎn)品的LOGO,它沒有任何的特點(diǎn),一眼就能看出來,但是設(shè)計(jì)師從LOGO中挖掘出一個(gè)圖形,也就是半圓弧的圖形作為創(chuàng)意點(diǎn)進(jìn)行設(shè)計(jì),然后將這個(gè)圖形運(yùn)用到各個(gè)場(chǎng)景中!
在這組圖標(biāo),圓角元素,圖標(biāo)和商標(biāo)的顏色匹配,保持黃色標(biāo)識(shí)元素,與此同時(shí),圖標(biāo)的弧度的弧線,使用相對(duì)較大和軟角,整個(gè)標(biāo)志匹配。
作為一名設(shè)計(jì)師,除了滿足產(chǎn)品的功能設(shè)計(jì)之外,賦予你所負(fù)責(zé)的產(chǎn)品以個(gè)性和生命力也是我們作為產(chǎn)品設(shè)計(jì)師的必要職責(zé)和能力。讓我們回顧一下今天的內(nèi)容,如何在UI中建立,通過以下幾個(gè)維度:
1.顏色(特色色,不太常見)
2.形狀(合理使用形狀特征和定義圖形樣式)
3.插畫(符合產(chǎn)品調(diào)性的插畫風(fēng)格)
4.字體(定義獨(dú)特的字體,或選擇一種)
5.圖標(biāo)(根據(jù)標(biāo)識(shí)找到帶有特殊符號(hào)的圖標(biāo))
但事實(shí)上,更比我上面提到的,還包括之前說,圖片,產(chǎn)品功能等等,不會(huì)遙遠(yuǎn),可以做一套模板,濟(jì)南網(wǎng)站建設(shè)公司本系列文章也只是打開你的頭腦和思想,具體怎么做,是我們需要繼續(xù)的項(xiàng)目實(shí)踐。