學(xué)會(huì)這14招,助你產(chǎn)品界面一稿過(guò)
編輯導(dǎo)語(yǔ):對(duì)于一個(gè)優(yōu)秀的產(chǎn)品來(lái)說(shuō),視覺(jué)設(shè)計(jì)是重要的組成部分。本篇文章作者根據(jù)自己自身經(jīng)驗(yàn),分別從排版、文本、品牌、顏色以及陰影五個(gè)方面,來(lái)討論如何提升作品的用戶(hù)體驗(yàn)度。希望對(duì)你有所幫助!
如何從視覺(jué)層面提高用戶(hù)體驗(yàn),我總結(jié)了14點(diǎn),可以幫助在工作中一稿通過(guò)。
一、排版是基礎(chǔ)能力
排版是信息媒介和接收者之間溝通的橋梁,也是設(shè)計(jì)師最為基礎(chǔ)的能力,可以簡(jiǎn)單地把他理解成是一種對(duì)信息進(jìn)行有序的排列方式。
1. 模塊間距3種表現(xiàn)方式
做界面最常用的工具就是縱向網(wǎng)格系統(tǒng),所以做UI中一定要有模塊的概念,模塊也會(huì)被稱(chēng)為“容器”,是承載文字,圖標(biāo)、顏色等元素的一個(gè)載體。
模塊與模塊之間的間距通常會(huì)用線、面、留白三種切割方式來(lái)表示。
2. 留白是很好的表現(xiàn)手法
在設(shè)計(jì)過(guò)程中,我很喜歡使用“留白”這個(gè)表現(xiàn)手法,我們?cè)谠O(shè)計(jì)界面時(shí)候沒(méi)必要把所有的屏幕空間都填滿,在我看來(lái)“留白”是像圖標(biāo)、顏色、圖片一樣重要的設(shè)計(jì)元素,它可以讓整個(gè)設(shè)計(jì)都具有呼吸感。
如下面這個(gè)設(shè)計(jì)案例,你有沒(méi)有覺(jué)得右邊的界面更有呼吸感。
在我眼里蘋(píng)果不僅僅是一家科技公司,更是一家很好的設(shè)計(jì)公司,不僅每年的產(chǎn)品營(yíng)銷(xiāo)案例做得好,產(chǎn)品的設(shè)計(jì)表現(xiàn)能力也是數(shù)一數(shù)二的,像蘋(píng)果的官網(wǎng)就經(jīng)常用“留白”的設(shè)計(jì)手法。
如下面兩幅網(wǎng)頁(yè)設(shè)計(jì)作品,是不是覺(jué)得還是右邊的效果圖看起來(lái)更加大氣,效果更好呢?
3. 對(duì)比&信息整理
做UI設(shè)計(jì)的,最重要的任務(wù)就是想把重要的元素突出頁(yè)面上、把信息清晰高效地傳遞給用戶(hù)。
要做到這點(diǎn)其實(shí)并不難,我就聊一聊我最常用的兩個(gè)設(shè)計(jì)手法——對(duì)比和信息整理。
什么叫對(duì)比,簡(jiǎn)單來(lái)說(shuō)就是不一樣,我們通過(guò)顏色、字體粗細(xì)、空間關(guān)系、形狀等元素把重要的信息凸顯出來(lái)。
如下圖,僅僅是調(diào)整了字體顏色和空間關(guān)系就會(huì)覺(jué)得右邊的信息更高效。
那什么叫信息整理?
這里就要講到四大排版原則中的“親密性”原則了,親密性原則就是將相關(guān)項(xiàng)的信息組織在一起,在一個(gè)頁(yè)面上,通過(guò)位置接近,表示兩者之間存在著關(guān)聯(lián)。
我們對(duì)信息的整理一般會(huì)分為3個(gè)步驟,即“理解、提取、設(shè)計(jì)”。
- 理解:屬于自己的思考階段,思考一下文案的信息各自都代表什么意思,信息之間是否存在關(guān)聯(lián)性。
- 提?。?/strong>這一步,要思考哪些信息是最重要的,哪些信息是次要的,并把信息按照重要程度進(jìn)行排序。
- 設(shè)計(jì):在這一步里,就要用到“親密性”原則了,通過(guò)對(duì)信息的重新整理、排序把信息重新設(shè)計(jì)出來(lái)。如果有必要的話,也可以酌情減少一些多余的信息。
二、文本的間距設(shè)計(jì)規(guī)律
在UI界面中,字號(hào)的大小決定了信息的層次和權(quán)重。層次分明的不同字號(hào)大小的排列,會(huì)讓整體的設(shè)計(jì)變得更加清晰有序。
1. 垂直&有節(jié)奏的間距
在大段落的文章列表場(chǎng)景,對(duì)齊肯定不用講,大家都知道兩邊要留有固定的安全距離,所以文本內(nèi)容肯定是需要垂直對(duì)齊。
關(guān)于節(jié)奏我想聊的是,很多同學(xué)會(huì)認(rèn)為規(guī)范就是固定所以在處理大的段落標(biāo)題、文本中、第二段標(biāo)題、第二段文本之間都會(huì)用了相同的間距,這種做法嚴(yán)格上講并沒(méi)有錯(cuò),只是缺少點(diǎn)節(jié)奏感。
我們倒不知,標(biāo)題和文本之間還是采用固定間距,第一段內(nèi)容和第二段內(nèi)容之間采用更為大一些的間距,來(lái)保證段落與段落之間層級(jí)分明,有更好的視覺(jué)層次結(jié)構(gòu)。
2. 標(biāo)題的行高規(guī)律
標(biāo)題的文案越短小精練、一行展示完畢最好,但是也會(huì)遇到特殊情況需要兩行展示完,如書(shū)名、新聞場(chǎng)景,針對(duì)這種情況就要考慮標(biāo)題的行高問(wèn)題了。
我推薦標(biāo)題的行高是文本字號(hào)的1—1.3倍,你既可以使用文本的默認(rèn)行高去設(shè)計(jì),也可以使用我推薦的規(guī)范去試一試效果,總之,保持規(guī)范一致的前提下以你覺(jué)得合理的規(guī)范去設(shè)計(jì)行高即可。
三、要有品牌元素加入
品牌是一個(gè)很大的課題,如果你想深入地了解,可以看我這篇文章的內(nèi)容《萬(wàn)字拆解為什么你的設(shè)計(jì)沒(méi)有品牌感?》。
1. 加入一些品牌元素
企業(yè)花了很大的成本建立起來(lái)的企業(yè)形象,提煉出來(lái)的品牌logo,作為設(shè)計(jì)師肯定是不能放過(guò)這些資源的。
比如,一些大廠的產(chǎn)品就會(huì)把品牌的logo反復(fù)地出現(xiàn)在產(chǎn)品中,加深用戶(hù)印象。
小米有品:用戶(hù)登錄后進(jìn)入首頁(yè)場(chǎng)景,左上角會(huì)一直顯示這個(gè)“有品”兩字的logo,這樣的設(shè)計(jì)會(huì)加深用戶(hù)印象。
百度瀏覽器:把品牌的logo加入到高頻使用的功能中,如搜索器中,這也是一個(gè)不錯(cuò)的設(shè)計(jì)方案。
之前我們聊過(guò),如果品牌沒(méi)有運(yùn)營(yíng)的支持,那會(huì)給用戶(hù)產(chǎn)品沒(méi)有迭代的感覺(jué),所以在每一次活動(dòng)節(jié)日中也可以把特殊的節(jié)日元素放到界面中。
(1)淘寶
在中秋節(jié)活動(dòng),淘寶的聚劃算頻道把icon變形為中秋賞月GIF版,加深用戶(hù)的視覺(jué)體驗(yàn),吸引用戶(hù)點(diǎn)擊進(jìn)入聚劃算頻道的二級(jí)頁(yè)面。
(2)夸克瀏覽器
在冬奧會(huì)舉辦期間把運(yùn)動(dòng)員的形象和品牌logo結(jié)合,并且在中國(guó)健兒在獲得獎(jiǎng)牌的時(shí)候還會(huì)更新動(dòng)畫(huà)形象。
2. 有場(chǎng)景就加入IP形象
擬人化的IP形象設(shè)計(jì)無(wú)疑是產(chǎn)品與用戶(hù)最有效的溝通工具,很多公司都會(huì)把ip形象放到活動(dòng)運(yùn)營(yíng)中,比如,騰訊組織的99公益日,從2018年設(shè)計(jì)師就在不同公益平臺(tái)把這個(gè)小紅花的形象加入到產(chǎn)品頁(yè)面中。
之后設(shè)計(jì)師巧妙地和集團(tuán)其他產(chǎn)業(yè)線的吉祥物相結(jié)合,輸出不同樣式的設(shè)計(jì)稿,不僅宣傳了99公益日也很好地宣傳了騰訊集團(tuán)的企業(yè)文化。
四、顏色的選擇
顏色是占界面中面積最大的元素,也是用戶(hù)體驗(yàn)最為直觀的一個(gè)設(shè)計(jì)元素。
1. 謹(jǐn)慎使用飽和度高的顏色
雖然高度飽和的顏色,會(huì)讓產(chǎn)品看起來(lái)很好看,但當(dāng)大面積出現(xiàn)很容易讓用戶(hù)產(chǎn)生刺眼的感覺(jué),尤其是有大量文案信息的場(chǎng)景。
如下圖的紅包場(chǎng)景,你會(huì)發(fā)現(xiàn)右側(cè)較為低的飽和度,文案讀起來(lái)更加舒服。
2. 加強(qiáng)對(duì)比使文案更清晰
無(wú)論何時(shí),我們都要盡量保持文案的清晰呈現(xiàn),那如何使較淺的文案在較淺的背景(圖片)上展示呢?
解決辦法很簡(jiǎn)單,如下圖,我們只需要在文案的下面加一層深色的不透明度圖層即可,或者更改文案的顏色也行,總之一點(diǎn),加強(qiáng)文案與背景的對(duì)比就可以了。
3. 背景顏色的選擇
在電商產(chǎn)品中,產(chǎn)品展示圖雖然使用白色或者灰色充當(dāng)背景顏色,會(huì)顯示產(chǎn)品很高級(jí),但是如果想把產(chǎn)品展示多一份趣味性的話,不妨試一試選擇一些和產(chǎn)品相近的顏色,調(diào)整其明度、純度應(yīng)用在背景、文本或者是圖標(biāo)上,這會(huì)使整體的界面年輕活潑起來(lái)。
4. 讓配色展示得高級(jí)點(diǎn)
現(xiàn)在很多電商的圖片都用充滿挑戰(zhàn)的配色去吸引用戶(hù)的眼光,我對(duì)此保留個(gè)人觀點(diǎn),我覺(jué)得還是把商品配圖的顏色設(shè)計(jì)得更為和諧、更為高級(jí)一些,能取得用戶(hù)的信任度,尤其是醫(yī)療或者藥品類(lèi)的產(chǎn)品。
五、合理地使用陰影
在現(xiàn)實(shí)的生活中一個(gè)物體的出現(xiàn)在空間內(nèi)相應(yīng)地就會(huì)有陰影出現(xiàn),雖然我們做的界面是扁平的,但是現(xiàn)在很流行把立體的效果加入到UI界面中,對(duì)于陰影的使用也有幾點(diǎn)注意。
1. 彌撒投影的制作
很多人會(huì)選擇直接在圖層樣式上做投影,但是我更喜歡自己制作彌散投影。
比如下圖,在現(xiàn)有的元素下面再添加等大的元素,將元素縮小至70%——80%,底端對(duì)齊,然后向下豎移6——10個(gè)像素。
然后再給元素添加高斯模糊效果,模糊半徑控制在6~16之間,營(yíng)造item懸停的效果。
2. 給投影加點(diǎn)顏色
學(xué)過(guò)畫(huà)畫(huà)的同學(xué)應(yīng)該都知道,我們?cè)诋?huà)色彩景物的時(shí)候老師都會(huì)在投影里面加一點(diǎn)其他顏色,目的就是讓投影也有色彩傾向。
很多人會(huì)有疑問(wèn),我觀察了啊,投影顏色是黑色的啊,為什么要加顏色,對(duì)這一點(diǎn)有疑問(wèn)的同學(xué)我建議去看看莫奈的《日出》這幅作品。
在我們真實(shí)的世界里面,如果你在一塊白布上面放一個(gè)紅蘋(píng)果,你盯著投影去看,會(huì)發(fā)現(xiàn)投影里面不單單是黑色,還會(huì)具有環(huán)境色,這就是真實(shí)生活中投影的樣子。
我們制作投影效果的時(shí)候也應(yīng)該如此盡量避免使用黑色陰影,還原真實(shí)世界中投影的樣子,比如可以加入一點(diǎn)背景顏色這樣看起來(lái)更加自然。
3. 陰影的拓展
市面上還有一種效果和陰影很像,叫“毛玻璃擬態(tài)”風(fēng)格,因?yàn)檫@種效果注重空間感,有助于產(chǎn)品與用戶(hù)建立界面的層次結(jié)構(gòu)和深度的感覺(jué),像是我們的電視就經(jīng)常會(huì)用這種效果。
后來(lái)又有設(shè)計(jì)師在毛玻璃的基礎(chǔ)上進(jìn)行再設(shè)計(jì),制作出和物理空間中真實(shí)的玻璃一樣的效果,并且很多產(chǎn)品把這種風(fēng)格應(yīng)用到圖標(biāo)上面,增添產(chǎn)品趣味性,緩解用戶(hù)視覺(jué)疲勞感。
六、結(jié)尾
以上是經(jīng)驗(yàn)結(jié)論,大家還需要在實(shí)際工作中積攢自己的經(jīng)驗(yàn),祝大家一稿過(guò)哦~
#專(zhuān)欄作家#
斜杠7濕兄,公眾號(hào):斜杠7濕兄,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。星光不問(wèn)趕路人,時(shí)光不負(fù)有心人,勵(lì)志做一個(gè)知識(shí)的分享者。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
作者舉的例子對(duì)比十分清晰,文章結(jié)構(gòu)流暢,干貨滿滿,謝謝作者的分享。
排版、文本間距、品牌logo到顏色的選擇,一點(diǎn)點(diǎn)的改變視覺(jué)效果就完全不同了,設(shè)計(jì)真的很神奇!
又來(lái)看7師兄的文章了(抱拳)能否建議下怎么提高排版審美?