首頁(yè)

構(gòu)建產(chǎn)品的信任力設(shè)計(jì)

純純

上面的場(chǎng)景是否很熟悉？在我們?nèi)粘Ｉ钪薪?jīng)常能聽(tīng)到/看到這樣的話，但除了運(yùn)氣好的那部分人，結(jié)局往往要么是「專(zhuān)柜不予驗(yàn)貨」，要么是「吃啞巴虧被人割一波韭菜」或者要么是「十連抽！SSR！出了新通行證出了新皮膚！買(mǎi)??！」；于是這部分人開(kāi)始不相信任何相關(guān)的東西，開(kāi)始大肆傳播，加上一些不法分子的違法惡意行為和新聞公安宣傳，最終導(dǎo)致社會(huì)上絕大部分的人樹(shù)立起了很?chē)?yán)謹(jǐn)?shù)姆纻湫?

眾所周知無(wú)論是作為互聯(lián)網(wǎng)還是傳統(tǒng)行業(yè)，無(wú)論是金融還是電商亦或者是游戲社交等等，想要賺錢(qián)，構(gòu)建平臺(tái)和用戶之間的信任是必然的。如果你無(wú)法和用戶構(gòu)建信任關(guān)系，那誰(shuí)還指望用戶使用你的產(chǎn)品去消費(fèi)（金錢(qián)/時(shí)間）呢？

在產(chǎn)品設(shè)計(jì)當(dāng)中，作為設(shè)計(jì)師的我們?nèi)绾稳ズ陀脩魳?gòu)建信任關(guān)系，怎樣通過(guò)設(shè)計(jì)細(xì)節(jié)去逐步影響甚至改變用戶，這個(gè)話題是我最近在研究的東西，通過(guò)解析市面上的產(chǎn)品如何通過(guò)設(shè)計(jì)去構(gòu)建用戶的信任關(guān)系，提煉出我們?nèi)绾卧诋a(chǎn)品設(shè)計(jì)當(dāng)中去打造信任感



信任力

首先來(lái)了解一下作為互聯(lián)網(wǎng)的產(chǎn)品中信任力是如何產(chǎn)生的：用戶要想對(duì)產(chǎn)品產(chǎn)生信任感，必須建立一個(gè)完善俱全的產(chǎn)品心智。（具體的心智設(shè)計(jì)在我之前有篇文章已經(jīng)詳細(xì)介紹過(guò)了，這里不再過(guò)多闡述）先上結(jié)論，當(dāng)一個(gè)用戶從普通的態(tài)度到信任一款產(chǎn)品，這個(gè)過(guò)程是基于「認(rèn)知」、「情緒」和「態(tài)度」建立的


這個(gè)過(guò)程在不同的場(chǎng)景所建立的時(shí)長(zhǎng)也不相同，售賣(mài)場(chǎng)景當(dāng)中是最常見(jiàn)的。舉個(gè)例子，我們經(jīng)常會(huì)在菜市場(chǎng)大街上看到有人吆喝賣(mài)菜刀、塑料盆各種東西，站著一圈兒人圍觀，然后會(huì)看到賣(mài)家為了展示自己商品的賣(mài)點(diǎn)，會(huì)很賣(mài)力地把塑料盆摔地上以此來(lái)吸引注意和展示賣(mài)點(diǎn)；這樣能在極短的時(shí)間內(nèi)改變消費(fèi)者的情緒和認(rèn)知，從而改變消費(fèi)者的態(tài)度，以建立消費(fèi)者對(duì)產(chǎn)品的信任，最終提升下單轉(zhuǎn)化率。說(shuō)人話就是：“我這個(gè)盆怎么摔都摔不壞，不信我吧唧摔給你看，快買(mǎi)它?。?！”

在用戶建立了與產(chǎn)品的心智之后，才會(huì)產(chǎn)生相關(guān)的信任力，從而產(chǎn)生相關(guān)的行為



信任行為的途徑

了解原理之后，那么來(lái)看一個(gè)基本的問(wèn)題：信任的行為是如何產(chǎn)生的？用戶建立了和產(chǎn)品的信任心智后，怎么產(chǎn)生相對(duì)應(yīng)的行為，主要依靠三種途徑：「第一手經(jīng)驗(yàn)」、「可靠的建議」和「基于理智的理解」


基于他人的經(jīng)驗(yàn)

這個(gè)途徑是日常生活中最常見(jiàn)的讓人信任某人或某物的方式，比如你的好朋友或者同事告訴你：XXX地方吃飯服務(wù)超棒，味道超正宗…那么基于你對(duì)好朋友或同事的關(guān)系以及他嘗試過(guò)的經(jīng)驗(yàn)，你會(huì)大概率選擇去那家店試一試。通過(guò)自己熟悉的人或事，在基于過(guò)去成功的經(jīng)驗(yàn)下，人們會(huì)再次選擇相信這類(lèi)人的經(jīng)驗(yàn)


這類(lèi)情況在互聯(lián)網(wǎng)的場(chǎng)景中往往以KOL帶貨、探店等形式存在，早些年的小紅書(shū)微博探店測(cè)評(píng)，到近來(lái)越來(lái)越火的直播短視頻；都是基于人們?cè)趯?duì)自己信任的KOL面前，選擇信任相對(duì)應(yīng)的產(chǎn)品或消費(fèi)場(chǎng)景。諸如「我喜歡的明星都用這個(gè)，我跟著買(mǎi)肯定沒(méi)錯(cuò)～」、「天不怕地不怕，就怕他李佳琦說(shuō)Oh my God！」之類(lèi)，都是由平臺(tái)借助KOL和用戶群體建立的信任關(guān)系，也就是我們常說(shuō)的「種草」



如果沒(méi)有喜歡的KOL怎么辦，那就建立以自己為中心輻射的社交圈，通過(guò)自己認(rèn)識(shí)的人去建立深度的信任關(guān)系，比如我們最熟悉的朋友圈種草，拼多多核心的拼小圈和淘寶的淘友圈；基于自身為圓心，利用用戶的從眾心理和窺探欲建立的關(guān)系鏈，從而幫助平臺(tái)建立與用戶的信任關(guān)系



基于可靠的建議

基于他人經(jīng)驗(yàn)僅限于熟人或?yàn)榱私獾娜怂⒌年P(guān)系鏈，詬病往往是必須依附于熟悉的過(guò)程，這個(gè)過(guò)程是有一個(gè)時(shí)間的，但是很多場(chǎng)景下并沒(méi)有那么多時(shí)間和條件給用戶去建立信任這個(gè)過(guò)程，所以出現(xiàn)了多種讓用戶通過(guò)陌生渠道快速建立信任關(guān)系的形式


1.品牌的力量  我們經(jīng)?？吹绞袌?chǎng)上品牌做升級(jí)更新，也能看到天價(jià)的品牌設(shè)計(jì)，因?yàn)槠放剖菍?duì)產(chǎn)品或者服務(wù)的一種保障，因?yàn)檫@種保障我們更傾向于使用該品牌的產(chǎn)品，因?yàn)榱己玫漠a(chǎn)品使用體驗(yàn)，我們更加信任該品牌，形成一個(gè)正向的循環(huán)。而互聯(lián)網(wǎng)產(chǎn)品更加熱衷于此，比如早些年的淘寶因?yàn)榧儇?、刷好評(píng)曾讓平臺(tái)信任感一度降低，于是有了后來(lái)的天貓品牌；比如京東的自營(yíng)標(biāo)，得物的專(zhuān)業(yè)鑒定等，無(wú)一不是借助品牌的力量建立用戶和平臺(tái)的信任關(guān)系



2.陌生渠道詳細(xì)的經(jīng)驗(yàn)  電商產(chǎn)品力商詳頁(yè)的評(píng)價(jià)系統(tǒng)相信大家一定不會(huì)陌生，如果有心關(guān)注的話，會(huì)發(fā)現(xiàn)評(píng)價(jià)系統(tǒng)一直在經(jīng)歷著改版：從起初的「好中差評(píng)」到現(xiàn)在種類(lèi)繁多的評(píng)價(jià)，都是在針對(duì)信任感一直在迭代優(yōu)化，并且是一條長(zhǎng)線的迭代。加深用戶對(duì)產(chǎn)品快速地信任，電商產(chǎn)品分階段性地在優(yōu)化評(píng)價(jià)體系。拼多多在前置鏈路當(dāng)中，強(qiáng)引導(dǎo)確認(rèn)收貨后的用戶進(jìn)行評(píng)論反饋（具體在點(diǎn)擊「確認(rèn)收貨」后跳轉(zhuǎn)至評(píng)價(jià)頁(yè)面強(qiáng)制拉起鍵盤(pán)進(jìn)行輸入），而阿里系產(chǎn)品淘寶、餓了么等在前置鏈路當(dāng)中以積分獎(jiǎng)勵(lì)的形式，鼓勵(lì)用戶寫(xiě)真實(shí)的評(píng)價(jià)；在后置鏈路中，強(qiáng)化了好評(píng)的信息，展示了「回頭客」這一概念，一方面展示了產(chǎn)品的真實(shí)性，向用戶傳遞二次復(fù)購(gòu)的用戶；另一方面，打消了用戶對(duì)店鋪花錢(qián)雇人刷好評(píng)的顧慮



3.專(zhuān)業(yè)的權(quán)威  常見(jiàn)于金融、政府相關(guān)的項(xiàng)目產(chǎn)品中，借助當(dāng)?shù)卣?、?zhuān)業(yè)權(quán)威機(jī)構(gòu)的威信來(lái)和用戶建立信任關(guān)系，有相關(guān)的組織機(jī)構(gòu)做背書(shū)，此類(lèi)產(chǎn)品的用戶在整個(gè)流程中更容易做出決策；比如支付寶和地方政府的合作，寺庫(kù)和美國(guó)GIA專(zhuān)業(yè)鑒定機(jī)構(gòu)的合作等



基于理智的理解

對(duì)于從未看過(guò)或者聽(tīng)說(shuō)過(guò)的某個(gè)產(chǎn)品，可以通過(guò)讓用戶了解其工作原理來(lái)建立信任，簡(jiǎn)單來(lái)說(shuō)就是「脫光了給用戶看」；有且重要的一點(diǎn)是，不能因?yàn)楫a(chǎn)品的易用性而覺(jué)得可忽略像用戶解釋你的產(chǎn)品。因?yàn)槿绻脩簟父兄沟阶约翰涣私猱a(chǎn)品本身，那么即便是別人推薦的，依然存在部分用戶不信任產(chǎn)品


舉個(gè)簡(jiǎn)單的例子：在互聯(lián)網(wǎng)各類(lèi)產(chǎn)品建立的初期，沒(méi)有品牌，沒(méi)有背書(shū)，獲取的信息讓用戶感覺(jué)自己的隱私被暴露，存在自己的隱私數(shù)據(jù)泄漏等問(wèn)題；如果向用戶展示產(chǎn)品的詳細(xì)的信息，會(huì)讓用戶更加的安心。比如Uber或滴滴新生的時(shí)候，品牌尚未建立，在打車(chē)前讓用戶明確詳細(xì)地了解用戶信息、車(chē)輛信息、駕駛員信息以及安全規(guī)則后，用戶才會(huì)更加安心地使用產(chǎn)品



如何通過(guò)設(shè)計(jì)建立產(chǎn)品的信任力

闡述了用戶對(duì)產(chǎn)品建立信任的原理和途徑，那么作為設(shè)計(jì)師的我們，如何在自己的產(chǎn)品設(shè)計(jì)當(dāng)中，去和用戶建立信任感并且維護(hù)信任關(guān)系，可以看看成功的產(chǎn)品怎么做的


展示品牌權(quán)威標(biāo)示

在視覺(jué)的呈現(xiàn)上向用戶直觀地展示相關(guān)的品牌、權(quán)威機(jī)構(gòu)的標(biāo)示等，能在極短的時(shí)間內(nèi)改善用戶的認(rèn)知和態(tài)度，從而建立起短暫的信任感；常見(jiàn)的此類(lèi)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)、運(yùn)營(yíng)視覺(jué)中比較常見(jiàn)，比如官網(wǎng)的合作方露出，聯(lián)名活動(dòng)的品牌展示等



產(chǎn)品設(shè)計(jì)的一致性

為什么大公司有很多規(guī)范，從柵格到彈窗到動(dòng)效，在整個(gè)產(chǎn)品體驗(yàn)的過(guò)程中，讓用戶感知到是在一個(gè)產(chǎn)品中完成的流程就是產(chǎn)品設(shè)計(jì)的一致性，為什么要做一致性，因?yàn)橐鰪?qiáng)品牌感和產(chǎn)品體驗(yàn)的舒適度，目的就是讓用戶依賴于品牌產(chǎn)品，建立起無(wú)法分離的信任關(guān)系



構(gòu)建信任的樞紐

從整個(gè)流程的開(kāi)端到結(jié)束制定一系列的體驗(yàn)來(lái)構(gòu)建信任的樞紐，用拼多多的拼小圈來(lái)舉例，從最初的引導(dǎo)開(kāi)始，向用戶透出熟悉的頭像信息引導(dǎo)用戶點(diǎn)擊觸發(fā)，然后簡(jiǎn)單地向用戶告知產(chǎn)品的詳情，接著通過(guò)無(wú)處不在的用戶頭像和標(biāo)簽建立信任關(guān)系，利用用戶「好的、知道了等」認(rèn)知慣性去影響用戶的行為，最后通過(guò)K歌影集等功能鞏固信任關(guān)系，增強(qiáng)用戶粘性，實(shí)現(xiàn)整個(gè)樞紐的體驗(yàn)閉環(huán)（不得不感嘆多多在構(gòu)建信任感這一塊真的很厲害～）



再嗶兩句

在整個(gè)互聯(lián)網(wǎng)大環(huán)境下，針對(duì)存量精細(xì)化運(yùn)營(yíng)戰(zhàn)中，信任關(guān)系是有效轉(zhuǎn)化的關(guān)鍵，也是企業(yè)和品牌傳播的第一生產(chǎn)力。能否獲取用戶信任，將會(huì)成為企業(yè)商業(yè)價(jià)值大小的核心判斷標(biāo)準(zhǔn)；站在用戶的視角，只有信任了某個(gè)產(chǎn)品，才會(huì)將自己的隱私信息等向企業(yè)開(kāi)放，從而產(chǎn)生一系列消費(fèi)、轉(zhuǎn)換等行為；自媒體直播短視頻在拓展業(yè)務(wù)和平臺(tái)的合作中，增強(qiáng)了用戶與之間的粘性，而這一切，所有的原點(diǎn)都在于信任

上面的場(chǎng)景是否很熟悉？在我們?nèi)粘Ｉ钪薪?jīng)常能聽(tīng)到/看到這樣的話，但除了運(yùn)氣好的那部分人，結(jié)局往往要么是「專(zhuān)柜不予驗(yàn)貨」，要么是「吃啞巴虧被人割一波韭菜」或者要么是「十連抽！SSR！出了新通行證出了新皮膚！買(mǎi)??！」；于是這部分人開(kāi)始不相信任何相關(guān)的東西，開(kāi)始大肆傳播，加上一些不法分子的違法惡意行為和新聞公安宣傳，最終導(dǎo)致社會(huì)上絕大部分的人樹(shù)立起了很?chē)?yán)謹(jǐn)?shù)姆纻湫?/strong>

眾所周知無(wú)論是作為互聯(lián)網(wǎng)還是傳統(tǒng)行業(yè)，無(wú)論是金融還是電商亦或者是游戲社交等等，想要賺錢(qián)，構(gòu)建平臺(tái)和用戶之間的信任是必然的。如果你無(wú)法和用戶構(gòu)建信任關(guān)系，那誰(shuí)還指望用戶使用你的產(chǎn)品去消費(fèi)（金錢(qián)/時(shí)間）呢？

在產(chǎn)品設(shè)計(jì)當(dāng)中，作為設(shè)計(jì)師的我們?nèi)绾稳ズ陀脩魳?gòu)建信任關(guān)系，怎樣通過(guò)設(shè)計(jì)細(xì)節(jié)去逐步影響甚至改變用戶，這個(gè)話題是我最近在研究的東西，通過(guò)解析市面上的產(chǎn)品如何通過(guò)設(shè)計(jì)去構(gòu)建用戶的信任關(guān)系，提煉出我們?nèi)绾卧诋a(chǎn)品設(shè)計(jì)當(dāng)中去打造信任感



信任力

首先來(lái)了解一下作為互聯(lián)網(wǎng)的產(chǎn)品中信任力是如何產(chǎn)生的：用戶要想對(duì)產(chǎn)品產(chǎn)生信任感，必須建立一個(gè)完善俱全的產(chǎn)品心智。（具體的心智設(shè)計(jì)在我之前有篇文章已經(jīng)詳細(xì)介紹過(guò)了，這里不再過(guò)多闡述）先上結(jié)論，當(dāng)一個(gè)用戶從普通的態(tài)度到信任一款產(chǎn)品，這個(gè)過(guò)程是基于「認(rèn)知」、「情緒」和「態(tài)度」建立的


這個(gè)過(guò)程在不同的場(chǎng)景所建立的時(shí)長(zhǎng)也不相同，售賣(mài)場(chǎng)景當(dāng)中是最常見(jiàn)的。舉個(gè)例子，我們經(jīng)常會(huì)在菜市場(chǎng)大街上看到有人吆喝賣(mài)菜刀、塑料盆各種東西，站著一圈兒人圍觀，然后會(huì)看到賣(mài)家為了展示自己商品的賣(mài)點(diǎn)，會(huì)很賣(mài)力地把塑料盆摔地上以此來(lái)吸引注意和展示賣(mài)點(diǎn)；這樣能在極短的時(shí)間內(nèi)改變消費(fèi)者的情緒和認(rèn)知，從而改變消費(fèi)者的態(tài)度，以建立消費(fèi)者對(duì)產(chǎn)品的信任，最終提升下單轉(zhuǎn)化率。說(shuō)人話就是：“我這個(gè)盆怎么摔都摔不壞，不信我吧唧摔給你看，快買(mǎi)它?。。　?/strong>

在用戶建立了與產(chǎn)品的心智之后，才會(huì)產(chǎn)生相關(guān)的信任力，從而產(chǎn)生相關(guān)的行為



信任行為的途徑

了解原理之后，那么來(lái)看一個(gè)基本的問(wèn)題：信任的行為是如何產(chǎn)生的？用戶建立了和產(chǎn)品的信任心智后，怎么產(chǎn)生相對(duì)應(yīng)的行為，主要依靠三種途徑：「第一手經(jīng)驗(yàn)」、「可靠的建議」和「基于理智的理解」


基于他人的經(jīng)驗(yàn)

這個(gè)途徑是日常生活中最常見(jiàn)的讓人信任某人或某物的方式，比如你的好朋友或者同事告訴你：XXX地方吃飯服務(wù)超棒，味道超正宗…那么基于你對(duì)好朋友或同事的關(guān)系以及他嘗試過(guò)的經(jīng)驗(yàn)，你會(huì)大概率選擇去那家店試一試。通過(guò)自己熟悉的人或事，在基于過(guò)去成功的經(jīng)驗(yàn)下，人們會(huì)再次選擇相信這類(lèi)人的經(jīng)驗(yàn)


這類(lèi)情況在互聯(lián)網(wǎng)的場(chǎng)景中往往以KOL帶貨、探店等形式存在，早些年的小紅書(shū)微博探店測(cè)評(píng)，到近來(lái)越來(lái)越火的直播短視頻；都是基于人們?cè)趯?duì)自己信任的KOL面前，選擇信任相對(duì)應(yīng)的產(chǎn)品或消費(fèi)場(chǎng)景。諸如「我喜歡的明星都用這個(gè)，我跟著買(mǎi)肯定沒(méi)錯(cuò)～」、「天不怕地不怕，就怕他李佳琦說(shuō)Oh my God！」之類(lèi)，都是由平臺(tái)借助KOL和用戶群體建立的信任關(guān)系，也就是我們常說(shuō)的「種草」



如果沒(méi)有喜歡的KOL怎么辦，那就建立以自己為中心輻射的社交圈，通過(guò)自己認(rèn)識(shí)的人去建立深度的信任關(guān)系，比如我們最熟悉的朋友圈種草，拼多多核心的拼小圈和淘寶的淘友圈；基于自身為圓心，利用用戶的從眾心理和窺探欲建立的關(guān)系鏈，從而幫助平臺(tái)建立與用戶的信任關(guān)系



基于可靠的建議

基于他人經(jīng)驗(yàn)僅限于熟人或?yàn)榱私獾娜怂⒌年P(guān)系鏈，詬病往往是必須依附于熟悉的過(guò)程，這個(gè)過(guò)程是有一個(gè)時(shí)間的，但是很多場(chǎng)景下并沒(méi)有那么多時(shí)間和條件給用戶去建立信任這個(gè)過(guò)程，所以出現(xiàn)了多種讓用戶通過(guò)陌生渠道快速建立信任關(guān)系的形式


1.品牌的力量  我們經(jīng)常看到市場(chǎng)上品牌做升級(jí)更新，也能看到天價(jià)的品牌設(shè)計(jì)，因?yàn)槠放剖菍?duì)產(chǎn)品或者服務(wù)的一種保障，因?yàn)檫@種保障我們更傾向于使用該品牌的產(chǎn)品，因?yàn)榱己玫漠a(chǎn)品使用體驗(yàn)，我們更加信任該品牌，形成一個(gè)正向的循環(huán)。而互聯(lián)網(wǎng)產(chǎn)品更加熱衷于此，比如早些年的淘寶因?yàn)榧儇洝⑺⒑迷u(píng)曾讓平臺(tái)信任感一度降低，于是有了后來(lái)的天貓品牌；比如京東的自營(yíng)標(biāo)，得物的專(zhuān)業(yè)鑒定等，無(wú)一不是借助品牌的力量建立用戶和平臺(tái)的信任關(guān)系



2.陌生渠道詳細(xì)的經(jīng)驗(yàn)  電商產(chǎn)品力商詳頁(yè)的評(píng)價(jià)系統(tǒng)相信大家一定不會(huì)陌生，如果有心關(guān)注的話，會(huì)發(fā)現(xiàn)評(píng)價(jià)系統(tǒng)一直在經(jīng)歷著改版：從起初的「好中差評(píng)」到現(xiàn)在種類(lèi)繁多的評(píng)價(jià)，都是在針對(duì)信任感一直在迭代優(yōu)化，并且是一條長(zhǎng)線的迭代。加深用戶對(duì)產(chǎn)品快速地信任，電商產(chǎn)品分階段性地在優(yōu)化評(píng)價(jià)體系。拼多多在前置鏈路當(dāng)中，強(qiáng)引導(dǎo)確認(rèn)收貨后的用戶進(jìn)行評(píng)論反饋（具體在點(diǎn)擊「確認(rèn)收貨」后跳轉(zhuǎn)至評(píng)價(jià)頁(yè)面強(qiáng)制拉起鍵盤(pán)進(jìn)行輸入），而阿里系產(chǎn)品淘寶、餓了么等在前置鏈路當(dāng)中以積分獎(jiǎng)勵(lì)的形式，鼓勵(lì)用戶寫(xiě)真實(shí)的評(píng)價(jià)；在后置鏈路中，強(qiáng)化了好評(píng)的信息，展示了「回頭客」這一概念，一方面展示了產(chǎn)品的真實(shí)性，向用戶傳遞二次復(fù)購(gòu)的用戶；另一方面，打消了用戶對(duì)店鋪花錢(qián)雇人刷好評(píng)的顧慮



3.專(zhuān)業(yè)的權(quán)威  常見(jiàn)于金融、政府相關(guān)的項(xiàng)目產(chǎn)品中，借助當(dāng)?shù)卣?、?zhuān)業(yè)權(quán)威機(jī)構(gòu)的威信來(lái)和用戶建立信任關(guān)系，有相關(guān)的組織機(jī)構(gòu)做背書(shū)，此類(lèi)產(chǎn)品的用戶在整個(gè)流程中更容易做出決策；比如支付寶和地方政府的合作，寺庫(kù)和美國(guó)GIA專(zhuān)業(yè)鑒定機(jī)構(gòu)的合作等



基于理智的理解

對(duì)于從未看過(guò)或者聽(tīng)說(shuō)過(guò)的某個(gè)產(chǎn)品，可以通過(guò)讓用戶了解其工作原理來(lái)建立信任，簡(jiǎn)單來(lái)說(shuō)就是「脫光了給用戶看」；有且重要的一點(diǎn)是，不能因?yàn)楫a(chǎn)品的易用性而覺(jué)得可忽略像用戶解釋你的產(chǎn)品。因?yàn)槿绻脩簟父兄沟阶约翰涣私猱a(chǎn)品本身，那么即便是別人推薦的，依然存在部分用戶不信任產(chǎn)品


舉個(gè)簡(jiǎn)單的例子：在互聯(lián)網(wǎng)各類(lèi)產(chǎn)品建立的初期，沒(méi)有品牌，沒(méi)有背書(shū)，獲取的信息讓用戶感覺(jué)自己的隱私被暴露，存在自己的隱私數(shù)據(jù)泄漏等問(wèn)題；如果向用戶展示產(chǎn)品的詳細(xì)的信息，會(huì)讓用戶更加的安心。比如Uber或滴滴新生的時(shí)候，品牌尚未建立，在打車(chē)前讓用戶明確詳細(xì)地了解用戶信息、車(chē)輛信息、駕駛員信息以及安全規(guī)則后，用戶才會(huì)更加安心地使用產(chǎn)品



如何通過(guò)設(shè)計(jì)建立產(chǎn)品的信任力

闡述了用戶對(duì)產(chǎn)品建立信任的原理和途徑，那么作為設(shè)計(jì)師的我們，如何在自己的產(chǎn)品設(shè)計(jì)當(dāng)中，去和用戶建立信任感并且維護(hù)信任關(guān)系，可以看看成功的產(chǎn)品怎么做的


展示品牌權(quán)威標(biāo)示

在視覺(jué)的呈現(xiàn)上向用戶直觀地展示相關(guān)的品牌、權(quán)威機(jī)構(gòu)的標(biāo)示等，能在極短的時(shí)間內(nèi)改善用戶的認(rèn)知和態(tài)度，從而建立起短暫的信任感；常見(jiàn)的此類(lèi)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)、運(yùn)營(yíng)視覺(jué)中比較常見(jiàn)，比如官網(wǎng)的合作方露出，聯(lián)名活動(dòng)的品牌展示等



產(chǎn)品設(shè)計(jì)的一致性

為什么大公司有很多規(guī)范，從柵格到彈窗到動(dòng)效，在整個(gè)產(chǎn)品體驗(yàn)的過(guò)程中，讓用戶感知到是在一個(gè)產(chǎn)品中完成的流程就是產(chǎn)品設(shè)計(jì)的一致性，為什么要做一致性，因?yàn)橐鰪?qiáng)品牌感和產(chǎn)品體驗(yàn)的舒適度，目的就是讓用戶依賴于品牌產(chǎn)品，建立起無(wú)法分離的信任關(guān)系



構(gòu)建信任的樞紐

從整個(gè)流程的開(kāi)端到結(jié)束制定一系列的體驗(yàn)來(lái)構(gòu)建信任的樞紐，用拼多多的拼小圈來(lái)舉例，從最初的引導(dǎo)開(kāi)始，向用戶透出熟悉的頭像信息引導(dǎo)用戶點(diǎn)擊觸發(fā)，然后簡(jiǎn)單地向用戶告知產(chǎn)品的詳情，接著通過(guò)無(wú)處不在的用戶頭像和標(biāo)簽建立信任關(guān)系，利用用戶「好的、知道了等」認(rèn)知慣性去影響用戶的行為，最后通過(guò)K歌影集等功能鞏固信任關(guān)系，增強(qiáng)用戶粘性，實(shí)現(xiàn)整個(gè)樞紐的體驗(yàn)閉環(huán)（不得不感嘆多多在構(gòu)建信任感這一塊真的很厲害～）



再嗶兩句

