## ##

        設(shè)計(jì)師如何自我提升?三個(gè)方向給你答案

        2018-05-07 09:46:13 閱讀 253395 本文來源:王M爭(zhēng)
        分享至:

        最近產(chǎn)品在改版,所以自己著重體驗(yàn)了一波兩大競(jìng)品——支付寶和京東金融。發(fā)現(xiàn)了一些比較有意思的案例,這里就分享出來,正好也來跟大家談一談設(shè)計(jì)師需要加強(qiáng)和完善的三個(gè)方向。


        一.分析用戶需求

        分析用戶需求可能大部分設(shè)計(jì)師都覺得這是產(chǎn)品應(yīng)該干的活,我自己會(huì)畫圖就行了。但是如果不會(huì)分析用戶需求會(huì)制約設(shè)計(jì)師的進(jìn)一步發(fā)展。

        我先來舉個(gè)例子,大部分人在節(jié)假日期間經(jīng)常會(huì)遇到買不到票的情況,這個(gè)時(shí)候一些人會(huì)選擇上車補(bǔ)票的形式。比如你要買南京到上海的火車票,但是發(fā)現(xiàn)直達(dá)的沒有了。你只能買到常州或者蘇州然后上車補(bǔ)票,這就產(chǎn)生了一個(gè)需求——給用戶展示途徑站點(diǎn)。我的確也收到這樣一個(gè)反饋。

        如何在不打亂界面當(dāng)前布局的情況下展示途徑站點(diǎn)呢?只能使用彈框了,這是京東金融的方案。

        20180504103958128.jpg

        京東金融這里通過了一個(gè)彈框給用戶展示了途徑站點(diǎn),看起來問題得到了完美解決。但是用戶要求展示途徑站點(diǎn)的根本原因是要上車補(bǔ)票,你不提供每個(gè)站點(diǎn)的余票量,用戶還要自己挨個(gè)站點(diǎn)去查,非常的不方便。而支付寶就做的更人性化一點(diǎn),直接過濾掉了無余票的站點(diǎn),用戶可以直接點(diǎn)擊購買。在春運(yùn)期間,支付寶這種速度上優(yōu)勢(shì)對(duì)用戶的吸引力是巨大的。

        從上面這個(gè)例子可以發(fā)現(xiàn)用戶有的時(shí)候無法準(zhǔn)確表達(dá)的自己的需求。150年前你問一個(gè)人想要一個(gè)什么樣的交通工具,他可能會(huì)說要一匹特別能跑的馬。其實(shí)本質(zhì)就是對(duì)速度的追求,如果每個(gè)人都跑去馬場(chǎng)配種,那么汽車永遠(yuǎn)無法被制作出來。所以對(duì)于用戶的需求進(jìn)行分析和提煉是非常有必要的。


        二.信息架構(gòu)的搭建

        我一直都在強(qiáng)調(diào)設(shè)計(jì)師應(yīng)該具備產(chǎn)品思維,這句話我可能每篇文章都要嘮叨一遍。但是如何去學(xué)呢?搭建產(chǎn)品的信息框架是一個(gè)很好的入門課程。

        20180504104107521.jpg

        要搭建信息架構(gòu)首先要知道什么是信息框架。信息架構(gòu)的本質(zhì)就是分類。為什么要進(jìn)行分類?因?yàn)楫a(chǎn)品是眾多功能的集合體,不進(jìn)行分類整合的話,用戶很難找到自己期望的功能。信息架構(gòu)不僅僅存在于互聯(lián)網(wǎng)產(chǎn)品中,還廣泛出現(xiàn)在日常生活里。導(dǎo)視圖就是商場(chǎng)的信息架構(gòu),目錄是書籍的信息架構(gòu)。不管是導(dǎo)視圖還是目錄,目的都是幫助用戶找到自己期望的店鋪或章節(jié)。那么到了產(chǎn)品中,信息架構(gòu)的作用就是幫助用戶找到期望的功能。搭建合理的信息框架要注意兩點(diǎn):

        “廣度”和“深度”的平衡

        20180504104145006.jpg

        以上圖為例,用戶如果想修改自己的手勢(shì)密碼,必須要進(jìn)入5級(jí)頁面,而一般的產(chǎn)品只需要進(jìn)入4級(jí)頁面。層級(jí)過深的情況并非不可原諒,因?yàn)橛械漠a(chǎn)品體系非常的龐雜,內(nèi)容非常多。但是上面這個(gè)圖我們可以發(fā)現(xiàn)設(shè)置頁還有近一半的空間空著,這就是常見的窄而深模型。我們完全可以將一些功能前置到更低的層級(jí),縮短用戶的查找路徑。

        20180504104222265.jpg

        既然有“窄而深”那么肯定有“寬而淺”,下圖這個(gè)就是典型的寬而淺。

        20180504104314804.jpg

        20180504104339114.jpg

        分類邏輯的混亂

        20180504104410177.jpg

        還是同一個(gè)案例,如果你是用戶,打算修改手勢(shì)密碼,來到這個(gè)界面。你是會(huì)點(diǎn)擊“賬戶安全中心”還是“密碼設(shè)置”?對(duì)于我來說,我會(huì)點(diǎn)擊“密碼設(shè)置”,因?yàn)樵谖业恼J(rèn)知里,手勢(shì)密碼隸屬于登錄密碼的范疇。而這里是將手勢(shì)密碼放在賬戶安全中心里,在我看來這樣的分類是不合邏輯的,會(huì)給用戶造成干擾。


        三.一致性原則

        把一致性排在最后并不是說一致性不重要,恰恰相反,在我看來一個(gè)設(shè)計(jì)師對(duì)產(chǎn)品一致性的把控決定了他/她的上限。

        最近我在整理第一季度用戶反饋的數(shù)據(jù)時(shí)發(fā)現(xiàn),大部分用戶反饋的問題都在集中在有用性和易用性,說你們的產(chǎn)品應(yīng)該新增哪些功能,界面設(shè)計(jì)需要優(yōu)化或者其他自己在操作遇到的問題。很少有用戶(不超過3%)來提出產(chǎn)品一致性的問題,這個(gè)也容易理解。因?yàn)橛脩舻氖褂脠?chǎng)景比較局限,80%的用戶只用了20%的功能。以下圖為例,這是支付寶里的客服聊天界面,你會(huì)發(fā)現(xiàn)這里面的設(shè)計(jì)風(fēng)格完全不一樣,看起來像是兩個(gè)版本。用戶很難發(fā)現(xiàn),因?yàn)槿肟诓灰粯印6揖退惆l(fā)現(xiàn)了,用戶也不愿意去反饋,因?yàn)椴挥绊懻2僮鳌?br/>

        20180504104449922.jpg

        一款產(chǎn)品的有用性和易用性會(huì)在版本迭代中可以得到優(yōu)化,而一致性體驗(yàn)可能做了好幾年還原地踏步。所以說產(chǎn)品一致性體驗(yàn)的優(yōu)化非常考驗(yàn)一個(gè)設(shè)計(jì)師的自驅(qū)力,你不做也沒人發(fā)現(xiàn)問題,你做了會(huì)增加自己的工作量。

        什么是一致性原則?一致性原則是指產(chǎn)品在不同的場(chǎng)景下依然可以給用戶提供相同的體驗(yàn)。這里的場(chǎng)景可以細(xì)分成:產(chǎn)品線(特指大廠,同一品牌下有多個(gè)產(chǎn)品線)、平臺(tái)(iOS 和安卓)、終端(移動(dòng)端和PC)以及產(chǎn)品內(nèi)部不同的模塊分區(qū)。

        具體所表現(xiàn)出來的元素主要是界面布局、配色、icon、組件,字體、插畫、操作手勢(shì)等。

        以京東金融為例,其金額錄入報(bào)錯(cuò)機(jī)制是:

        1 用戶可輸入超限的金額;

        2 在輸入框下方提供報(bào)錯(cuò)文案;

        3 金額超限的情況下,按鈕置灰

        這種報(bào)錯(cuò)機(jī)制無論是在頁面中還是彈框中都得到了很好的貫徹實(shí)施。

        20180504104532192.jpg

        另外按鈕致灰還在其他界面中出現(xiàn),很好的維持界面元素的一致性。

        20180504104628820.jpg

        其實(shí)上面說起來非常簡(jiǎn)單,但是真正能做到的產(chǎn)品卻很少。同樣的金額超限的場(chǎng)景,有的產(chǎn)品給出兩套完全不同的反饋方案。這樣的產(chǎn)品在市場(chǎng)上不在少數(shù),究其原因是設(shè)計(jì)師沒有站在整個(gè)產(chǎn)品的維度去考慮。

        20180504104702341.jpg

        一致性原則是建立在遵循設(shè)計(jì)規(guī)范的基礎(chǔ)上,安卓和iOS代表的是兩種不同的設(shè)計(jì)語言。你在安卓手機(jī)里的應(yīng)用推行iOS的設(shè)計(jì)規(guī)范,對(duì)熟悉了Material Design的用戶來說就會(huì)很違和。所以為了做到“入鄉(xiāng)隨俗”,有條件的話可以出兩套設(shè)計(jì)稿。以網(wǎng)易云音樂為例:

        20180504104742407.jpg

        20180504104804625.jpg

        甚至連loading樣式都做了兩套。

        20180504104839888.jpg

        注意,我這里說的是有條件,因?yàn)槠鋵?shí)際的設(shè)計(jì)和開發(fā)成本是巨大的,不是每家公司都是大廠。


        總結(jié)

        以上就是我總結(jié)出的設(shè)計(jì)師自我提升的三個(gè)方向,希望對(duì)大家有幫助。

        責(zé)任編輯:大同

        認(rèn)可我的創(chuàng)作,就鼓勵(lì)一下吧

        0人打賞
        分享至:

        聯(lián)系客服

        故障反饋