歡迎來(lái)到培訓(xùn)無(wú)憂網(wǎng)! 鐠囬娅ヨぐ锟� | 閸忓秷鍨傚▔銊ュ斀

全國(guó)切換

咨詢熱線 400-001-5729

位置:培訓(xùn)無(wú)憂網(wǎng) > 新聞資訊 > 電腦/IT > UI設(shè)計(jì) >  7個(gè)維度讓你的UI設(shè)計(jì)更加的優(yōu)秀!

7個(gè)維度讓你的UI設(shè)計(jì)更加的優(yōu)秀!

來(lái)源:培訓(xùn)無(wú)憂網(wǎng) 發(fā)布人:彭二胖

2021-11-02 22:04:40|已瀏覽:178次

UI設(shè)計(jì)

       hello,大家好,很高興又和大家見(jiàn)面了,這段時(shí)間內(nèi)一直在潛心學(xué)習(xí),最近也有很多設(shè)計(jì)伙伴和朋友向我探討,關(guān)于一個(gè)設(shè)計(jì)師應(yīng)該如何去助力產(chǎn)品,提高設(shè)計(jì)價(jià)值呢?
       其實(shí)說(shuō)到設(shè)計(jì)的價(jià)值,它是非常大的,可以從很多不同的維度去出發(fā),每一個(gè)小點(diǎn)都可以作為閃亮的發(fā)光點(diǎn)去助力產(chǎn)品獲得價(jià)值,并且現(xiàn)在互聯(lián)網(wǎng)時(shí)代,多元化思維越發(fā)重要,我們不僅需要在本職范圍內(nèi)去發(fā)光,還需要拓展更多的能力。
       但是我也發(fā)現(xiàn)目前普遍存在一個(gè)很?chē)?yán)重的問(wèn)題,有很多小伙伴設(shè)計(jì)一個(gè)紅包也能扯出一堆增長(zhǎng)模型,這也是因?yàn)殡S著全鏈路、全棧設(shè)計(jì)的噱頭出現(xiàn),以及一系列的模板化思維體系所影響。
       設(shè)計(jì)思維本沒(méi)有對(duì)錯(cuò),但是需要合理的運(yùn)用,并且將設(shè)計(jì)點(diǎn)需要落在實(shí)際的內(nèi)容上,像我們常見(jiàn)的用戶畫(huà)像、體驗(yàn)地圖、情緒版等等,那么我們應(yīng)該如何有效的將設(shè)計(jì)點(diǎn)落實(shí)在內(nèi)容上呢?
視覺(jué)層
       眾所周知,在整個(gè)產(chǎn)品設(shè)計(jì)中,視覺(jué)感受是最直觀的,也是我們作為一名UI設(shè)計(jì)師能直接去影響的,而視覺(jué)層面的內(nèi)容基本可以劃分為六個(gè)點(diǎn),也就是我們常常所說(shuō)的 - 形色字構(gòu)質(zhì)動(dòng)
       在很多的設(shè)計(jì)運(yùn)用場(chǎng)景中,這六點(diǎn)都是作為比較基礎(chǔ)的內(nèi)容,像一些視覺(jué)語(yǔ)言制定上,而產(chǎn)品設(shè)計(jì)的過(guò)程中,縱使有再多的方法論和思維體現(xiàn),最終都需要通過(guò)視覺(jué)的表現(xiàn),所以我打算利用這幾點(diǎn)去深入挖掘,也許可以找到更多的設(shè)計(jì)發(fā)力點(diǎn)。
       形也就是設(shè)計(jì)中最基礎(chǔ)的圖形元素,在平面和品牌設(shè)計(jì)中經(jīng)常可以見(jiàn)到,像一些點(diǎn)線面、圖形構(gòu)成等等,而回到產(chǎn)品設(shè)計(jì)中呢,最典型的形就是我們經(jīng)常見(jiàn)到的圖標(biāo),那除此之外,形還有哪些體現(xiàn)方式呢?
1.1 插畫(huà)
       圖形的設(shè)計(jì)表現(xiàn)中,我第一個(gè)聯(lián)想到的就是插畫(huà),但是插畫(huà)的類(lèi)型和使用方式也分為很多種。
1.1.1 功能插畫(huà)
       首先我們先設(shè)想一個(gè)場(chǎng)景,當(dāng)我們接觸到一個(gè)新鮮的事物時(shí),我們首先需要快速的了解他,我們可以通過(guò)產(chǎn)品說(shuō)明書(shū)、產(chǎn)品結(jié)構(gòu)圖,場(chǎng)景使用模擬等不同的方式來(lái)表現(xiàn)。
       因此在一些服務(wù)頁(yè)面或新功能介紹中,都會(huì)適當(dāng)?shù)娜谌牍δ懿瀹?huà),而這種表現(xiàn)形式可以使得界面展示更直觀,快速的讓用戶理解所描繪的功能含義,減少用戶學(xué)習(xí)成本。
