雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

手機(jī)ui設(shè)計(jì)公司需都會(huì)采用的技巧有什么? 共同來(lái)認(rèn)真研究

Time: 2020-05-26

如今手機(jī)已經(jīng)成為人們經(jīng)常使用的設(shè)備之一,為了幫助人們獲得更好的體驗(yàn),ui設(shè)計(jì)技術(shù)便受到了人們的重視,那么,手機(jī)ui設(shè)計(jì)公司需都會(huì)采用的技巧有什么?既然大家對(duì)于這個(gè)問題都非常的重視,自然就需要繼續(xù)看看下面的內(nèi)容。

圖片2.png

手機(jī)ui設(shè)計(jì)公司

  1、ui設(shè)計(jì)的可讀性原則

  文字長(zhǎng)度

  文字的長(zhǎng)度,特別是在大塊空白的設(shè)計(jì)中很重要,太長(zhǎng)會(huì)導(dǎo)致眼睛疲憊,閱讀困難。太短又經(jīng)常會(huì)造成尷尬的斷裂效果,斷字的使用也會(huì)造成大量的復(fù)合詞,這些斷裂嚴(yán)重的影響了閱讀的流暢性。

  空間和對(duì)比度

  每個(gè)字符同線路長(zhǎng)度,間距也是重要的。所以每個(gè)字符之間的空間至少等于字符的尺寸,大多數(shù)數(shù)字設(shè)計(jì)人員習(xí)慣選擇一個(gè)最小的文字大小的150%為空間距離,這就可以留下足夠的空間。當(dāng)每一行中讀取大段的文字,且線路長(zhǎng)度過多或線之間的空間太少,都會(huì)造成理解困難。

  2、手機(jī)ui設(shè)計(jì)公司需都會(huì)采用的技巧有什么

  按鈕色彩凸顯重要性

  在給用戶提供多個(gè)選擇的時(shí)候,可以通過色彩所傳遞的情緒是積極還是消極的,來(lái)簡(jiǎn)單快速地進(jìn)行設(shè)計(jì)。實(shí)際上,紅色和綠色按鈕的色彩含義,已經(jīng)橫跨物理世界和數(shù)字設(shè)計(jì)領(lǐng)域,我們每天在很多實(shí)體產(chǎn)品上也能看到類似的設(shè)計(jì),包括交通上的紅綠燈,警告標(biāo)識(shí),以及實(shí)體按鈕。綠色表示通行,紅色表示禁止。如果用戶需要購(gòu)買一個(gè)漏斗,你希望感興趣的用戶趕緊點(diǎn)擊,而不是取消。另外,如果你的網(wǎng)站或者 APP 涉及到重要性不同的若干交互,除了按鈕都要標(biāo)識(shí)出相應(yīng)的文本標(biāo)簽內(nèi)容以外,還可以借助色彩填充與否來(lái)進(jìn)一步區(qū)分層級(jí)結(jié)構(gòu):

  這是一個(gè)簡(jiǎn)單的示例,有色彩填充的按鈕、幽靈按鈕(無(wú)色彩填充、有邊框)以及無(wú)邊框無(wú)填充按鈕來(lái)區(qū)分。

  而在少數(shù)情況下,對(duì)于系統(tǒng)有重要影響的、破壞性的或者限制性的按鈕,也應(yīng)該突出顯示,但是可以使用紅色來(lái)進(jìn)行強(qiáng)調(diào)和警告。這個(gè)時(shí)候,相對(duì)的「非負(fù)面」的按鈕則被視作為重要性較低的操作:

  簡(jiǎn)而言之,實(shí)際上用戶用來(lái)區(qū)分按鈕的核心靠的是感知而非復(fù)雜邏輯判斷,設(shè)計(jì)的基本規(guī)則在上面,但是更重要的是要基于情緒和感知來(lái)進(jìn)行設(shè)計(jì)。

  用字重和明暗來(lái)區(qū)分層級(jí)

  尤其是在構(gòu)建文本內(nèi)容的視覺層級(jí)的時(shí)候,可用到的屬性很多,只使用大小差異來(lái)構(gòu)建就顯得過于單一了。在很多時(shí)候,可以借助色彩、字重、明暗來(lái)進(jìn)行區(qū)分。我們可以讓更重要的文本更大、字體更粗、色彩更加鮮明,或者使用更深的黑色來(lái)呈現(xiàn)。綜合地使用這些屬性來(lái)構(gòu)建視覺層級(jí)。

圖片3.png