在整個(gè)互聯(lián)網(wǎng)大環(huán)境下，針對(duì)存量精細(xì)化運(yùn)營(yíng)戰(zhàn)中，信任關(guān)系是有效轉(zhuǎn)化的關(guān)鍵，也是企業(yè)和品牌傳播的第一生產(chǎn)力。能否獲取用戶信任，將會(huì)成為企業(yè)商業(yè)價(jià)值大小的核心判斷標(biāo)準(zhǔn)；站在用戶的視角，只有信任了某個(gè)產(chǎn)品，才會(huì)將自己的隱私信息等向企業(yè)開(kāi)放，從而產(chǎn)生一系列消費(fèi)、轉(zhuǎn)換等行為；自媒體直播短視頻在拓展業(yè)務(wù)和平臺(tái)的合作中，增強(qiáng)了用戶與之間的粘性，而這一切，所有的原點(diǎn)都在于信任


作者：雨灰    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1290)

精一技o(jì)r擅百技？?jī)?nèi)卷時(shí)代下的原型工具應(yīng)該怎么做

純純

大家對(duì)原型工具應(yīng)該不陌生，無(wú)論是設(shè)計(jì)師還是產(chǎn)品經(jīng)理，或多或少都接觸過(guò)原型圖的工具，比如較為大眾熟知的Axure，國(guó)內(nèi)運(yùn)用較為廣泛的墨刀和摹客，以及一些較為小眾的產(chǎn)品。不難發(fā)現(xiàn)，大多數(shù)工具類(lèi)產(chǎn)品的運(yùn)作模式幾乎都如出一轍：先免費(fèi)使用一段時(shí)間，養(yǎng)成了用戶認(rèn)知和習(xí)慣后，逐步開(kāi)始投放廣告或者收取費(fèi)用變向商業(yè)化——原型工具產(chǎn)品自然也脫離不了這種運(yùn)作模式。所以在這個(gè)內(nèi)卷時(shí)代下，各大原型工具相繼脫穎而出，前段時(shí)間體驗(yàn)了一下摹客RP，這次就結(jié)合摹客RP這款原型工具產(chǎn)品來(lái)聊聊：內(nèi)卷時(shí)代下工具到底應(yīng)該怎么做

精一技o(jì)r擅百技？


要說(shuō)怎么做一款產(chǎn)品，首先先確立這款產(chǎn)品的定位和方向，如果定位和方向上不對(duì)，自然后續(xù)鋪墊的功能還是需求都是在錯(cuò)誤的事情上繼續(xù)做錯(cuò)誤的事情，相信這是每一個(gè)產(chǎn)品人都不愿看到的。但往往理想很豐滿，現(xiàn)實(shí)卻很骨感：結(jié)合自己的從業(yè)經(jīng)歷，很多時(shí)候產(chǎn)品定位和方向是很難先做到清晰，然后才開(kāi)始鋪設(shè)功能的；一般情況都是跟從競(jìng)品功能，快速拿到結(jié)果，才開(kāi)始結(jié)合自身業(yè)務(wù)特效慢慢摸索產(chǎn)品定位和方向的

眾所周知，作為B端屬性的工具類(lèi)產(chǎn)品，最為重要的無(wú)非就兩點(diǎn)：降本和增效，這兩點(diǎn)向來(lái)是B端尤其是偏工具類(lèi)產(chǎn)品的核心目標(biāo)；那么如何降本和增效呢？有人說(shuō)降低操作成本啊，降低認(rèn)知成本啊，降低學(xué)習(xí)成本啊，那到底降的是什么本？增效又是增的什么效？

從上圖可以看出，無(wú)論是降人力成本、認(rèn)知成本等等，還是增加學(xué)習(xí)效率、體驗(yàn)效率等等，所有對(duì)象都指向了用戶群體。有人就會(huì)問(wèn)了：你這不是廢話嘛，工具不就是給用戶用的嘛？誒～還真不一樣！用戶群雖然特指一個(gè)群體，但是隸屬不同目標(biāo)下，自然而然也有類(lèi)別區(qū)分

為什么這樣說(shuō)，因?yàn)椴煌挠脩羧河胁煌墓δ茉V求；用戶A通過(guò)產(chǎn)品想達(dá)成目標(biāo)A，用戶B通過(guò)產(chǎn)品想達(dá)成目標(biāo)B，那么用戶A和用戶B從根本的目標(biāo)不相同，那么他倆的體驗(yàn)路徑和信息傳達(dá)也是需要有不同
的區(qū)分的，簡(jiǎn)單來(lái)說(shuō)就是用戶達(dá)成的目標(biāo)不同，想看到的頁(yè)面和功能也不相同

把工具產(chǎn)品比喻成一個(gè)小中臺(tái)來(lái)說(shuō)，所有用戶都是中臺(tái)的需求方，不同需求方的目的不同，但是作為小中臺(tái)來(lái)說(shuō)都是需要同時(shí)滿足的。以摹客RP來(lái)舉例，作為一款協(xié)作產(chǎn)品，用戶群可大致分為產(chǎn)品經(jīng)理、UE設(shè)計(jì)師、研發(fā)等，而針對(duì)不同的用戶群目標(biāo)來(lái)看，產(chǎn)品經(jīng)理的核心目標(biāo)是快速通過(guò)原型具像化產(chǎn)品功能，而UE設(shè)計(jì)師則是通過(guò)產(chǎn)品經(jīng)理的思想以圖形化的形式表達(dá)出來(lái)，而身為研發(fā)的核心目標(biāo)是快速了解業(yè)務(wù)邏輯，以便構(gòu)思開(kāi)發(fā)結(jié)構(gòu)

擅百技？


綜上所述來(lái)看，無(wú)非就是針對(duì)不同的用戶群體的需求都滿足嘛，我都把功能給你做上去不就好啦？表面上的確滿足了所有用戶群的需求，可事實(shí)上無(wú)形將各類(lèi)的成本分?jǐn)偨o了各個(gè)用戶，怎么理解呢？大家可以腦補(bǔ)想象自己作為一名維修工，此時(shí)你急需把一顆梅花口的螺絲給取出來(lái)，這時(shí)候你來(lái)到工具間，你最希望看到下圖中哪個(gè)場(chǎng)景？

毋庸置疑大家肯定都會(huì)選擇右邊那個(gè)工具間，因?yàn)楣δ芘帕姓R有序，不管你維修工是水電維修還是建筑維修還是網(wǎng)絡(luò)維修，都能在這個(gè)工具間找你能幫你完成你的目標(biāo)。這便是所謂的擅百技——基于用戶群的需求全部將功能一一實(shí)現(xiàn)

還是以摹客RP舉例，當(dāng)不同用戶群進(jìn)入平臺(tái)，功能排列整齊有序，都有足夠的區(qū)域和節(jié)點(diǎn)幫助用戶群實(shí)現(xiàn)各自的目標(biāo)，產(chǎn)品經(jīng)理能通過(guò)組件庫(kù)、模板等快速輸出原型圖，UE設(shè)計(jì)師則能通過(guò)多樣的圖形、動(dòng)效等實(shí)現(xiàn)高保真交互稿，團(tuán)隊(duì)方面則有快捷拉起會(huì)議、在線留言等功能；所謂是將目前市面上幾乎所有原型工具功能，結(jié)合自身的發(fā)展沉淀做出的平臺(tái)
可是，擅百技就足夠了么？換句話說(shuō)，當(dāng)你在找梅花口的的起子時(shí)，你會(huì)希望看到平口起子在眼前對(duì)你進(jìn)行干擾嗎？

精一技？


既然你說(shuō)擅百技不好，那么接下來(lái)你是不是以為我會(huì)走極端，那就只針對(duì)產(chǎn)品經(jīng)理做一款原型工具精一技不就好了？大漏特漏！雖說(shuō)術(shù)業(yè)有專(zhuān)攻，互聯(lián)網(wǎng)時(shí)代咱們包容性廣，咱不走極端，在每個(gè)用戶群的功能需求上更聚焦精細(xì)化不就行了，精一技不夠，咱們就精百技，每一個(gè)功能打磨透透的，卷到極致這樣夠不夠了？
這樣做OK，內(nèi)卷時(shí)代下大家都是這樣做的，但是會(huì)帶來(lái)一個(gè)新的問(wèn)題：
在多維全局視角下，體驗(yàn)成本實(shí)際上均是嫁接分?jǐn)傆诟鱾€(gè)角色的
怎么理解這個(gè)問(wèn)題呢？可以看到下面一張圖示意：

從二維視角下來(lái)看，各個(gè)角色以目標(biāo)核心出發(fā)各司其職，通過(guò)工具平臺(tái)功能都能很好實(shí)現(xiàn)目標(biāo)；但是我們不妨拔高一層視角來(lái)看看：

以多維全局視角來(lái)看，雖然各個(gè)角色各司其職完成了自己的目標(biāo)，但是基于產(chǎn)品使用層完全是由平臺(tái)承載的，導(dǎo)致了各個(gè)角色的使用成本嫁接分?jǐn)偨o了其他角色，簡(jiǎn)答來(lái)說(shuō)就是：
角色A完成對(duì)應(yīng)目標(biāo)時(shí)，存在角色B和角色C的信息干擾，那么角色A無(wú)形中分?jǐn)偭私巧獴和C的成本
舉個(gè)例子：產(chǎn)品經(jīng)理打開(kāi)原型工具后，想直接拖動(dòng)下拉框組件搭建一個(gè)產(chǎn)品原型，這時(shí)候選中下拉框組件想進(jìn)行文案編輯，此時(shí)彈出了下拉框組件對(duì)應(yīng)的編輯面板：字號(hào)、字色、字體、行高、字間距等等，然后其中部分功能則屬于設(shè)計(jì)同學(xué)關(guān)注的，例如字體、字色、字間距等，但是此類(lèi)成本則分?jǐn)偨o了產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理在整個(gè)搭建原型的過(guò)程中，增設(shè)了過(guò)濾這些信息的成本

那有人就會(huì)說(shuō)了，這很簡(jiǎn)單啊，可以直接做成個(gè)性化定制工具平臺(tái)啊，根據(jù)每個(gè)角色身份不同進(jìn)來(lái)設(shè)計(jì)師進(jìn)來(lái)就只看到和設(shè)計(jì)相關(guān)的功能，產(chǎn)品經(jīng)理進(jìn)來(lái)就只看到和產(chǎn)品相關(guān)的功能不就好了？而且我把每一個(gè)角色對(duì)應(yīng)的功能做到專(zhuān)精，是不是就精一技且解決問(wèn)題了？

我要打十個(gè)！


看到這個(gè)標(biāo)題大家可能會(huì)想到我們的詠春葉問(wèn)老師，無(wú)論對(duì)手學(xué)的什么招數(shù)、有多少個(gè)人，葉師傅都能一人單挑全部，然后撂下一句霸氣的：“我要打十個(gè)！”
收一收，繼續(xù)回來(lái)我們的主題上來(lái)，是否將工具平臺(tái)做成個(gè)性化定制平臺(tái)并且其中功能都打磨細(xì)致，就能解決工具降本增效的問(wèn)題了？其實(shí)不然，問(wèn)題不能想得太復(fù)發(fā)，當(dāng)然也不能想得很簡(jiǎn)單，都知道用戶需求是分階段而不同的，可能產(chǎn)品經(jīng)理A不需要設(shè)置字號(hào)大小顏色，但是產(chǎn)品經(jīng)理B為了今年績(jī)效決定卷一卷同事，立志要出“高保真原型”，開(kāi)始設(shè)置起了字號(hào)大小顏色，此時(shí)平臺(tái)功能又被局限住了
那么究竟應(yīng)該怎么做呢？不妨把眼界跳出同類(lèi)競(jìng)品Axure、墨刀等，結(jié)合不同多角色并行的工具搭建類(lèi)產(chǎn)品做競(jìng)品調(diào)研，得出兩個(gè)不同的產(chǎn)品方向思路：

思路1是像葉師傅詠春拳一樣，見(jiàn)招拆招：平臺(tái)以通過(guò)不同身份拆分成不同時(shí)間段進(jìn)行角色管理
大致以上中下游角色進(jìn)行功能分發(fā)，例如產(chǎn)品初期，上游的產(chǎn)品視角進(jìn)入平臺(tái)，基礎(chǔ)的團(tuán)隊(duì)管理、項(xiàng)目管理、關(guān)聯(lián)PRD等，然后進(jìn)行聚焦產(chǎn)品原型搭建；之后流到中游由設(shè)計(jì)師進(jìn)行二次加工，包括高保真原型稿、交互動(dòng)效、串聯(lián)頁(yè)面跳轉(zhuǎn)等；最后流到下游研發(fā)團(tuán)隊(duì)視角，研發(fā)通過(guò)已經(jīng)二次加工過(guò)的高保真設(shè)計(jì)稿進(jìn)行框架搭建、前后端接口串聯(lián)等開(kāi)發(fā)評(píng)估
站在平臺(tái)的視角來(lái)看，綜上所述產(chǎn)品方向可拆解為：
時(shí)間維度：核心解決降本問(wèn)題，包含時(shí)間成本、溝通成本，更加以維度追溯問(wèn)題（產(chǎn)品問(wèn)題追溯上游、設(shè)計(jì)問(wèn)題追溯中游等等）
角色維度：核心解決增效問(wèn)題，減少信息干擾、提升操作效率、溝通效率和協(xié)作效率

思路2則是基于前面?zhèn)€性化定制工具平臺(tái)的思路上進(jìn)行優(yōu)化改造的，通過(guò)不同角色視角進(jìn)入不同的工具平臺(tái)，通過(guò)數(shù)據(jù)打通串聯(lián)實(shí)現(xiàn)多角色同平臺(tái)操作，減少時(shí)間維度上的強(qiáng)依賴關(guān)系
例如產(chǎn)品進(jìn)入平臺(tái)，依舊是創(chuàng)建項(xiàng)目、管理團(tuán)隊(duì)等，然后開(kāi)始進(jìn)行產(chǎn)品形態(tài)輸入和原型搭建，之后UE同學(xué)便能在同平臺(tái)看到協(xié)作項(xiàng)目進(jìn)行產(chǎn)出或者進(jìn)行二次優(yōu)化，最終通過(guò)管理員權(quán)限人員進(jìn)行收口；其次針對(duì)平臺(tái)來(lái)說(shuō)，不斷更新同步的數(shù)據(jù)，能間接豐富平臺(tái)的多元化

無(wú)論是思路1還是思路2，不難發(fā)現(xiàn)：將原型工具的核心目標(biāo)降本和增效，往上抽象出一層就是圍繞兩個(gè)維度在解決問(wèn)題：一個(gè)是具備時(shí)效性的時(shí)間維度，一個(gè)是具備多元性的角色維度。從上圖可以感知到：不同時(shí)間節(jié)點(diǎn)，不同角色介入的時(shí)間隨著時(shí)間維度的增加而變化
因?yàn)檎麄€(gè)項(xiàng)目周期，不同職能的角色一定會(huì)有先后順序，那么有了這一層抽象以后，無(wú)論你的需求刻畫(huà)多么具體，無(wú)論你的case多么邊界，只要緊貼圍繞這兩個(gè)維度進(jìn)行優(yōu)化，都是從本質(zhì)上解決工具平臺(tái)的降本和增效問(wèn)題

作者：雨灰    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1368)

聊一聊所謂的B端C化

純純

最近很流行一個(gè)詞——B端C化，解釋出來(lái)就是可以用C端的模式和思維來(lái)對(duì)B端產(chǎn)品進(jìn)行設(shè)計(jì)，討論者大致分為兩種觀點(diǎn)：

1.C端產(chǎn)品市場(chǎng)已經(jīng)趨于飽和，可拓展空間剩余不多了，B端產(chǎn)品市場(chǎng)還是一片藍(lán)海，于是產(chǎn)生了一些C端設(shè)計(jì)師轉(zhuǎn)型去做B端了，將一些C端的模式和思維帶到了B端設(shè)計(jì)中，導(dǎo)致越來(lái)越多的B端逐漸C化；

2.B端產(chǎn)品市場(chǎng)互相競(jìng)爭(zhēng)，為了在同市場(chǎng)中打出差異化，于是一些B端市場(chǎng)開(kāi)始招攬C端設(shè)計(jì)師培養(yǎng)轉(zhuǎn)型，并且嘗試融入C端產(chǎn)品的模式和思維在同市場(chǎng)內(nèi)競(jìng)爭(zhēng)，是產(chǎn)品設(shè)計(jì)的“內(nèi)卷化”現(xiàn)象，導(dǎo)致市面上的C化的B端產(chǎn)品越來(lái)越多；

但上述無(wú)論哪一種觀點(diǎn)，都在闡述一種現(xiàn)象或者趨勢(shì)：不管是交互還是視覺(jué)還是UI，目前部分C端設(shè)計(jì)師正在往B端設(shè)計(jì)師轉(zhuǎn)型。這個(gè)現(xiàn)象的發(fā)生對(duì)整個(gè)設(shè)計(jì)行業(yè)來(lái)說(shuō)無(wú)異于新增了很多新亮點(diǎn)——市場(chǎng)上越來(lái)越多的B端交互、數(shù)據(jù)可視化視覺(jué)等需求，進(jìn)而導(dǎo)致對(duì)市場(chǎng)培訓(xùn)行業(yè)開(kāi)始產(chǎn)生B端培訓(xùn)的訴求，同時(shí)也破空而出了很多優(yōu)秀的B端設(shè)計(jì)師。那么B端C化到底是什么，和傳統(tǒng)B端C端有什么區(qū)別，有這方面想法訴求的同學(xué)怎么去實(shí)現(xiàn)轉(zhuǎn)型？

由于我本人之前是做C端UI設(shè)計(jì)師，到后來(lái)轉(zhuǎn)型成為B端交互設(shè)計(jì)師，而接觸的業(yè)務(wù)恰好涉及B端和C端的聯(lián)動(dòng)以及多角色之間的協(xié)作，所以這篇文章借助結(jié)合我個(gè)人的經(jīng)驗(yàn)和看法，談一談自己對(duì)B端C化的理解



B端C端的區(qū)別

在談B端C化之前，需要先了解B端和C端的區(qū)別是什么。B端C端的區(qū)別網(wǎng)上有很多文章和概述了，大致歸納下來(lái)主要以四個(gè)維度去區(qū)分：受眾主體、上線周期、業(yè)務(wù)類(lèi)型和產(chǎn)品側(cè)重點(diǎn)這四個(gè)維度，其余的維度也會(huì)有區(qū)分，但是影響較小，主要還是圍繞以上四個(gè)維度進(jìn)行B端和C端區(qū)分



受眾主體

受眾主體也就是相對(duì)應(yīng)產(chǎn)品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場(chǎng)景和路徑較為單一的，比如C端產(chǎn)品就以年齡層、城市、性別等來(lái)劃分用戶，每個(gè)階段的用戶都有不同的訴求、認(rèn)知和習(xí)慣等等；在做任何決策方面都屬于偏感性（Heart）的個(gè)人決策（Personal）；用戶穩(wěn)定性則比較差，要是對(duì)產(chǎn)品不滿意，可以立馬換另一款產(chǎn)品，轉(zhuǎn)換門(mén)檻低，有多個(gè)競(jìng)爭(zhēng)對(duì)手產(chǎn)品可供選擇；

而B(niǎo)端產(chǎn)品的受眾主體則是為組織群體，特征為多場(chǎng)景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權(quán)限等劃分用戶群，但是之間的關(guān)系更加復(fù)雜，比如設(shè)計(jì)一個(gè)銀行內(nèi)部管理系統(tǒng)，用戶群就很明確清晰——銀行各級(jí)職員角色，根據(jù)職級(jí)關(guān)系設(shè)計(jì)不同的功能以及權(quán)限；在做任何決策方面都屬于偏理性（Head）的團(tuán)隊(duì)性決策（Team）；用戶穩(wěn)定性較強(qiáng)，要是對(duì)產(chǎn)品不滿意，也只能被迫適應(yīng)和忍受，轉(zhuǎn)換成本較高，幾乎沒(méi)有其他產(chǎn)品可供選擇



上線周期

上線周期就是指產(chǎn)品從需求階段到設(shè)計(jì)階段。到開(kāi)發(fā)階段直至最后產(chǎn)品上線所需要的周期。C端產(chǎn)品上線周期模式有個(gè)很明確的特點(diǎn)：快速迭代、敏捷，很多C端產(chǎn)品功能更新迭代的速度很快，上線周期非常短，往往半個(gè)月甚至一周就完成開(kāi)發(fā)上線，加上用戶群的多樣性和跨度大，所以在上線的時(shí)候往往會(huì)需要AB實(shí)驗(yàn)去驗(yàn)證方案可行性；

B端產(chǎn)品上線周期則是和C端一個(gè)對(duì)立面——長(zhǎng)，少則雙月/季度多則半年/一年等，因?yàn)锽端產(chǎn)品流程上都屬于重型流程，角色之間關(guān)系復(fù)雜，交互系統(tǒng)較為繁瑣，需求的改動(dòng)和迭代并沒(méi)有那么頻繁，也不需要像C端產(chǎn)品那樣快速上線搶占市場(chǎng)，所以B端上線周期會(huì)很慢，也導(dǎo)致在工作強(qiáng)度上相比C端較為輕松一些，但是缺點(diǎn)就是結(jié)果沒(méi)有C端來(lái)的那么快和明顯



業(yè)務(wù)類(lèi)型

C端產(chǎn)品的核心競(jìng)爭(zhēng)力就是產(chǎn)品本身，關(guān)鍵總結(jié)就是讓用戶爽就完事了，所以C端產(chǎn)品的需求類(lèi)型往往圍繞用戶群的痛點(diǎn)產(chǎn)生；因?yàn)镃端用戶跨度大，不同的用戶群體有不同的痛點(diǎn)，所以導(dǎo)致C端的需求類(lèi)型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯(cuò)中逐漸得出正確的結(jié)論；

B端產(chǎn)品的核心競(jìng)爭(zhēng)力除了產(chǎn)品本身，還依賴復(fù)雜的關(guān)系、渠道、技術(shù)和資源，你的關(guān)系夠硬、渠道夠廣、技術(shù)夠領(lǐng)先、資源夠豐富，哪怕你的產(chǎn)品很一般，一樣能領(lǐng)先其他同行業(yè)的競(jìng)爭(zhēng)對(duì)手，關(guān)鍵總結(jié)下來(lái)就是讓用戶贏就夠了；B端產(chǎn)品的需求類(lèi)型雖然也是圍繞著用戶群的痛點(diǎn)產(chǎn)生，但需求的目標(biāo)是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產(chǎn)品來(lái)說(shuō)，B端產(chǎn)品是需求更加明確且容易達(dá)成目標(biāo)



產(chǎn)品側(cè)重點(diǎn)

產(chǎn)品側(cè)重點(diǎn)無(wú)異于區(qū)分C端和B端最明顯的門(mén)檻了，C端產(chǎn)品的側(cè)重點(diǎn)主要在于體驗(yàn)，而B(niǎo)端產(chǎn)品的側(cè)重點(diǎn)主要在于效益

前面提到過(guò)C端產(chǎn)品核心讓用戶爽就完事了，加上基于用戶更換產(chǎn)品的成本很低：你這款產(chǎn)品我用不爽就換掉了，所以C端產(chǎn)品的側(cè)重點(diǎn)永遠(yuǎn)以用戶體驗(yàn)為主，前面說(shuō)的需求業(yè)務(wù)類(lèi)型也幾乎是圍繞用戶體驗(yàn)產(chǎn)生的；大家對(duì)比市場(chǎng)上同類(lèi)型的C端產(chǎn)品，界面、交互、功能都不會(huì)差很多，是因?yàn)榻?jīng)過(guò)長(zhǎng)時(shí)間的更新迭代，已經(jīng)沉淀下來(lái)目前最好的用戶體驗(yàn)類(lèi)型了，隨著產(chǎn)品量級(jí)越大，改變用戶體驗(yàn)類(lèi)型就越謹(jǐn)慎；C端產(chǎn)品就是為了尋找并解決用戶痛點(diǎn)、癢點(diǎn)和爽點(diǎn)，加上品牌性、用戶隱私等因素考量，產(chǎn)品側(cè)重點(diǎn)聚焦于用戶體驗(yàn)

B端產(chǎn)品側(cè)重點(diǎn)則是圍繞效益了，因?yàn)樽鳛橐粋€(gè)團(tuán)隊(duì)使用的產(chǎn)品，不管是從易用性、功能性還是安全性，為這個(gè)團(tuán)隊(duì)解決問(wèn)題為首要基礎(chǔ)，那么使用者的體驗(yàn)、產(chǎn)品的美觀度等等相較于優(yōu)先級(jí)就沒(méi)有那么高了，所以導(dǎo)致了有一段時(shí)間大家對(duì)B端的理解依舊是老舊、丑、難用的認(rèn)知上；B端產(chǎn)品就是為了使用產(chǎn)品的團(tuán)隊(duì)解決效率、成本、營(yíng)收的問(wèn)題，加上產(chǎn)品的穩(wěn)定性、安全性等因素的考量，產(chǎn)品側(cè)重點(diǎn)自然更聚焦在效益上



什么是B端C化

前面了解了B端和C端產(chǎn)品的區(qū)別，接下來(lái)聊一聊什么是B端C化；簡(jiǎn)單來(lái)說(shuō)從字面意思理解就是B端的設(shè)計(jì)層面逐漸靠近C端，網(wǎng)上也有很多B端可視化、趨勢(shì)潮流的設(shè)計(jì)和文章，但是B端C化不僅僅是從視覺(jué)設(shè)計(jì)上的改良，下面我逐漸從大到小聊一下我對(duì)B端C化的理解


功能架構(gòu)

在做過(guò)很多B端產(chǎn)品之后發(fā)現(xiàn)，往往很多產(chǎn)品經(jīng)理是對(duì)整個(gè)產(chǎn)品架構(gòu)、功能形態(tài)一切都清晰地了如指掌，但是有時(shí)候在搭建產(chǎn)品架構(gòu)的時(shí)候，功能形態(tài)單一粗糙，步驟復(fù)雜且笨拙；站在業(yè)務(wù)產(chǎn)品的視角來(lái)看，架構(gòu)邏輯上都是沒(méi)有問(wèn)題的，但是站在用戶視角來(lái)看，整體框架是混亂破碎的，步驟繁瑣且復(fù)雜，導(dǎo)致用戶對(duì)產(chǎn)品的認(rèn)知變差，但是又不得不去用這個(gè)產(chǎn)品，只能被迫去學(xué)習(xí)使用

比如一個(gè)產(chǎn)品案例，就是一個(gè)產(chǎn)品的底層邏輯是前端輸入素材id，后端返還一個(gè)素材后就可以使用了，站在產(chǎn)品業(yè)務(wù)視角來(lái)看，這樣設(shè)計(jì)沒(méi)有什么問(wèn)題，符合產(chǎn)品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個(gè)素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來(lái)給用戶選不好嘛？



行為習(xí)慣

行為習(xí)慣自然是指用戶群在該行業(yè)下的行為習(xí)慣，電商行業(yè)、社交行業(yè)等等不同行業(yè)的習(xí)慣、專(zhuān)業(yè)術(shù)語(yǔ)等都不相同，這個(gè)在C端產(chǎn)品中都很能得到體驗(yàn)，比如電商行業(yè)的大紅大紫，社交行業(yè)的左右滑動(dòng)等等，這類(lèi)有著很明顯的行業(yè)屬性和大眾認(rèn)知，一樣是B端設(shè)計(jì)中應(yīng)該注意的點(diǎn)

最經(jīng)典的案例就是紅色綠色的定義區(qū)分，在數(shù)據(jù)產(chǎn)品認(rèn)知中，綠色代表數(shù)據(jù)漲了，紅色代表數(shù)據(jù)跌了，比如GMV數(shù)據(jù)，DAU數(shù)據(jù)等，紅色為重點(diǎn)關(guān)注的數(shù)據(jù)；而在金融行業(yè)中，基金股票紅色代表漲了，綠色則代表跌了，所以設(shè)計(jì)的原則一定得是基于不同行業(yè)的用戶行為習(xí)慣



信息層級(jí)