1.1.2 場(chǎng)景插畫(huà)
       像一些頁(yè)面中還可以利用場(chǎng)景插畫(huà)去表現(xiàn),不僅可以打造內(nèi)容的差異性,還可以快速讓用戶融入到場(chǎng)景中,進(jìn)一步提升用戶的情感體驗(yàn)。
1.2 品牌強(qiáng)化
       品牌設(shè)計(jì)的目的就是為了利用圖形化的元素,去加強(qiáng)用戶的記憶,而隨著產(chǎn)品發(fā)展成熟,為了可以非常有效的去強(qiáng)化品牌,形成產(chǎn)品間的差異性,設(shè)計(jì)在表現(xiàn)層可以利用不同的形式去強(qiáng)化品牌。
1.2.1 風(fēng)格延展
       設(shè)計(jì)表現(xiàn)上可以賦予產(chǎn)品非常明確的設(shè)計(jì)風(fēng)格,例如抖音的故障風(fēng)格,在圖標(biāo)、插畫(huà)、活動(dòng)頁(yè)面都有很好的延展,這也賦予了很深的產(chǎn)品印象,甚至有很大一部分用戶看到故障風(fēng)格就會(huì)聯(lián)想到抖音。
1.2.2 品牌應(yīng)用
       除此之外也可以利用品牌元素進(jìn)行一定的延展設(shè)計(jì),像Logo圖形可以用到很多的圖標(biāo)和默認(rèn)圖上,或者也可以使用品牌形象,在一些界面的提示信息、內(nèi)容引導(dǎo)、以及一些插畫(huà)繪制上,都可以進(jìn)行有效的融入,進(jìn)一步達(dá)到品牌延展的功能。
1.3 元素滲透
       那么說(shuō)到延展,其實(shí)我們也可以針對(duì)一種元素進(jìn)行適當(dāng)?shù)难诱梗瑢⑺枰w現(xiàn)的內(nèi)容進(jìn)行強(qiáng)滲透,從而進(jìn)一步打造內(nèi)容的專(zhuān)屬調(diào)性,以及強(qiáng)化用戶的心智。
       下面的案例來(lái)自攜程精選榜單,而在整個(gè)入口、詳情頁(yè),均采用鉆石元素貫穿到整個(gè)頁(yè)面當(dāng)中,不僅可以使得畫(huà)面更加具有視覺(jué)沖擊力,也可以使得鉆石品質(zhì)的氛圍在頁(yè)面中多次露出,進(jìn)而加深頁(yè)面品質(zhì)感。
1.4 數(shù)據(jù)可視化
       圖形的表現(xiàn)還有一個(gè)非常重要的內(nèi)容體現(xiàn),那就是數(shù)據(jù)圖表。在一些工具型或B端產(chǎn)品中,都會(huì)有著大量數(shù)據(jù),而為了讓產(chǎn)品使用更高效,我們可以利用這種形式來(lái)展示。
       但每一個(gè)結(jié)構(gòu)不同的圖表,所側(cè)重的功能都是不一樣的,有的偏向于于數(shù)據(jù)對(duì)比,有的偏向于連續(xù)變化數(shù)據(jù),有的偏向于占比情況等等,因此在使用的過(guò)程中需要區(qū)分內(nèi)容的側(cè)重以及用戶對(duì)數(shù)據(jù)使用的傾向。
色彩
       在現(xiàn)實(shí)中,顏色賦予了這個(gè)世界繽紛多彩,它是我們?nèi)庋圩钪庇^的感受。在設(shè)計(jì)中,顏色是尤為關(guān)鍵的一部分,它賦予了內(nèi)容不同的表現(xiàn)形式。
       顏色的學(xué)問(wèn)也比較廣泛,除了我們常說(shuō)的色彩關(guān)系、顏色搭配等等一系列之外,色彩上到心理學(xué)、下到用戶體驗(yàn),涉及的范圍十分全面,那接下來(lái)我們就來(lái)感受一下色彩的美妙吧~
2.1 色彩體驗(yàn)
      生活中有著不同的顏色,例如黃昏與清晨、深夜與極光,都有著不同的色彩傾向。除此之外,色彩心理學(xué)中介紹,不同的顏色給予用戶不同的心理感受。
