2021-8-13 ui設(shè)計(jì)分享達(dá)人
對(duì)于一家做項(xiàng)目型的公司而言（今天主要講的是項(xiàng)目性質(zhì)的設(shè)計(jì)工作，產(chǎn)品可以繞道哦），時(shí)間就是成本這句話體現(xiàn)的淋漓盡致。基本上給到UI設(shè)計(jì)的時(shí)間，是少之又少，那么如何在一個(gè)有限的時(shí)間里，設(shè)計(jì)出優(yōu)秀的作品呢？這是接下來我想跟大家一起討論的～
我們都知道用戶體驗(yàn)五要素（戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層），這五大點(diǎn)是一個(gè)個(gè)遞進(jìn)的過程，是一個(gè)從初步的想法到最后落地的過程。也就是說我們最后看到的表現(xiàn)層（UI界面）是如何做出來的，都需要靠前面一點(diǎn)點(diǎn)的去研究、細(xì)化、分析。所以這么一個(gè)強(qiáng)大而繁瑣的過程，我們?nèi)绾我谝粋€(gè)有限的時(shí)間內(nèi)去完成，下面跟大家聊一聊我在實(shí)際工作中的例子。
一、溝通
溝通是一切事物的前提和基礎(chǔ)，這個(gè)溝通一定是要跟客戶的直接溝通，不管是遠(yuǎn)程還是面對(duì)面也好。中間人的傳達(dá)會(huì)加上個(gè)人思想理解的轉(zhuǎn)化，到你這里就不再是一手消息，也許就不會(huì)那么準(zhǔn)確。拿到一個(gè)項(xiàng)目之后，我們要了解項(xiàng)目，所以需要對(duì)項(xiàng)目的背景、目標(biāo)用戶、產(chǎn)品目標(biāo)、核心競爭力進(jìn)行分別分析。
項(xiàng)目背景
為什么設(shè)計(jì)師的背后總是有一群指點(diǎn)江山的人，因?yàn)槲覀兊脑O(shè)計(jì)沒有被體現(xiàn)在產(chǎn)品上，只是表層，每次給別人解釋設(shè)計(jì)理念的時(shí)候總是說“我覺得這樣好看”、“我認(rèn)為這塊應(yīng)該用這個(gè)顏色”，卻沒有說出這個(gè)項(xiàng)目本身想要表達(dá)的是一個(gè)什么理念。
本次項(xiàng)目是需要把手機(jī)版的內(nèi)容改版成PC端，原有需求邏輯不變。那么問題來了，現(xiàn)在是一個(gè)移動(dòng)互聯(lián)網(wǎng)的天下，為什么客戶卻需要將手機(jī)端的內(nèi)容移到PC上呢？因?yàn)檫@個(gè)產(chǎn)品的使用環(huán)境之一就是在工作中，試想一下，工作中一直拿著手機(jī)刷來刷去，不知道的人還以為你在劃水。考慮到用戶使用環(huán)境的因素，就需要有PC端的設(shè)計(jì)。
目標(biāo)用戶
產(chǎn)品的核心是用戶。所以一切要從用戶的角度出發(fā)，做用戶滿意的產(chǎn)品。在用戶調(diào)研這塊，常見的用戶分析有：用戶畫像、一對(duì)一訪談、問卷調(diào)查、焦點(diǎn)小組、眼動(dòng)測試、測評(píng)以及埋點(diǎn)數(shù)據(jù)分析，但是項(xiàng)目型工作周期短，時(shí)間緊，沒有那么多的成本去做大量的分析，所以我們基本上采用三種方式去解決這個(gè)問題。1、與我們的客戶（甲方）去溝通，他們肯定更了解自己的用戶群體；2、通過現(xiàn)在市場上比較知名的網(wǎng)站（艾瑞網(wǎng)）中提供的大數(shù)據(jù)分析出的結(jié)果；3、如果身邊有這種用戶群體可以對(duì)他們進(jìn)行簡單訪談。通過以上三種辦法也是可以得到一個(gè)較為準(zhǔn)確的調(diào)研數(shù)據(jù)的。
在跟客戶的溝通中了解到，我們的主要用戶是基中層領(lǐng)導(dǎo)，目的為提升領(lǐng)導(dǎo)力。下面會(huì)有我對(duì)這部分人群的用戶畫像分析。
項(xiàng)目目標(biāo)
知己知彼，要了解我們此次設(shè)計(jì)的主要目的是什么？需要解決什么問題？
因?yàn)檫@已經(jīng)是一個(gè)已經(jīng)上線一年的產(chǎn)品，我在跟客戶的溝通中很明確了目前有兩大問題：第一是：如何提高完成率；第二是：國外市場用戶使用不習(xí)慣。
這兩個(gè)信息很重要，為后面的設(shè)計(jì)提供了一個(gè)明確的方向。
核心競爭力
這是體現(xiàn)我們產(chǎn)品優(yōu)勢(shì)的地方，我們需要盡量的把產(chǎn)品強(qiáng)有力的能力展現(xiàn)出來，從而獲得目標(biāo)用戶的信賴。把產(chǎn)品的能力、優(yōu)勢(shì)，可以給用戶帶來的價(jià)值，要體現(xiàn)在比價(jià)明顯一些的地方。
此次是一個(gè)本身有強(qiáng)大的體系支撐，有一個(gè)成熟的結(jié)構(gòu)，在此基礎(chǔ)上開發(fā)研制的一套產(chǎn)品，所以產(chǎn)品的目標(biāo)用戶量，獲得的成就就可以直接展示在首頁上，并且把正在學(xué)習(xí)人數(shù)或者為多少人帶來成就都體現(xiàn)出來。讓用戶感受到有這么多人都在努力，有這么多努力的人已經(jīng)完成了自己的目標(biāo)。
二、分析
我首先把手機(jī)版的功能都體驗(yàn)了一遍，隨時(shí)記錄了在使用過程中不喜歡的地方并且可以優(yōu)化的點(diǎn)，這都是點(diǎn)點(diǎn)滴滴的隨記，可以為后面設(shè)計(jì)中提供一些方向或靈感。根據(jù)上面了解到的信息。
可以得到此次設(shè)計(jì)的主要方向，第一：針對(duì)目標(biāo)用戶進(jìn)行用戶畫像分析，以此來確定如何才能更好的提升完成率；第二：針對(duì)國外同類產(chǎn)品分析，對(duì)國外市場用戶使用不習(xí)慣的了解，并且還要結(jié)合國內(nèi)市場優(yōu)化交互體驗(yàn)。
用戶畫像分析
在上面一個(gè)階段了解到我們的用戶群體是基中層領(lǐng)導(dǎo)者。根據(jù)市場數(shù)據(jù)分析，一般基中層領(lǐng)導(dǎo)者主要以男性居多，年齡大概在28-35歲之間，以需要提升領(lǐng)導(dǎo)力為目的，那么從這幾個(gè)特征中我們看出，這些人都有哪些特點(diǎn)呢？首先28-35歲的年齡段，基本上是已經(jīng)結(jié)婚的比較多，并且有很大一部分人群也有了孩子，這個(gè)年齡段的孩子還比較小，基本也是在2-6歲之間較多。對(duì)于這種類型家庭而言，無論是在工作上還是生活上都較為忙碌。并且因?yàn)槭穷I(lǐng)導(dǎo)者的原因，時(shí)間上也較為分散，一天下來沒有辦法集中去做一件事情，開會(huì)、匯報(bào)、溝通需求、分布任務(wù)等。由于不像在學(xué)校，事情太多也太雜，很多時(shí)候沒有辦法安心去做一件事情，導(dǎo)致規(guī)劃能力不強(qiáng)，需要借助平臺(tái)可以有個(gè)推力。
國外同類產(chǎn)品分析
其次是針對(duì)國外市場用戶使用不習(xí)慣這個(gè)問題，我對(duì)國外幾個(gè)大型的相關(guān)網(wǎng)站做了了解。edX、Coursera、Udacity這三個(gè)網(wǎng)站是國外市場使用較多，知名度較大的幾個(gè)網(wǎng)站。分別從內(nèi)容上和視覺上進(jìn)行分析，去了解國外市場的設(shè)計(jì)方式，用戶使用習(xí)慣等。
從以上的分析中最終得出了以下三個(gè)結(jié)論：
1、操作習(xí)慣：這個(gè)與國內(nèi)的差不多，都是從上到下，從左到右呈Z字形排列布局的方式，視覺的落腳點(diǎn)都會(huì)在畫面的左上方，所以我們?cè)谠O(shè)計(jì)的時(shí)候，要把重要或者想要表達(dá)的內(nèi)容放在這個(gè)位置，使用戶進(jìn)入頁面后就可以很快看到它。
2、采用Complexion Reduction設(shè)計(jì)語言：將標(biāo)題放大，制造視覺上的沖擊力，拉開頁面的層級(jí)關(guān)系，這種設(shè)計(jì)方式也是國外較喜歡、較常用的一種設(shè)計(jì)方式。
3、視覺風(fēng)格：國外網(wǎng)站的設(shè)計(jì)整體留白較多，讓頁面更有呼吸感，頁面上幾乎沒有無用的裝飾性元素，非常簡潔，顏色使用也比較簡單，不會(huì)用過多的顏色去擾亂用戶，簡單的設(shè)計(jì)對(duì)于教育類的行業(yè)來說，可以減少視覺疲勞，讓眼睛放在有用的事物上去。
通過以上對(duì)用戶畫像和國外同類產(chǎn)品分析，總結(jié)出：我們要從多維度考慮，以優(yōu)化交互為目的讓頁面更有層次感，從而給用戶帶來輕松的體驗(yàn)感。是這次設(shè)計(jì)的核心思想。
1、從用戶的時(shí)間分散且忙碌的特點(diǎn)，得到我們需要盡量優(yōu)化交互邏輯，減少用戶學(xué)習(xí)成本，讓用戶可以快速找到自己想要的東西；并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學(xué)習(xí)，不要再給用戶增加壓力。
2、通過用戶規(guī)劃能力不夠強(qiáng)的特點(diǎn)，得到我們可以給用戶定制一個(gè)“學(xué)習(xí)計(jì)劃”，幫助用戶規(guī)劃自己的學(xué)習(xí)能力，并且在學(xué)習(xí)中增加互動(dòng)性，比如隨堂筆記、收藏、標(biāo)記這種小功能，隨時(shí)給用戶帶來互動(dòng)，讓用戶更有參與感。
3、從國外同類產(chǎn)品分析中總結(jié)出，整體國外市場的喜好是簡潔、少裝飾、以大面積留白來增加頁面的呼吸感，采用盡量簡單的卡片式的設(shè)計(jì)方式來拉開頁面的層級(jí)關(guān)系。
三、設(shè)計(jì)
現(xiàn)在就到了設(shè)計(jì)階段了，上面了解分析了那么多，給我們?cè)O(shè)計(jì)提供了那么多基礎(chǔ)材料，這個(gè)時(shí)候就派上了用場。上面的最后提到說：我們要從維度考慮，以優(yōu)化交互為目的讓頁面更有層次感，從而給用戶帶來輕松的體驗(yàn)感。接下來我就要講述，如何在設(shè)計(jì)去運(yùn)用了。
輕松-這個(gè)很重要。
如何讓用戶在生活和工作那么繁忙的情況下，還要努力的去學(xué)習(xí)，努力的提升自己呢？所以我們這里就采用插畫的形式，插畫像是動(dòng)畫片，讓我們回到了小時(shí)候，并且融入了AI人機(jī)對(duì)話，沉浸式的體驗(yàn)更是可以讓用戶在一個(gè)輕松的氛圍內(nèi)完成自己的學(xué)習(xí)。
增加互動(dòng)性
原有手機(jī)端的功能缺少與用戶之間的互動(dòng)，看視頻就是看視頻，做題就是做題。讓用戶在使用的時(shí)候不能按照自己的意愿去支配，這種感覺不好，一定要讓用戶有參與感，讓用戶占到主導(dǎo)性，而不是那么強(qiáng)硬的讓用戶跟著你走。所以在課程這塊的設(shè)計(jì)上第一采用了全屏的方式，讓用戶不用返回，在當(dāng)前就完成本階段的所有的課程，增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學(xué)習(xí)計(jì)劃”等一些小功能，讓用戶隨時(shí)按照自己的意愿去學(xué)習(xí)，實(shí)時(shí)跟產(chǎn)品進(jìn)行互動(dòng)。
層次感的表達(dá)
教育類型的網(wǎng)站，頁面相對(duì)來說比較干凈、整潔一些，可以有效減少用戶視覺疲勞，避免不必要的干擾元素出現(xiàn)影響用戶的體驗(yàn)。
在本次的設(shè)計(jì)中，學(xué)習(xí)了國外同類網(wǎng)站的設(shè)計(jì)風(fēng)格，采用卡片式的方式，將元素與標(biāo)題包裹在一起，有效與其他元素進(jìn)行區(qū)分，增加投影設(shè)計(jì)，讓頁面更加有層次感和空間感。標(biāo)題上面采用了Complexion Reduction的設(shè)計(jì)語言，將標(biāo)題放大，制造視覺上的沖擊力，拉開元素之間的層級(jí)關(guān)系，豐富頁面的設(shè)計(jì)。這也是國外網(wǎng)站較喜歡的一種設(shè)計(jì)方式。
四、走查
設(shè)計(jì)完成之后，切圖交到開發(fā)手里之后，不能算就完成了，最后走查這一步很重要，要保證實(shí)現(xiàn)出來的效果跟設(shè)計(jì)稿保持一致。不然前面說的再多，設(shè)計(jì)的再炫都是白搭，實(shí)際使用的用戶可不知道你前面都做了什么，他只感受他現(xiàn)在感受到的。
我一般的方法是用Word的方式，將有問題的頁面截圖并標(biāo)記出來問題點(diǎn)，并且按照菜單進(jìn)行分類。這樣開發(fā)對(duì)照看起來就特別明確，只用文字不配圖的表達(dá)都是耍流氓，誰知道你說的是哪個(gè)頁面的哪個(gè)點(diǎn)。用Word進(jìn)行歸類最重要后面追蹤也特別容易，可以很明確看到你哪塊問題還沒有修改，不用再反復(fù)提交。
總結(jié)一下：
一般我的設(shè)計(jì)流程就是：了解-分析-設(shè)計(jì)-走查，因?yàn)椴皇钱a(chǎn)品性質(zhì)的，所以最后的迭代或者驗(yàn)證這一步驟就會(huì)不那么重要，如果是做產(chǎn)品型的后面的驗(yàn)證也會(huì)是非常重要，因?yàn)槭琼?xiàng)目型的所以這里就不多做說明。以上就是我個(gè)人在設(shè)計(jì)中的案例分析，大家有想法的可以多溝通，多交流。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來源：站酷 作者：醬油不咸
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com