B端產(chǎn)品的信息量一般是很龐大的，尤其是數(shù)據(jù)、表單、審批等B端產(chǎn)品，涉及到不同角色不同權(quán)限的開(kāi)放等，所以用戶能否能一眼看清關(guān)鍵信息，能否幫助用戶快速達(dá)成目標(biāo)，是交互層面針對(duì)信息層級(jí)的設(shè)計(jì)處理一個(gè)重要的環(huán)節(jié)

之前很常見(jiàn)B端產(chǎn)品中信息處理的方法就是堆積處理，直接將信息、數(shù)據(jù)等平鋪展示，比如很久之前的某牛商家端后臺(tái)等老舊系統(tǒng)；現(xiàn)在很多新的B端產(chǎn)品都是以模塊化處理方法將信息層級(jí)區(qū)分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設(shè)計(jì)



設(shè)計(jì)語(yǔ)言

設(shè)計(jì)語(yǔ)言自然是B端設(shè)計(jì)中標(biāo)題、字號(hào)、顏色等規(guī)范標(biāo)準(zhǔn)，早些年把B端產(chǎn)品組件化后且開(kāi)源的自然是阿里老大哥了，當(dāng)時(shí)最早的AntDesign、以及后來(lái)的ElementDesign組件庫(kù)，到現(xiàn)在都被很多中小企業(yè)甚至大廠某些產(chǎn)品一直使用中，但隨著B(niǎo)端產(chǎn)品的普及和發(fā)展，越來(lái)越多的企業(yè)開(kāi)始將自己產(chǎn)品沉淀出完善成套的設(shè)計(jì)語(yǔ)言，并搭建出自己的組件庫(kù)投入使用了



用戶體驗(yàn)

如何去衡量用戶體驗(yàn)是否是好的，最客觀來(lái)講當(dāng)然是通過(guò)數(shù)據(jù)去衡量，而數(shù)據(jù)往往在C端產(chǎn)品中很常見(jiàn)，不管是體驗(yàn)數(shù)據(jù)還是表現(xiàn)數(shù)據(jù)，都是C端產(chǎn)品中最為關(guān)注的；然而在B端產(chǎn)品中，更多收集的一般都是業(yè)務(wù)表現(xiàn)數(shù)據(jù)，幾乎沒(méi)有衡量用戶使用平臺(tái)的相關(guān)數(shù)據(jù)，大多衡量體驗(yàn)的方法都是依靠問(wèn)卷反饋的形式；但在B端C化的過(guò)程中，用戶體驗(yàn)的數(shù)據(jù)也逐漸被加入到B端產(chǎn)品當(dāng)中來(lái)，成為體驗(yàn)標(biāo)準(zhǔn)的考核之一：比如某個(gè)任務(wù)完成的時(shí)長(zhǎng)，報(bào)錯(cuò)出現(xiàn)的頻次、某某工具的使用率等



視覺(jué)設(shè)計(jì)

最后就是B端C化表現(xiàn)層的設(shè)計(jì)，包括目前主流的設(shè)計(jì)趨勢(shì)如大數(shù)據(jù)可視化、3D建模、材質(zhì)質(zhì)感、Dark模式等都逐漸融入到B端產(chǎn)品中，使得B端產(chǎn)品不再追求簡(jiǎn)單的“功能優(yōu)先”和“能用就行”，而是像C端那樣追求更美觀的視覺(jué)，更極致的體驗(yàn)



為什么要B端C化

總結(jié)下來(lái)“B端C化”就是B端產(chǎn)品無(wú)論是從功能架構(gòu)還是視覺(jué)體驗(yàn)，越來(lái)越趨于人性考慮設(shè)計(jì)，越來(lái)越關(guān)注使用者的感受和反饋，因?yàn)檎f(shuō)白了不管B端產(chǎn)品代替成本高不高，用戶是一群專(zhuān)業(yè)人士還是普通職員，使用者歸根到底還是“人”在使用產(chǎn)品，那么必然會(huì)帶來(lái)體驗(yàn)相關(guān)的問(wèn)題；所以B端C化會(huì)逐漸形成一種趨勢(shì)，在企業(yè)平臺(tái)資源支持的情況下，會(huì)將B端產(chǎn)品的功能放大，追趕市場(chǎng)競(jìng)爭(zhēng)，逐利行業(yè)內(nèi)卷，在體驗(yàn)和視覺(jué)感官上也會(huì)更加的人性化，結(jié)果自然是產(chǎn)品設(shè)計(jì)者們更加的卷了（手動(dòng)狗頭）


總結(jié)

無(wú)論是現(xiàn)在的B端C化還是將來(lái)其他多元的設(shè)計(jì)趨勢(shì)，隨著市場(chǎng)的競(jìng)爭(zhēng)和行業(yè)內(nèi)卷，已經(jīng)反推著設(shè)計(jì)師們不單單局限于照顧自己的“三分田地”了，無(wú)論是之前視覺(jué)設(shè)計(jì)師開(kāi)始學(xué)習(xí)3D建模，還是UI設(shè)計(jì)師嘗試接觸代碼設(shè)計(jì)，設(shè)計(jì)師最大的品質(zhì)就是應(yīng)該緊跟時(shí)代的趨勢(shì)變化，及時(shí)調(diào)整補(bǔ)充自己的能力，提升自我的競(jìng)爭(zhēng)力，才是在當(dāng)今環(huán)境下立足的根本

作者：雨灰       來(lái)源：站酷 

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1635)

想做好卡片設(shè)計(jì)，原來(lái)要注意這么多細(xì)節(jié)

純純

1、卡片的造型


1）圓角


不同的圓角，所帶來(lái)的氣質(zhì)是不同的。圓角很小，視覺(jué)印象是硬朗，高冷，具有攻擊性的，多用于嚴(yán)肅、高端、沖突感強(qiáng)烈的設(shè)計(jì)中；而更大的圓角給人的感覺(jué)是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂(lè)性強(qiáng)的設(shè)計(jì)中。


在設(shè)計(jì)的時(shí)候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設(shè)計(jì)很有必要。


undefined

常見(jiàn)的卡片弧度形式有4類(lèi)：直接、小圓角、大圓角、特殊圓角



我一般喜歡用4的倍數(shù)來(lái)設(shè)置圓角，比如圓角大小為4px、8px、12px之類(lèi)的。要注意的是，圓角越大，可用面積會(huì)越小，需要根據(jù)實(shí)際場(chǎng)景進(jìn)行平衡，以視覺(jué)上舒服為宜。



2）比例


卡片的比例，我習(xí)慣遵循一些美感規(guī)律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類(lèi)的比例。當(dāng)然，實(shí)際設(shè)計(jì)需求中的比例，還是要結(jié)合內(nèi)容的多少具體分析。


我的經(jīng)驗(yàn)是，當(dāng)比較接近這些美感比例其中之一時(shí)，就直接優(yōu)化到這個(gè)比例。比如做了一個(gè)卡片，寬高比是1.5，比較接近于黃金比例，我就干脆讓它等于黃金比例。


undefined



3）異型


除了正常的卡片樣式，還可以做一些異型的卡片設(shè)計(jì)。異型卡片具有較強(qiáng)的形式感和視覺(jué)沖擊力，所以會(huì)比較多的用在游戲或者運(yùn)營(yíng)相關(guān)的界面中，吸引用戶的注意力。缺點(diǎn)是批量化設(shè)計(jì)成本略高且因?yàn)檫^(guò)于風(fēng)格化而不夠耐看。


undefined



2、卡片的效果


1）顏色


卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對(duì)比要符合界面對(duì)比度標(biāo)準(zhǔn)（ https://contrast-grid.eightshapes.com/，這個(gè)網(wǎng)站可以直接查到可用性數(shù)值，只要不是DNP就是可以用的配色），以免影響內(nèi)容本身的閱讀。如果拿不準(zhǔn)的話，可以多用一些白色，比較不容易出錯(cuò)。


純色卡片設(shè)計(jì)會(huì)讓界面顯得冷靜高級(jí)，但對(duì)配色的要求相對(duì)較高，用不好的話會(huì)顯得單調(diào)，沉悶。如果你堅(jiān)持要用這種卡片配色的話，建議搭配一些圖形紋理，會(huì)更容易把控，還能提升畫(huà)面細(xì)節(jié)。


undefined

純色卡片設(shè)計(jì)



漸變色的卡片設(shè)計(jì)目前較為常見(jiàn)，層次細(xì)節(jié)更加豐富，畫(huà)面也顯得更活潑一些。


undefined

漸變色卡片設(shè)計(jì)https://dribbble.com/shots/12284120-Wallet-Design-App



有些朋友經(jīng)常因?yàn)榕渖缓枚l(fā)愁，其實(shí)是需要多去找一些參考來(lái)看的，實(shí)在擔(dān)心配色不好，直接去吸優(yōu)秀的配色方案也是OK的，但要注意搭配合理。


教大家一個(gè)方法，去dribbble上搜color或直接打開(kāi)https://dribbble.com/search/color這個(gè)鏈接，就可以看到非常多的優(yōu)秀配色方案了。


undefined



2）圖案


卡片的設(shè)計(jì)還可以結(jié)合輔助圖形，以圖案的形式與卡片進(jìn)行結(jié)合。這些輔助圖形可以來(lái)源于品牌符號(hào)的延伸，讓品牌有更多的露出機(jī)會(huì)。


undefined


也可以是運(yùn)用一些簡(jiǎn)單的圖形，提升卡片的設(shè)計(jì)細(xì)節(jié)，以下是一些還不錯(cuò)的設(shè)計(jì)案例。這些卡片上的圖形都有借鑒參考的價(jià)值，自己平時(shí)有時(shí)間的話，也可以多做一些作為圖形的儲(chǔ)備。強(qiáng)烈建議收藏，真的可以很有用。


undefined

來(lái)源：https://dribbble.com/shots/10513966-Gradient-Bank-cards


undefined

來(lái)源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design


undefined

來(lái)源：https://dribbble.com/shots/11313260-Finance-App-Exploration


undefined

undefined

來(lái)源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD


這里彩云給大家找了非常多的卡片設(shè)計(jì)形式，可以從中參考學(xué)習(xí)配色和紋理造型。



3）圖片、視頻


卡片背景也可以用圖片和視頻的形式進(jìn)行設(shè)計(jì)，圖片和視頻的選擇一般會(huì)偏暗色，以不影響內(nèi)容閱讀為準(zhǔn)。


undefined


undefined

來(lái)源：https://dribbble.com/shots/5717917-Travel-Article-Application


3、卡片的內(nèi)容


1）文字


卡片上的文字不要太長(zhǎng)，我的經(jīng)驗(yàn)是橫向不要超過(guò)42字（關(guān)于這個(gè)字?jǐn)?shù)，有資料可以查，感興趣的可以找找看），縱向不要超過(guò)5行。過(guò)多的文本不建議使用卡片形式。


undefined


其實(shí)這張卡片的設(shè)計(jì)中，我也用到了黃金比例來(lái)指導(dǎo)自己的設(shè)計(jì)，方便快速確定文字比例關(guān)系。


undefined


2）間距（網(wǎng)格法）


卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來(lái)規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實(shí)可以很靈活，比如我這里的卡片其實(shí)就用到了8px網(wǎng)格，各間距就會(huì)用8的倍數(shù)來(lái)做。大小比例就盡量用黃金比例來(lái)處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產(chǎn)生美，而效率讓你早點(diǎn)下班。


undefined


3）減少線框


卡片中盡量減少線框，多用留白來(lái)進(jìn)行內(nèi)容劃分。


undefined


4）層次清晰


卡片中的內(nèi)容層級(jí)要做好，標(biāo)題和內(nèi)容之間的差異要明顯。這里的層次主要是通過(guò)對(duì)比拉開(kāi)的，做好對(duì)比的關(guān)鍵就是對(duì)比效果要強(qiáng)烈，決不能模棱兩可。


比如下圖中左邊的案例只是在文字的字號(hào)上有一定的對(duì)比，但字號(hào)間相差不大，效果不明顯，就會(huì)讓人看第一時(shí)間不知道看哪。而右側(cè)的案例則用了加粗，大字號(hào)，大留白等，讓畫(huà)面有了強(qiáng)烈的對(duì)比，從而產(chǎn)生更好的信息層級(jí)。


undefined


5) 內(nèi)容出界


只在卡片的框框里做設(shè)計(jì)，有時(shí)候未免顯得太呆板，破開(kāi)卡片的邊界可以讓卡片本身更具形式感。如果被人說(shuō)你的設(shè)計(jì)沒(méi)啥亮點(diǎn)，那內(nèi)容出界的設(shè)計(jì)就是一個(gè)很好的提升設(shè)計(jì)亮點(diǎn)的手法。


undefined

彩云曾經(jīng)做的一張banner就是運(yùn)用了出界的手法


undefined

來(lái)源：dribbble。界面上的天氣圖標(biāo)也用了出界的手法，讓畫(huà)面顯得更有亮點(diǎn)


4、卡片的細(xì)節(jié)


1）光感


卡片中的光感細(xì)節(jié)能提升設(shè)計(jì)的質(zhì)感。下面這張圖是我最近做的一張會(huì)員卡的背景設(shè)計(jì)，大家對(duì)比下，在卡片頂部加了1px高光線和斜面反光的細(xì)節(jié)前后的質(zhì)感區(qū)別。


undefined


這個(gè)小細(xì)節(jié)，我經(jīng)常會(huì)用到，執(zhí)行簡(jiǎn)單又容易出效果。


undefined


2）投影


投影的細(xì)節(jié)，不要過(guò)重，但又要能與背景分離開(kāi)。有2個(gè)小技巧：

1.在取色的時(shí)候，可以選擇背景顏色的色相，然后略微加深一些，不要用純黑色來(lái)做投影，會(huì)顯臟。

2.投影的距離不要太小，太小的投影會(huì)顯得不夠自然；也不能太大，太大會(huì)很浪費(fèi)界面資源。


undefined


3）3D效果


3D卡片的設(shè)計(jì)，因?yàn)椴槐阌趦?nèi)容編排和閱讀，所以帶透視的卡片在實(shí)際UI中并不太常用。但在作品集包裝和運(yùn)營(yíng)頁(yè)面中，則可以帶來(lái)比較好的視覺(jué)沖擊力，可以嘗試運(yùn)用。


undefined

圖片來(lái)自：Cradle

作者：彩云Sky    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1703)

科學(xué)合理的通過(guò)顏色吸引用戶、增加粘性

純純

沒(méi)有難看的顏色，只有難看的搭配每一種顏色有其獨(dú)特的作用，令人產(chǎn)生不同的情感。合理使用色彩可以取得宜人的效果。

一、色彩的基本認(rèn)知（本模塊設(shè)計(jì)小白可以了解一下，有基礎(chǔ)的略過(guò)）        undefined1、色彩由色相、飽和度、明度三要素構(gòu)成

 色相(Hue)

即各類(lèi)色彩的相貌稱謂，如大紅、普蘭、檸檬黃等。色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的的標(biāo)準(zhǔn)。事實(shí)上任何黑白灰以外的顏色都有色相的屬性，而色相也是由原色、間色和復(fù)色來(lái)構(gòu)成。

 

飽和度(Saturation)

飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大，飽和度越高；消色成分越大，飽和度越低。

 

明度(Brightness）

明度是眼睛對(duì)光源體和物體表面的明暗程度的感覺(jué)，主要有由光線強(qiáng)弱決定的一種視覺(jué)經(jīng)驗(yàn)。明度不僅取決于物體照明程度，而且取決于物體表現(xiàn)的反射系數(shù)。

 

2、配色的基本認(rèn)識(shí)

 

基本色環(huán)(Color Wheel）

按照光譜順序?yàn)椋杭t、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)、藍(lán)紫、紫、紫紅、紅和紫中間在加個(gè)中間色。在色相環(huán)的圓圈里，各種色調(diào)按照不同角度排列，則十二色相環(huán)每一色相距30度，24色相環(huán)每一色相距15度。

 

同一色

色相環(huán)中的任意色因明度變化而呈現(xiàn)的色彩。顏色混合是通過(guò)在色彩中加入黑、白、灰形成的。統(tǒng)一色調(diào)，色彩的純度和明度是具有共同性，明度按照色相略有變化。

同色系配色是指主色和輔色都在同一色相上，這種配色方法往往會(huì)給人頁(yè)面很一致化的感受

 

同類(lèi)色

同類(lèi)色又稱類(lèi)似色。色相環(huán)原色起45度以內(nèi)，含有較多共同的色彩元素的色彩，同類(lèi)色指色相性質(zhì)相同，但色度有深淺之分。

 

相鄰色

色相環(huán)中相距90度，或者相隔五六個(gè)數(shù)位的兩色，為鄰近色關(guān)系，屬中對(duì)比效果的色組。色相彼此近似，冷暖性質(zhì)一致，色調(diào)統(tǒng)一和諧，感情特性一致。

相鄰色不同于同一色的枯燥乏味。稍微跳動(dòng)的的色彩也一樣保持著設(shè)計(jì)的穩(wěn)定性，還能起到強(qiáng)調(diào)單獨(dú)作品的作用

 

對(duì)比色

指色相環(huán)上色相對(duì)比較大、純度較高的任意兩色。對(duì)比色之間無(wú)過(guò)多的共性，對(duì)比效果強(qiáng)烈。當(dāng)對(duì)比的兩色具有相同的彩度和明度時(shí)，對(duì)比效果越明顯；兩色越接近補(bǔ)色，對(duì)比效果越強(qiáng)烈。

主導(dǎo)的對(duì)比配色需要精準(zhǔn)掌控色彩搭配和面積，其中主導(dǎo)色會(huì)帶動(dòng)頁(yè)面的氣氛，產(chǎn)生激烈的心理感受。

 

補(bǔ)色

補(bǔ)色又稱互補(bǔ)色、余色，亦稱強(qiáng)度比色，就是兩種顏色(等量)混合后呈現(xiàn)黑灰色，那么這兩種顏色以定位互補(bǔ)色。色環(huán)的任何直徑兩端相對(duì)之色都稱為互補(bǔ)色

補(bǔ)色對(duì)比由于色彩過(guò)于沖撞，很少用戶傳統(tǒng)網(wǎng)頁(yè)界面，一般用于活動(dòng) banner，起到吸引用戶眼球的作用。



二、HSB色彩模型


1、什么是HSB色彩模型

如果你寫(xiě)過(guò)HTML和CSS，那么肯定熟悉RGB，三個(gè)字母分別表示：R(紅)、G(綠)、B(藍(lán))。這種方式對(duì)電腦來(lái)說(shuō)非常直接明了，也是電腦理解顏色的默認(rèn)方式。對(duì)電腦友好并不意味對(duì)人類(lèi)易用，這也是HSB誕生的原因。

HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness)，又稱HSV，是一種更人性化的顏色描述方式。為什么這么講？因?yàn)樗c人們描述顏色的自然方法一致。

 

2、HSB色彩模式設(shè)置及優(yōu)點(diǎn)undefined

1)、比起 RGB 系統(tǒng)，HSB使用了更貼近人類(lèi)感官直覺(jué)的方式來(lái)描述色彩 ，對(duì)于設(shè)計(jì)師來(lái)說(shuō)更容易理解

 

HSB 的概念很接近色彩學(xué)所常使用的色彩空間模型，由于是由三個(gè)屬性所組合而成，因此常以色立體表示，

但由于我們常用的操作系統(tǒng)依然為二度空間的系統(tǒng)，因此在計(jì)算機(jī)系統(tǒng)的選色接口中常以不同的接口出現(xiàn)，我想其實(shí)大家都很熟悉，像是下圖為sketch中的選色器，可以看見(jiàn)一個(gè)全彩的色相條，和一個(gè)顏色的窗口，滑動(dòng)色相條即可得到不一樣的顏色

 undefined

2)、HSB可以更加科學(xué)地保證設(shè)計(jì)師所使用的不同顏色處于同一明度和飽和度，使用戶的視覺(jué)體驗(yàn)感更好


也許你會(huì)覺(jué)得 HSB 并沒(méi)有比較簡(jiǎn)單，但是實(shí)際使用過(guò)就會(huì)發(fā)現(xiàn)，它是多么的好用。例如下圖的男女比例的背景色塊，如果用RGB調(diào)色只能通過(guò)設(shè)計(jì)師的眼睛和經(jīng)驗(yàn)來(lái)調(diào)整他們是否處于同樣的色調(diào)中，但是用HSB來(lái)調(diào)色，保持S和B值相同，只需要滑動(dòng)色相條即可得到完全一樣的色調(diào)，省時(shí)省力還科學(xué)

                   

 

三、色彩使用規(guī)則

 undefined      

1、色調(diào)的分類(lèi)

色調(diào)（color tone）是不同色相但是具有同樣亮度和純度的顏色進(jìn)行的分組，

undefined     

 

極淺vp（very pale）色調(diào)：

是純度最低、亮度最高的，干凈清淡的顏色，給人清的，柔弱的，女性的，年輕的，淡的，可愛(ài)的印象。

 

亮灰色lg（light grayish）色調(diào)：

純度低，中高亮度的色調(diào)，給人高貴、安定、古樸的印象和輕柔的感覺(jué)。

 

中灰色mg（medium grayish）色調(diào)：

低純度中亮度，具有濁，不起眼，古樸，穩(wěn)健，安定的氣氛。

 

深灰dg（dark grayish）色調(diào)：

低純度和中低亮度，給人漂亮、安定、自然的感覺(jué)。

 

極暗vd（very dark）色調(diào)：

是純度和亮度都最低的色調(diào)，具有厚重牢固的感覺(jué)，給人非常暗，陰暗，厚重，堅(jiān)固、男性的印象。

 

淺的pl（pale）色調(diào)：

中純度和高亮度的色調(diào)，給人干凈、淺、爽朗的感覺(jué)。

 

柔軟sf（soft）色調(diào)：

中純度和中高亮度，給人穩(wěn)健溫柔的感覺(jué)。相比淺色給人感覺(jué)更安定。

 

晦暗dl（dull）色調(diào)：

中純度和中亮度的色調(diào)，給人安心高雅的感覺(jué)，一般說(shuō)的中間色就是晦暗色調(diào)。

 

暗dk（dark）色調(diào)：

中純度和低亮度的色調(diào)，具有結(jié)實(shí)，成熟，古樸的色調(diào)印象。

 

亮It（light）色調(diào): 

高純度高亮度的色調(diào)，具有明亮、健康、活潑，年輕而穩(wěn)定的印象。

 

強(qiáng)st（strong）色調(diào)：

高純度和中高亮度的色調(diào)，充滿活力，冗長(zhǎng)，熱情，開(kāi)放的印象。

 

深dp（deep）色調(diào)：

高純度和低亮度的色調(diào)，具有力量感和深度，給人深的，濃的，傳統(tǒng)的等印象。

 

活潑VV（vivid）色調(diào)：

高純度和中亮度的色調(diào)，較為鮮艷，鮮明，華麗，鮮艷，鮮活的印象。

 

2、色調(diào)配色技巧

同色相環(huán)配色技巧原理一樣，色調(diào)也有3種基本的配色技巧。

 

1）同色調(diào)的配色：

同色調(diào)的顏色幾乎沒(méi)有亮度和純度差，是比較容易統(tǒng)一和協(xié)調(diào)的配色。

undefined     

 2）鄰近色調(diào)配色：

具有一定的亮度和純度差但是差值不大，比較容易調(diào)和，容易傳達(dá)原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。

undefined     

3）對(duì)比色調(diào)配色：

亮度與純度差很大，是極具張力的配色方法。是色調(diào)圖上相隔很遠(yuǎn)的色調(diào)的配色。自由選擇色相，有亮度對(duì)比、純度對(duì)比、亮度和純度對(duì)比這三種配色方式。

undefined      


配色網(wǎng)站推薦

推薦是三個(gè)比較好用的、簡(jiǎn)單操作的配色網(wǎng)站，有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

undefined

四、常用色分析undefined

除了醫(yī)療作用外，顏色還有一定的象征意義和社會(huì)屬性，對(duì)人類(lèi)生活有著舉足輕重的影響。顏色心理學(xué)領(lǐng)域的佼佼者，美國(guó)羅切斯特大學(xué)安德魯.埃利奧特說(shuō)，以前從來(lái)沒(méi)有人做過(guò)這種聯(lián)系。他表示：“顏色研究表明的是，我們的行為會(huì)受到我們沒(méi)有留意，習(xí)以為常的事物的影響?！?/span>

據(jù)國(guó)外媒體報(bào)道，人們常常認(rèn)為，穿著紅色服裝是自信的表現(xiàn)。同時(shí)，科學(xué)家們也認(rèn)為，運(yùn)動(dòng)員身穿紅色運(yùn)動(dòng)服更容易取得好成績(jī)。然而，英國(guó)羅徹斯特大學(xué)的安德魯·埃里奧特等人開(kāi)展的一項(xiàng)最新研究卻顯示，紅色會(huì)抑制人們思維的活躍性。

埃里奧特和他的研究小組共對(duì)一些中學(xué)的高年級(jí)學(xué)生和部分大學(xué)生進(jìn)行了四次研究。期間，他們向被測(cè)試者發(fā)放了一些用于進(jìn)行智力水平測(cè)試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號(hào)。

結(jié)果，凡是所持紙片上用紅色標(biāo)明序號(hào)的學(xué)生，其所獲得的智力水平評(píng)分均明顯低于那些手持灰色或綠色序號(hào)紙片的學(xué)生。先前的研究已經(jīng)證實(shí)，人們?cè)谌粘Ｉ钪兴佑|到的顏色會(huì)對(duì)人的潛意識(shí)產(chǎn)生影響，只不過(guò)這種影響非常短暫。

埃里奧特教授認(rèn)為，紅色首先會(huì)使人們聯(lián)想到錯(cuò)誤和失敗。談到這一點(diǎn)，大多數(shù)人肯定都會(huì)想到老師在判卷時(shí)所使用的紅墨水。當(dāng)然，有關(guān)禁止的信號(hào)通常也以紅色表示。而在自然界中，紅色則是一種警示色。隨后進(jìn)行的另外兩項(xiàng)研究則證實(shí)，當(dāng)受測(cè)試者眼看著紅色回答問(wèn)題時(shí)，他們通常會(huì)選擇那些較為簡(jiǎn)單的問(wèn)題進(jìn)行解答－－這是人們?cè)诿鎸?duì)困難時(shí)所選擇的最經(jīng)典的方法。

與紅色相對(duì)的是，藍(lán)色能夠促進(jìn)創(chuàng)新；黃色，則是最令人愉快的顏色，它被認(rèn)為是愉快的象征，可以刺激神經(jīng)系統(tǒng)和改善大腦功能，激發(fā)人的朝氣，令人思維敏捷。另外還有，橙色，是新思想和年輕的象征，令人感到溫暖、活潑和熱情，能啟發(fā)人的思維，可有效地激發(fā)人的情緒和促進(jìn)消化功能。

賞心悅目的色彩能夠通過(guò)視神經(jīng)傳遞到大腦神經(jīng)細(xì)胞，從而有利于促進(jìn)人的智力發(fā)育。在和諧色彩中生活的少年兒童，其創(chuàng)造力高于普通環(huán)境中的成長(zhǎng)者。若常處于讓人心情壓抑的色彩環(huán)境中，則會(huì)影響大腦神經(jīng)細(xì)胞的發(fā)育，從而使智力下降。所以，我們?cè)谄綍r(shí)日常生活中，正確的應(yīng)用色彩心理學(xué)，改善生活環(huán)境色彩，讓我們的心情更舒適，思維更敏銳。

所以一定不要讓自己孩子在高考的時(shí)候穿什么紅色的外套，旗開(kāi)得勝什么的，可能會(huì)影響思維活躍度，導(dǎo)致考試成績(jī)不理想

undefined

