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

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

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