對(duì)于一家做項(xiàng)目型的公司而言（今天主要講的是項(xiàng)目性質(zhì)的設(shè)計(jì)工作，產(chǎn)品可以繞道哦），時(shí)間就是成本這句話體現(xiàn)的淋漓盡致?；旧辖o到UI設(shè)計(jì)的時(shí)間，是少之又少，那么如何在一個(gè)有限的時(shí)間里，設(shè)計(jì)出優(yōu)秀的作品呢？這是接下來(lái)我想跟大家一起討論的～

我們都知道用戶體驗(yàn)五要素（戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層），這五大點(diǎn)是一個(gè)個(gè)遞進(jìn)的過(guò)程，是一個(gè)從初步的想法到最后落地的過(guò)程。也就是說(shuō)我們最后看到的表現(xiàn)層（UI界面）是如何做出來(lái)的，都需要靠前面一點(diǎn)點(diǎn)的去研究、細(xì)化、分析。所以這么一個(gè)強(qiáng)大而繁瑣的過(guò)程，我們?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ìng)爭(zhēng)力進(jìn)行分別分析。

項(xiàng)目背景

為什么設(shè)計(jì)師的背后總是有一群指點(diǎn)江山的人，因?yàn)槲覀兊脑O(shè)計(jì)沒(méi)有被體現(xiàn)在產(chǎn)品上，只是表層，每次給別人解釋設(shè)計(jì)理念的時(shí)候總是說(shuō)“我覺(jué)得這樣好看”、“我認(rèn)為這塊應(yīng)該用這個(gè)顏色”，卻沒(méi)有說(shuō)出這個(gè)項(xiàng)目本身想要表達(dá)的是一個(gè)什么理念。

本次項(xiàng)目是需要把手機(jī)版的內(nèi)容改版成PC端，原有需求邏輯不變。那么問(wèn)題來(lái)了，現(xiàn)在是一個(gè)移動(dòng)互聯(lián)網(wǎng)的天下，為什么客戶卻需要將手機(jī)端的內(nèi)容移到PC上呢？因?yàn)檫@個(gè)產(chǎn)品的使用環(huán)境之一就是在工作中，試想一下，工作中一直拿著手機(jī)刷來(lái)刷去，不知道的人還以為你在劃水?？紤]到用戶使用環(huán)境的因素，就需要有PC端的設(shè)計(jì)。

目標(biāo)用戶

產(chǎn)品的核心是用戶。所以一切要從用戶的角度出發(fā)，做用戶滿意的產(chǎn)品。在用戶調(diào)研這塊，常見(jiàn)的用戶分析有：用戶畫(huà)像、一對(duì)一訪談、問(wèn)卷調(diào)查、焦點(diǎn)小組、眼動(dòng)測(cè)試、測(cè)評(píng)以及埋點(diǎn)數(shù)據(jù)分析，但是項(xiàng)目型工作周期短，時(shí)間緊，沒(méi)有那么多的成本去做大量的分析，所以我們基本上采用三種方式去解決這個(gè)問(wèn)題。1、與我們的客戶（甲方）去溝通，他們肯定更了解自己的用戶群體；2、通過(guò)現(xiàn)在市場(chǎng)上比較知名的網(wǎng)站（艾瑞網(wǎng)）中提供的大數(shù)據(jù)分析出的結(jié)果；3、如果身邊有這種用戶群體可以對(duì)他們進(jìn)行簡(jiǎn)單訪談。通過(guò)以上三種辦法也是可以得到一個(gè)較為準(zhǔn)確的調(diào)研數(shù)據(jù)的。

在跟客戶的溝通中了解到，我們的主要用戶是基中層領(lǐng)導(dǎo)，目的為提升領(lǐng)導(dǎo)力。下面會(huì)有我對(duì)這部分人群的用戶畫(huà)像分析。

項(xiàng)目目標(biāo)

知己知彼，要了解我們此次設(shè)計(jì)的主要目的是什么？需要解決什么問(wèn)題？