橙色稍稍混入黑色或白色，會(huì)變成一種穩(wěn)重、含蓄又火熱的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會(huì)帶來(lái)一種甜膩的感覺(jué)。由于位于可見(jiàn)光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色，而其色感比紅色更暖，最飽和的橙色應(yīng)該是色彩中感受最暖的顏色，能給人有莊嚴(yán)、尊貴、神秘等感覺(jué)，所以基本上屬于心理色性。歷史上許多權(quán)貴和宗教界都用以裝點(diǎn)自己，現(xiàn)代社會(huì)上往往作為標(biāo)志色和宣傳色。不過(guò)也是容易造成視覺(jué)疲勞的色。

英國(guó)埃塞克斯大學(xué)做了一項(xiàng)研究顯示，綠色是很特別的顏色，在四季分明之地方，如見(jiàn)到春天之樹(shù)木、有綠色的嫩葉，大自然的顏色。在綠色環(huán)境中鍛煉能提高情緒、活力和愉悅感。也就是說(shuō)，戶外鍛煉有益身心。

色彩心理學(xué)家早就指出，人們?cè)诟哳l率顏色(如綠色，藍(lán)色和紫色)的環(huán)境下會(huì)產(chǎn)生平靜的感覺(jué)，而在中低頻率顏色(如紅色，橙色和黃色)的環(huán)境下更容易興奮和激動(dòng)。這一現(xiàn)象可能是在人類(lèi)進(jìn)化的過(guò)程出現(xiàn)的。因?yàn)閷?duì)于原始人類(lèi)來(lái)說(shuō)，綠色的環(huán)境意味著充足的食物和水源，對(duì)綠色的積極感覺(jué)在進(jìn)化過(guò)程中融入大腦。

英國(guó)埃塞克斯大學(xué)的研究者選取十四名男大學(xué)生，要求他們?cè)谑覂?nèi)固定單車(chē)上騎行5分鐘，并觀看關(guān)于森林的紀(jì)錄片。隨后，研究者將視頻背景由綠色轉(zhuǎn)換為黑色、白色和紅色，讓志愿者在觀看這3種顏色視頻的同時(shí)，又分別騎行了5分鐘。結(jié)果發(fā)現(xiàn)，他們?cè)谟^看綠色視頻時(shí)疲勞感低，情緒也能保持愉悅；而觀看紅色背景視頻時(shí)，他們更容易情緒不穩(wěn)。


紫色跨越了暖色和冷色，所以可以根據(jù)所結(jié)合的色彩創(chuàng)建與眾不同的情調(diào)。帶些紅色的深紫色可以產(chǎn)生一個(gè)暖色盤(pán)。淺紫色是較貴的，常常會(huì)聯(lián)想到浪漫。當(dāng)結(jié)合玫紅色的時(shí)候，可以創(chuàng)建一個(gè)很女性化的色盤(pán)。一個(gè)比較男人的色盤(pán)可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結(jié)合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對(duì)比色，可以創(chuàng)建強(qiáng)對(duì)比度的色盤(pán)。

     

作者：木子淺談    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1643)

設(shè)計(jì)師除設(shè)計(jì)外所需要具備的能力

純純

我們已經(jīng)或多或少看過(guò)一些優(yōu)秀作品，也知道了一些設(shè)計(jì)方法和技巧，了解到了一些相關(guān)的理論知識(shí)，自己也做過(guò)一些項(xiàng)目或者是練習(xí)，總體來(lái)說(shuō)都掌握了一定的設(shè)計(jì)能力；但是設(shè)計(jì)師想要擁有更多的資源（指薪資、工作機(jī)會(huì)等等）或者是想職業(yè)進(jìn)階，除了一定的設(shè)計(jì)能力之外是遠(yuǎn)遠(yuǎn)不夠的，設(shè)計(jì)師還需要掌握更多的能力，才能讓自己成長(zhǎng)提升，并且擁有他人無(wú)法取代的價(jià)值。我通過(guò)自己的經(jīng)歷和整理收集，發(fā)現(xiàn)目前如今不同階段的設(shè)計(jì)師對(duì)待同一個(gè)問(wèn)題不同的角度以及特征，如下圖所示：



不難發(fā)現(xiàn)，當(dāng)大家還是初級(jí)設(shè)計(jì)師的時(shí)候，剛剛接觸設(shè)計(jì)行業(yè)，我們更多的是去觀察、學(xué)習(xí)、臨摹一些“好看”的作品，熟練地使用設(shè)計(jì)軟件和提升設(shè)計(jì)技法，最后的是自己做出來(lái)的產(chǎn)品是否漂亮美觀，最重要的是客戶/老板是否會(huì)買(mǎi)單，而自己無(wú)法清晰地定義自己設(shè)計(jì)的產(chǎn)品價(jià)值，也不能很好表達(dá)出自己的想法和觀點(diǎn)。所以產(chǎn)品走向會(huì)根據(jù)老板/客戶的水準(zhǔn)來(lái)定義，輪到自己表達(dá)只是支支吾吾，最后只是做為執(zhí)行無(wú)休止地改改改。一切由老板/客戶說(shuō)的算，無(wú)法清晰地了解自己產(chǎn)品的定位，缺乏表達(dá)觀點(diǎn)的能力，缺乏一定的審美，作為執(zhí)行角色無(wú)休止加班成為了初級(jí)設(shè)計(jì)師最大的痛點(diǎn)。


而經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)和工作后，逐漸轉(zhuǎn)型成為中級(jí)設(shè)計(jì)師后，有了一定的設(shè)計(jì)技法和軟件使用熟練度，有了一定的審美和視覺(jué)表現(xiàn)能力，平臺(tái)規(guī)模合作團(tuán)隊(duì)也逐漸變大，基本能滿足老板/客戶/業(yè)務(wù)方提出的需求。開(kāi)始學(xué)習(xí)一些設(shè)計(jì)相關(guān)理論，開(kāi)始拆解自己或別人產(chǎn)品的交互架構(gòu)，更多地開(kāi)始關(guān)注用戶體驗(yàn)起來(lái)，也會(huì)融入品牌元素到自己的產(chǎn)品當(dāng)中，為自己的產(chǎn)品做情感化設(shè)計(jì)和制定設(shè)計(jì)規(guī)范，會(huì)組織一些專(zhuān)業(yè)語(yǔ)言和業(yè)務(wù)溝通以及陳述自己的產(chǎn)品。但是如何從眾多的設(shè)計(jì)方案中找到最優(yōu)的方案來(lái)解決問(wèn)題，如何更多地體現(xiàn)產(chǎn)品的價(jià)值，產(chǎn)品利益鏈如何形成商業(yè)閉環(huán)，如何在團(tuán)隊(duì)/設(shè)計(jì)圈體現(xiàn)自己個(gè)人的價(jià)值，如何提升自己的個(gè)人影響力，成為了中級(jí)設(shè)計(jì)師這階段的痛點(diǎn)。


通過(guò)三年五年的沉淀，成為高級(jí)設(shè)計(jì)師后，形成了自己獨(dú)有的一套方法論和設(shè)計(jì)思維，能熟練地拆解每款產(chǎn)品和定義產(chǎn)品，視覺(jué)表現(xiàn)層已經(jīng)完全能駕馭，能清晰地闡述自己的設(shè)計(jì)思路和結(jié)論，產(chǎn)品用戶體驗(yàn)層也有了一定的經(jīng)驗(yàn)和方法，在團(tuán)隊(duì)中或者設(shè)計(jì)圈有自己一定的個(gè)人影響力，更多地會(huì)在工作中思考產(chǎn)品帶來(lái)的社會(huì)價(jià)值和商業(yè)價(jià)值，會(huì)用不同的思維去思考產(chǎn)品的各個(gè)維度，找到最優(yōu)的方法解決問(wèn)題，會(huì)把固有的利益鏈轉(zhuǎn)換成商業(yè)閉環(huán)，提升用戶轉(zhuǎn)化率等等。而這階段的設(shè)計(jì)師的主要痛點(diǎn)就是面臨著團(tuán)隊(duì)管理和溝通，朝著資深設(shè)計(jì)師和設(shè)計(jì)專(zhuān)家轉(zhuǎn)型，以及如何為平臺(tái)帶來(lái)的利益價(jià)值考核等等問(wèn)題。


資深設(shè)計(jì)師或者設(shè)計(jì)專(zhuān)家這里不談，因?yàn)檫@階段所思考的問(wèn)題大都和設(shè)計(jì)無(wú)關(guān)了。通過(guò)上述不難發(fā)現(xiàn)，每個(gè)階段的設(shè)計(jì)師都有各自的特征和痛點(diǎn)，雖然其中都包含著設(shè)計(jì)相關(guān)的能力，但是隨著階段的進(jìn)階設(shè)計(jì)相關(guān)的能力占比逐漸變少，更多的是其他的能力增長(zhǎng)，所以設(shè)計(jì)師除了設(shè)計(jì)以外其他能力的重要程度顯而易見(jiàn)，那么我們來(lái)看看除了設(shè)計(jì)以外，設(shè)計(jì)師應(yīng)該掌握其他什么能力。


思考能力(Thinking)

思考能力作為首要的能力，不僅僅是設(shè)計(jì)師，其他職業(yè)一樣需要這個(gè)能力，這里所涵蓋的面太廣泛了也說(shuō)不了，這里主要針對(duì)三點(diǎn)來(lái)講：核心競(jìng)爭(zhēng)力、批判思維和分析能力。思考分為兩個(gè)層面：自我層面的和業(yè)務(wù)層面的思考；自我層面的思考就是要通過(guò)深度剖析自我，發(fā)掘自己處于哪個(gè)階段，有什么長(zhǎng)處和不足，自己想要什么，需要往怎樣的方向發(fā)展；而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗(yàn)、商業(yè)價(jià)值等等等等，前者更加關(guān)注自身的成長(zhǎng)，后者更加關(guān)注業(yè)務(wù)的成長(zhǎng)。



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

核心競(jìng)爭(zhēng)力就是有與別人不一樣的競(jìng)爭(zhēng)力，想要做到別人無(wú)法替代你的地步，就要有自己個(gè)人核心的競(jìng)爭(zhēng)力。如果你會(huì)做一張 Banner，我也會(huì)做一張 Banner，你會(huì)搞一個(gè)頁(yè)面，我也會(huì)搞一個(gè)頁(yè)面，那么你這個(gè)人就成為了可有可無(wú)的螺絲釘，唯一的優(yōu)勢(shì)就是年輕能拼能熬，等你熬銹了老了，隨時(shí)可以換一顆新的螺絲釘來(lái)取代你的位置。所以不管什么階段，我們要深度剖析自己，認(rèn)清自己的優(yōu)勢(shì)劣勢(shì)，并采取相應(yīng)的措施。



剖析自己的核心競(jìng)爭(zhēng)力給大家一個(gè)大致思路，從異樣性和共通性入手。自己周?chē)蚨嗷蛏儆袌F(tuán)隊(duì)，條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺(tái)都很發(fā)達(dá)，也能融入一些設(shè)計(jì)圈子中，和不同的人對(duì)比尋找自己的核心競(jìng)爭(zhēng)力。異樣性是當(dāng)前的優(yōu)勢(shì)，找出其中的優(yōu)點(diǎn)，不斷地放大深造，變成你的核心競(jìng)爭(zhēng)力，而和別人不一樣的缺點(diǎn)找出來(lái)摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢(shì)，因?yàn)橹T多共通性中總有你最喜歡最擅長(zhǎng)的一個(gè)，將它單獨(dú)拿出來(lái)不斷擴(kuò)大，逐漸就拉開(kāi)了差異性，慢慢就轉(zhuǎn)化成你的核心競(jìng)爭(zhēng)力了，而大家都有的缺點(diǎn)，你把它糾正了，就成為你的核心競(jìng)爭(zhēng)力了。

來(lái)舉一個(gè)栗子：小王是一名工作了3年的設(shè)計(jì)師，研究生畢業(yè)，由于公司的原因平時(shí)工作最多接觸的就是一些運(yùn)營(yíng)圖 banner，也有過(guò)很多品牌 VI 的經(jīng)驗(yàn)，逐漸自己在視覺(jué)表現(xiàn)上有自己一定的見(jiàn)解和想法，也更加感興趣做視覺(jué)表現(xiàn)的東西。

那么他的共通性就有：1.工作3年之久；2.研究生畢業(yè)；3.視覺(jué)表現(xiàn)能力強(qiáng)也更感興趣；4.做過(guò)品牌 VI 的經(jīng)驗(yàn)；5.有自己的見(jiàn)解和想法。

由此推斷出小王的共通性是：1.工作經(jīng)驗(yàn)豐富；2.視覺(jué)表現(xiàn)力強(qiáng)；3.有想法和見(jiàn)解；

異樣性是：1.學(xué)歷優(yōu)勢(shì)；2.品牌 VI 相關(guān)經(jīng)驗(yàn)

那么小王可以保持自己學(xué)歷優(yōu)勢(shì)下，可以繼續(xù)深造品牌 VI 相關(guān)，逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計(jì)師，那么學(xué)歷和很多品牌 VI 的經(jīng)驗(yàn)就是小王的核心競(jìng)爭(zhēng)力；也可以通過(guò)熱愛(ài)去學(xué)習(xí) C4D 動(dòng)效等軟件繼續(xù)增強(qiáng)自己視覺(jué)表現(xiàn)力，配合自己豐富的工作經(jīng)驗(yàn)逐漸轉(zhuǎn)型成高學(xué)歷的創(chuàng)意藝術(shù)設(shè)計(jì)師，然后通過(guò)將自己的想法見(jiàn)解通過(guò)分享會(huì)、文章等模式產(chǎn)出，將這一點(diǎn)升級(jí)成個(gè)人影響力，那么綜合下來(lái)更加優(yōu)秀的視覺(jué)表現(xiàn)力、豐富的工作經(jīng)驗(yàn)和個(gè)人影響力也會(huì)逐漸變成小王的核心競(jìng)爭(zhēng)力。

只有通過(guò)不同維度深度地剖析自己，找到自己的共通和異樣點(diǎn)，清晰自己的價(jià)值定位，然后制定出適合自己成長(zhǎng)目標(biāo)和方案，不斷放大增加自己的核心競(jìng)爭(zhēng)力，成為不可取代的那個(gè)人。


· 批判思維

批判思維是一名設(shè)計(jì)師必須具備的思維能力，我們不僅僅要學(xué)會(huì)批判別人的作品，還要學(xué)會(huì)自我批判。這里不是指無(wú)腦的批判（之前遇到過(guò)一個(gè)實(shí)習(xí)生剛進(jìn)到公司里，就把之前所有人做的東西全部批判了一遍，重點(diǎn)是只說(shuō)產(chǎn)品好看與否，完全不顧及平臺(tái)一致性商業(yè)價(jià)值用戶體驗(yàn)等等，最后只批判卻沒(méi)有任何實(shí)質(zhì)性的建議，頗有一種指點(diǎn)江山的感覺(jué)，然后后面再也沒(méi)見(jiàn)到過(guò)他了），這里是指在自己通過(guò)批判別人或自我的方案，不斷地優(yōu)化糾正，最后產(chǎn)出最優(yōu)質(zhì)的方案，這是批判思維的出發(fā)點(diǎn)。



不同的人有不同的經(jīng)歷，看待問(wèn)題的維度是多種多樣的，所以一個(gè)方案產(chǎn)出后，通過(guò)不同的人思考后的結(jié)果是最好的解決方案。這也印證了波克定理：只有在爭(zhēng)辯中，才可能誕生最好的主意和最好的決定。所以當(dāng)設(shè)計(jì)師接到產(chǎn)品交互給到的原型圖后，不要上手就做圖，要通過(guò)自己經(jīng)驗(yàn)和想法去看待原型圖，然后提出更加優(yōu)質(zhì)的方案進(jìn)行討論，如果你的方案更加優(yōu)質(zhì)，那么不僅是產(chǎn)品的質(zhì)量得到了優(yōu)化，你個(gè)人的經(jīng)驗(yàn)也得到了沉淀，下次遇到相同的場(chǎng)景就可以拿出來(lái)復(fù)用，直到遇到更好的方案。

唯一注意的事項(xiàng)就是注意溝通的方法，這里后文會(huì)提到，比你資歷高的人提出的觀點(diǎn)更加具有建設(shè)性，在毫無(wú)頭緒沒(méi)有創(chuàng)新的情況下就聽(tīng)比你更有經(jīng)驗(yàn)的人的；遇到比你資歷低的人提出的觀點(diǎn)也不要嗤之以鼻，抓取其中有用的點(diǎn)，沒(méi)準(zhǔn)是一個(gè)新的思維方向；總之，有數(shù)據(jù)說(shuō)數(shù)據(jù)，沒(méi)數(shù)據(jù)舉案例，沒(méi)案例講觀點(diǎn)，如果連觀點(diǎn)都沒(méi)有的話，照著大佬說(shuō)的話做就是了。


· 分析能力

分析能力也是設(shè)計(jì)師必須掌握的能力之一，無(wú)論你是創(chuàng)意藝術(shù)設(shè)計(jì)師，還是用戶體驗(yàn)設(shè)計(jì)師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫(huà)的配色或者場(chǎng)景搭建，譬如產(chǎn)品的布局結(jié)構(gòu)或者用戶體驗(yàn)，這些都需要有一定的分析能力。通過(guò)拆解改版/競(jìng)品/參照產(chǎn)品等，明確產(chǎn)品的最終目的、商業(yè)價(jià)值等等，有了這些準(zhǔn)備后才能對(duì)自己的產(chǎn)品進(jìn)行設(shè)計(jì)或者改版。而分析產(chǎn)品可以以用戶體驗(yàn)五要素的角度來(lái)分析，分別是：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，具體相關(guān)的文章站酷、PM 社區(qū)、36氪等等都搜的到，這里不再細(xì)說(shuō)；之前在分析產(chǎn)品的時(shí)候發(fā)現(xiàn)有些產(chǎn)品強(qiáng)行套用這五個(gè)要素進(jìn)去不適用，因?yàn)橛行┊a(chǎn)品的頁(yè)面它不存在戰(zhàn)略層或者范圍層的東西，所以我總結(jié)歸納了三個(gè)角度來(lái)分析產(chǎn)品。



案例就用淘搶購(gòu) v4.1 頁(yè)面（已上線）來(lái)講，三個(gè)角度主要是：表現(xiàn)層、用戶體驗(yàn)層和價(jià)值層。表現(xiàn)層主要就是產(chǎn)品頁(yè)面的配色、布局結(jié)構(gòu)之類(lèi)的；用戶體驗(yàn)層就是產(chǎn)品的心智透出、交互流程之類(lèi)的；價(jià)值層就是產(chǎn)品深度的價(jià)值體現(xiàn)了，比如商業(yè)價(jià)值、社會(huì)價(jià)值和用戶留存率之類(lèi)的；大致可以套用這個(gè)公式去思考：為什么這里會(huì)用這種表現(xiàn)形式，它想要表達(dá)怎樣的效果，它要達(dá)到怎樣的最終目的，如果是自己去設(shè)計(jì)會(huì)怎樣做。舉例：因?yàn)樘詫氁?guī)范為卡片式設(shè)計(jì)，在視覺(jué)表現(xiàn)上要統(tǒng)一，所以淘搶購(gòu) v4.1 的業(yè)務(wù)目的是統(tǒng)一視覺(jué)樣式，并且它需要給用戶產(chǎn)生一種“商品很便宜快去搶購(gòu)再不搶購(gòu)就沒(méi)了”的心智認(rèn)知，它的最終目的是引導(dǎo)用戶去商品 Detail 頁(yè)面購(gòu)買(mǎi)商品和提高商品的點(diǎn)擊率，這樣通過(guò)協(xié)調(diào)關(guān)系形成平臺(tái)、商家和用戶之間的利益鏈商業(yè)閉環(huán)。

想要提升自己的分析能力除了項(xiàng)目和時(shí)間的沉淀外，更多的時(shí)候需要自己平時(shí)的積累，站酷等平臺(tái)有很多優(yōu)秀的作品，作者會(huì)把自己設(shè)計(jì)的分析和思路寫(xiě)出來(lái)，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會(huì)怎么去做；其次做設(shè)計(jì)的時(shí)候帶著同理心去做，把自己當(dāng)作用戶去看待自己的產(chǎn)品，通過(guò)不斷的積累提升自己對(duì)產(chǎn)品的敏銳度，將一些產(chǎn)品的隱性問(wèn)題挖掘出來(lái)；另外可以多看一些好的設(shè)計(jì)分析書(shū)，比如《U一點(diǎn)料1、2》、《以匠心 致設(shè)計(jì)》等等，將學(xué)到的分析方法代入自己的產(chǎn)品或作品中，逐漸分析能力就增強(qiáng)了。


規(guī)劃能力(Plan)

規(guī)劃能力是日常工作生活中所需要掌握的能力，主要講業(yè)務(wù)規(guī)劃和職業(yè)生涯規(guī)劃，業(yè)務(wù)規(guī)劃能力應(yīng)對(duì)的是我們工作中處理業(yè)務(wù)所需要具備的能力，而職業(yè)生涯規(guī)劃應(yīng)對(duì)的是我們整個(gè)人生職業(yè)生涯規(guī)劃的能力。掌握這個(gè)能力后前者會(huì)給我們帶來(lái)業(yè)務(wù)處理效率上的提升，后者給我們帶來(lái)整個(gè)人生有益的好處，所以這個(gè)能力非常重要。


· 業(yè)務(wù)規(guī)劃

很多時(shí)候我們還在有條不紊地處理某個(gè)需求，心想著下班去吃個(gè)飯買(mǎi)水果回家洗澡睡覺(jué)的時(shí)候，突然來(lái)了一個(gè)緊急的需求，就把我們整天的計(jì)劃給打亂了，火急火燎地處理完這個(gè)需求，然后又把之前的需求做了，最后加班改改改導(dǎo)致整個(gè)計(jì)劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經(jīng)典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個(gè)象限。



很多時(shí)候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒(méi)有認(rèn)真地把它代入自己的工作生活當(dāng)中。畫(huà)一個(gè)象限表，把自己今天所要處理的事務(wù)陳列出來(lái)五分鐘都不需要，一開(kāi)始可能因?yàn)槭虑椴欢嗑蜎](méi)堅(jiān)持下去，一旦養(yǎng)成習(xí)慣后，將來(lái)遇到多種緊急情況突發(fā)的時(shí)候就能認(rèn)識(shí)到這個(gè)習(xí)慣給你帶來(lái)的好處了，所謂養(yǎng)兵千日，用兵一時(shí)就是這個(gè)道理。



在做業(yè)務(wù)需求的時(shí)候，可能會(huì)碰到有些需求價(jià)值高，有些需求價(jià)值低但又很緊急，不知道怎么處理之間的關(guān)系，我們依舊可以套用四象限法則來(lái)制定一個(gè)四象限表：價(jià)值高且緊急、緊急但價(jià)值低、價(jià)值高不緊急和價(jià)值低不緊急。什么是價(jià)值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個(gè)頁(yè)面的改版；價(jià)值低的需求則是相對(duì)不怎么需要思考和分析的需求，比如根據(jù)已有的規(guī)范改個(gè)顏色之類(lèi)的。在時(shí)間的優(yōu)先級(jí)前，價(jià)值高的需求大于價(jià)值低的，最后剩下的就是價(jià)值不高且不緊急的。因?yàn)槲覀儫o(wú)法拒絕需求，需求來(lái)了肯定要是做的，工作不是愛(ài)好可以有多種選擇性，但我們要學(xué)會(huì)將需求分解成不同類(lèi)型的，對(duì)自己有成長(zhǎng)沉淀的需求那可以作為最高優(yōu)先級(jí)去處理，留夠充裕的時(shí)間去思考分析，然后沉淀經(jīng)驗(yàn)穩(wěn)定提升。


· 職業(yè)生涯規(guī)劃

這個(gè)在大學(xué)期間就學(xué)過(guò)相關(guān)的課程，只不過(guò)當(dāng)時(shí)并沒(méi)有太深的感觸，而是等工作以后才知道這項(xiàng)能力的重要性，它相當(dāng)于關(guān)系著你每個(gè)階段的里程碑，當(dāng)成游戲中的成就任務(wù)也不為過(guò)，還是自己設(shè)定的成就任務(wù)。某個(gè)階段想要達(dá)成什么樣的目標(biāo)，想要獲得怎樣的成就，都是要自己一步一步慢慢規(guī)劃并且完成出來(lái)的。

因?yàn)槲矣龅竭^(guò)幾個(gè)非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺(jué)工作時(shí)間就是在努力學(xué)習(xí)，到最后還是很迷茫，不知道做什么，不知道如何體現(xiàn)自己的價(jià)值。這類(lèi)沒(méi)有目的的努力的人是很可怕的，他們努力得沒(méi)有錯(cuò)，但是這樣下去沒(méi)有成效的努力會(huì)讓他們覺(jué)得努力并沒(méi)什么用，然后逐漸開(kāi)始產(chǎn)生抱怨、泄氣和放棄等負(fù)面情緒。



舉個(gè)例子來(lái)說(shuō)明：如果你剛畢業(yè)，給自己制定的長(zhǎng)遠(yuǎn)的職業(yè)生涯規(guī)劃是在工作3～5年后進(jìn)到大廠工作提升自己，那么所拆分下來(lái)就需要一些項(xiàng)目工作經(jīng)驗(yàn)和優(yōu)秀的作品，再拆分下來(lái)就是如何做出優(yōu)秀的作品，細(xì)分到最后就是作品當(dāng)中的元素，比如圖標(biāo)排版布局之類(lèi)的，那么就制定一段時(shí)間內(nèi)的練習(xí)就按照各類(lèi)元素去做，比如圖標(biāo)畫(huà)兩個(gè)星期，APP 設(shè)計(jì)排版布局練習(xí)兩個(gè)星期，插畫(huà)練習(xí)畫(huà)兩個(gè)星期，這樣堅(jiān)持下來(lái)就組成一個(gè)完整的項(xiàng)目作品了，以此類(lèi)推。有了規(guī)劃目標(biāo)并且在自我驅(qū)動(dòng)的推動(dòng)下，逐漸實(shí)現(xiàn)自己的職業(yè)目標(biāo)。


設(shè)計(jì)師要如何培養(yǎng)自我驅(qū)動(dòng)可以看我之前的文章：


淺談設(shè)計(jì)師的自我驅(qū)動(dòng)

https://www.zcool.com.cn/article/ZODEzMTky.html


執(zhí)行能力(Execute)

執(zhí)行能力是指自我在工作&學(xué)習(xí)中執(zhí)行的能力，執(zhí)行能力為一個(gè)設(shè)計(jì)師最主要的核心技能，一切的能力都凌駕于這個(gè)基礎(chǔ)之上；哪怕你再能說(shuō)會(huì)道，能賦予你的設(shè)計(jì)各種價(jià)值，能給予你的設(shè)計(jì)各種環(huán)境，但這些都是第二步，第一步就是你的設(shè)計(jì)表現(xiàn)達(dá)到期望值，如若第一步稿子都不好看，那么沒(méi)人愿意會(huì)聽(tīng)你敘述的。前文已經(jīng)提及到了，設(shè)計(jì)師在初級(jí)至中級(jí)階段的時(shí)候大多數(shù)注重的就是表現(xiàn)手法，如同學(xué)說(shuō)話一樣，表現(xiàn)手法可以看作是漢語(yǔ)拼音，然后才是組成一個(gè)個(gè)字，最后組成一句完整的話語(yǔ)。


· 自我執(zhí)行力

提升自我執(zhí)行的能力我大致分為兩個(gè)步驟：看和做。