2.1.1 色彩心理學(xué)
       例如我們常常所說(shuō)的金色表示尊貴,這就好比現(xiàn)實(shí)生活中的金銀銅牌,他們利用不同的顏色去體現(xiàn)內(nèi)容的品質(zhì),我們恰好可以利用這種顏色運(yùn)用到會(huì)員、勛章等內(nèi)容中,去凸顯會(huì)員的尊享感、情感化,進(jìn)一步強(qiáng)化用戶的身份感知。
2.1.2 暗黑模式
        顏色的感受也可以利用到全局的設(shè)計(jì)配色上,我相信大家肯定都非常熟悉前段時(shí)間非�;鸨陌岛谀J剑@就是利用不同的顏色來(lái)打造特殊的模式,而暗黑模式可以使得用戶在黑夜也能舒適的使用產(chǎn)品,并且一定程度上節(jié)約手機(jī)的電耗。
        但不是所有的深色系產(chǎn)品都是暗黑模式,我們也可以利用這種顏色搭配打造不同的產(chǎn)品氛圍與特色。例如抖音、MOO音樂(lè)等等。
2.1.3 無(wú)障礙設(shè)計(jì)
        并且隨著互聯(lián)網(wǎng)的發(fā)展,用戶群體逐漸龐大,其中也有部分身體有局限的用戶,對(duì)于他們來(lái)說(shuō)更加迫切通過(guò)互聯(lián)網(wǎng)獲取信息,因此越來(lái)越多大公司注重到這一方向,而這也是我們作為一名設(shè)計(jì)師,更應(yīng)該去優(yōu)化的方向。
       可以采用無(wú)障礙色系,以及顏色的色差處理,針對(duì)性的服務(wù)于色盲和色弱群體,使得他們可以在信息閱讀上更符合他們的習(xí)慣,從而進(jìn)一步打造更人性化的產(chǎn)品體驗(yàn)。
2.2 沉浸式體驗(yàn)
       色彩搭配講究顏色統(tǒng)一、協(xié)調(diào),在一些界面中,我們可以利用這種色彩技巧去營(yíng)造氛圍,可以有效的提高界面沉浸感,但是產(chǎn)品中由于內(nèi)容的差異無(wú)法固定顏色,而這也會(huì)導(dǎo)致顏色統(tǒng)一性較難處理,因此可以利用代碼的能力判斷封面色彩傾向,從而進(jìn)行填色,例如豆瓣app。
       不僅如此,我們也會(huì)時(shí)�?吹筋^部背景圖和banner圖的色彩也會(huì)統(tǒng)一處理,這是單獨(dú)配置了一張背景圖,從而達(dá)到頁(yè)面頭部的協(xié)調(diào)性。
字體
       字體在設(shè)計(jì)中占有很重要的一部分,在UI設(shè)計(jì)中也是最為關(guān)鍵的信息傳遞載體之一,而關(guān)于字體的內(nèi)容也是十分廣泛的,下面我將從字體排版、字體設(shè)計(jì)和字體內(nèi)容三個(gè)方向來(lái)分享我的心得。
3.1 字體排版
       字體排版中的字體行高、間距、段落等等,這些都是一名設(shè)計(jì)師必須去掌握的基礎(chǔ),但是有一些看似簡(jiǎn)單的規(guī)則,卻常常會(huì)被忽略。
3.1.1 避首位法則
       例如下面案例中的結(jié)尾標(biāo)點(diǎn)符號(hào)在首,這個(gè)是避首位法則中最關(guān)鍵的內(nèi)容,那為了解決這種方式,我們可以利用「推出式避頭尾」,這也是目前主流的方式之一,利用這種換行的形式避免問(wèn)題,但是往往會(huì)形成句尾參差不齊。
       因此我們可以利用「優(yōu)先推入式」標(biāo)點(diǎn)擠壓的方式,將標(biāo)點(diǎn)符號(hào)進(jìn)行空間擠壓,這樣可以在很大程度上確保文字在合適的版心內(nèi)整齊一致。
3.1.2 空格處理
       空格是我們平時(shí)接觸最多的一種字符了,常使用與內(nèi)容分割中,但是在排版中有很多場(chǎng)景也會(huì)用到空格。
       例如英文排版中的點(diǎn)號(hào)后面需要加空格,不然會(huì)導(dǎo)致語(yǔ)句之間過(guò)于擁擠,而中英文結(jié)合的時(shí)候,之間也是需要空格進(jìn)行分割處理,除此之外中文和數(shù)字之間也是如此。