因?yàn)檫@已經(jīng)是一個(gè)已經(jīng)上線一年的產(chǎn)品，我在跟客戶的溝通中很明確了目前有兩大問(wèn)題：第一是：如何提高完成率；第二是：國(guó)外市場(chǎng)用戶使用不習(xí)慣。

這兩個(gè)信息很重要，為后面的設(shè)計(jì)提供了一個(gè)明確的方向。

核心競(jìng)爭(zhēng)力

這是體現(xiàn)我們產(chǎn)品優(yōu)勢(shì)的地方，我們需要盡量的把產(chǎn)品強(qiáng)有力的能力展現(xiàn)出來(lái)，從而獲得目標(biāo)用戶的信賴。把產(chǎn)品的能力、優(yōu)勢(shì)，可以給用戶帶來(lái)的價(jià)值，要體現(xiàn)在比價(jià)明顯一些的地方。

此次是一個(gè)本身有強(qiáng)大的體系支撐，有一個(gè)成熟的結(jié)構(gòu)，在此基礎(chǔ)上開(kāi)發(fā)研制的一套產(chǎn)品，所以產(chǎn)品的目標(biāo)用戶量，獲得的成就就可以直接展示在首頁(yè)上，并且把正在學(xué)習(xí)人數(shù)或者為多少人帶來(lái)成就都體現(xiàn)出來(lái)。讓用戶感受到有這么多人都在努力，有這么多努力的人已經(jīng)完成了自己的目標(biāo)。

二、分析

我首先把手機(jī)版的功能都體驗(yàn)了一遍，隨時(shí)記錄了在使用過(guò)程中不喜歡的地方并且可以優(yōu)化的點(diǎn)，這都是點(diǎn)點(diǎn)滴滴的隨記，可以為后面設(shè)計(jì)中提供一些方向或靈感。根據(jù)上面了解到的信息。

可以得到此次設(shè)計(jì)的主要方向，第一：針對(duì)目標(biāo)用戶進(jìn)行用戶畫(huà)像分析，以此來(lái)確定如何才能更好的提升完成率；第二：針對(duì)國(guó)外同類(lèi)產(chǎn)品分析，對(duì)國(guó)外市場(chǎng)用戶使用不習(xí)慣的了解，并且還要結(jié)合國(guó)內(nèi)市場(chǎng)優(yōu)化交互體驗(yàn)。

用戶畫(huà)像分析

在上面一個(gè)階段了解到我們的用戶群體是基中層領(lǐng)導(dǎo)者。根據(jù)市場(chǎng)數(shù)據(jù)分析，一般基中層領(lǐng)導(dǎo)者主要以男性居多，年齡大概在28-35歲之間，以需要提升領(lǐng)導(dǎo)力為目的，那么從這幾個(gè)特征中我們看出，這些人都有哪些特點(diǎn)呢？首先28-35歲的年齡段，基本上是已經(jīng)結(jié)婚的比較多，并且有很大一部分人群也有了孩子，這個(gè)年齡段的孩子還比較小，基本也是在2-6歲之間較多。對(duì)于這種類(lèi)型家庭而言，無(wú)論是在工作上還是生活上都較為忙碌。并且因?yàn)槭穷I(lǐng)導(dǎo)者的原因，時(shí)間上也較為分散，一天下來(lái)沒(méi)有辦法集中去做一件事情，開(kāi)會(huì)、匯報(bào)、溝通需求、分布任務(wù)等。由于不像在學(xué)校，事情太多也太雜，很多時(shí)候沒(méi)有辦法安心去做一件事情，導(dǎo)致規(guī)劃能力不強(qiáng)，需要借助平臺(tái)可以有個(gè)推力。

國(guó)外同類(lèi)產(chǎn)品分析

其次是針對(duì)國(guó)外市場(chǎng)用戶使用不習(xí)慣這個(gè)問(wèn)題，我對(duì)國(guó)外幾個(gè)大型的相關(guān)網(wǎng)站做了了解。edX、Coursera、Udacity這三個(gè)網(wǎng)站是國(guó)外市場(chǎng)使用較多，知名度較大的幾個(gè)網(wǎng)站。分別從內(nèi)容上和視覺(jué)上進(jìn)行分析，去了解國(guó)外市場(chǎng)的設(shè)計(jì)方式，用戶使用習(xí)慣等。