手機(jī)ui設(shè)計(jì)公司

  用留白來(lái)隔離元素

  兩個(gè)元素互不相關(guān),如果想將它們分隔開來(lái),使用分割線似乎是一件理所當(dāng)然的事情?當(dāng)然可以,但是這種方式真的是非常過時(shí)且笨拙的一種呈現(xiàn)方式。你需要的是更好、更優(yōu)雅、更貼合當(dāng)下的一種呈現(xiàn)方式。不是簡(jiǎn)單地使用分割線,而是使用留白,或者說負(fù)空間來(lái)間隔就可以了。分割線在很大程度上是丑陋且難以駕馭的視覺噪音,相對(duì)而言留白則好了很多。多數(shù)情況下,刪除分隔線條是比較快速的方法,當(dāng)然更多的時(shí)候需要你適當(dāng)?shù)卣{(diào)整一下留白的大小。使用分割線來(lái)分隔內(nèi)容,不僅會(huì)讓掃視頁(yè)面花費(fèi)更長(zhǎng)的時(shí)間,而且增加的信息噪音會(huì)影響整體的層次結(jié)構(gòu)。

  用陰影替代邊框

  想要凸顯一些元素,并不一定需要依靠描邊。使用陰影則可以起到同樣的效果,單獨(dú)使用則會(huì)顯得更加整潔。描邊+陰影則會(huì)顯得過于雜亂。使用相對(duì)不那么具有侵略性的小陰影無(wú)疑讓效果更加輕松,看起來(lái)也不會(huì)突兀。

  用色條提升視覺調(diào)性

  如果覺得內(nèi)容區(qū)塊過于單調(diào),可以根據(jù)你的目的來(lái)強(qiáng)化這一區(qū)塊的視覺屬性。在內(nèi)容區(qū)的一邊加上色條能夠在提升視覺屬性的同時(shí),賦予這一區(qū)塊內(nèi)容以情緒。色條可以是單色的,也可以是漸變的,這取決于你想傳達(dá)什么樣的ui視覺體驗(yàn)。這個(gè)色條還可以具備良好的功能性。當(dāng)然,這很大程度是用在相對(duì)比較素的頁(yè)面上的,如果頁(yè)面本身已經(jīng)很花哨了,就不太用得上。比如使用紅色和綠色來(lái)標(biāo)識(shí)不同的狀態(tài),也可以用色條來(lái)標(biāo)識(shí)出被觸發(fā)的 Tab 或者控件。

  用背景色區(qū)分區(qū)塊

  其實(shí),同樣是為了進(jìn)行區(qū)分內(nèi)容區(qū)塊和層級(jí),這個(gè)方法同樣優(yōu)雅而快速,幾乎可以算是毫不費(fèi)力的一種設(shè)計(jì)技巧。為了區(qū)分兩個(gè)不同區(qū)塊的元素,簡(jiǎn)單地使用不同的背景來(lái)進(jìn)行區(qū)分也可以,本質(zhì)上,它采用的類似卡片式設(shè)計(jì)的思路——用不同的卡片來(lái)歸類內(nèi)容。相對(duì)而言,使用有差異但是不那么顯著的不同色塊來(lái)作為背景,在保證整體整潔的同時(shí),起到了區(qū)分的作用。

  字盡其用

  誰(shuí)不喜歡漂亮的字體呢?當(dāng)然都喜歡,但是字體的功用其實(shí)各不相同。從呈現(xiàn)正文的強(qiáng)可讀性文本,到裝飾性極強(qiáng)的視覺化字體,各種不同的字體需要應(yīng)對(duì)不同的功能。

圖片4.png

手機(jī)ui設(shè)計(jì)公司

  簡(jiǎn)單看看幾種不同類型的字體:

  襯線字體:Serif 本身就是襯線的意思,這樣的字體字符的末尾通常是會(huì)有小的裝飾性的襯線。襯線除了裝飾性以外,還能強(qiáng)化字體的可讀性。常見的襯線字體:Georgia,Times New Roman,Cambria。

  非襯線字體:也就是 Sans-Serif 字體,它相對(duì)而言更加現(xiàn)代,襯線被去掉之后,線條感更強(qiáng),更加干凈,也更加貼合數(shù)字時(shí)代的一些顯示需求。常見的非襯線字體:Helvetica,Montserrat,Gotham。

  人們通常會(huì)認(rèn)為,襯線字體更加適宜長(zhǎng)時(shí)間閱讀,它也更多地運(yùn)用在印刷品上。然而襯線字體的襯線和邊角大多更加銳利,在一定程度上會(huì)被視作為視覺噪音。在屏幕分辨率尚且達(dá)不到要求的時(shí)代,襯線字體的顯示問題很大。當(dāng)然,如今屏幕分辨率提高起來(lái)之后,這個(gè)問題幾乎不存在了,只是在小字號(hào)和低分辨率和小屏幕上,依然存在這個(gè)問題。

  手寫字體:手寫字體通常被認(rèn)為是手寫風(fēng)格的字體,在呈現(xiàn)的時(shí)候,常常會(huì)有連寫的筆畫,更貼近傳統(tǒng)的書寫字體所呈現(xiàn)出來(lái)的效果。手寫字體更加隨意和有趣。常見的手寫字體包括:Alex Brush,Great Vibes,Sofia。

  展示性字體:展示性字體是一個(gè)功能導(dǎo)向型的分類,通常指的是用來(lái)作為標(biāo)題展示、用于海報(bào)、徽章等地方的字體,它們表現(xiàn)力更強(qiáng),視覺特征更突出,直言不諱地說就是為了吸引用戶的注意力。常見的展示性字體包括:Algerian,Curlz,Gigi,Umbra。

  手機(jī)ui設(shè)計(jì)公司需都會(huì)采用的技巧有什么?總之,希望上面的內(nèi)容可以很好的解答大家的疑惑,大家是不是都認(rèn)真研究了呢?希望大家可以參考上面內(nèi)容。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開