首先先來(lái)說(shuō)看，看其實(shí)是提高自己審美的一個(gè)過(guò)程，通過(guò)看一些平臺(tái)網(wǎng)站的優(yōu)秀設(shè)計(jì)作品，久而久之自己的審美能力才會(huì)提高，然而看分下來(lái)一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或?qū)W習(xí)時(shí)間，通過(guò)瀏覽設(shè)計(jì)網(wǎng)站采集學(xué)習(xí)一些你覺(jué)得好看的作品；采集是一個(gè)很好的習(xí)慣，我覺(jué)得是每個(gè)設(shè)計(jì)師必須養(yǎng)成的習(xí)慣，把自己平時(shí)覺(jué)得好的表現(xiàn)形式收集起來(lái)，等到某一天需要用到的時(shí)候，腦海中對(duì)當(dāng)前場(chǎng)景會(huì)有一定的印象，再根據(jù)印象去尋找采集到的作品，能很大程度上節(jié)省自己腦爆的時(shí)間，哪怕沒(méi)有采集或者文件丟失，自己的腦中大致也會(huì)有一個(gè)雛形方向。而帶有目的性地看是指針對(duì)某一個(gè)模塊去搜集整理，比如今天我需要做一個(gè)關(guān)于內(nèi)容的模塊，那么我就會(huì)去尋找一些做內(nèi)容的產(chǎn)品設(shè)計(jì)，搜集到的各類(lèi)關(guān)于內(nèi)容的表現(xiàn)手法，然后結(jié)合自己的經(jīng)驗(yàn)和分析，找出最適合自己產(chǎn)品的一種。



僅僅看是不夠的，在看過(guò)之后我們需要?jiǎng)邮謬L試才能算真正地沉淀自己所看到、學(xué)到的東西。做設(shè)計(jì)最忌諱的就是“眼高手低或者眼低手高”這種狀態(tài)，有了審美但表現(xiàn)手法跟不上，或者說(shuō)表現(xiàn)手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過(guò)自己的嘗試去做出來(lái)，才能真正的沉淀到自己的大腦當(dāng)中，變成自己的表現(xiàn)手法之一。最后通過(guò)大量的積累，結(jié)合對(duì)商業(yè)需求的判斷形成設(shè)計(jì)策略，才能從容應(yīng)對(duì)不同的產(chǎn)品需求，哪怕你今天做金融相關(guān)的產(chǎn)品，還是明天做電商的產(chǎn)品，后天又改做工具類(lèi)產(chǎn)品，一旦形成了自己不同的應(yīng)對(duì)策略，才能做到真正意義上的游刃有余。



很多時(shí)候我們只關(guān)注到魚(yú)的大小、魚(yú)的肉質(zhì)是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚(yú)技巧和方法；看到的只是產(chǎn)品是否好看，交互是否流暢，體驗(yàn)是否良好，沒(méi)有往更深層次地去想這個(gè)產(chǎn)品的商業(yè)背景是什么，設(shè)計(jì)師為什么要這樣設(shè)計(jì)，如果換做自己的話會(huì)去怎么做；畢竟我們所做的一切訓(xùn)練、思考都是為了更好地為工作服務(wù)，就如同脫離了商業(yè)背景以后，有些設(shè)計(jì)就只是單純的炫技，并沒(méi)有解決問(wèn)題的價(jià)值，而設(shè)計(jì)師的工作核心就是解決問(wèn)題，所以我們要結(jié)合作品的背景、價(jià)值等因素，去看、去做、去學(xué)相應(yīng)的表現(xiàn)手法才是自我執(zhí)行的核心所在。


表達(dá)能力(Express)

表達(dá)能力是設(shè)計(jì)師除去執(zhí)行能力外第二重要的能力，小到平日里的溝通對(duì)接，大到述職晉升面試，都離不開(kāi)表達(dá)能力的支持。有些設(shè)計(jì)師經(jīng)常面試怎么都過(guò)不了關(guān)，我本以為是作品集的問(wèn)題，可是看完之后作品方面完全沒(méi)有什么問(wèn)題，具體了解后才知道是在面試過(guò)程當(dāng)中不知如何闡述自己的作品和思路或者在闡述過(guò)程中由于緊張等因素導(dǎo)致表達(dá)斷斷續(xù)續(xù)不順暢，面試官就會(huì)覺(jué)得這個(gè)人不靠譜然后 PASS，明明做圖很優(yōu)秀卻輸在了表達(dá)上，這種情況就很憋屈。在廣告公司中，一個(gè) LOGO 或者廣告視頻往往只是贈(zèng)品，出售的卻是這個(gè)品牌VI的故事；如果一個(gè)設(shè)計(jì)師不懂得怎么闡述自己的業(yè)務(wù)，不懂得怎么推銷(xiāo)自己的方案，不懂得拓寬自己的個(gè)人影響力，就單純的只會(huì)執(zhí)行作圖的話，那么這名設(shè)計(jì)師是不合格的。網(wǎng)傳有一個(gè)段子“一個(gè)公司的工資排名規(guī)律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽(tīng) PPT 的，聽(tīng) PPT 的不如聽(tīng)匯報(bào)的，聽(tīng)匯報(bào)的不如決定的，決定的不如簽字的”，由此可見(jiàn)表達(dá)能力在職場(chǎng)中的重要性。


· 業(yè)務(wù)表達(dá)

業(yè)務(wù)表達(dá)是指在自己工作的過(guò)程當(dāng)中，對(duì)自己的設(shè)計(jì)方案進(jìn)行闡述。大部分設(shè)計(jì)師會(huì)遇到一個(gè)困擾，當(dāng)設(shè)計(jì)稿做完以后就不知道怎么去表達(dá)自己的設(shè)計(jì)理念，被業(yè)務(wù)方/面試官/老板提出質(zhì)疑時(shí)，比如：“你這產(chǎn)品的設(shè)計(jì)為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說(shuō)，有一種當(dāng)時(shí)就覺(jué)得好看所以這樣做了，也沒(méi)有去想那么多的感覺(jué)，或者其他優(yōu)秀的作品/競(jìng)品是這樣做的，我也就這樣做了；那么結(jié)果往往就是自己的專(zhuān)業(yè)性遭到質(zhì)疑，然后轉(zhuǎn)變成業(yè)務(wù)方/老板進(jìn)行設(shè)計(jì)主導(dǎo)，形成“改來(lái)改去還是第一版好”這樣類(lèi)似的惡性循環(huán)中。



那么如何提升自己的業(yè)務(wù)表達(dá)能力呢？首先設(shè)計(jì)師要提升在設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)度，通過(guò)學(xué)習(xí)吸納設(shè)計(jì)相關(guān)的知識(shí)，然后代入自己的設(shè)計(jì)當(dāng)中去試著闡述設(shè)計(jì)稿，準(zhǔn)備工作先做到位，收集相關(guān)的數(shù)據(jù)，掌握相對(duì)應(yīng)的設(shè)計(jì)理論，先說(shuō)服自己再去說(shuō)服別人。比如：“通過(guò)色彩心理學(xué)得知，紅色能帶給人興奮、激動(dòng)、熱情等積極情緒，而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的，相對(duì)應(yīng)地激發(fā)出用戶的正向情緒，所以我這里使用紅色?！?、“根據(jù)近半年數(shù)據(jù)研究得出，產(chǎn)品聊天信息模塊使用過(guò)程當(dāng)中女性用戶占總用戶數(shù)的85.9%，而小氣泡樣式相對(duì)比其他樣式更能迎合女性用戶群體的喜好，通過(guò) A/B 測(cè)試結(jié)果得出，使用小氣泡樣式后數(shù)據(jù)上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式。”

通過(guò)自己前期的準(zhǔn)備（設(shè)計(jì)理論知識(shí)補(bǔ)充、用戶調(diào)研、數(shù)據(jù)測(cè)試等），將自己的設(shè)計(jì)理念表達(dá)出來(lái)，主導(dǎo)整個(gè)設(shè)計(jì)的方向，必要時(shí)可以理性地堅(jiān)持自己的設(shè)計(jì)方案，畢竟無(wú)論是老板還是業(yè)務(wù)方，出發(fā)點(diǎn)都是希望自己的產(chǎn)品能做到最好最完善，只要你給出數(shù)據(jù)支撐和專(zhuān)業(yè)性的建議，他們一定都會(huì)采納接受的，而最后你的能力和專(zhuān)業(yè)性也得到了對(duì)應(yīng)的認(rèn)可。


· 書(shū)面表達(dá)

我本人是強(qiáng)烈建議在能力達(dá)到一定程度的時(shí)候，通過(guò)寫(xiě)作來(lái)檢視自己成果的。因?yàn)橥芏鄸|西自己是明白的，但是寫(xiě)出來(lái)讓其他人看懂是另外一種能力了。自己一段時(shí)間的職業(yè)經(jīng)驗(yàn)總結(jié)、對(duì)設(shè)計(jì)的見(jiàn)解看法、自己獨(dú)特的設(shè)計(jì)思維、一本書(shū)的讀后感等等都可以通過(guò)書(shū)面表達(dá)出來(lái)，某個(gè)知識(shí)理論難的不是學(xué)習(xí)，而是將它教授出去，因?yàn)橹挥心阆胍涯臣抡f(shuō)明白，闡述得其他人都能看懂，那么首先你要對(duì)這件事理解得很透徹，然后通過(guò)自己的經(jīng)驗(yàn)和見(jiàn)解，轉(zhuǎn)化成通俗的語(yǔ)言說(shuō)給別人聽(tīng)。最好的狀態(tài)就是與你同樣級(jí)別的人你能與他用專(zhuān)業(yè)術(shù)語(yǔ)對(duì)話，級(jí)別比你低的人你能把理論轉(zhuǎn)換成他能聽(tīng)懂的語(yǔ)言進(jìn)行交流，這樣才算是對(duì)理論概念理解透徹到位。

大家也明白，學(xué)習(xí)最有效的方法不是輸入而是輸出，設(shè)計(jì)也是一樣的。在學(xué)習(xí)某種理論方法后，通過(guò)書(shū)面表達(dá)出自己的見(jiàn)解和想法，并代入到相應(yīng)的例子當(dāng)中，做到舉一反三才能算是真正的學(xué)到了這個(gè)知識(shí)點(diǎn)。



· 述職

述職一般出現(xiàn)在晉升報(bào)告或者面試當(dāng)中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f(shuō)是工作報(bào)告中的總結(jié)性報(bào)告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機(jī)會(huì)；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無(wú)成效的工作，述職沒(méi)有想象的那么簡(jiǎn)單，但是也沒(méi)有那么難，很多人都會(huì)經(jīng)歷兩個(gè)述職的誤區(qū)，這些誤區(qū)我經(jīng)歷過(guò)也看到過(guò)，所以總結(jié)出來(lái)警醒大家。


一、把述職當(dāng)作流水賬

把述職當(dāng)作流水賬是很多新人容易犯的錯(cuò)誤，當(dāng)述職的時(shí)候，有的人就會(huì)陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設(shè)計(jì)了 XXX 的首頁(yè)”、“我通過(guò)調(diào)查研究自主推導(dǎo)改版了 XXX 模塊并落地成功”等等，這時(shí)候你的老板/面試官會(huì)心里會(huì)想：“所以呢？”“然后呢？”，工作結(jié)果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進(jìn)行流水賬般的描述就夠了的。


二、把述職當(dāng)作邀功大會(huì)

這個(gè)誤區(qū)相對(duì)來(lái)說(shuō)更高端一些，述職的時(shí)候有的人常常會(huì)像邀功一樣：“我今年通過(guò)改版了 XXX 模塊，導(dǎo)致用戶量從50%上漲到了80%”、“通過(guò)調(diào)查研究改版了 XXX 模塊，最后通過(guò) A/B 測(cè)試發(fā)現(xiàn)數(shù)據(jù)上漲了5%，最后落地全部實(shí)施新的設(shè)計(jì)方案”，這些看似闡述了產(chǎn)品的背景、自己做了什么以及結(jié)果，但是往往來(lái)說(shuō)還是不夠的，以上統(tǒng)統(tǒng)可以歸為無(wú)效述職。


你做了什么重要嗎？沒(méi)那么重要，重要的是你帶了什么樣的價(jià)值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產(chǎn)品之前數(shù)據(jù)會(huì)那么低？你是通過(guò)那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個(gè)人來(lái)按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認(rèn)知上升到理性規(guī)律的歸納總結(jié)的能力體現(xiàn)。


· SCQA模型

SCQA 模型是一個(gè)“結(jié)構(gòu)化表達(dá)”工具，是麥肯錫咨詢顧問(wèn)芭芭拉·明托在《金字塔原理》中提出的，而這個(gè)模型可以套用在業(yè)務(wù)表達(dá)、書(shū)面表達(dá)以及述職任何場(chǎng)景當(dāng)中；S是指場(chǎng)景(Situation)，C是指沖突(Complication),Q是指問(wèn)題(Question)，A是指解決方案(Answer)。



無(wú)論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報(bào)，還是自己寫(xiě)作梳理都可以用到這個(gè)模型；S場(chǎng)景陳述的通常是大家都熟悉的事、普遍認(rèn)同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴，產(chǎn)生代入感，然后引出沖突C。Q是其中發(fā)現(xiàn)的問(wèn)題，最后A給出相對(duì)應(yīng)的解決方案，是對(duì)Q的回答也是接下來(lái)我們要闡述的內(nèi)容。整個(gè)結(jié)構(gòu)其實(shí)是形成良好的溝通氛圍，然后帶出沖突和疑問(wèn)，最后提供可行的解決方案。


我們熟知的廣告詞經(jīng)常使用這個(gè)套路：

得了灰指甲——描述場(chǎng)景【S】

一個(gè)傳染兩——發(fā)生了沖突【C】

問(wèn)我怎么辦？——提出問(wèn)題【Q】

馬上用亮甲！——給出解決方案【A】


這個(gè)模型無(wú)論作為演講的開(kāi)場(chǎng)白，作為向業(yè)務(wù)方/老板闡述設(shè)計(jì)方案的開(kāi)場(chǎng)，還是作為一篇文章的序言都是屢試不爽的。S場(chǎng)景需要讓對(duì)方產(chǎn)生共鳴，必須讓對(duì)方產(chǎn)生一種：“是的，你說(shuō)的好有道理”的反應(yīng)，只有場(chǎng)景被認(rèn)同了才能繼續(xù)故事的發(fā)展，這時(shí)候打破你給對(duì)方營(yíng)造的安全感，制造C沖突，相繼提出Q問(wèn)題，共同確認(rèn)面臨的一個(gè)問(wèn)題，然后你給出你的A解決方案，而這個(gè)解決方案就是你整個(gè)敘述的核心和中心思想。

比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計(jì)方案，就可以這樣來(lái)描述：“在 XXv2.0 版本上線后（交代場(chǎng)景），收集了近半年以來(lái)的數(shù)據(jù)發(fā)現(xiàn)，女性用戶相對(duì)減少了20%（發(fā)生沖突），為什么會(huì)減少20%的女性用戶（提出疑問(wèn)），根據(jù)我的調(diào)查研究發(fā)現(xiàn)原因是改版后整個(gè)產(chǎn)品色調(diào)偏男性化，由于我們產(chǎn)品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個(gè)產(chǎn)品色調(diào)改為偏女性化的方向（給出解決方案）”。

同樣，我寫(xiě)這個(gè)章節(jié)的思路就可以這樣理解：設(shè)計(jì)師們工作中通常會(huì)面臨述職、面試以及寫(xiě)文章等情況（交代場(chǎng)景），但是往往很多設(shè)計(jì)師不知道如何去表達(dá)，思路也不是很清晰，導(dǎo)致述職無(wú)效、面試失敗等情況（發(fā)生沖突），要如何避免這種情況發(fā)生？如何鍛煉自己的表達(dá)能力？（提出疑問(wèn)），那就要多通過(guò) SCQA 模型在生活工作中去練習(xí)表達(dá)（給出解決方案）。


生活能力(Lives)

最后是生活能力，設(shè)計(jì)不是工作的全部，工作不是生活的全部，我們應(yīng)該過(guò)好自己的生活，產(chǎn)品設(shè)計(jì)都是從生活中獲得靈感和啟發(fā)的，我們?nèi)绾螌?duì)待自己的生活，我們就會(huì)得到怎樣的反饋。多陪伴下自己的家人、培養(yǎng)一個(gè)興趣愛(ài)好、保持學(xué)習(xí)新鮮事物的動(dòng)力等等，成為一個(gè)有趣的靈魂。往往設(shè)計(jì)師能從多樣化的生活中發(fā)現(xiàn)靈感和啟發(fā)，也能從生活中找到不同用戶的痛點(diǎn)和感知；如何做一名好的設(shè)計(jì)師，就是帶著同理心去做設(shè)計(jì)，如何帶著同理心做設(shè)計(jì)，就是將自己當(dāng)作用戶，而用戶是融入到生活中的。下面我就來(lái)例舉兩個(gè)通過(guò)生活中的啟發(fā)改變產(chǎn)品設(shè)計(jì)的例子。


· 用戶擁有感

在購(gòu)買(mǎi)星巴克的時(shí)候，為什么服務(wù)員要把顧客的名字寫(xiě)在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購(gòu)置家具的時(shí)候，為什么要讓顧客自己親手組裝家具？可口可樂(lè)為什么可以定制自己城市的易拉罐？因?yàn)檫@一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個(gè)東西，就會(huì)覺(jué)得自己擁有這個(gè)東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學(xué)的角度來(lái)說(shuō)這被稱為稟賦效應(yīng)，意思就是我們對(duì)于自己所擁有東西的價(jià)值往往會(huì)看得更重。這就是為什么小時(shí)候玩的玩具、收集的畫(huà)冊(cè)、穿的衣服都已經(jīng)沒(méi)什么用了，我們還要留著當(dāng)紀(jì)念的原因。因?yàn)槲覀兊娜诵詫?duì)于擁有感非常執(zhí)著，對(duì)于自己得到的東西非常迷戀，當(dāng)我們覺(jué)得要失去它的時(shí)候，會(huì)有一種損失感，覺(jué)得很不舍，會(huì)覺(jué)得心里很難受，這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。



而這樣的營(yíng)銷(xiāo)策略被用到產(chǎn)品設(shè)計(jì)當(dāng)中，例如前段時(shí)間很火的軟件 Zepeto，每個(gè)人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網(wǎng)易云音樂(lè)總結(jié)等等，賬單它只是一份賬單，根據(jù)不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測(cè)試生成的分享卡等等，這些都是產(chǎn)品設(shè)計(jì)中從生活中營(yíng)銷(xiāo)案例中汲取經(jīng)驗(yàn)的體現(xiàn)。


· 線下導(dǎo)購(gòu)轉(zhuǎn)線上

每當(dāng)我們?nèi)サ缴虉?chǎng)線下商店的時(shí)候，導(dǎo)購(gòu)員和我們素未謀面，但是卻可以通過(guò)我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品，然后向我們推銷(xiāo)對(duì)應(yīng)的產(chǎn)品，如若剛好觸動(dòng)我們的需求，于是我們就會(huì)發(fā)生購(gòu)買(mǎi)這個(gè)行為。生活中線下導(dǎo)購(gòu)的方式也被運(yùn)用到線上導(dǎo)購(gòu)的產(chǎn)品中，同樣平臺(tái)和用戶素未謀面，可是可以通過(guò)掌握大數(shù)據(jù)，分析用戶近半年、近一個(gè)月的購(gòu)買(mǎi)和瀏覽商品的數(shù)據(jù)，結(jié)合相對(duì)應(yīng)季節(jié)等因素推送給用戶所需要的產(chǎn)品。比如我平時(shí)經(jīng)常瀏覽一些潮牌個(gè)性的衣物，現(xiàn)在正值冬季，想買(mǎi)一件冬季穿的棉衣，那么當(dāng)我打開(kāi)淘寶的時(shí)候，系統(tǒng)會(huì)推送一些潮牌大衣等冬季衣物在首頁(yè)，我正好有這個(gè)需求又符合我的口味愛(ài)好，自然而然就會(huì)點(diǎn)進(jìn)去購(gòu)買(mǎi)了。



有一條創(chuàng)業(yè)準(zhǔn)則是這樣說(shuō)的：“如果有點(diǎn)兒閑錢(qián)，還有點(diǎn)時(shí)間，但又找不到商機(jī)，最好的辦法就是去鬧市、電梯、小區(qū)人流量最高的那個(gè)大門(mén)口，端杯茶，靜靜的聽(tīng)人們抱怨?！?，谷歌、蘋(píng)果公司的設(shè)計(jì)思維首當(dāng)其沖的就是帶著同理心去設(shè)計(jì)、去制定設(shè)計(jì)策略，同理心來(lái)源于生活，而這一切只有設(shè)計(jì)師把自己的生活經(jīng)營(yíng)好，才能從當(dāng)中獲得啟發(fā)和感悟，然后代入自己的設(shè)計(jì)理念當(dāng)中，設(shè)計(jì)出真正能根本解決問(wèn)題的產(chǎn)品。

其次偶爾會(huì)從網(wǎng)上看到或者聽(tīng)說(shuō) XX 設(shè)計(jì)師猝死，XX 設(shè)計(jì)師檢驗(yàn)出 XX 疾病等等，每每看到此類(lèi)消息都會(huì)感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說(shuō)明這個(gè)人生活能力真的很糟糕。如果一個(gè)人整天筋疲力盡打不起精神，那么他的工作會(huì)做得好嘛？所以在這請(qǐng)求大家合理安排好工作時(shí)間，勞逸結(jié)合，多鍛煉身體，多花些時(shí)間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個(gè)良性的循環(huán)。你怎樣對(duì)待生活，生活就會(huì)怎樣對(duì)待你。

作者：雨灰    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1466)

如何讓你的圖標(biāo)具有說(shuō)服力？

純純

一、圖標(biāo)的定義及分類(lèi)


1、圖標(biāo)的定義

圖標(biāo)是具有高度概括性的、用于視覺(jué)信息傳達(dá)的圖像。圖標(biāo)常?？梢詡鬟_(dá)出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。

在數(shù)字設(shè)計(jì)領(lǐng)域，圖標(biāo)作為網(wǎng)頁(yè)或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達(dá)成人機(jī)交互這一目標(biāo)的有效途徑。



2、圖標(biāo)類(lèi)型（基于功能劃分）


2-1釋意性圖標(biāo)：

釋意性圖標(biāo)是用來(lái)解釋和闡明特定功能或者內(nèi)容類(lèi)別的視覺(jué)標(biāo)記。它并不是一定被點(diǎn)擊可交互的UI元素，在很多時(shí)候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會(huì)借助這些圖標(biāo)來(lái)獲取信息。不過(guò)有時(shí)候圖標(biāo)表達(dá)的含義可能還不夠完整或者清晰，所以會(huì)將圖標(biāo)和文案搭配起來(lái)一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類(lèi)：


2-1-1純圖標(biāo)：

例如火球買(mǎi)手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋?zhuān)脩粢仓浪磉_(dá)的是什么。




2-1-2圖文結(jié)合：

例如造作APP中的“購(gòu)物車(chē)圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。



2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：

例如開(kāi)眼APP中視頻封面左上角“開(kāi)眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶，看起來(lái)不僅十分具有個(gè)性，而且用戶對(duì)其理解性也非常強(qiáng)。



2-2交互性圖標(biāo)：

交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶進(jìn)行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢(shì)下幫助用戶執(zhí)行不同的交互過(guò)程，這種類(lèi)型圖標(biāo)也是APP中最常見(jiàn)的，常見(jiàn)的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點(diǎn)贊、收藏、掃一掃等。



2-3裝飾性圖標(biāo)：

裝飾性圖標(biāo)僅僅是用來(lái)提升整個(gè)界面的視覺(jué)體驗(yàn)，它并不具備任何功能性。這類(lèi)圖標(biāo)往往是為了迎合用戶的偏好與期望，通過(guò)豐富視覺(jué)體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個(gè)用戶體驗(yàn)更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車(chē)圖標(biāo)”。




3、圖標(biāo)類(lèi)型（基于基礎(chǔ)樣式+表現(xiàn)手法）

圖標(biāo)基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類(lèi)型，每種類(lèi)型的展示方式也都各有不同。


3-1線性圖標(biāo)（6種）

線性圖標(biāo)通過(guò)線來(lái)塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線過(guò)于復(fù)雜，在小面積中過(guò)多的線會(huì)對(duì)識(shí)別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì)所帶來(lái)的視覺(jué)感受也不同，細(xì)線顯得精致，粗線視覺(jué)面積大，顯得厚重。



3-2面性圖標(biāo)（6種）

面性圖標(biāo)是通過(guò)面來(lái)塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過(guò)線或者面去切割基礎(chǔ)輪廓面，通過(guò)分型來(lái)塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。



3-3線面結(jié)合圖標(biāo)（6種）

線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說(shuō)，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過(guò)度是關(guān)鍵。



3-4擬物化圖標(biāo)

這類(lèi)圖標(biāo)的特點(diǎn)是通過(guò)細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶極強(qiáng)的代入感，用戶可通過(guò)對(duì)現(xiàn)實(shí)事物的聯(lián)想，快速領(lǐng)會(huì)圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來(lái)了一些問(wèn)題，因?yàn)橛脩絷P(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺(jué)元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運(yùn)用在APP界面之內(nèi)。



3-5輕質(zhì)感圖標(biāo)

相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺(jué)元素，層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類(lèi)圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺(jué)，在界面設(shè)計(jì)中，一般在面積比較大的區(qū)域我們會(huì)使用加入輕質(zhì)感的圖標(biāo)。




二、圖標(biāo)設(shè)計(jì)規(guī)范


合理的遵循圖標(biāo)規(guī)范可以有利于設(shè)計(jì)師之間合作使用，指導(dǎo)設(shè)計(jì)師如何規(guī)范的去設(shè)計(jì)圖標(biāo)，以確保企業(yè)所有產(chǎn)品圖標(biāo)風(fēng)格的一致性和可用性達(dá)到統(tǒng)一，同時(shí)也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。


1、圖標(biāo)尺寸

為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來(lái)進(jìn)行繪制圖標(biāo)，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計(jì)中也會(huì)存在特殊的尺寸，例如谷歌在臺(tái)式機(jī)上設(shè)計(jì)圖標(biāo)，當(dāng)鼠標(biāo)和鍵盤(pán)是主要輸入方法時(shí)，就會(huì)使用密集布局，基礎(chǔ)網(wǎng)格就會(huì)縮小到20。

下面就以常用的24x24為大家展示：



網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周?chē)目瞻讌^(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺(jué)重心。



*在使用常規(guī)圖標(biāo)時(shí)避免一部分在出血位。



*在使用多個(gè)元素的圖標(biāo)時(shí)，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。



2、圖標(biāo)的keyline

keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺(jué)上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。


在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：



當(dāng)把圖標(biāo)畫(huà)在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺(jué)上看著統(tǒng)一規(guī)范。



3、像素


3-1像素統(tǒng)一

在設(shè)計(jì)一整套系統(tǒng)化的圖標(biāo)時(shí)，我們一定要注意圖標(biāo)的像素大小，要運(yùn)用相同的網(wǎng)格尺寸設(shè)計(jì)相同線條粗細(xì)的圖標(biāo)，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來(lái)才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。



當(dāng)然，描邊像素的粗細(xì)并不是絕對(duì)的，如果我們要做一些密集型的圖標(biāo)時(shí)，可以考慮適當(dāng)?shù)目s小線的像素大小。如下，我們?cè)O(shè)定的系統(tǒng)圖標(biāo)線條粗細(xì)為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時(shí)就會(huì)顯得非常擁擠，并且在視覺(jué)上比其余圖標(biāo)更重，這時(shí)我們就可以把它的線條像素降級(jí)，設(shè)定為2px。



3-2避免小數(shù)位

我們?cè)谟檬噶抗ぞ呃L制圖標(biāo)時(shí)，要仔細(xì)看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。



4、圖標(biāo)的曲率

曲率簡(jiǎn)單來(lái)講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會(huì)有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。



外曲與內(nèi)曲并不一定同時(shí)存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無(wú)曲率）。如下圖：當(dāng)內(nèi)部結(jié)構(gòu)都是圓角時(shí)會(huì)發(fā)現(xiàn)整個(gè)圖標(biāo)稍顯臃腫，這時(shí)我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就?huì)發(fā)現(xiàn)圖標(biāo)的整體結(jié)構(gòu)會(huì)顯得更加協(xié)調(diào)。需要注意的是如果一個(gè)圖標(biāo)做了這樣的處理，在同等情況下的圖標(biāo)都要做一樣的處理，不然圖標(biāo)會(huì)顯得非常雜亂，不統(tǒng)一。



5、傾斜角度

根據(jù)像素的網(wǎng)格線來(lái)設(shè)置兩條對(duì)角線，會(huì)讓你的圖標(biāo)看起來(lái)更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會(huì)使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。