3.2 字體類(lèi)型
        字體的類(lèi)型分為很多種,而常規(guī)的界面信息展示中,一般都采用無(wú)襯線字體,但個(gè)別產(chǎn)品利用特殊字體去傳遞產(chǎn)品的氣質(zhì),例如閱讀產(chǎn)品中采用襯線字體。
        除此之外, 大廠也紛紛設(shè)計(jì)屬于自己的專(zhuān)屬字體,通過(guò)這樣的方式去強(qiáng)化自身的品牌感。
        一年前的MIUI11版本更新,最重磅的內(nèi)容即是推出動(dòng)態(tài)字體,用戶可以自由選擇字體粗細(xì),同時(shí)為了讓界面的美觀度及文本識(shí)別性不會(huì)被破壞掉。
3.3 字體內(nèi)容
        既然聊到字體,那我們順便再來(lái)談?wù)劷诒容^火的微文案,雖說(shuō)內(nèi)容聽(tīng)起來(lái)側(cè)重于文案策劃,但是其目的是為了優(yōu)化用戶體驗(yàn),甚至提高轉(zhuǎn)化率等等,那么作為一名設(shè)計(jì)師,我們更應(yīng)該去關(guān)注這樣的內(nèi)容。
3.3.1 情感文案
        而微文案的體現(xiàn)也分為兩個(gè)部分,例如下圖中所展示的情感文案,百度網(wǎng)盤(pán)的會(huì)員到期提示,擬用“藏頭詩(shī)”的形式,渴望留住用戶。
3.3.2 微文案
        除了上面所描述情感文案外,我們還可以利用文案內(nèi)容來(lái)影響用戶行為,往往是這種越細(xì)節(jié)的地方越是存在著成就或破壞用戶體驗(yàn)和轉(zhuǎn)化率的因素,而這些文案一般出現(xiàn)于,提示文案,引導(dǎo)文案,彈窗文案等等,不僅可以解決用戶的疑惑,還能進(jìn)一步引導(dǎo)操作。
結(jié)構(gòu)
        說(shuō)到結(jié)構(gòu),我們一般都會(huì)聯(lián)想到用戶體驗(yàn)五要素中的結(jié)構(gòu)層,他在產(chǎn)品設(shè)計(jì)中更多體現(xiàn)于信息布局和內(nèi)容結(jié)構(gòu)布局,而對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō),更多的感覺(jué)就好像畫(huà)面中的布局與排版。
         結(jié)構(gòu)的內(nèi)容相對(duì)來(lái)說(shuō)還是比較廣泛的,我主要是圍繞界面布局來(lái)進(jìn)行分析,講一些我覺(jué)得還不錯(cuò)的優(yōu)秀案例,希望從這幾個(gè)角度出發(fā),可以帶給大家一些啟發(fā)。
4.1 場(chǎng)景化體驗(yàn)設(shè)計(jì)
         場(chǎng)景化設(shè)計(jì)是體驗(yàn)設(shè)計(jì)中較好的發(fā)力點(diǎn),也是我最近一直在研究的方向,后續(xù)有空我會(huì)單獨(dú)寫(xiě)一篇文章再進(jìn)行深入分析。總的來(lái)說(shuō)呢,場(chǎng)景化設(shè)計(jì)分為多個(gè)側(cè)重點(diǎn),今天分享的內(nèi)容主要圍繞著用戶分層,為不同的用戶設(shè)計(jì)。
4.1.1 用戶需求
       像我們常見(jiàn)的一些首頁(yè)布局中,其實(shí)有也簡(jiǎn)單的分層,我們可以根據(jù)用戶不同的目的來(lái)進(jìn)行布局拆分。
       下面的案例從上到下依次為,目的明確的搜索用戶、分類(lèi)明確的用戶以及只想隨便看看的用戶,這樣的話,可以有效的服務(wù)與不同用戶的目的,也可以快速實(shí)現(xiàn)流量分發(fā)的作用。
4.1.2 用戶行為
        而這兩個(gè)界面都屬于功能服務(wù)類(lèi)界面,用戶去完成某件事的行為也可能會(huì)存在差異,所以我們也可以對(duì)于功能進(jìn)行合適的分層布局。
        下面的案例從上倒下依次為,想快速申請(qǐng)貸款或者快速完成任務(wù)獲取現(xiàn)金的用戶,我們提供了直接操作區(qū)域,并且置于頭部進(jìn)行業(yè)務(wù)屬性強(qiáng)化,中間融入了更多的分類(lèi)與內(nèi)容引導(dǎo),進(jìn)一步激發(fā)用戶的興趣,最后可以再通過(guò)不同的形式適當(dāng)?shù)臏p少用戶顧慮,例如優(yōu)惠券的福利(強(qiáng)化申請(qǐng)貸款),為新用戶提供發(fā)帖示例(確保社區(qū)的內(nèi)容品質(zhì))
        雖然兩個(gè)界面的內(nèi)容差異較大,但是結(jié)構(gòu)拆分的方式以及目的都是大同小異的,主要還是為了滿足不同行為的用戶,進(jìn)一步輔助他們完成功能服務(wù)。