從以上的分析中最終得出了以下三個(gè)結(jié)論：

1、操作習(xí)慣：這個(gè)與國(guó)內(nèi)的差不多，都是從上到下，從左到右呈Z字形排列布局的方式，視覺(jué)的落腳點(diǎn)都會(huì)在畫(huà)面的左上方，所以我們?cè)谠O(shè)計(jì)的時(shí)候，要把重要或者想要表達(dá)的內(nèi)容放在這個(gè)位置，使用戶進(jìn)入頁(yè)面后就可以很快看到它。

2、采用Complexion Reduction設(shè)計(jì)語(yǔ)言：將標(biāo)題放大，制造視覺(jué)上的沖擊力，拉開(kāi)頁(yè)面的層級(jí)關(guān)系，這種設(shè)計(jì)方式也是國(guó)外較喜歡、較常用的一種設(shè)計(jì)方式。

3、視覺(jué)風(fēng)格：國(guó)外網(wǎng)站的設(shè)計(jì)整體留白較多，讓頁(yè)面更有呼吸感，頁(yè)面上幾乎沒(méi)有無(wú)用的裝飾性元素，非常簡(jiǎn)潔，顏色使用也比較簡(jiǎn)單，不會(huì)用過(guò)多的顏色去擾亂用戶，簡(jiǎn)單的設(shè)計(jì)對(duì)于教育類(lèi)的行業(yè)來(lái)說(shuō)，可以減少視覺(jué)疲勞，讓眼睛放在有用的事物上去。

通過(guò)以上對(duì)用戶畫(huà)像和國(guó)外同類(lèi)產(chǎn)品分析，總結(jié)出：我們要從多維度考慮，以優(yōu)化交互為目的讓頁(yè)面更有層次感，從而給用戶帶來(lái)輕松的體驗(yàn)感。是這次設(shè)計(jì)的核心思想。

1、從用戶的時(shí)間分散且忙碌的特點(diǎn)，得到我們需要盡量?jī)?yōu)化交互邏輯，減少用戶學(xué)習(xí)成本，讓用戶可以快速找到自己想要的東西；并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學(xué)習(xí)，不要再給用戶增加壓力。

2、通過(guò)用戶規(guī)劃能力不夠強(qiáng)的特點(diǎn)，得到我們可以給用戶定制一個(gè)“學(xué)習(xí)計(jì)劃”，幫助用戶規(guī)劃自己的學(xué)習(xí)能力，并且在學(xué)習(xí)中增加互動(dòng)性，比如隨堂筆記、收藏、標(biāo)記這種小功能，隨時(shí)給用戶帶來(lái)互動(dòng)，讓用戶更有參與感。

3、從國(guó)外同類(lèi)產(chǎn)品分析中總結(jié)出，整體國(guó)外市場(chǎng)的喜好是簡(jiǎn)潔、少裝飾、以大面積留白來(lái)增加頁(yè)面的呼吸感，采用盡量簡(jiǎn)單的卡片式的設(shè)計(jì)方式來(lái)拉開(kāi)頁(yè)面的層級(jí)關(guān)系。

三、設(shè)計(jì)

現(xiàn)在就到了設(shè)計(jì)階段了，上面了解分析了那么多，給我們?cè)O(shè)計(jì)提供了那么多基礎(chǔ)材料，這個(gè)時(shí)候就派上了用場(chǎng)。上面的最后提到說(shuō)：我們要從維度考慮，以優(yōu)化交互為目的讓頁(yè)面更有層次感，從而給用戶帶來(lái)輕松的體驗(yàn)感。接下來(lái)我就要講述，如何在設(shè)計(jì)去運(yùn)用了。

輕松-這個(gè)很重要。