6、斷點(diǎn)形態(tài)

在做很多圖標(biāo)時(shí)都會(huì)用斷點(diǎn)的缺口來(lái)打破“全包邊圖標(biāo)”的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點(diǎn)，那么要保證斷點(diǎn)的形態(tài)保持一致。



7、圖標(biāo)間距

確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個(gè)圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。



8、透視

如果在做圖標(biāo)時(shí)牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。



9、視覺(jué)重心

非中心對(duì)稱圖形物理對(duì)齊時(shí)視覺(jué)上會(huì)有偏離感，多個(gè)不同形狀的圖標(biāo)視覺(jué)重心并不在一條水平線上，需要微調(diào)才能保證平衡感。



10、圖形整潔

在圖形的處理上，不要留有多余的節(jié)點(diǎn)，干掉多余的節(jié)點(diǎn)，保持圖形的整潔。



11、命名

ICON命名要求較為嚴(yán)格，涉及到我們切圖給開(kāi)發(fā)，所以我們命名爭(zhēng)取做對(duì)，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類(lèi)型_位置_功能_狀態(tài)_大小




三、圖標(biāo)的性格走向


每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個(gè)走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細(xì)直）、精致（細(xì)圓）。



1、粗曠類(lèi)圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為直角。

粗曠類(lèi)圖標(biāo)讓人看起來(lái)非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類(lèi)型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線條的直角設(shè)計(jì)。



2、活潑類(lèi)圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為圓角。

活潑類(lèi)圖標(biāo)讓人看起來(lái)十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂(lè)、直播、美食等產(chǎn)品中。例如閑魚(yú)，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線條較粗的圓角設(shè)計(jì)。



3、商務(wù)類(lèi)圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為直角。

商務(wù)類(lèi)圖標(biāo)讓人看起來(lái)十分規(guī)矩、嚴(yán)謹(jǐn)、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類(lèi)的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類(lèi)的圖標(biāo)。因?yàn)檫@類(lèi)圖標(biāo)的特性，所以目前我們很少在移動(dòng)端上看到它，它更多適用于PC端的后臺(tái)界面中。



4、精致類(lèi)圖標(biāo)

圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為圓角。

精致類(lèi)圖標(biāo)讓人看起來(lái)非常干凈、柔和、顯得高級(jí)感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類(lèi)圖標(biāo)。




四、圖標(biāo)的評(píng)判標(biāo)準(zhǔn)


當(dāng)圖標(biāo)設(shè)計(jì)完后，我們應(yīng)該如何去評(píng)判一個(gè)圖標(biāo)的好壞？很多設(shè)計(jì)師并沒(méi)有完整的評(píng)判體系，其實(shí)我們可以從這五個(gè)維度對(duì)圖標(biāo)進(jìn)行評(píng)判：識(shí)別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。


1、識(shí)別性

圖標(biāo)最主要的用途就是輔助用戶理解信息，特別是對(duì)于當(dāng)圖標(biāo)單獨(dú)存在時(shí)，一定不能讓用戶產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識(shí)別，我們可以從這2個(gè)方向入手：大眾認(rèn)知隱喻、真實(shí)世界映射。


1-1 大眾認(rèn)知隱喻

在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶熟知認(rèn)可，對(duì)于這類(lèi)隱喻圖標(biāo)用戶不用思考身體就已做出反應(yīng)，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識(shí)別性，也能做出差異化。




1-2 真實(shí)世界映射

選擇真實(shí)世界中的物品映射，能使人下意識(shí)對(duì)圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識(shí)別度。




2、圖標(biāo)氣質(zhì)

每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛(ài)、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。



3、一致性

一致性是圖標(biāo)的基礎(chǔ)，我們?cè)诶L制整套圖標(biāo)時(shí)要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺(jué)上也更加和諧美觀。圖標(biāo)是否具有一致性，就要從以下七個(gè)方向去評(píng)判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。


3-1 尺寸大?。壕W(wǎng)格大小是否統(tǒng)一、是否遵守圖標(biāo)的keyline規(guī)則。


3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）


3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標(biāo)的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當(dāng)邊角像素在1-2px時(shí)內(nèi)外曲率為2px；當(dāng)邊角像素在3px時(shí)內(nèi)外曲為2px，內(nèi)曲為1px；當(dāng)邊角像素大于或等于4px時(shí)，外曲為2px，內(nèi)部則為直角。


3-4 描邊：描邊大小是否一致。


3-5 間距：是否遵守間距規(guī)范。


3-6 透視：透視是否一致，避免在同一套圖標(biāo)中出現(xiàn)正視圖/側(cè)視圖混雜的情況。


3-7顏色：在圖標(biāo)的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見(jiàn)的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過(guò)大的配色。



4、協(xié)調(diào)性

一致性代表的是圖標(biāo)的基礎(chǔ)，而協(xié)調(diào)性則代表圖標(biāo)的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗(yàn)證一致性是否合理的標(biāo)準(zhǔn)，當(dāng)協(xié)調(diào)性存在問(wèn)題時(shí)，我們就要反過(guò)來(lái)查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點(diǎn)：視覺(jué)大小、飽滿度、透析感。


4-1 視覺(jué)大小

視覺(jué)大小對(duì)標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺(jué)大小不對(duì)等時(shí)，你就要回過(guò)去查看你的網(wǎng)格與keyline是否運(yùn)用正確，確保正確后再查看你的圖標(biāo)是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來(lái)看描邊粗的圖標(biāo)視覺(jué)偏大）



4-2 飽滿度

飽滿度對(duì)標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿時(shí)，你就要去查看你設(shè)定的間距值是否偏大，是否合理。



4-3 透析感

透析感簡(jiǎn)單來(lái)說(shuō)就是留白區(qū)域。透析感對(duì)標(biāo)的也是一致性的間距，當(dāng)元素的描邊過(guò)大時(shí)，我們就要合理的設(shè)定間距的最小值，不然整個(gè)圖標(biāo)就顯得非常臃腫。



5、品牌調(diào)性

品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開(kāi)很多APP都會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，沒(méi)有任何特色，過(guò)于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動(dòng)性。其實(shí)我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動(dòng)、創(chuàng)新。


5-1品牌顏色

色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺(jué)元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。



當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車(chē)帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。



5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來(lái)的圖標(biāo)一般運(yùn)用在APP首頁(yè)標(biāo)簽。因?yàn)槭醉?yè)是APP中最重要的頁(yè)面，也是進(jìn)入APP默認(rèn)的頁(yè)面，把首頁(yè)圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對(duì)App的logo印象，這樣不但使App內(nèi)外形成了視覺(jué)聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁(yè)標(biāo)簽就用了品牌LOGO。



5-3品牌元素

我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁(yè)圖標(biāo)。



品牌提取的元素并不只是所見(jiàn)到的品牌視覺(jué)形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂(lè)，就把音符作為首頁(yè)圖標(biāo)。



5-4品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對(duì)品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類(lèi)圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆湟龑?dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。



5-5品牌性格

圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國(guó)元素，整體看起來(lái)有股濃濃的古韻之風(fēng)。



5-6吉祥物 

如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁(yè)標(biāo)簽。




作者：黑獅力    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1344)

客戶：要多、要大、要好看，能安排不?

seo達(dá)人

一、使用比較有特色的風(fēng)格

既然粗暴、接地氣的設(shè)計(jì)容易被人說(shuō)成“土”，那么使用一種當(dāng)下比較流行，或者比較有特色的風(fēng)格，就能有效增加畫(huà)面的設(shè)計(jì)感和時(shí)尚感。

圖片

▲ 上圖使用高飽和度的藍(lán)色和綠色組合搭配，以及文字以背景的方式環(huán)繞在產(chǎn)品的周?chē)?，都是近幾年比較流行的設(shè)計(jì)手法。

圖片

▲ 上圖使用扁平效果的描邊色塊來(lái)進(jìn)行排版，既能突出文字信息、視覺(jué)效果也很時(shí)尚。

圖片

▲ 把高飽和度對(duì)比色、扁平風(fēng)、幾何圖形、文疊圖等一些常在藝術(shù)海報(bào)中使用的技巧，用到促銷(xiāo)海報(bào)中來(lái)，這種接地氣的設(shè)計(jì)是不是也變得高級(jí)了很多?

圖片

▲ 用波普風(fēng)格設(shè)計(jì)促銷(xiāo)海報(bào)，效果也是很亮眼的。

 

二、把文字圖形化

有很多海報(bào)設(shè)計(jì)需求是以文字為主的，客戶也并沒(méi)有提供配圖，如果只展示文字，效果很容易單調(diào)，這時(shí)就可以嘗試提取文字中的關(guān)鍵詞，設(shè)計(jì)一個(gè)圖形符號(hào)與文字信息進(jìn)行巧妙組合，文字與圖形符號(hào)共同組合成視覺(jué)主體。

這么做既可以增加畫(huà)面的美觀性、視覺(jué)沖擊力、形式感，同時(shí)文字的面積占比也不會(huì)被大面積壓縮，保證信息的清晰易讀。

圖片

▲ 把文字與光線組合在一起，既突出了文字、也加強(qiáng)了畫(huà)面的視覺(jué)沖擊和美觀性，同時(shí)，電子產(chǎn)品的品類(lèi)調(diào)性也得到了體現(xiàn)。

圖片

▲ 上圖把文字與漢堡圖形組合成一個(gè)主視覺(jué)圖形，加強(qiáng)了畫(huà)面的形式感。

圖片

▲ 上圖把文字與打板器組合成主視覺(jué)圖形，打破了純文字的單調(diào)感。

圖片

▲ 上圖把文字和圖片放在一個(gè)外賣(mài)袋里，加強(qiáng)了設(shè)計(jì)的帶入感和產(chǎn)品屬性。

 

三、把文字場(chǎng)景化

其實(shí)這也是文字圖形化的一種形式，只不過(guò)不是把文字與具像的圖形符號(hào)結(jié)合，而是把通過(guò)把文字進(jìn)行扭曲、變形、添加元素等方式，使其具備抽象的場(chǎng)景特征。

圖片

▲ 該海報(bào)把主要信息組扭曲成墻面和地面的效果，創(chuàng)造出一個(gè)立體空間。

圖片

▲ 這件作品與上圖的設(shè)計(jì)手法有點(diǎn)類(lèi)似，也不知道是誰(shuí)借鑒的誰(shuí)。

圖片

▲ 上圖把“敢為先”這個(gè)幾個(gè)字拉大，布滿月球后面的整個(gè)天空背景，就好似一扇巨大的城門(mén)。

 

四、圖文組合

即把圖片與主要文字組合在一起，共同形成畫(huà)面的主視覺(jué)，而不是相互獨(dú)立，把文字當(dāng)成圖片的配文，常用的圖文組合方式有圖疊文、文疊圖、圖文交叉等。

圖文組合的設(shè)計(jì)方式可以加強(qiáng)圖文之間的聯(lián)系和對(duì)比關(guān)系，使畫(huà)面更整體、更聚焦。

圖片

圖片

圖片

圖片

 

五、加入人物或動(dòng)物插畫(huà)

如果版面中只有文字，或者只有文字和產(chǎn)品圖片，那么版面都容易顯得無(wú)趣、缺少細(xì)節(jié)，在畫(huà)面中加入人物和動(dòng)物而可以增強(qiáng)代入感和親切感，不過(guò)這類(lèi)實(shí)物素材都有版權(quán)，而且比較常規(guī)，而改成插畫(huà)素材就可以有效解決這一問(wèn)題。另外，最好要讓這些插畫(huà)元素與文字或產(chǎn)品發(fā)生互動(dòng)。

圖片

▲ 上圖加了一個(gè)卡通的廚師以后，除了畫(huà)面更生動(dòng)、更有趣，也會(huì)給人一種值得信賴的感覺(jué)。

圖片

▲ 上圖的排版和形式其實(shí)比較普通，但配上搞怪的插畫(huà)后，海報(bào)變得有趣了許多。

圖片

▲ 版面上方的熊貓加強(qiáng)了海報(bào)的吸引力和趣味性。

 

六、精致的排版和配色

下面的這些促銷(xiāo)海報(bào)并沒(méi)有特別的風(fēng)格、巧妙的創(chuàng)意，也沒(méi)有新意的設(shè)計(jì)形式，只是通過(guò)精致的排版和漂亮的配色，把大量的文字和圖片素材合理地編排在一起，效果照樣不錯(cuò)。

圖片

▲ 信息雖然很多，但是層級(jí)分明、清晰閱讀，大量使用色塊進(jìn)行排版，而且在編排上有很多細(xì)節(jié)的變化，顏色為類(lèi)比色組合。

圖片

▲ 圖片和配色很有食欲，文字排版簡(jiǎn)單、清晰，但又通過(guò)不同的色彩、字體、字號(hào)、修飾手法將不同信息進(jìn)行鮮明的層級(jí)區(qū)分，文字與圖片有關(guān)聯(lián)但互不干擾。

圖片

▲ 外邊框的處理以及版面中的圓點(diǎn)底紋使版面顯得更精致、更有設(shè)計(jì)感，版面雖然排得很滿，但是主次分明、信息清晰易讀，三組食物所搭配的文字雖然不大，但是細(xì)節(jié)滿滿、井然有序。

圖片

▲ 大量的手寫(xiě)字體給人一種“純手工制作”的感覺(jué)，與樸實(shí)無(wú)華的產(chǎn)品形成呼應(yīng)，文字全部集中排在版面的上方和下方，而中間區(qū)域完全留給了產(chǎn)品圖片，視覺(jué)對(duì)比鮮明。

 

圖片

拋開(kāi)客戶的需求以及效果談設(shè)計(jì)的美觀性就是耍流氓，把文字縮小、加一些沒(méi)什么意義的英文、使用一些酷炫的排版技巧，可能會(huì)讓你的設(shè)計(jì)更精致、更洋氣，但如果拋棄了客戶的需求和消費(fèi)者真正關(guān)心的東西，那么我們并沒(méi)有真正解決問(wèn)題，如果客戶要大、要多，那么我們就爭(zhēng)取給他一個(gè)又大、又多、又好看的方案。


作者：蔥爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》客戶：要多、要大、要好看，能安排不?

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1643)

B端產(chǎn)品設(shè)計(jì)思路&高頻設(shè)計(jì)要點(diǎn)筆記

純純


★目標(biāo)導(dǎo)向·B端產(chǎn)品的商業(yè)目標(biāo)


設(shè)計(jì)開(kāi)始要了解設(shè)計(jì)的目標(biāo)，用戶的行為都是有「目標(biāo)動(dòng)機(jī)」的，B端產(chǎn)品的業(yè)務(wù)目標(biāo)往往都是為了為企業(yè)或個(gè)人為了解決某一項(xiàng)工作上的問(wèn)題。
當(dāng)設(shè)計(jì)過(guò)程以「目標(biāo)」為出發(fā)點(diǎn)，可以增強(qiáng)設(shè)計(jì)判斷力，輸出更有效設(shè)計(jì)解決方案。


B端產(chǎn)品的設(shè)計(jì)原則：提高使用者的工作效率，同時(shí)降低業(yè)務(wù)鏈路的操作及學(xué)習(xí)成本。

當(dāng)你有了目標(biāo)以后你的設(shè)計(jì)就可以圍繞這個(gè)目標(biāo)展開(kāi)：



★設(shè)計(jì)價(jià)值·B端的設(shè)計(jì)價(jià)值體系搭建


對(duì)于B端的產(chǎn)品而言，用戶最關(guān)心它能為實(shí)際的工作帶來(lái)哪些便利，而并非這個(gè)界面做的多么的好看，以及用戶體驗(yàn)多么棒。所以B端產(chǎn)品設(shè)計(jì)價(jià)值優(yōu)先級(jí)往往是  功能性＞表現(xiàn)力



B端產(chǎn)品設(shè)計(jì)需要站在整個(gè)業(yè)務(wù)線全局角度去把控各個(gè)設(shè)計(jì)點(diǎn)，不再是「用戶體驗(yàn)」至上，為實(shí)現(xiàn)「任務(wù)目標(biāo)」，「犧牲」一部分「用戶體驗(yàn)」是必要的，這個(gè)時(shí)候視覺(jué)和一些體驗(yàn)就不那么重要了。通過(guò)調(diào)研業(yè)務(wù)去了解各個(gè)角色職能的工作流程、相關(guān)痛點(diǎn)，讓產(chǎn)品能用，好用。



要點(diǎn)1·了解項(xiàng)目的業(yè)務(wù)流程


理想的B端設(shè)計(jì)需要了解業(yè)務(wù)目標(biāo)以及業(yè)務(wù)鏈路中每一個(gè)環(huán)節(jié)的過(guò)程。將業(yè)務(wù)邏輯理解透徹再考慮應(yīng)該如何進(jìn)行設(shè)計(jì)實(shí)現(xiàn)。

這樣做的原因當(dāng)你站在使用者的角度進(jìn)行同理心設(shè)計(jì)可以更好的幫助用戶完成他要完成的工作，從而提高效率。產(chǎn)品原型一般基于「功能」本身，而設(shè)計(jì)師從用戶實(shí)際場(chǎng)景規(guī)劃用戶的任務(wù)流，可以優(yōu)化產(chǎn)品邏輯，補(bǔ)全缺失場(chǎng)景，通過(guò)了解業(yè)務(wù)流程也能給予創(chuàng)造性解決方案




要點(diǎn)2·用戶調(diào)研與場(chǎng)景化設(shè)計(jì)思維


B端產(chǎn)品往往是是服務(wù)于企業(yè)用戶，用戶畫(huà)像需要專(zhuān)注于用戶特征中的「群體職業(yè)身份」這類(lèi)人無(wú)論性別、年齡、地區(qū)有何差異，他們都是一類(lèi)角色，我們的產(chǎn)品要提供給這類(lèi)角色使用，而不是某個(gè)人使用。



由于B端設(shè)計(jì)師不是產(chǎn)品的用戶，無(wú)法沉浸在與用戶相同的真實(shí)場(chǎng)景中，建立共情。所以設(shè)計(jì)師最好親自感受一下業(yè)務(wù)流程，獲得一手的用戶洞察，


獲取B端用戶反饋的方式

「通過(guò)業(yè)務(wù)人員交流」業(yè)務(wù)人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫(huà)像。
「實(shí)地走訪」：觀察在自然狀態(tài)下用戶如何完成工作任務(wù)，并提問(wèn)題：「你怎么做？」或者「為什么這么做？」
「建立種子用戶群」：聚集活躍的種子用戶群，收集意見(jiàn)和建議，并在群里驗(yàn)證設(shè)計(jì)想法。
「親身體驗(yàn)」：成為真正的客服小二，接聽(tīng)客戶電話，記錄自己在工作臺(tái)場(chǎng)景下的真實(shí)體驗(yàn)和感受。

獲取用戶畫(huà)像后了解該群體背后工作感受，行為習(xí)慣，以及任務(wù)類(lèi)型。





要點(diǎn)3·情感化設(shè)計(jì)心理


安全感和信任感建立：人們?cè)絹?lái)越關(guān)注隱私和信息安全。如果你要求必須填寫(xiě)敏感信息，請(qǐng)確保使用字段下方的注釋文本解釋為什么需要這些信息。


實(shí)際工作中我們?cè)?jīng)自動(dòng)獲取過(guò)用戶之前表單中填寫(xiě)的的支付類(lèi)賬戶信息，在收集的用戶反饋中，用戶會(huì)感覺(jué)到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗(yàn)會(huì)更好，但是考慮到信任感，敏感類(lèi)信息請(qǐng)不要自動(dòng)獲取。


讓用戶感受到你正在幫助他操作：Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導(dǎo)原則）是搭建B端用戶幫助體系的核心準(zhǔn)則，在理想情況下，沒(méi)有幫助文檔就可以使用系統(tǒng)是最好的，但在某些情況下（尤其是B端系統(tǒng)），提供一些引導(dǎo)性的幫助其實(shí)是必要的。


B端系統(tǒng)中可以嘗試搭建用戶幫助系統(tǒng)：




要點(diǎn)1·降低學(xué)習(xí)成本


對(duì)B端產(chǎn)品來(lái)講，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候是不需要耗費(fèi)太多的思考的，只是去按照交互設(shè)計(jì)師的規(guī)劃堆砌圖表和列表。但是對(duì)于使用者來(lái)講，其中縱橫交錯(cuò)的商業(yè)邏輯和業(yè)務(wù)邏輯卻是給用戶搭建了一個(gè)十分高的門(mén)檻。



要點(diǎn)2·保持高效


例如修改資料的時(shí)候，使用彈窗、浮層等等交互操作會(huì)減少頁(yè)面跳轉(zhuǎn)的頻率。

但是與此同時(shí)，減少頁(yè)面跳轉(zhuǎn)并不代表真正的高效，例如瑞幸的供應(yīng)商系統(tǒng)，供應(yīng)商所產(chǎn)生的訂單需要按照指定的流程一步步進(jìn)行操作確保不會(huì)出現(xiàn)問(wèn)題這樣雖然頁(yè)面的跳轉(zhuǎn)增加，但是可以避免操作出錯(cuò)給用戶帶來(lái)更大的困擾。



要點(diǎn)3·整理信息/引導(dǎo)視覺(jué)


設(shè)計(jì)要根據(jù)用戶的瀏覽習(xí)慣和視覺(jué)動(dòng)線。要嘗試引導(dǎo)用戶的視覺(jué)，舉個(gè)例子，如何引導(dǎo)：




設(shè)計(jì)側(cè)核心要點(diǎn)


B 端產(chǎn)品是以業(yè)務(wù)為核心，是需要用戶長(zhǎng)時(shí)間操作并完成工作任務(wù)的，對(duì)于操作和展示內(nèi)容無(wú)關(guān)的元素，越少越好。視覺(jué)為功能讓步，追求簡(jiǎn)潔、清晰、克制、理性的視覺(jué)風(fēng)格。設(shè)計(jì)語(yǔ)言盡量做到不干擾不打擾。



要點(diǎn)1·表單設(shè)計(jì)


輸入順序：先易后難；先必填后選填；先公開(kāi)信息后隱私信息；有關(guān)聯(lián)性的合成一組，特殊問(wèn)題后置，用戶輸入時(shí)、不會(huì)覺(jué)得突兀、門(mén)檻太高 。

自動(dòng)對(duì)焦（PC端）進(jìn)行表單頁(yè)面，自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶開(kāi)始進(jìn)行輸入。

標(biāo)題：標(biāo)題是對(duì)下文最短最精的概括。用戶一般都會(huì)跳過(guò)表單內(nèi)容，而且?guī)缀醵疾粫?huì)仔細(xì)閱讀那種特別詳細(xì)的描述。所以用最少的文字說(shuō)清楚一個(gè)表單的目的尤其重要。
用戶應(yīng)該可以看一眼標(biāo)題就知道他們應(yīng)該怎么做，而不是非得把剩下的全部看完，
（附：這部分感興趣的同學(xué)可以搜索“微文案設(shè)計(jì)”）

在表單編寫(xiě)方面，或者說(shuō)各種寫(xiě)作中，刪減詞語(yǔ)都要比添加詞語(yǔ)更加有益。 在仔細(xì)檢查不必要的詞語(yǔ)后，文章會(huì)更篤實(shí)，更連貫，更吸引人。



這個(gè)鏈接有什么用？關(guān)閉是點(diǎn)擊右上角的按鈕嗎？如果并沒(méi)有增效，那就是減效。每一個(gè)字，每一張圖片，都不是100% 必需的，這些都會(huì)降低你表單的轉(zhuǎn)換率。

刪除一個(gè)字段，表單提交率就可以提高 26%。（本篇筆記原本有12000余字，為了避免浪費(fèi)大家時(shí)間，我僅保留4000余字的高頻要點(diǎn)內(nèi)容）


PC端產(chǎn)品提示文字盡量不要放在框內(nèi)

提示文字存在于框內(nèi)常用在移動(dòng)端，它的空間占比很小，對(duì)移動(dòng)端的小屏來(lái)說(shuō)，是非常友好的，但如果在交互上處理不好，會(huì)有很大的缺陷。

內(nèi)部標(biāo)簽結(jié)構(gòu)，只有提示性文字，用作提示用戶應(yīng)該輸入什么內(nèi)容，但用戶在輸入的時(shí)候，內(nèi)部的標(biāo)簽/提示性文字就會(huì)消失，這時(shí)候，用戶會(huì)失去它是否輸入準(zhǔn)確的唯一判別標(biāo)準(zhǔn)。


減少打字需求

字段輸入通過(guò)部分人工智能自動(dòng)將操作步驟可以變得簡(jiǎn)潔高效 ，也包括諸如一些、自動(dòng)定位、圖片識(shí)別、自動(dòng)獲取，第三方導(dǎo)入等方式來(lái)使用戶的效率得以提升的功能。
打字是在線表單中最耗時(shí)、最密集的部分，而且經(jīng)常會(huì)導(dǎo)致錯(cuò)誤——尤其是在手機(jī)上。用按鈕、滑塊替換文本框并使用自動(dòng)完成功能，將減少工作量并提高轉(zhuǎn)化率。



使用文本塊

文本塊會(huì)更容易讓用戶記住內(nèi)容：例如銀行賬戶、電話號(hào)碼等等。它指的是將信息排列成「塊」的過(guò)程，使內(nèi)容更容易保留、處理和回憶。一份研究聲稱數(shù)字 3 是幫助人們吸收和回憶信息的神奇數(shù)字。


表單的提示文字和定義格式要求

如果一個(gè)字段需要特定的格式輸入，請(qǐng)告訴用戶。例如密碼要求、語(yǔ)法規(guī)則、編號(hào)間距等等。



用輸入框長(zhǎng)度提示

可以用輸入框長(zhǎng)度提示用戶輸入的內(nèi)容是否正確。
德萊厄斯研究所的可用性研究發(fā)現(xiàn)，如果一個(gè)字段太長(zhǎng)或太短，用戶開(kāi)始懷疑他們是否正確理解了標(biāo)簽。


在用戶輸入的時(shí)候，右下角告訴用戶已經(jīng)輸入了多少字，如果超過(guò) 限定字?jǐn)?shù)后輸入框紅色，用來(lái)警示用戶，此時(shí)用戶依舊可以再輸入字符，但當(dāng)出現(xiàn)警示，用戶繼續(xù)輸入一定數(shù)量字符后，系統(tǒng)需要強(qiáng)行限制無(wú)法輸入新的內(nèi)容，避免用戶沒(méi)有察覺(jué)到警示反饋導(dǎo)致的過(guò)多輸入，從而浪費(fèi)的時(shí)間。


（該部分感謝酷友@sh9513 提出的反饋）


如果用戶填寫(xiě)錯(cuò)誤，向用戶顯示錯(cuò)誤發(fā)生的位置，并說(shuō)明原因。


單選框

如果你的表單里的選項(xiàng)少于5個(gè)可以列出所有選項(xiàng)供用戶快速選擇，當(dāng)大于5個(gè)時(shí)候可以嘗試用下拉框解決。
將第一個(gè)選項(xiàng)作為用戶最有可能的默認(rèn)選項(xiàng)，且是最安全的選項(xiàng)，提前預(yù)判用戶的操作提升選擇效率。排列方式推薦數(shù)直排列，豎直排列相對(duì)于水平排列容易讀取和定位，提高用戶的瀏覽順序。



解釋隱私消息

當(dāng)前需要用戶填寫(xiě)相對(duì)隱私的信息時(shí)，請(qǐng)給予解釋這么做的原因及目的。


收集設(shè)計(jì)反饋

完成表單的設(shè)計(jì)后可以給業(yè)務(wù)用戶進(jìn)行簡(jiǎn)單的測(cè)試，并記錄他們填寫(xiě)的時(shí)間收集反饋，以及對(duì)這一連串的問(wèn)題他們體驗(yàn)如何。這也將有助于你下次評(píng)估表單的設(shè)計(jì)。

最后在情感化設(shè)計(jì)系統(tǒng)里記得感謝用戶填寫(xiě)或者反饋問(wèn)題，因?yàn)橛脩羰腔〞r(shí)間的。所以請(qǐng)表示感謝。