4.1.3 用戶身份
       而關(guān)于用戶分層的場(chǎng)景設(shè)計(jì)中,我們還可以區(qū)分用戶不同的狀態(tài)/身份來(lái)對(duì)界面進(jìn)行差異化布局,下面的案例來(lái)自于百度網(wǎng)盤(pán)會(huì)員界面。
       我們都了解會(huì)員他分為很多不同的階段,而不同階段的用戶,對(duì)于內(nèi)容的關(guān)注上也存在很大的差異的,我們可以從這個(gè)角度出發(fā),區(qū)分用戶的會(huì)員狀態(tài),進(jìn)一步來(lái)進(jìn)行差異化設(shè)計(jì)。從而有效的提高不同階段用戶的行為決策。
4.2 拓展卡片
        論最出色的界面布局結(jié)構(gòu),那滴滴的 xpanel 必定讓人印象深刻,它是一個(gè)將卡片附著于第一信息架構(gòu)層級(jí)上,內(nèi)容上分為“消息卡片”“主體卡片”“拓展卡片”三個(gè)維度,通過(guò)這種方式將一屏內(nèi)搶占的空間通過(guò)簡(jiǎn)易的交互模式補(bǔ)償回來(lái)了,這樣既不打破用戶的核心體驗(yàn),同時(shí)又增強(qiáng)了運(yùn)營(yíng)、功能的玩法與拓展。
        所以我們會(huì)發(fā)現(xiàn)在大部分的打車(chē)、導(dǎo)航產(chǎn)品中,均會(huì)采用這樣的結(jié)構(gòu)布局,這也是對(duì)特定場(chǎng)景垂直領(lǐng)域的深耕和挖掘,尋找“接觸點(diǎn)”,幫助獲取更多的功能、內(nèi)容、服務(wù),實(shí)現(xiàn)業(yè)務(wù)的“有效增長(zhǎng)”。
        而對(duì)于一個(gè)設(shè)計(jì)點(diǎn),在歷經(jīng)了一段時(shí)間的發(fā)展后,也演變出了一系列的其他內(nèi)容,我從這個(gè)點(diǎn)深入出發(fā),圍繞著內(nèi)容和布局進(jìn)行延展。
4.3 內(nèi)容 · 信息流
        眾所周知,產(chǎn)品和運(yùn)營(yíng)都希望我們能在有限的空間中去展示更多的信息,并且有效的給其他功能進(jìn)行導(dǎo)流,因此我們可以根據(jù)長(zhǎng)尾效應(yīng),在無(wú)限長(zhǎng)的信息流當(dāng)中,利用不同的卡片布局,給予不同的活動(dòng)、功能進(jìn)行導(dǎo)流。
4.4 布局 · 半模態(tài)卡片
       上面所說(shuō)到的xpanel,是將卡片附著與信息之上,跟著這個(gè)思路發(fā)展,我們便產(chǎn)生了下圖所示中的半模態(tài)卡片布局,雖然追波之前出現(xiàn)一大批疊上疊上疊中疊的布局,但通過(guò)線上的實(shí)際使用最終發(fā)現(xiàn),疊一層才是比較合理的方式,而這種布局有著良好的空間收納能力與信息拓展能力。
質(zhì)感
質(zhì)感是設(shè)計(jì)師在表
       本文由培訓(xùn)無(wú)憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問(wèn)老師整理發(fā)布,希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無(wú)憂網(wǎng)電腦IT培訓(xùn)或添加老師微信:15033336050

      注:尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.elsolbar.com/news-id-2989.html 違者必究!部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們,了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多,了解相關(guān)專(zhuān)業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多:150 3333 6050

留下你的信息,課程顧問(wèn)老師會(huì)一對(duì)一幫助你規(guī)劃更適合你的專(zhuān)業(yè)課程!
  • 姓名:

  • 手機(jī):

  • 地區(qū):

  • 想學(xué)什么:

  • 培訓(xùn)無(wú)憂網(wǎng)
免 費(fèi) 申 請(qǐng) 試 聽(tīng)
提交申請(qǐng),《培訓(xùn)無(wú)憂網(wǎng)》課程顧問(wèn)老師會(huì)一對(duì)一幫助你規(guī)劃更適合你的專(zhuān)業(yè)課程!