如何讓用戶在生活和工作那么繁忙的情況下，還要努力的去學(xué)習(xí)，努力的提升自己呢？所以我們這里就采用插畫(huà)的形式，插畫(huà)像是動(dòng)畫(huà)片，讓我們回到了小時(shí)候，并且融入了AI人機(jī)對(duì)話，沉浸式的體驗(yàn)更是可以讓用戶在一個(gè)輕松的氛圍內(nèi)完成自己的學(xué)習(xí)。

增加互動(dòng)性

原有手機(jī)端的功能缺少與用戶之間的互動(dòng)，看視頻就是看視頻，做題就是做題。讓用戶在使用的時(shí)候不能按照自己的意愿去支配，這種感覺(jué)不好，一定要讓用戶有參與感，讓用戶占到主導(dǎo)性，而不是那么強(qiáng)硬的讓用戶跟著你走。所以在課程這塊的設(shè)計(jì)上第一采用了全屏的方式，讓用戶不用返回，在當(dāng)前就完成本階段的所有的課程，增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學(xué)習(xí)計(jì)劃”等一些小功能，讓用戶隨時(shí)按照自己的意愿去學(xué)習(xí)，實(shí)時(shí)跟產(chǎn)品進(jìn)行互動(dòng)。

層次感的表達(dá)

教育類(lèi)型的網(wǎng)站，頁(yè)面相對(duì)來(lái)說(shuō)比較干凈、整潔一些，可以有效減少用戶視覺(jué)疲勞，避免不必要的干擾元素出現(xiàn)影響用戶的體驗(yàn)。

在本次的設(shè)計(jì)中，學(xué)習(xí)了國(guó)外同類(lèi)網(wǎng)站的設(shè)計(jì)風(fēng)格，采用卡片式的方式，將元素與標(biāo)題包裹在一起，有效與其他元素進(jìn)行區(qū)分，增加投影設(shè)計(jì)，讓頁(yè)面更加有層次感和空間感。標(biāo)題上面采用了Complexion Reduction的設(shè)計(jì)語(yǔ)言，將標(biāo)題放大，制造視覺(jué)上的沖擊力，拉開(kāi)元素之間的層級(jí)關(guān)系，豐富頁(yè)面的設(shè)計(jì)。這也是國(guó)外網(wǎng)站較喜歡的一種設(shè)計(jì)方式。

四、走查

設(shè)計(jì)完成之后，切圖交到開(kāi)發(fā)手里之后，不能算就完成了，最后走查這一步很重要，要保證實(shí)現(xiàn)出來(lái)的效果跟設(shè)計(jì)稿保持一致。不然前面說(shuō)的再多，設(shè)計(jì)的再炫都是白搭，實(shí)際使用的用戶可不知道你前面都做了什么，他只感受他現(xiàn)在感受到的。

我一般的方法是用Word的方式，將有問(wèn)題的頁(yè)面截圖并標(biāo)記出來(lái)問(wèn)題點(diǎn)，并且按照菜單進(jìn)行分類(lèi)。這樣開(kāi)發(fā)對(duì)照看起來(lái)就特別明確，只用文字不配圖的表達(dá)都是耍流氓，誰(shuí)知道你說(shuō)的是哪個(gè)頁(yè)面的哪個(gè)點(diǎn)。用Word進(jìn)行歸類(lèi)最重要后面追蹤也特別容易，可以很明確看到你哪塊問(wèn)題還沒(méi)有修改，不用再反復(fù)提交。

總結(jié)一下：

一般我的設(shè)計(jì)流程就是：了解-分析-設(shè)計(jì)-走查，因?yàn)椴皇钱a(chǎn)品性質(zhì)的，所以最后的迭代或者驗(yàn)證這一步驟就會(huì)不那么重要，如果是做產(chǎn)品型的后面的驗(yàn)證也會(huì)是非常重要，因?yàn)槭琼?xiàng)目型的所以這里就不多做說(shuō)明。以上就是我個(gè)人在設(shè)計(jì)中的案例分析，大家有想法的可以多溝通，多交流。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷   作者：醬油不咸

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)