要點(diǎn)2·表格設(shè)計(jì)

表格的設(shè)計(jì)圍繞著「可讀性」和「易操作」兩個(gè)設(shè)計(jì)原則。設(shè)計(jì)易讀，易掃視，易比較，易操作的表格結(jié)構(gòu)是表格設(shè)計(jì)的首要目標(biāo)。


列寬有三種常見(jiàn)處理方式：

1.  根據(jù)內(nèi)容的極限長(zhǎng)度給出足夠的固定寬度；
2. 可以固定部分列的寬，其余列按百分比處理；
3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態(tài)，內(nèi)容為空狀態(tài)顯示方案；
4.需要設(shè)置列之間的最小寬度，表格響應(yīng)式布局情況下最小不小于此寬度。

M-Densign規(guī)范中對(duì)齊方式會(huì)遵循如下規(guī)則：
表格的排序，應(yīng)從用戶目的出發(fā)，遵循用戶查看數(shù)據(jù)的習(xí)慣，尊重?cái)?shù)據(jù)之間的關(guān)聯(lián)性，設(shè)計(jì)用戶查看、操作數(shù)據(jù)的路徑，而非隨機(jī)排列（這部分可以在業(yè)務(wù)側(cè)調(diào)研時(shí)驗(yàn)證，提高用戶體驗(yàn)和閱讀效率）。


1. 文本信息/混合型文本左對(duì)齊，符合從左到右的閱讀習(xí)慣；

2. 數(shù)字信息右對(duì)齊，方便數(shù)字之間的直觀對(duì)比；

（該圖片感謝好友@晴藍(lán) 同學(xué)反饋的一個(gè)錯(cuò)字，圖片已修正）


要點(diǎn)3·按鈕設(shè)計(jì)

設(shè)計(jì)規(guī)范需要定義按鈕的四種狀態(tài)：正常狀態(tài)(Normal)、懸停狀態(tài)(Hover)、激活狀態(tài)(Active)、加載狀態(tài)(Loading)、禁用狀態(tài)(Disabled)



B端產(chǎn)品的開(kāi)發(fā)一般涉及多個(gè)開(kāi)發(fā)團(tuán)隊(duì)協(xié)作，例如瑞幸的后臺(tái)修改按鈕顏色，都可能牽動(dòng)10+工程師的協(xié)同。

所以B端產(chǎn)品在進(jìn)行設(shè)計(jì)改版以及設(shè)計(jì)側(cè)調(diào)整時(shí)候要思考調(diào)整對(duì)于業(yè)務(wù)側(cè)是否有直接幫助，在設(shè)計(jì)和規(guī)范建立之前，切勿頻繁改動(dòng)。


除了完全獨(dú)立設(shè)計(jì)開(kāi)發(fā)的項(xiàng)目以外，還有大量的 B 端項(xiàng)目是采用第三方框架開(kāi)發(fā)而成的，如 Ant、Element 等等。這是因?yàn)檫@些第三方程序可以幫助團(tuán)隊(duì)節(jié)省大量的開(kāi)發(fā)時(shí)間和精力。

作者：Cesare_玄漓    來(lái)源：站酷

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




評(píng)論(0) 瀏覽(1398)

設(shè)計(jì)規(guī)范和適配

seo達(dá)人


 

一 開(kāi)篇：為什么需要建立設(shè)計(jì)規(guī)范？

 

1、保證設(shè)計(jì)的一致性。

對(duì)內(nèi)部：多個(gè)設(shè)計(jì)師合作，依然能保證設(shè)計(jì)風(fēng)格的統(tǒng)一。

對(duì)用戶：提高用戶體驗(yàn)，提高操作效率，加深對(duì)產(chǎn)品的記憶。

2、提高開(kāi)發(fā)效率

與前端有效溝通的工具，提高設(shè)計(jì)還原度，降低對(duì)接成本。

開(kāi)發(fā)可以建立公共組件庫(kù)，極大的提高了開(kāi)發(fā)效率。

3、方便產(chǎn)品迭代

隨著產(chǎn)品的業(yè)務(wù)變化，發(fā)現(xiàn)一些問(wèn)題或者需要優(yōu)化用戶體驗(yàn)的時(shí)候，針對(duì)單個(gè)控件進(jìn)行調(diào)整，就可以影響全局，十分便捷。

 

二  移動(dòng)端設(shè)計(jì)規(guī)范之平臺(tái)設(shè)計(jì)語(yǔ)言

 

優(yōu)秀設(shè)計(jì)來(lái)自世界互聯(lián)網(wǎng)公司，前沿的設(shè)計(jì)理念和完善的設(shè)計(jì)語(yǔ)言是我們?cè)O(shè)計(jì)師的學(xué)習(xí)目標(biāo)。了解和學(xué)習(xí)后，更好的進(jìn)行產(chǎn)品設(shè)計(jì)。

 

前沿平臺(tái)

1、谷歌設(shè)計(jì)語(yǔ)言  Google Design   

http://design.google

谷歌設(shè)計(jì)中心，展示了谷歌的設(shè)計(jì)工作和概念，包括了 Material Design 在內(nèi)的所有關(guān)于產(chǎn)品、體驗(yàn)、設(shè)計(jì)、品牌等互聯(lián)網(wǎng)領(lǐng)域的設(shè)計(jì)思考。

 

2 、蘋(píng)果 IOS 設(shè)計(jì)規(guī)范

蘋(píng)方人機(jī)界面設(shè)計(jì)指南，含有IOS設(shè)計(jì)規(guī)范，指導(dǎo)界面設(shè)計(jì)。蘋(píng)果人機(jī)界面設(shè)計(jì)指南，詳細(xì)介紹了蘋(píng)果公司最新的移動(dòng)設(shè)備和系統(tǒng)，設(shè)計(jì)屏幕分辨率、圖標(biāo)設(shè)計(jì)規(guī)范、色彩搭配、文字等設(shè)計(jì)語(yǔ)言，同時(shí)還提供了 UI 設(shè)計(jì)資源可供大家使用。

 

3、Ant Design

螞蟻金服設(shè)計(jì)平臺(tái)是國(guó)內(nèi)互聯(lián)網(wǎng)公司之一，基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計(jì)與開(kāi)發(fā)的體驗(yàn)設(shè)計(jì)方案，包含了網(wǎng)頁(yè)端的顏色、字體、圖標(biāo)、組件等頁(yè)面設(shè)計(jì)布局等設(shè)計(jì)指導(dǎo)網(wǎng)站。

螞蟻集團(tuán)的企業(yè)級(jí)產(chǎn)品是一個(gè)龐大且復(fù)雜的系統(tǒng)，數(shù)量多且功能復(fù)雜，而且變動(dòng)和并發(fā)頻繁，常常需要設(shè)計(jì)者與開(kāi)發(fā)者能快速做出響應(yīng)。同時(shí)這類(lèi)產(chǎn)品中有存在很多類(lèi)似的頁(yè)面以及組件，可以通過(guò)抽象得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。

隨著商業(yè)化的趨勢(shì)，越來(lái)越多的企業(yè)級(jí)產(chǎn)品對(duì)更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的一個(gè)終極目標(biāo)，我們（螞蟻集團(tuán)體驗(yàn)技術(shù)部）經(jīng)過(guò)大量項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系 —— Ant Design?；凇缸匀弧?、「確定性」、「意義感」、「生長(zhǎng)性」四大設(shè)計(jì)價(jià)值觀，通過(guò)模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專(zhuān)注于更好的用戶體驗(yàn)。

 

4、Fluent Design System

微軟基于Windows 10 的設(shè)計(jì)指南，它可以幫助開(kāi)發(fā)者設(shè)計(jì)和構(gòu)建流暢、精美的應(yīng)用程序，包括人機(jī)界面布局、樣式、控件和設(shè)計(jì)工具包下載。

微軟將這套全新的設(shè)計(jì)語(yǔ)言名為 Fluent Design System（流暢設(shè)計(jì)體系），該體系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動(dòng)畫(huà)）、Material（材質(zhì)）和 Scale（縮放）。

 

5、WeUI

WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，包含表單、基礎(chǔ)組件、操作反饋、導(dǎo)航等各種各樣的設(shè)計(jì)元素。它由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，使得用戶的使用感知更加統(tǒng)一。

具體看下面的內(nèi)容，有詳細(xì)介紹。

 

6、Airbnb Design 

Airbnb 是一家享譽(yù)全球的民宿服務(wù)公司。同時(shí)，這背后有一個(gè)他們自己強(qiáng)大的設(shè)計(jì)團(tuán)隊(duì)，為Airbnb提供著設(shè)計(jì)方面工作。我日常工作使用到的（動(dòng)效方面）Lottie 也是他們?cè)O(shè)計(jì)開(kāi)發(fā)的產(chǎn)物（感謝）。他們擁有自己的設(shè)計(jì)網(wǎng)站Airbnb Design。其中一些文章介紹 DSL， 正如在《設(shè)計(jì)體系》一書(shū)介紹，他們嚴(yán)格遵守著自己的設(shè)計(jì)規(guī)范和原則。保證著Airbnb的產(chǎn)品在設(shè)計(jì)上的一致性，可用性等，目的是為不同國(guó)家的用戶提供好的用戶體驗(yàn)。

 

界面設(shè)計(jì)中的字體思考

 

文字是 App 中最核心的元素之一，產(chǎn)品傳達(dá)給用戶的內(nèi)容。字體有無(wú)襯線字體和襯線字體。無(wú)論iOS 還是 Android 系統(tǒng)，它們都有內(nèi)置的默認(rèn)字體可供設(shè)計(jì)師使用。用心處理好字號(hào)大小、字體顏色與字體間距的處理上。

用戶界面設(shè)計(jì)中，字體是界面設(shè)計(jì)中的基本元素。設(shè)計(jì)師要設(shè)計(jì)好界面中的字體顏色、字體間距、字號(hào)的大小、

字重等思考。

蘋(píng)果系統(tǒng)中默認(rèn)的字體是：蘋(píng)方字體。英文字體和數(shù)字字體是：舊金山字體，San Francisco 字體。

其中數(shù)字字體比較好的字體可以用：Dinner 字體。

安卓系統(tǒng)默認(rèn)的中文字體是：思源黑體。  英文字體是：Roboto 字體。

界面設(shè)計(jì)中的字體設(shè)計(jì)規(guī)范，如下圖所示。


 

介紹幾款西文字體：

無(wú)襯線字體，在字的筆畫(huà)開(kāi)始和結(jié)束的地方，沒(méi)有額外裝飾，筆畫(huà)粗細(xì)均勻，適合于主題設(shè)計(jì)的屏幕展示，給人一種自然舒適感。例如：無(wú)裝飾性的易識(shí)別的代表字體：Helvetica 英文字體、San Francisco 英文字體、

Roboto 英文字體、Arial 英文字體。

襯線字體是字的筆畫(huà)開(kāi)始和結(jié)尾處的位置有額外裝飾，同時(shí)筆畫(huà)的粗細(xì)有所不同，一般適用于印刷排版，具有較高的可讀性。例如：具有裝飾性的代表字體：Times New Roman。

DIN 字體

DIN 字體是效力于德國(guó)交通標(biāo)識(shí)和公共空間的經(jīng)典字體，是一種很好的數(shù)字字體。

Futura 字體

Futura 字體 ，這個(gè)字體現(xiàn)代、時(shí)尚具有幾何特征，是很多雜志和時(shí)尚品牌的常用字體，例如：時(shí)尚氣質(zhì)的品牌 LV 的商標(biāo)字體就是這種英文字體。

Roboto 字體

Roboto 字體，是谷歌公司為 Android 操作系統(tǒng)開(kāi)發(fā)的默認(rèn)英文字體，具有“現(xiàn)代感”、“親和力” 的設(shè)計(jì)感。

San Francisco 字體

San Francisco 字體 ，蘋(píng)果公司設(shè)計(jì)的，蘋(píng)果公司推出的 Apple Watch 和 iOS 移動(dòng)端等系統(tǒng)的英文字體。

Didot 字體

Didot 字體， 是世界上最著名的英文字體之一，美感，可以用在 英文標(biāo)題、產(chǎn)品設(shè)計(jì)、廣告使用的一款字體。

例如：時(shí)尚雜志 VOGUE 標(biāo)題字 就是運(yùn)用了這個(gè)字體。

 

三 移動(dòng)端設(shè)計(jì)規(guī)范之設(shè)計(jì)主題、設(shè)計(jì)原則、屏幕的設(shè)計(jì)尺寸：

 

iOS 設(shè)計(jì)主題

iOS的三個(gè)主要主題將其與其他平臺(tái)區(qū)分開(kāi)來(lái)：

  • 明晰。在整個(gè)系統(tǒng)中，各種大小的文字都清晰易讀，圖標(biāo)精確而清晰，裝飾物微妙而恰當(dāng)，對(duì)功能的高度關(guān)注激發(fā)了設(shè)計(jì)的靈感。負(fù)空間，顏色，字體，圖形和界面元素巧妙地突出了重要內(nèi)容并傳達(dá)了交互性。
  • 尊敬 流暢的動(dòng)作和清晰美觀的界面可幫助人們理解內(nèi)容并與之互動(dòng)，而從未與之競(jìng)爭(zhēng)。內(nèi)容通常會(huì)填滿整個(gè)屏幕，而半透明和模糊通常會(huì)暗示更多內(nèi)容。最少使用邊框，漸變色和陰影可以保持界面明亮通風(fēng)，同時(shí)確保內(nèi)容至關(guān)重要。
  • 深度。獨(dú)特的視覺(jué)層和逼真的動(dòng)作傳達(dá)層次感，賦予生命力并促進(jìn)理解。觸摸和可發(fā)現(xiàn)性提高了人們的愉悅感，使他們能夠訪問(wèn)功能和其他內(nèi)容而不會(huì)丟失上下文。當(dāng)您瀏覽內(nèi)容時(shí)，過(guò)渡會(huì)提供一種深度感。

 

設(shè)計(jì)原則

為了最大限度地提高影響力和影響范圍，請(qǐng)?jiān)谙胂髴?yīng)用程序的身份時(shí)牢記以下原則。

 

 

審美完整性

審美完整性表示應(yīng)用程序的外觀和行為與其功能的集成程度。例如，一個(gè)可以幫助人們執(zhí)行重要任務(wù)的應(yīng)用程序可以通過(guò)使用微妙，醒目的圖形，標(biāo)準(zhǔn)控件和可預(yù)測(cè)的行為來(lái)使他們專(zhuān)注。另一方面，沉浸式應(yīng)用程序（例如游戲）可以提供引人入勝的外觀，帶來(lái)樂(lè)趣和刺激，同時(shí)鼓勵(lì)發(fā)現(xiàn)。

 

一致性

一致的應(yīng)用程序通過(guò)使用系統(tǒng)提供的界面元素，知名的圖標(biāo)，標(biāo)準(zhǔn)的文本樣式和統(tǒng)一的術(shù)語(yǔ)來(lái)實(shí)現(xiàn)熟悉的標(biāo)準(zhǔn)和范例。該應(yīng)用程序以人們期望的方式結(jié)合了功能和行為。

 

直接操縱

屏幕內(nèi)容的直接操作可以吸引人們并促進(jìn)理解。用戶在旋轉(zhuǎn)設(shè)備或使用手勢(shì)來(lái)影響屏幕內(nèi)容時(shí)會(huì)經(jīng)歷直接的操縱。通過(guò)直接操作，他們可以看到其操作的直接可見(jiàn)結(jié)果。

 

反饋

反饋確認(rèn)行動(dòng)并顯示結(jié)果，以使人們了解情況。內(nèi)置的iOS應(yīng)用程序可響應(yīng)每個(gè)用戶操作提供可感知的反饋。輕觸時(shí)，交互元素將突出顯示，進(jìn)度指示器傳達(dá)長(zhǎng)時(shí)間運(yùn)行的操作的狀態(tài)，動(dòng)畫(huà)和聲音有助于闡明操作的結(jié)果。

 

隱喻

當(dāng)應(yīng)用程序的虛擬對(duì)象和動(dòng)作是扎根于現(xiàn)實(shí)世界或數(shù)字世界的隱喻時(shí)，人們會(huì)更快地學(xué)習(xí)。隱喻在iOS中可以很好地工作，因?yàn)槿藗兛梢耘c屏幕進(jìn)行物理交互。他們將視圖移開(kāi)以隱藏下面的內(nèi)容。他們拖動(dòng)和滑動(dòng)內(nèi)容。他們切換開(kāi)關(guān)，移動(dòng)滑塊并滾動(dòng)選擇器值。他們甚至瀏覽書(shū)籍和雜志的頁(yè)面。

 

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的尺寸規(guī)范和分辨率的認(rèn)識(shí)，是進(jìn)行線上界面設(shè)計(jì)的第一步。然而，市面上的型號(hào)有很多，咋辦？

作為設(shè)計(jì)師，要掌握常見(jiàn)的尺寸和距離，理解并做好設(shè)計(jì)的適配，才能解決不同手機(jī)屏幕之間的布局規(guī)范和換算關(guān)系。

 

常見(jiàn)的移動(dòng)端手機(jī)屏幕的設(shè)計(jì)尺寸如下：

DPI和PPI的定義（來(lái)自百度百科）

DPI原來(lái)是印刷上的記量單位，意思是每英寸上，所能印刷的網(wǎng)點(diǎn)數(shù)（Dot Per Inch）。但隨著數(shù)字輸入，輸出設(shè)備快速發(fā)展，大多數(shù)的人也將數(shù)字影像的解析度用DPI表示，但較為嚴(yán)謹(jǐn)?shù)娜丝赡茏⒁獾?，印刷時(shí)計(jì)算的網(wǎng)點(diǎn)（Dot）和電腦顯示器的顯示像素（Pixel）并非相同，所以較專(zhuān)業(yè)的人士，會(huì)用PPI(Pixel Per Inch)表示數(shù)字影像的解析度，以區(qū)分二者。

我們通常講的打印機(jī)分辨率是多少DPI，指的是”在該打印機(jī)最高分辨率模式下,每英寸所能打印的最多”理論”墨點(diǎn)數(shù)”。

Pixels Per Inch也叫像素密度，所表示的是每英寸所擁有的像素?cái)?shù)量。因此PPI數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。當(dāng)然，顯示的密度越高，擬真度就越高。

Pixels Per Inch是像素的密度單位，就像PPI值越高，畫(huà)面的細(xì)節(jié)就會(huì)越豐富，所以數(shù)碼相機(jī)拍出來(lái)的圖片因品牌或生產(chǎn)時(shí)間不同可能有所不同，常見(jiàn)的有72PPI，180PPI和300PPI,默認(rèn)出來(lái)就是這么多(A710拍出的是180PPI)。

DPI(Dots Per Inch)是指輸出分辨，針對(duì)于輸出設(shè)備而言的，一般的激光打印機(jī)的輸出分辨率是300PPI-600PPI，印刷的照排機(jī)達(dá)到1200PPI-2400PPI，常見(jiàn)的沖印一般在150PPI到300PPI之間。

例如，iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清顯示屏，移動(dòng)端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB標(biāo)準(zhǔn)。

iPhone 6 Plus,5.5英寸(對(duì)角線)LED背光寬Multi?Touch顯示屏，具有IPS技術(shù),1920×1080像素分辨率，401ppi.全sRGB標(biāo)準(zhǔn),如下圖所示。

 

分辨率、像素和屏幕物理尺寸

iPhone X 尺寸 是 5.8英寸，手機(jī)主屏幕分辨率是750乘1624 PX，整個(gè)屏幕的像素尺寸,一倍圖：375 乘 812  。

關(guān)于 iPhone 6，一倍圖下：375 乘 667  。

 

pc端網(wǎng)頁(yè)設(shè)計(jì)的尺寸是：1920乘1080px。

像素密度，即每英寸屏幕所擁有的像素?cái)?shù)，像素密度越大，顯示畫(huà)面細(xì)節(jié)就越豐富。

像素密度=√{（長(zhǎng)度像素?cái)?shù)^2+寬度像素?cái)?shù)^2）}/ 屏幕尺寸。

屏幕分辨率是指縱橫向上的像素點(diǎn)數(shù)，單位是px。屏幕分辨率確定計(jì)算機(jī)屏幕上顯示多少信息的設(shè)置，以水平和垂直像素來(lái)衡量。就相同大小的屏幕而言，當(dāng)屏幕分辨率低時(shí)（例如 640 x 480），在屏幕上顯示的像素少，單個(gè)像素尺寸比較大。屏幕分辨率高時(shí)（例如 1600 x 1200），在屏幕上顯示的像素多，單個(gè)像素尺寸比較小。

顯示分辨率就是屏幕上顯示的像素個(gè)數(shù)，分辨率160×128的意思是水平方向含有像素?cái)?shù)為160個(gè)，垂直方向像素?cái)?shù)128個(gè)。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)和細(xì)膩。

比例 ：4：3、5：4、16:10、16:9、21:9

4:3 是最常見(jiàn)屏幕比例。16:10 就是常見(jiàn)的「寬屏幕」比例。16:9 主要是HD電視在用的比例。

常聽(tīng)到的720p、1080p 都是這個(gè)比例。

 

邏輯大小和像素大小

對(duì)于人類(lèi)的視覺(jué)對(duì)于對(duì)象尺寸的判斷是由邏輯大小來(lái)決定的。以一個(gè)圖形為例，無(wú)論這個(gè)圖形距離我們多遠(yuǎn)，用戶的認(rèn)知中，大小是直徑為25mm 。 也就是說(shuō)，這是它的真實(shí)的大小，所以我們把人對(duì)于物體真實(shí)尺寸的認(rèn)知成為邏輯大小。

屏幕像素?cái)?shù)量不同，在相同像素大小的情況下，圖形顯示的大小，就會(huì)不一樣。

IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基礎(chǔ)上乘以 1.5 ，才能以平常的物理尺寸顯示元素的大小。

 

邏輯像素與實(shí)際像素

Ipone 手機(jī)屏幕常見(jiàn)的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。

同樣一個(gè)圓，高分辨率的屏幕顯示更清晰，視覺(jué)體驗(yàn)會(huì)更好。

設(shè)計(jì)時(shí)，優(yōu)先保證高分辨率的屏幕效果。

一倍圖字樣的切圖則應(yīng)用在普通屏幕上，帶 @2x字樣的切圖通常用于 Retina 屏幕上，帶@3x 字樣的切圖則應(yīng)用在 IPONE Plus 系列手機(jī)的屏幕上。設(shè)計(jì)者只需把這 3 個(gè)尺寸的切圖給技術(shù)人員，技術(shù)人員可以將合適的尺寸的圖片適配到各個(gè)機(jī)型了。實(shí)際像素除以倍率，就得到邏輯像素尺寸。

 

所謂“Retina”是一種顯示標(biāo)準(zhǔn)，是把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。由摩托羅拉公司研發(fā)。最初該技術(shù)是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無(wú)法分辨其中的單獨(dú)像素。也被稱為視網(wǎng)膜顯示屏。

為了適配，是為了實(shí)現(xiàn)視覺(jué)的統(tǒng)一感，讓相同大小的物體在不同像素密度的屏幕上看起來(lái)大小是相同的感覺(jué)。邏輯像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。開(kāi)發(fā)項(xiàng)目中，一倍圖機(jī)型上是100px乘100px,在iPhone 6s 中顯示出來(lái)的是200px乘200px，在 iPhone 8 plus 中顯示出來(lái)的是 300px乘300px 。在視覺(jué)上，這三個(gè)尺寸看起來(lái)是一樣的。下圖是 ipone 手機(jī)界面詳細(xì)的適配尺寸規(guī)范。

針對(duì)以上規(guī)范，設(shè)計(jì)師的尺寸為 375乘667 pt、導(dǎo)出格式為 @2x 的設(shè)計(jì)稿可以應(yīng)用在ipone 6、ipone 7、ipone 8 手機(jī)中。

 

安卓系統(tǒng)把各種設(shè)備的像素密度劃分成幾個(gè)范圍區(qū)間，并且給不同范圍的設(shè)備定義了不同的倍率，保證顯示效果的相近。安卓系統(tǒng)的邏輯像素單位是 dp 。

 安卓系統(tǒng)的手機(jī)屏幕都可以找到自己密度值、代表分辨率、倍率、邏輯分辨率等。

密度為xxxhdpi(1080px乘1920px) 的手機(jī)目前市場(chǎng)份額占比較大；目前密度為 xhdpi、xxdpi 和 xxxdpi 的手機(jī)產(chǎn)品占絕大多數(shù)的市場(chǎng)份額，而正好他們的邏輯像素是 360dp 乘 640dp, 根據(jù)這樣的分辨率標(biāo)準(zhǔn)導(dǎo)出 @2x、@3x、@4x 這三種格式的切圖，基本就可以適配市面上絕大部分的Andriod 系統(tǒng)的機(jī)型了。

 

全局邊距

在UI界面設(shè)計(jì)中，以(750px乘1334px)全局邊距一般是30PX，整個(gè)產(chǎn)品設(shè)計(jì)的邊距都是30px，保持一致性。

或者 32px 的全局邊距也是不錯(cuò)的選擇，比如：Booking 就用了這個(gè)尺寸。 

24px 全局邊距

Facebook ，它們不但距離屏幕邊緣距離一致，就連邊緣距離一致，就連頭像與文字的距離也相同，都是 16px。

 40px 全局邊距

40px 屬于較大的大邊距，留白開(kāi)始變多，界面呼吸感好，閱讀體驗(yàn)好。例如：36kr。大邊距適合單一的應(yīng)用，不需要復(fù)雜信息和交互層級(jí)。

50px 全局邊距

50px 可以算最大邊距，它讓界面變得干凈整潔，用戶在瀏覽時(shí)極為輕松。

 

豎向間距

定義卡片和卡片間的間距一般是：20px、24px、30px，最大間距不超過(guò)40px。間距的背景色可以與你分割線一致，也可以淺一些，界面柔和一點(diǎn)。

88px

ios 中最小點(diǎn)擊區(qū)域是 88px，因?yàn)樘O(píng)果在縱向尺寸上把 22px 作為一個(gè)基礎(chǔ)單元，物理尺寸最小空間的高度為 22乘4等于88px，為手指觸摸最小的高度。因此導(dǎo)航欄、標(biāo)簽欄、列表、搜索欄和按鈕的高度都是 88px，導(dǎo)航欄和標(biāo)簽欄圖標(biāo)為 44px，元素與元素之間的最小間距是 22px。

 

四 iPhone X的適配方案

 

針對(duì)前面所講的ios 系統(tǒng)的常用機(jī)型，幾乎一種邏輯尺寸為375pt乘667pt 就可以完成設(shè)計(jì)的適配。而相對(duì)來(lái)說(shuō)，ipone X 的適配處理稍微多一些細(xì)節(jié)。異形的 iPhone X 的屏幕部分的高度增加了145pt，如下圖所示。

先說(shuō)一下頂部劉海區(qū)域的適配方式。如圖 所示，對(duì)于常規(guī)的 iPhone 8 屏幕來(lái)說(shuō)，屏幕內(nèi)基本都是安全顯示區(qū)域，安全顯示區(qū)域就是要把重要元素放在上面做好設(shè)計(jì)。iPhone X 上由于多了劉海 的設(shè)計(jì)和四周的圓角設(shè)計(jì)，意味著也多了兩個(gè)不可顯示內(nèi)容的非安全區(qū)域。蘋(píng)果官方給出的非安全區(qū)域?yàn)槠聊簧戏?44 pt ，屏幕下方是 34 pt ，并且下方 34 pt 的非安全區(qū)域一定不可以放置可點(diǎn)擊的按鈕，否則會(huì)與虛擬的 Home 鍵發(fā)生交互上的沖突。

空間里利用率角度思考，與 IOS 界面的整體效果保持一致的感覺(jué)。如下圖所示，豎版和橫版。

 

