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