而具體的適配方法要從這兩塊非安全區(qū)域去用心思考。由于頂部的非安全區(qū)域內(nèi)不可以出現(xiàn)狀態(tài)欄之外的內(nèi)容，因此從前的狀態(tài)條由20pt加長(zhǎng)到44pt, 則意味著增加了 24 pt 。這時(shí)候?qū)Ш綑诘某叽绫３植蛔儯恍枵w向下移動(dòng)24pt 。 這時(shí)候?qū)Ш綑诘某叽绫３植蛔?，只需整體向下移動(dòng) 24pt 即可。同時(shí)，狀態(tài)欄背景的顏色需要與導(dǎo)航欄背景的顏色保持一致。

 

當(dāng)界面頂部帶有圖片背景時(shí)，最簡(jiǎn)單的處理方式將頂部圖片元素的高度增加 24pt。如果有 Banner 貫穿到頂部，一般有以下兩種處理方式。

第一種方式是為 iPhone X 單獨(dú)做一套 Banner 尺寸，拉長(zhǎng) 24pt，并且頂部 24pt  不可放置有效的閱讀消息，設(shè)計(jì)兩套圖，一種是正常的 IPONE 6、7、8 等尺寸，一種是 ipone X 的尺寸 下需要的設(shè)計(jì)廣告圖。如下圖所示。

 

第二種方式是顯示導(dǎo)航欄，并且 Banner 不再貫穿到 頂部顯示，而是移動(dòng)到導(dǎo)航欄下方。

顯示效果缺少沉浸式的設(shè)計(jì)體驗(yàn)感。

說(shuō)完劉海區(qū)域的適配方式之后，再來(lái)說(shuō)一下底部非安全區(qū)域的適配方式。置于屏幕底部的 Home Indicator 集成了原有實(shí)體 Home 鍵退出與切換系統(tǒng)應(yīng)用的功能。在適配過(guò)程中，可以更換此區(qū)域內(nèi)背景的顏色、透明度與高度。底部的33pt 的非安全區(qū)域內(nèi)禁止出現(xiàn)可操作按鈕。

 

第1種情況，當(dāng)界面底部有按鈕，按鈕依附在底部 34pt 的非安全區(qū)域的上方即可，非安全區(qū)域的背景色一般與操作按鈕的背景色保持一致。如下圖所示。

 

第2種情況，當(dāng)界面底部沒(méi)有按鈕，只需讓列表正常顯示就可以了，無(wú)須遮擋，如下圖所示。

 

第3種情況：在廣告引導(dǎo)頁(yè)等呈現(xiàn)全屏樣式時(shí)，需要做兩套設(shè)計(jì)稿的間距和大小的設(shè)計(jì)適配，保證好的視覺(jué)內(nèi)容的展示，背景色延伸的方法就好。

 

界面設(shè)計(jì)中的間距思考

界面所留出的固定邊距是最基礎(chǔ)的柵格系統(tǒng)。如下圖所示。

 

界面的分割規(guī)范應(yīng)用在品類(lèi)區(qū)的功能圖標(biāo)，四等分的設(shè)計(jì)，符合柵格系統(tǒng)的設(shè)計(jì)。規(guī)范的設(shè)計(jì)，有利于開(kāi)發(fā)對(duì)設(shè)計(jì)稿的還原設(shè)計(jì)。

 

柵格系統(tǒng)中的8px 的原則

8px 原則，就是界面設(shè)計(jì)中所有元素的長(zhǎng)度除以寬度和間距都可以被 8 整除。這里的 8px 是基于@2x 倍圖格式下的切圖使用的。以320dp乘480dp為@1x 邏輯尺寸，安卓系統(tǒng)屏幕下的部分適配尺寸。

 

五  常見(jiàn)的移動(dòng)端設(shè)計(jì)布局和適用場(chǎng)景

信息的設(shè)計(jì)優(yōu)先級(jí)，布局合理性，提升信息的傳達(dá)效率。

 

核心功能的布局

核心功能的各模塊的布局之間保持相對(duì)獨(dú)立，標(biāo)簽橫向數(shù)量盡量不要超過(guò)5個(gè)，超過(guò)5個(gè)可以采用左右滑的交互方式來(lái)實(shí)現(xiàn)，來(lái)自于設(shè)計(jì)心理學(xué)。

標(biāo)簽樣式的布局優(yōu)點(diǎn)是各入口清晰呈現(xiàn)，方便用戶快速查找信息；標(biāo)題一定要精簡(jiǎn)。對(duì)于要突出的核心功能，可以做信息層級(jí)的大小、是否有設(shè)計(jì)背板的處理，主次關(guān)系分明。

 

列表式布局

列表式布局適用于信息類(lèi)的產(chǎn)品。

列表式布局優(yōu)點(diǎn)信息展示較直觀，節(jié)省界面空間，瀏覽效率高，字段長(zhǎng)度不受限制，并且可以錯(cuò)行展示。單純看文字會(huì)視覺(jué)疲勞，所以圖文混排，富有變化。突出主題，優(yōu)質(zhì)配圖，有利于用戶更好的閱讀信息。

 

卡片式布局

卡片式布局就是把不同大小、不同形式的內(nèi)容放在一個(gè)容器里進(jìn)行組合展示。較常見(jiàn)的是圖文混排，既要做到視覺(jué)上的一致性感覺(jué)，又要平衡圖片和主題內(nèi)容的關(guān)系。分組展示，讓用戶更好的理解各模塊的內(nèi)容。

 

瀑布流布局

瀑布流布局適用于圖片、視頻等更好的沉浸式的瀏覽內(nèi)容。移動(dòng)端的瀑布流布局一般是兩列信息并行，錯(cuò)位展示，可以極大的提升交互效率，可以制造豐富的視覺(jué)體驗(yàn)，適用于花瓣等圖片類(lèi)的界面布局設(shè)計(jì)。

 

六  APP組建化設(shè)計(jì)規(guī)范

（具體看我站酷前面寫(xiě)的組件化思維的文章）

Ios系統(tǒng)和安卓系統(tǒng)都提供了一些固定的官方組件規(guī)范。遵循其官方組件規(guī)范，可以極大提高設(shè)計(jì)和開(kāi)發(fā)效率，同時(shí)降低用戶的學(xué)習(xí)成本。其中最常見(jiàn)的規(guī)范化組件包括頂部的狀態(tài)欄、導(dǎo)航欄、底部標(biāo)簽欄和工具欄。

狀態(tài)欄

ios 是 20pt, 安卓是24dp.

導(dǎo)航欄

ios 是 44pt, 安卓是56dp.

標(biāo)簽欄

ios 的高度是 49pt, 安卓標(biāo)簽欄的高度是48dp.

工具欄

工具欄的高度是 44pt,安卓是 48dp .

字體是蘋(píng)方字體；英文是SF英文字體。思源黑體，roboto 英文字體。

 

IOS設(shè)計(jì)是 11pt到29pt 左右，一級(jí)主題是24pt 以上,二級(jí)標(biāo)題是20pt左右。

內(nèi)容，導(dǎo)航欄標(biāo)題是 18pt。    三級(jí)標(biāo)題是16pt。 文字內(nèi)容一般是 14pt

品類(lèi)區(qū)圖標(biāo)內(nèi)容：12pt 。 底部TAB 圖標(biāo)文字：10pt到11pt

 

七 微信小程序設(shè)計(jì)

 

基于微信小程序輕快的特點(diǎn)，我們擬定了小程序界面設(shè)計(jì)指南和建議。 設(shè)計(jì)指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上。旨在微信生態(tài)體系內(nèi)，建立友好、高效、一致的用戶體驗(yàn)，同時(shí)最大程度適應(yīng)和支持不同需求，實(shí)現(xiàn)用戶與小程序服務(wù)方的共贏。

 

友好禮貌

為了避免用戶在微信中使用小程序服務(wù)時(shí)，注意力被周?chē)鷱?fù)雜環(huán)境干擾，小程序在設(shè)計(jì)時(shí)應(yīng)該注意減少無(wú)關(guān)的設(shè)計(jì)元素對(duì)用戶目標(biāo)的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶進(jìn)行操作。

 

重點(diǎn)突出

每個(gè)頁(yè)面都應(yīng)有明確的重點(diǎn)，以便于用戶每進(jìn)入一個(gè)新頁(yè)面的時(shí)候都能快速地理解頁(yè)面內(nèi)容。在確定了重點(diǎn)的前提下，應(yīng)盡量避免頁(yè)面上出現(xiàn)其它與用戶的決策和操作無(wú)關(guān)的干擾因素。

 

 

避免誤操作

換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標(biāo)準(zhǔn)組件庫(kù)中，各種控件元素均已考慮到了頁(yè)面點(diǎn)擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標(biāo)準(zhǔn)控件尺寸進(jìn)行設(shè)計(jì)。

小程序是在微信開(kāi)放平臺(tái)上運(yùn)行的一種不需要下載安裝即可使用的應(yīng)用，它提供了一種快速體驗(yàn)的方式，用戶通過(guò)掃一掃或搜一搜即可打開(kāi)應(yīng)用，實(shí)現(xiàn)了“觸手可及”、“用完即走”的高效操作。對(duì)于開(kāi)發(fā)者而言，小程序開(kāi)發(fā)門(mén)檻相對(duì)較低，能滿足簡(jiǎn)單的基礎(chǔ)應(yīng)用?；谛〕绦蜉p快的特點(diǎn)，我們?cè)谶M(jìn)行小程序界面設(shè)計(jì)時(shí)，友好、高效、一致的用戶體驗(yàn)，友好的引導(dǎo)用戶操作。

 

小程序菜單

小程序的界面，包括小程序內(nèi)嵌網(wǎng)頁(yè)和插件，微信都會(huì)在其右上角放置菜單。菜單包括兩個(gè)圖標(biāo)，左邊是更多，點(diǎn)開(kāi)分別是轉(zhuǎn)發(fā)、關(guān)于和取消；右邊是主頁(yè)，點(diǎn)擊后回到小程序列表。小程序菜單和狀態(tài)欄之外的區(qū)域是開(kāi)發(fā)者控制區(qū)域，可設(shè)計(jì)。

 

微信提供深淺兩種配色，適配不同風(fēng)格，元素設(shè)計(jì)的辨識(shí)度。小程序在IOS和Android 的標(biāo)注尺寸，如下圖所示。

 

開(kāi)發(fā)者不可對(duì)小程序菜單自定義，但可選擇深淺兩種基本配色以適應(yīng)頁(yè)面設(shè)計(jì)風(fēng)格。為了讓小程序菜單清晰可見(jiàn)，在深色背景上使用淺色菜單，在淺色背景上使用深色菜單。

 

減少輸入

由于手機(jī)鍵盤(pán)區(qū)域小且密集，輸入困難的同時(shí)還易引起輸入錯(cuò)誤，因此在設(shè)計(jì)小程序頁(yè)面時(shí)因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來(lái)改善用戶輸入的體驗(yàn)。

例如下圖中，在添加銀行卡時(shí)，采用攝像頭識(shí)別接口來(lái)幫助用戶輸入。除此之外微信團(tuán)隊(duì)還對(duì)外開(kāi)放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性，進(jìn)而優(yōu)化體驗(yàn)。

 

 

在用戶搜索時(shí)提供搜索歷史快捷選項(xiàng)將幫助用戶快速進(jìn)行搜索，而減少或避免不必要的鍵盤(pán)輸入。

 

上面部分用圖，來(lái)自微信小程序設(shè)計(jì)指南，具體細(xì)節(jié)設(shè)計(jì)規(guī)范可以看-微信小程序設(shè)計(jì)指南。

 

頁(yè)面導(dǎo)航

頂部標(biāo)簽分頁(yè)欄，顏色和樣式都可以自定義。

最常見(jiàn)的設(shè)計(jì)方式是將選中態(tài)填充品牌主色，未選態(tài)有清晰的對(duì)比和可操作性。最常見(jiàn)的設(shè)計(jì)方式是將選中態(tài)填充品牌主色，未選態(tài)填充灰色，標(biāo)簽之間保持足夠的空間，避免引起誤操作。

標(biāo)簽分頁(yè)分頁(yè)欄的樣式可根據(jù)App的 視覺(jué)風(fēng)格進(jìn)行設(shè)計(jì)，以保證兩個(gè)平臺(tái)擁有一致的視覺(jué)體驗(yàn)。例如騰訊視頻，在App中，它的標(biāo)簽欄分頁(yè)欄是無(wú)框式設(shè)計(jì)風(fēng)格，選中態(tài)和未選態(tài)以文字大小和色彩的對(duì)比進(jìn)行區(qū)分；在小程序中，同樣使用無(wú)框式設(shè)計(jì)風(fēng)格，色彩不變，樣式上字號(hào)大小，精致的線條輔助展示當(dāng)前狀態(tài)的設(shè)計(jì)。

 

開(kāi)發(fā)者可為小程序頁(yè)面添加標(biāo)簽分頁(yè)導(dǎo)航，標(biāo)簽分頁(yè)欄可固定在頁(yè)面頂部或底部，便于用戶在不同在不同的分頁(yè)間做切換。標(biāo)簽數(shù)量不得少于2個(gè)，最多不超過(guò) 5個(gè)，為確保足夠的點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過(guò)4個(gè)。

小程序首頁(yè)可選擇微信提供的原生底部標(biāo)簽分頁(yè)樣式，該樣式僅供小程序首頁(yè)使用。設(shè)計(jì)時(shí)可自定義圖標(biāo)樣式、標(biāo)簽文案及顏色等，以750乘1334px 的分辨率，標(biāo)簽文案字號(hào)是 20px，圖標(biāo)尺寸為 50px乘50px、標(biāo)簽欄高 98px，與 ios 蘋(píng)果的設(shè)計(jì)規(guī)范保持一致性。

微信小程序的設(shè)計(jì)和開(kāi)發(fā)，可根據(jù)產(chǎn)品需要選擇或不選擇底部標(biāo)簽分頁(yè)欄，例如騰訊視頻小程序使用4個(gè)標(biāo)簽承載功能不同的頁(yè)面內(nèi)容，為用戶提供清晰、快速的瀏覽體驗(yàn)；而窮游行程助手的內(nèi)容較為單一，只需一個(gè)頁(yè)面就能清晰呈現(xiàn)所有內(nèi)容，因此不需要標(biāo)簽分頁(yè)欄。如下圖所示。

 

啟動(dòng)頁(yè)加載

在小程序列表點(diǎn)擊小程序后進(jìn)入小程序后進(jìn)入啟動(dòng)頁(yè)，它是小程序在微信內(nèi)一定程度上展現(xiàn)品牌特征的頁(yè)面之一，

本頁(yè)面將突出展示小程序品牌特征和加載狀態(tài)。啟動(dòng)頁(yè)除品牌Logo 展示外，頁(yè)面上的其他所有元素如，加載進(jìn)度指示，均由微信統(tǒng)一提供且不能更改，無(wú)須開(kāi)發(fā)者開(kāi)發(fā)。品牌Logo 尺寸為 80乘80px，間距標(biāo)注如下圖所示。

頁(yè)面過(guò)長(zhǎng)時(shí)間的等待會(huì)引起用戶的負(fù)面情緒，應(yīng)盡量使用微信小程序項(xiàng)目提供的技術(shù)縮短等待時(shí)間。優(yōu)先顯示預(yù)設(shè)的本地?cái)?shù)據(jù)，告知用戶正在加載頁(yè)面中。

全局加載反饋是在小程序名稱左側(cè)顯示加載狀態(tài)的圖標(biāo)，提示加載小程序內(nèi)容的過(guò)程。同時(shí)，模態(tài)的加載樣式將覆蓋整個(gè)頁(yè)面，它是由加載圖標(biāo)、文字提示和半透明圓角矩形組成，由于無(wú)法明確告知具體加載的位置將可能引起用戶的焦慮情緒，因此應(yīng)謹(jǐn)慎使用。

 

設(shè)計(jì)案例

小程序設(shè)計(jì)是基于微信內(nèi)部運(yùn)行的應(yīng)用，因此在視覺(jué)上要輕盈、干凈、簡(jiǎn)潔，保持扁平化設(shè)計(jì)風(fēng)格；在交互上要結(jié)構(gòu)簡(jiǎn)單、層級(jí)清晰、跳轉(zhuǎn)少，保證產(chǎn)品高效的瀏覽體驗(yàn)。微信小程序，在設(shè)計(jì)時(shí)應(yīng)精簡(jiǎn)控件和高效、實(shí)用。

旅游產(chǎn)品為例：

1、 小程序頁(yè)面的右上角固定小程序菜單。

2、為確保足夠的點(diǎn)擊區(qū)域，小程序底部的標(biāo)簽分頁(yè)欄建議最多4項(xiàng)。收件箱在很多 App 中不會(huì)獨(dú)立作為一個(gè)標(biāo)簽，可以考慮移除；個(gè)人資料 承載了許多用戶自己的重要信息，保留在標(biāo)簽欄比較合適。最后確定四個(gè)底部標(biāo)簽欄的功能設(shè)計(jì)-分別是：首頁(yè)，收藏，消息，我的，四個(gè)標(biāo)簽。

3、開(kāi)始進(jìn)行設(shè)計(jì)，保持與App 同樣的白色背景，標(biāo)題欄上 Airbnb 居左對(duì)齊。

4、我們必須對(duì)原來(lái)的樣式進(jìn)行優(yōu)化，做減法是小程序設(shè)計(jì)的關(guān)鍵。在App中，Airbnb 的設(shè)計(jì)輕盈、干凈、簡(jiǎn)潔，因此可以直接復(fù)用到小程序中，無(wú)須重新設(shè)計(jì)。小程序延續(xù)了輕量化陰影的視覺(jué)特征，因此優(yōu)化后的界面設(shè)計(jì)依然保持與App一致的設(shè)計(jì)風(fēng)格。

 

八  網(wǎng)頁(yè)的設(shè)計(jì)規(guī)范

 

 

1、網(wǎng)頁(yè)設(shè)計(jì)是什么？

網(wǎng)頁(yè)設(shè)計(jì)也被稱為 Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。

 

2. 設(shè)計(jì)規(guī)范

一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等。

 

3、網(wǎng)站種類(lèi)

網(wǎng)站的分類(lèi)按對(duì)象來(lái)劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費(fèi)者，例如、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、移動(dòng)端H5 等，均是面向用戶的產(chǎn)品。以用戶為中心考慮體驗(yàn)設(shè)計(jì)。

To B端作為一個(gè)需求量很大的類(lèi)別，比如電商后臺(tái)、Dashboard、企業(yè)級(jí)OA、網(wǎng)站統(tǒng)計(jì)后臺(tái)等這些面向商家和專(zhuān)業(yè)人士的網(wǎng)站就是 To B 類(lèi)網(wǎng)站項(xiàng)目了。To B 類(lèi)項(xiàng)目最重要的是效率，因?yàn)檎f(shuō)白了我們?cè)谠O(shè)計(jì)使用者工作的工具，我們?cè)谠O(shè)計(jì)時(shí)必須首先要使用者可以高效工作使用。

企業(yè)網(wǎng)站

每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來(lái)對(duì)外展示自己的能力、介紹自己的產(chǎn)品等。企業(yè)網(wǎng)站設(shè)計(jì)時(shí)通常會(huì)有網(wǎng)站首頁(yè)、公司介紹、產(chǎn)品中心、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等這幾個(gè)模塊，企業(yè)網(wǎng)站會(huì)展示很多諸如公司環(huán)境、團(tuán)隊(duì)成員、企業(yè)文化等實(shí)際的照片，配合一些資料進(jìn)行設(shè)計(jì)。企業(yè)網(wǎng)站通常也追求所謂「高端」、「大氣」、「上檔次」的風(fēng)格，也就是為了達(dá)到讓消費(fèi)者認(rèn)同品牌這個(gè)要求。

 

產(chǎn)品網(wǎng)站

從蘋(píng)果公司的 iPhone 介紹頁(yè)到小米手機(jī)8的介紹頁(yè)，我們會(huì)發(fā)現(xiàn)一種新鮮的產(chǎn)品營(yíng)銷(xiāo)模式，就是產(chǎn)品網(wǎng)站。設(shè)計(jì)這類(lèi)網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場(chǎng)景等。這樣的產(chǎn)品頁(yè)希望可以讓用戶有沉浸感，所以一般來(lái)說(shuō)都是使用全屏布局，產(chǎn)品設(shè)計(jì)必須精致、有品質(zhì)感。

 

后臺(tái)網(wǎng)站（數(shù)據(jù)可視化）

后臺(tái)網(wǎng)站 Dashborad-儀表盤(pán)。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計(jì)信息。后臺(tái)網(wǎng)站是 To B 類(lèi)型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)?？墒菙?shù)據(jù)非?？菰铮覀兛梢允褂弥T如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來(lái)展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達(dá)數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。

可以參考的網(wǎng)站有： 百度的 ECHARTS ，如下圖所示。

 

CRM系統(tǒng)（簡(jiǎn)單拆解網(wǎng)頁(yè)B端的設(shè)計(jì)規(guī)范）

CRM 即 Customer relationship management，翻譯過(guò)來(lái)是客戶管理管理系統(tǒng)。CRM 是企業(yè)對(duì)客戶進(jìn)行信息化管理的一種形式，用互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)對(duì)客戶信息進(jìn)行收集、管理、分析，對(duì)企業(yè)的銷(xiāo)售、服務(wù)、售后進(jìn)行監(jiān)控。常見(jiàn)的功能有員工日程管理、訂單管理、發(fā)票管理等。

在PC端建議采用： 1440×900的設(shè)計(jì)尺寸

 

SaaS

如果我們服務(wù)于為企業(yè)搭建 CRM、ERP 或者 OA 等系統(tǒng)的第三方公司，那么我們可能會(huì)老聽(tīng)到 SaaS 這個(gè)詞。SaaS 是(Software-as-a-Service)，即軟件就是服務(wù)。

有贊軟件即SaaS服務(wù),包括有贊微商城、有贊零售、有贊教育、有贊美業(yè)、有贊小程序。如下圖所示。

 

企業(yè)OA

企業(yè)OA，即(Office Automation)，也就是辦公自動(dòng)化系統(tǒng)。

通過(guò)企業(yè)OA 可以完成請(qǐng)假、調(diào)休、離職、查詢公司規(guī)章制度、請(qǐng)示、匯報(bào)等工作。這樣減少了很多窗口成本和員工的時(shí)間成本，增強(qiáng)了公司辦事效率。

設(shè)計(jì)師在設(shè)計(jì)此類(lèi)項(xiàng)目時(shí)同樣要以操作者的體驗(yàn)和效率為重，讓操作者輕易可以找到在當(dāng)前頁(yè)面中最重要的功能。

 

4、B端系統(tǒng)的設(shè)計(jì)原則

 

一致

與現(xiàn)實(shí)生活一致 ， 用戶使用習(xí)慣

界面中一致，設(shè)計(jì)圖標(biāo)、文字、元素等保持一致性。

反饋 

控制反饋，清晰的知道自己的操作。

清晰認(rèn)知頁(yè)面的主題和交互狀態(tài)。

效率

簡(jiǎn)化流程。清晰明確的含義  界面快速認(rèn)知和理解。

結(jié)果可控

用戶可自由操作，包括撤銷(xiāo)、回退、終止當(dāng)前操作等。

 

設(shè)計(jì)規(guī)范（具體可以參考 ANT DESIGN 網(wǎng)站設(shè)計(jì)規(guī)范，去制作本公司的網(wǎng)頁(yè)端的設(shè)計(jì)規(guī)范）

從原子：色彩、字體、間距、圓角、分割線。

分子：輸入框、選擇器、開(kāi)關(guān)、上傳、時(shí)間日期選擇

組件：導(dǎo)航、表單、列表、 數(shù)據(jù)可視化圖表、 篩選

 

通用層面思考

色彩 、文字、 邊距和圓角、 按鈕 、間距、 柵格

主色：B端建議盡量選擇冷色系 避免太高亮

建議關(guān)鍵主色與白色對(duì)比度大于4.5

附：對(duì)比度檢測(cè) https://webaim.org/resources/contrastchecker/

按鈕： 實(shí)心按鈕、 空心按鈕 、文字按鈕

 

PC端后臺(tái)：不推薦用大圓角

間距

一般選用8的倍數(shù)

8、16、24、32、40、48、56、64、72……

網(wǎng)頁(yè)柵格，一般選用24柵格布局

24欄+23水槽+2頁(yè)邊距

柵格應(yīng)用在內(nèi)容層，如下圖所示。

頂部導(dǎo)航的使用場(chǎng)景：

適用于一級(jí)導(dǎo)航數(shù)量較少，內(nèi)容較為簡(jiǎn)單的系統(tǒng)

追求沉浸式閱讀的系統(tǒng)

多用于官網(wǎng)首頁(yè)

 頂部導(dǎo)航的優(yōu)點(diǎn)：

占用屏幕空間小，為內(nèi)容區(qū)留出更多空間

對(duì)視覺(jué)的干擾小，符合從上到下的閱讀習(xí)慣

一般采用固定版心的方式，更容易適配

隨著業(yè)務(wù)的發(fā)展，拓展性變差

三三級(jí)導(dǎo)航點(diǎn)擊后隱藏，不利于用戶記憶和查找

 

側(cè)邊導(dǎo)航的優(yōu)點(diǎn)：

適用于更專(zhuān)注功能和快速操作的系統(tǒng)，有贊為例，如下圖所示。

多用于較為復(fù)雜的后臺(tái)系統(tǒng)

拓展性強(qiáng)，一級(jí)導(dǎo)航的數(shù)目可以展示更多

層級(jí)清晰，一二三級(jí)導(dǎo)航都可以流暢展示

操作效率高，用戶在操作和瀏覽中快速定位和切換當(dāng)前位置

 

面包屑導(dǎo)航

使用場(chǎng)景：兩級(jí)及以上層級(jí)，最多不超過(guò)5級(jí)

作用：告知用戶你在哪里，且可以迅速回到上幾級(jí)導(dǎo)航

 

九  設(shè)計(jì)師的自我修養(yǎng)

 

我們對(duì)設(shè)計(jì)充滿興趣和激情。

1 用心積累優(yōu)秀的設(shè)計(jì)案例?？梢愿鶕?jù)公司的行業(yè)競(jìng)品，同類(lèi)直接競(jìng)品，跨界競(jìng)品做好收集。

2 每日記錄設(shè)計(jì)靈感。比如：站酷收藏夾，按照主題收藏；花瓣靈感，分組命名。

3 執(zhí)行力強(qiáng)，遇到設(shè)計(jì)問(wèn)題，換位思考。

4 超出預(yù)期，做好需求的設(shè)計(jì)方案，同時(shí)關(guān)注設(shè)計(jì)細(xì)節(jié)，超出需求方的預(yù)期和用戶的預(yù)期。

5 有上進(jìn)心，工作做好后，做好設(shè)計(jì)的總結(jié)和作品整理，發(fā)到站酷設(shè)計(jì)平臺(tái)，與其他設(shè)計(jì)師一起交流設(shè)計(jì)。

6 眼界開(kāi)闊，知識(shí)面廣：一個(gè)優(yōu)秀的設(shè)計(jì)師，不僅懂設(shè)計(jì)，還懂產(chǎn)品、運(yùn)營(yíng)、 推廣、開(kāi)發(fā)思維等方面的相關(guān)知識(shí)的學(xué)習(xí)和研究。有利于和上下游人士的溝通順暢。做到互相理解，團(tuán)隊(duì)更好的完成項(xiàng)目的設(shè)計(jì)提案。

最后，讓自己保持著朝氣蓬勃的精神，保持著朝氣蓬勃而富有創(chuàng)造力的心態(tài)。

 

參考文獻(xiàn)如下：

1、《規(guī)律與邏輯》

2、《CCtalk B端產(chǎn)品設(shè)計(jì)課》by 美芳老師

3、《高級(jí)UI設(shè)計(jì)師》

4、《ANT-DESIGN 螞蟻金服》

5、《蘋(píng)果官網(wǎng)等設(shè)計(jì)網(wǎng)站》

 

 

原文地址：站酷

作者：峻溪POINTVISION

 轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)規(guī)范和適配

藍(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.yvirxh.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司





評(píng)論(0) 瀏覽(4121)

日歷

鏈接

個(gè)人資料

存檔