首頁(yè)

為什么在UI設(shè)計(jì)中,藍(lán)色會(huì)成為最常用的色彩?

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

不管你是不是UI設(shè)計(jì)師,細(xì)心的你是否觀察到你所使用的APP中,絕大多數(shù)都采用了藍(lán)色。舉個(gè)例子,有多少APP軟件的LOGO使用了藍(lán)色,大家最熟悉的支付寶、知乎、百度、Facebook、Twitter、Safari均是如此。
為什么這些交互界面會(huì)不約而同的使用藍(lán)色?唐人設(shè)計(jì)總結(jié)了以下幾個(gè)原因:
一、藍(lán)色是被大多數(shù)人能接受的顏色
有研究表明,藍(lán)色是絕大多數(shù)的人都喜歡的藍(lán)色,藍(lán)色是被全球范圍內(nèi)公認(rèn)的最安全的設(shè)計(jì)用色。
二、藍(lán)色是UI設(shè)計(jì)師的通用色彩
從UI設(shè)計(jì)師的角度上來看,藍(lán)色是一種泛用的色彩。就我們所認(rèn)知的常用色彩當(dāng)中,紅色、黃色、綠色都帶有強(qiáng)烈的情感情緒。紅色代表喜慶,同時(shí)也表示警醒;黃色代表活潑,同時(shí)也昭示危險(xiǎn)的信號(hào);綠色常常關(guān)乎安全、健康,而相較于以上三種色彩,藍(lán)色所帶給人的情緒就比較模糊或者說是廣泛了。
三、藍(lán)色通常代表“創(chuàng)新”和“科技”
還記得唐人設(shè)計(jì)之前寫過的文章《你發(fā)現(xiàn)了沒?NBA的Logo微調(diào)了!》一文中提到了,NBA的LOGO調(diào)整之一包括LOGO顏色加深了,也就是在原來的藍(lán)色背景色基礎(chǔ)上更加加深了藍(lán)色色調(diào),這樣調(diào)整的好處在于:更深的藍(lán)色,讓NBA聯(lián)盟看起來更公司化。所以說,當(dāng)一個(gè)公司或者一個(gè)APP設(shè)計(jì)采用藍(lán)色LOGO的時(shí)候,常常會(huì)讓人聯(lián)想到技術(shù)和創(chuàng)新。
四、藍(lán)色讓產(chǎn)品看起來更加值得信賴
更準(zhǔn)確的來說,藍(lán)色會(huì)讓用戶更傾向于覺得“這就是我要的產(chǎn)品”,當(dāng)這種感覺和品牌本身的運(yùn)作和特質(zhì)結(jié)合在一起的時(shí)候,就能夠形成讓人信任的品牌性格了。戴爾、IBM、英特爾和PayPal都是利用技術(shù)來營(yíng)造品牌信任感。藍(lán)色代表冷靜、平衡和智慧,許多金融服務(wù)類的企業(yè)也喜歡用這種顏色。
五、藍(lán)色對(duì)于色盲足夠友好
考慮到用戶群體中不乏有色盲,而占比最大的紅綠色色盲群體都能清晰地分辨出藍(lán)色。藍(lán)色是Facebook的主要色調(diào),因?yàn)樗膭?chuàng)始人扎克伯格就是個(gè)色盲,如他所說:“于我而言藍(lán)色是我最容易辨認(rèn)的色彩,所有的藍(lán)色我都能掌控”
總結(jié):藍(lán)色雖然是最安全的設(shè)計(jì)色,但不要隨便將藍(lán)色泛用在你的設(shè)計(jì)中,最重要的一點(diǎn)還是選擇最適合自己品牌的色彩!

藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

我從Google、Airbnb、TED等7家公司設(shè)計(jì)師那里學(xué)到了什么?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

作者: John Saito | 翻譯: 正_青_春 審校: 凌藝蜻

我從設(shè)計(jì)中學(xué)到的一件事是你無法取悅所有人。你可以嘗試,但你最終會(huì)得到一個(gè)大打折扣的設(shè)計(jì),而且無法讓任何人滿意。

當(dāng)你試圖讓所有人滿意時(shí),你會(huì)失去你的重點(diǎn),你會(huì)開發(fā)一些人們不需要的功能,你所寫的用戶也根本不會(huì)去讀。

好的設(shè)計(jì)就是完全圍繞一個(gè)清晰的目標(biāo)。這一點(diǎn)非常重要!

過去的一個(gè)月里,我一直在和在設(shè)計(jì)中有明確清晰目標(biāo)的設(shè)計(jì)師交流,他們來自Google,Airbnb,Slack, Dropbox等等, 我想窺視他們的內(nèi)心,看看是什么驅(qū)動(dòng)他們做出決定以及是什么在指引他們的設(shè)計(jì),以下是我學(xué)到的一些內(nèi)容。

UXRen

1、從問題開始,而不是答案

 你是否注冊(cè)了新產(chǎn)品,然后第二天就忘記密碼?這已經(jīng)無數(shù)次地發(fā)生在我身上。如果我向你求助,你會(huì)建議我做什么?

 有些人可能會(huì)建議我直接寫下密碼,輕松,問題解決了。但是安全專家不會(huì)推薦寫下密碼,因?yàn)槟遣⒉话踩?

好的設(shè)計(jì)師不會(huì)直接跳到解決方案,他們會(huì)花時(shí)間去理解問題。

 那么,好的設(shè)計(jì)師會(huì)怎么做?好的設(shè)計(jì)師不會(huì)直接跳到解決方案。他們會(huì)花時(shí)間去了解問題。他們提出問題并找出原因、背景和限制:你一般怎么記錄你的密碼?你總是隨身攜帶手機(jī)嗎?你有多少密碼?

你越了解問題,你越能找到解決問題的切入點(diǎn)。深入理解給你自信,深入理解就是把你的初步想法轉(zhuǎn)化為實(shí)際深入的觀點(diǎn)。

我詢問了Google 智能助理的產(chǎn)品設(shè)計(jì)師Adriana Olmos關(guān)于她解決問題的方法。當(dāng)她的利益相關(guān)者提出需求時(shí),他們經(jīng)常根據(jù)解決方案而不是問題來定位他們的想法?!拔以噲D去了解他們解決問題的理論基礎(chǔ)是什么”她說,從那時(shí)起,我與他們一起去了解用戶最底層的需求,并了解背后的原因,然后來做優(yōu)化迭代。了解了原因,如何去做就順理成章了。

了解了問題的來龍去脈,你就可以找到解決問題的方法了。</div>
            <div   id= 評(píng)論(0) 瀏覽(2755)

三招教你營(yíng)造超強(qiáng)畫面沖擊力!——以新春運(yùn)營(yíng)活動(dòng)為例

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

這畫面根本沒有沖擊力!,下次試試這三招地表最強(qiáng)反擊!

身為設(shè)計(jì)師,你是否遇到過以下情況:


你花費(fèi)了大量時(shí)間來構(gòu)思與設(shè)計(jì),卻得到需求方一句“這畫面根本沒有沖擊力!”遇到這種情況我們常會(huì)把問題拋向運(yùn)營(yíng)同學(xué),但定神反思一下:為什么我們會(huì)被帶偏?畫面如何才能具備強(qiáng)烈的視覺沖擊力以說服他人?


什么樣的畫面,會(huì)讓你覺得很有沖擊力?想必影響因素眾多,而今天我們就跟大家聊聊故事性、可讀性、空間感這三個(gè)維度。




故事性


故事性主要從情緒、氛圍和趣味性三個(gè)方面來表現(xiàn)。


  • 情緒


先從情緒開始聊,你的畫面是想表現(xiàn)出積極上進(jìn)、歡樂還是憤怒?


畫面整體的情緒需要依靠主體情緒都深入刻畫,情緒能帶動(dòng)用戶的視覺感受,幫助用戶更好的從圖案中獲取與主題相關(guān)聯(lián)的信息,從而引起讀者的共鳴,最終達(dá)到推廣的目的。


 

  • 氛圍


其次,就是氛圍的把控。除了畫面主體的刻畫,氛圍的把控至關(guān)重要。


氛圍把控的好壞,直接影響到畫面的統(tǒng)一性,這也是為什么很多同學(xué)一碰到復(fù)雜構(gòu)圖就逃避的原因。只要我們把握住一點(diǎn),“一切的氛圍只為突出主體!” 掌握這一點(diǎn),相信很多同學(xué)都駕馭復(fù)雜的構(gòu)圖!

  • 趣味性


與前兩者不同,畫面的趣味性并非一種技能項(xiàng),而源于你內(nèi)心有多有趣!


職業(yè)化的人大多都是有職業(yè)病的,設(shè)計(jì)師的職業(yè)病應(yīng)該是對(duì)視覺的敏銳度!我做廣告那幾年,路過地鐵站或者公交站臺(tái),經(jīng)常會(huì)被好的海報(bào)所吸引,也常會(huì)駐足研究海報(bào)設(shè)計(jì)者背后的思考。他是如何進(jìn)行版式編排,如何對(duì)畫面進(jìn)行構(gòu)圖,如何做創(chuàng)意推導(dǎo)……如果是我,好的地方我要怎么學(xué),壞的地方我會(huì)怎么做!

 

之所舉我過去生活的這一例子,其實(shí)是想說:每個(gè)設(shè)計(jì)師身上的DNA不一樣,感興趣的事情也各自不同,所做的設(shè)計(jì)也不一樣,這些都取決于你是一個(gè)怎樣有趣的靈魂!


趣味性在你的畫面里,大部分來源于你生活中的積累!設(shè)計(jì)源于生活,趣味源于有趣的靈魂!




但是,在商業(yè)項(xiàng)目中僅僅有故事性還遠(yuǎn)遠(yuǎn)不夠!商業(yè)設(shè)計(jì)創(chuàng)作中,需要更深挖項(xiàng)目背景,要知道項(xiàng)目所面對(duì)的人群、品牌調(diào)性、推廣目的、投放時(shí)間及媒介等。


以這次我們接到的新年運(yùn)營(yíng)活動(dòng)為例,需求面向企業(yè)內(nèi)部,需求方想要體現(xiàn)在春節(jié)來臨之際對(duì)公司內(nèi)部員工的關(guān)懷,目的為增強(qiáng)員工歸屬感,傳達(dá)新春關(guān)懷。



我們通過對(duì)信息的梳理,腦暴得到上圖的內(nèi)容,推導(dǎo)出所需元素,接著繪制草圖。

 


Tips:足夠完善的草圖=節(jié)約時(shí)間


這里提一個(gè)項(xiàng)目實(shí)施中的小Tips:我們?cè)诤芏囗?xiàng)目實(shí)踐中總結(jié)出并反復(fù)驗(yàn)證過:草圖越詳細(xì),后續(xù)就越能快速地完成項(xiàng)目,甚至能騰出更多的思考時(shí)間! 繪制中一旦靜下心來,你就可以好好享受源源不斷的靈感。只要軟件不生疏,繪制起來其實(shí)是很快!切記勿要邊做邊想,這樣只會(huì)徒勞!

 


我們通過對(duì)情緒、氛圍、趣味性三個(gè)維度進(jìn)行結(jié)合,畫面以小哥做舞龍狀態(tài),周圍圍繞著祥云、錦鯉、紅包、以及順豐的元素,整個(gè)畫面氛圍營(yíng)造一種新年的喜慶!讓畫面自己講故事!

 


可讀性

 

  • 構(gòu)圖與板式


為保證畫面信息的可讀性,可運(yùn)用版心理論、三分線構(gòu)圖法、黃金分割比例等規(guī)則來驗(yàn)證自己在構(gòu)圖上的嚴(yán)謹(jǐn)性,這些規(guī)則可有效的規(guī)避主體不夠突出、重心不穩(wěn)等常見的版式問題。



01. 版心理論


以常見的矩形版面來說,其版心為四邊形,具有四個(gè)角。我們可以把角理解成點(diǎn),而版心就是通過四個(gè)點(diǎn)連線建立起來的。改變?nèi)魏我粋€(gè)點(diǎn)的位置,版心的輪廓都會(huì)發(fā)生變化。


所以,四個(gè)點(diǎn)也直接影響了畫面的張力,角越多張力越大,元素覆蓋兩個(gè)點(diǎn)會(huì)顯得張力不足,四個(gè)點(diǎn)又會(huì)顯得過于飽滿。因此我們推薦三個(gè)點(diǎn),最后一個(gè)點(diǎn)做弱化處理,整體就會(huì)顯得透氣!



02. 三分線構(gòu)圖


三分線構(gòu)圖被廣泛運(yùn)用,攝影、設(shè)計(jì)、繪畫等藝術(shù)創(chuàng)作。指把畫面橫分三分,每一分中心都可放置主體,這種構(gòu)圖會(huì)使得主體和裝飾元素更顯得緊湊有力。它也是最基礎(chǔ)的構(gòu)圖技巧,相信大家經(jīng)常運(yùn)用,就不贅述。



03. 黃金分割比例


黃金分割比例是現(xiàn)今公認(rèn)的美學(xué)定律,蘊(yùn)含豐富的審美價(jià)值,是視覺上最舒服的比例,與三分線構(gòu)圖法異曲同工。



  • 節(jié)奏


畫面節(jié)奏可以使畫面錯(cuò)位布局,營(yíng)造空間,增強(qiáng)畫面的節(jié)奏感。


如下圖所示,“S型“構(gòu)圖是非常常見的一種構(gòu)圖方式,形式靈活多變,往往S型構(gòu)圖有著明顯的層次關(guān)系,元素在空間上可以分為前、中、后景;其次,S型構(gòu)圖可以有效的引導(dǎo)讀者的閱讀順序,達(dá)到視覺引導(dǎo)閱讀的作用,從主體作為出發(fā)點(diǎn),保證畫面的閱讀井井有條。


 


空間感
  

最后就是畫面的空間感,但相信設(shè)計(jì)師在漫長(zhǎng)的藝考生涯中,早已學(xué)會(huì)如何去運(yùn)用虛實(shí)、肌理、色彩去區(qū)分主體與裝飾元素之間的關(guān)系,還沒掌握的小伙伴趕緊去溫習(xí)你的舊課本吧!

 



 結(jié)語
 

Anyway, 以上就是有關(guān)新春運(yùn)營(yíng)活動(dòng)的設(shè)計(jì)總結(jié),從案例中我們習(xí)得如何通過故事性、可讀性和空間感三維來增強(qiáng)畫面的沖擊力。這一方法也可以應(yīng)用在項(xiàng)目設(shè)計(jì)完畢后,通過以上三點(diǎn)內(nèi)容去驗(yàn)證設(shè)計(jì)的合理性和有效性。最后來復(fù)習(xí)下:


  • 故事性 - 你的畫面能自己講故事、表達(dá)情緒,當(dāng)然趣味性也必不可少;


  • 可讀性 - 在保證圖文條理清晰、信息層級(jí)表達(dá)準(zhǔn)確的前提下----,對(duì)版式、構(gòu)圖以及畫面節(jié)奏的把控十分必要;


  • 空間感 - 增加畫面的色彩層次、肌理、光影的表現(xiàn),這樣能更好地表現(xiàn)畫面層級(jí)間的空間感。


每個(gè)設(shè)計(jì)師都是獨(dú)立、富有創(chuàng)意又有趣的個(gè)體,希望這一分享可以為大家打開一些新的思路!


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)。

 

ICON設(shè)計(jì)法則—菱形法則

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

從不同維度對(duì)Icon設(shè)計(jì)進(jìn)行解析,整理一整套Icon設(shè)計(jì)的法則

網(wǎng)絡(luò)上有很多關(guān)于Icon設(shè)計(jì)的文章,一些文章從部分維度切入講述Icon的設(shè)計(jì)理念,但大部分缺乏整體性。


所以我嘗試把自己的思考方式結(jié)合其他人的設(shè)計(jì)理念整理了一個(gè)完整的Icon設(shè)計(jì)法則,通過簡(jiǎn)單易懂的描述語言,并且結(jié)合設(shè)計(jì)案例呈現(xiàn)出來,希望能夠?qū)Υ蠹矣兴鶐椭?。文章使用的案例只代表個(gè)人觀點(diǎn),并不代表相關(guān)產(chǎn)品。


本文重點(diǎn)講述Icon設(shè)計(jì)思維,關(guān)于Icon的具體定義以及具體的制作過程就不再贅述,網(wǎng)絡(luò)上有很多相關(guān)文章都有講述。


從不同維度對(duì)Icon設(shè)計(jì)進(jìn)行解析,整理一整套Icon的設(shè)計(jì)法則。每一個(gè)產(chǎn)品中都有不同類型的Icon,產(chǎn)品通過Icon可以快速的向用戶傳遞語意,通過獨(dú)特的設(shè)計(jì)語言讓用戶形成對(duì)于產(chǎn)品的認(rèn)知心智。Icon的重要性就不言而喻了。


ICON的設(shè)計(jì)法則-菱形設(shè)計(jì)法則,主要包括語意、層級(jí)、設(shè)計(jì)形式、風(fēng)格、一致性、范圍。而其他的設(shè)計(jì)思考也是這個(gè)設(shè)計(jì)法則的變體,中心思想沒有發(fā)生變化。通過對(duì)以上設(shè)計(jì)思考點(diǎn)的聚合,來設(shè)計(jì)能夠傳遞Icon語意,并且能夠清晰展現(xiàn)產(chǎn)品結(jié)構(gòu)和信息層級(jí)的Icon系統(tǒng),通過差異化的設(shè)計(jì)形式展現(xiàn)產(chǎn)品設(shè)計(jì)的獨(dú)特風(fēng)格,讓具有一致性的設(shè)計(jì)語言傳遞信息,和用戶形成共鳴。

Image title



層級(jí)

第一層級(jí)Icon

第二級(jí)別Icon

第三層級(jí)Icon

第一層級(jí)的Icon一般指首頁(yè)的井字入口Icon,讓用戶快速獲取入口信息,完成對(duì)產(chǎn)品流量的分流,讓用戶快速完成自己的任務(wù)。這種類型的Icon是級(jí)別最高的,無論是面積、形式感、視覺沖擊力都應(yīng)該是最突出的,這種高層級(jí)的Icon可以簡(jiǎn)單通過一下三種方法表現(xiàn),1、擬物化的設(shè)計(jì)方式增加視覺重心和吸引力。2、通過細(xì)節(jié)的增加呈現(xiàn)Icon設(shè)計(jì)的復(fù)雜形式感。3、采用沖擊力強(qiáng)的色彩對(duì)比,抓住用戶的關(guān)注點(diǎn)。除此之外具體的思考過程,后文也會(huì)詳細(xì)講述。


下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評(píng)”的首頁(yè)入口Icon,分別采用了擬物化設(shè)計(jì),細(xì)節(jié)添加,色彩對(duì)比的設(shè)計(jì)方法。

Image title


第二級(jí)Icon歸納為導(dǎo)航類型的Icon,引導(dǎo)用戶操作產(chǎn)品,完成用戶的任務(wù),同時(shí)傳遞品牌特色。這種Icon類似真實(shí)街道中的指向標(biāo)。第二層級(jí)的Icon不需要做的視覺重點(diǎn)非常重,能夠讓用戶認(rèn)知到,并且了解Icon傳遞的信息,在操作行為上產(chǎn)生預(yù)期就可以。通常的設(shè)計(jì)樣式是線型Icon或者是面型Icon。


下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評(píng)”的二級(jí)Icon系統(tǒng)

Image title


第三類Icon是語意型Icon,主要是向用戶傳遞信息,烘托信息氛圍,并且引導(dǎo)用戶瀏覽信息。這種類型的Icon視覺相對(duì)較輕,且不可點(diǎn)擊,具體的設(shè)計(jì)思考在后續(xù)的內(nèi)容展開。


下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評(píng)”的三級(jí)Icon系統(tǒng)

Image title


以上三級(jí)的劃分并不是說Icon只有這幾種類型,這樣劃分是從功能和視覺上進(jìn)行區(qū)分便于設(shè)計(jì)同學(xué)理解,當(dāng)然在具體的設(shè)計(jì)過程中也可以對(duì)Icon進(jìn)行更細(xì)化的區(qū)分,最主要根據(jù)具體的需求去定義Icon的層級(jí),然后再采用對(duì)應(yīng)層級(jí)的設(shè)計(jì)語言。


語意    

1)、Icon背后的語意(Icon的特性歸納)

2)、Icon的可識(shí)別性(Icon的特點(diǎn)表現(xiàn))

Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產(chǎn)品信息。所以在Icon的設(shè)計(jì)之前,需要思考Icon背后傳遞的文字語意,理解語意,構(gòu)建對(duì)于語意的多維拆解(比如沙發(fā)是由靠背、兩個(gè)扶手、四條腿構(gòu)成,重心要穩(wěn),和床有哪些區(qū)別等等)。同時(shí)還需要思考Icon圖形化之后的可識(shí)別性,基于對(duì)用戶認(rèn)知的了解,歸納Icon設(shè)計(jì)中需要具體表達(dá)的幾個(gè)關(guān)鍵特點(diǎn),迎合用戶的認(rèn)知心里。幫助用戶快速的獲取Icon想要傳遞的信息,如果不能快速的獲取,反而增加了用戶獲取信息的成本,那就本末倒置,削弱了用戶的使用體驗(yàn)。


例:下圖是“大眾點(diǎn)評(píng)”二級(jí)Icon設(shè)計(jì)的語意表現(xiàn)思考方法

Image title



設(shè)計(jì)形式

1)、外形

2)、表達(dá)方式

3)、色彩組合

4)、Icon特色

外形是Icon 的基本形態(tài),不同的形態(tài)傳遞不同的視覺感受,構(gòu)建不同的心智。同時(shí)Icon的外形決定了內(nèi)部元素的設(shè)計(jì)。


Icon的表達(dá)方式主要兩種,分別是線型Icon,面型Icon。線型Icon形式抽象、簡(jiǎn)潔,便于用戶識(shí)別,用戶認(rèn)知成本較低,缺點(diǎn)是Icon容易極簡(jiǎn),造成了似是而非,可識(shí)別性降低。面性Icon相對(duì)線型Icon視覺重心更突出,便于用戶聚焦,設(shè)計(jì)表現(xiàn)形式會(huì)更豐富,缺點(diǎn)是可能會(huì)過于復(fù)雜,造成信息層級(jí)混亂,增加了用戶的認(rèn)知成本。


色彩組合,就是Icon中的色彩語言,在設(shè)計(jì)Icon的過程中通常包括單色系的Icon和色彩組合系列的Icon。通過不同顏色的組合傳遞產(chǎn)品的品牌形象和產(chǎn)品特質(zhì),在設(shè)計(jì)Icon的過程中,尤其是導(dǎo)航Icon的過程中不建議使用超過兩種顏色的Icon,這樣容易使用戶視覺疲勞。


Icon特色是Icon在設(shè)計(jì)過程中的細(xì)節(jié),這些細(xì)節(jié)是體現(xiàn)Icon自身精致的部分,同時(shí)也會(huì)影響用戶對(duì)于產(chǎn)品和品牌的認(rèn)知聯(lián)系。影響產(chǎn)品的感性認(rèn)知觸達(dá)用戶內(nèi)心。


例:下圖以“大眾點(diǎn)評(píng)”中的“拍視頻”icon做舉例說明

Image title



風(fēng)格

1)、品牌理念

2)、產(chǎn)品特色

3)、視覺特色

品牌理念是是指產(chǎn)品背后的定義和想要傳遞的價(jià)值。通過簡(jiǎn)介的符號(hào)、文字傳遞給用戶的認(rèn)知、理解、印象、感受。通過塑造品牌理念的塑造,和用戶在感性層面形成共鳴。融入品牌基因的Icon系統(tǒng)具有更好的辨識(shí)性和認(rèn)同感。這需要設(shè)計(jì)師和業(yè)務(wù)團(tuán)隊(duì)一起溝通產(chǎn)品,深入理解業(yè)務(wù),總結(jié)出關(guān)鍵詞語表達(dá)品牌,最終和業(yè)務(wù)團(tuán)隊(duì)達(dá)成統(tǒng)一共識(shí)。


產(chǎn)品特色指產(chǎn)品在同行業(yè)中的定位差異,核型競(jìng)爭(zhēng)力。通過簡(jiǎn)潔的視覺語言進(jìn)行表現(xiàn)。通常的產(chǎn)品特色體現(xiàn)在業(yè)務(wù)范圍、用戶群體,使用場(chǎng)景,產(chǎn)品功能等。在這四個(gè)維度中總結(jié)歸納成可落地的具體的表達(dá)關(guān)鍵詞,進(jìn)一步具象化。


視覺特色指在競(jìng)品分析中,總結(jié)得到在視覺層面其他產(chǎn)品中可以借鑒的感性共性和自己產(chǎn)品定位差異性的結(jié)合。通過可借鑒的共性傳遞行業(yè)的特點(diǎn),而差異化的視覺表現(xiàn)可突出自己產(chǎn)品的特色和競(jìng)爭(zhēng)力。


例:繼續(xù)以“拍視頻”Icon為例子進(jìn)一步解釋說明

Image title



一致性

一致性的綜合表現(xiàn)在圓角、透明度、線條粗細(xì) 、間距、顏色、層級(jí)、漸變、特色細(xì)節(jié)。


Icon的一致性有利于降低用戶的認(rèn)知成本,便于品牌傳遞,而Icon的非一致性會(huì)增加用戶的跳出感,降低用戶對(duì)于產(chǎn)品專業(yè)度的認(rèn)可。通常情況下可以通過以上8個(gè)維度進(jìn)行分析和提煉。前七個(gè)維度大家比較好理解。重點(diǎn)解釋一下第八個(gè)維度“特色細(xì)節(jié)”,特色細(xì)節(jié)是設(shè)計(jì)師通過對(duì)于產(chǎn)品和業(yè)務(wù)的理解主觀加入的一些關(guān)鍵性視覺表現(xiàn)的點(diǎn),增加產(chǎn)品一致性的基因,可能是斷線,尖角,原點(diǎn)等等標(biāo)志性元素。


例:下圖通過對(duì)“大眾點(diǎn)評(píng)”Icon做拆解進(jìn)一步從六個(gè)維度說明Icon系統(tǒng)的一致性(并不是說每一個(gè)icon的設(shè)計(jì)必須包含八個(gè)維度)

Image title



范圍

視覺范圍和熱區(qū)范圍


隨著Sketch的普及,更多的設(shè)計(jì)師開始采用一倍的設(shè)計(jì)畫布輸出設(shè)計(jì)方案,但在設(shè)計(jì)的過程中需要注意視覺面積和物理面積,兩個(gè)Icon的物理尺寸大小是一樣的,視覺感性的面積偶爾會(huì)變化。所以需要在設(shè)計(jì)完Icon之后,對(duì)Icon進(jìn)行排列,進(jìn)行視覺對(duì)比,發(fā)現(xiàn)視覺的不一致性。


熱區(qū)范圍是代碼定義的用戶可操作的交互面積,視覺是感知不到的。熱區(qū)范圍的確定有利于開發(fā)工程師和設(shè)計(jì)師達(dá)成視覺方案的一致。避免后期由于大家對(duì)于方案設(shè)計(jì)、開發(fā)理解的不同,增加后續(xù)溝通的成本。通常情況下會(huì)出現(xiàn)的問題就是

1、界面開發(fā)的還原度低

2、熱區(qū)范圍過小,用戶無法點(diǎn)擊

3、Icon的熱區(qū)范圍不一致。

Image title



總結(jié)

在設(shè)計(jì)的過程中,Icon的樣式可以借鑒,但要根據(jù)自己的產(chǎn)品做形式上的調(diào)整,具體可以通過上述談到的幾個(gè)維度作為切入點(diǎn)調(diào)整Icon。同時(shí)在設(shè)計(jì)的過程中避免無窮的細(xì)化,因?yàn)橛行┘?xì)節(jié)用戶根本不會(huì)觀察到,這樣做只能是設(shè)計(jì)師的自嗨。設(shè)計(jì)師容易漏掉的是熱區(qū)范圍的確定,盡管Ios平臺(tái)和Android平臺(tái)都有對(duì)于Icon范圍的定義,但針對(duì)產(chǎn)品的icon熱區(qū)范圍調(diào)整還是要有設(shè)計(jì)師自己的想法。這樣才能增加Icon設(shè)計(jì)的思考價(jià)值,也更符合產(chǎn)品自身的特色。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)。

讓我們目瞪口呆的十大黑科技!創(chuàng)新改變生活!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里 

 

科技不僅改變生活,而且正在改變著我們的生活習(xí)慣!不管哪行哪業(yè),不去了解的科技,就面臨著被淘汰的危險(xiǎn)!電商作為離互聯(lián)網(wǎng)最近的行業(yè),或許能從這些高科技里找到一些方向和啟發(fā)!


 

NO.10 踩不濕的鞋子
Vessi鞋,號(hào)稱世界上第一個(gè)100%防水針織鞋
它看起來跟普通的鞋子無異,
但是它具有超強(qiáng)的防水性能,
100%防水能力
并且360°無死角
小水坑我們不放在眼里
甚至可以
直!接!踩!
Vessi鞋的秘密在于它的針織面料專利,
這個(gè)稱為 Flash Knit 的面料一共有 3 層,
分為不同的功能面料,
這使得它比簡(jiǎn)單的防水涂層強(qiáng)得多。
第一層也是最外面一層是彈力編織層,由聚酯纖維和尼龍混紡而成,起到防水、拒水、防風(fēng)的效果;
第二層是納米過濾層,能進(jìn)一步起到防水、吸濕作用,最里面一層是透氣內(nèi)層,幫助腳部排汗。
NO.9 材料界的“變形金剛”
下面這些彩色的小卡片—— Formcard
是由英國(guó)設(shè)計(jì)師PeterMarigold
所研發(fā)的一種神奇的修補(bǔ)塑料卡,
它可謂是材料中的百變星君,
想變啥就變啥
將原本硬邦邦的卡片放到熱水中,
就會(huì)變軟,
然后就可以捏成各種形狀啦!
比如~
手機(jī)支架
高級(jí)一點(diǎn)的車載支架也是可以滴~
修補(bǔ)雨傘,哪里壞了補(bǔ)哪里
so easy~
雖然看起來軟,
但是硬度堪比尼龍。
它的材料是一種
基于生物塑料而
完全無毒的淀粉材料
表面著色的顏料也是安全的。
值得一提的是——
這種修補(bǔ)塑料可以重復(fù)使用無數(shù)次,
只需要用熱水泡一下,就能重新使用。
NO.8 一種“分裂”的材料
杜邦? Tyvek® 特衛(wèi)強(qiáng)®
有這樣一種材料
防水的同時(shí)還透氣
是一種會(huì)呼吸的材料
硬的跟紙一樣
軟的像布一樣
明明脆弱的跟紙一樣,
2個(gè)200斤的胖子都未必能把它撕破!
還能用于各種酷炫的手工藝品
既可以當(dāng)作女生喜歡的包包
還可以變身為時(shí)尚的服飾!
杜邦? Tyvek® 特衛(wèi)強(qiáng)®
特別的材料特性讓它成為設(shè)計(jì)師們的寵兒
各種創(chuàng)意設(shè)計(jì)、產(chǎn)品層出不窮
NO.7能修復(fù)的黑科技抹布
XG防水珠劃痕修復(fù)布
這一款黑科技“魔術(shù)布”
只需3s即可快速修復(fù)車劃痕
這塊“魔術(shù)布”采用
聚酯纖維以及“氧化鈰”成分打造。
氧化鈰具有特有的切削力,
再加上聚酯纖維布具有摩擦力,
車漆表面的劃痕可以快速被修復(fù)。
不僅如此,
修復(fù)的同時(shí)“魔術(shù)布”
中含有的乳化蠟成分,
可迅速附著保護(hù)漆面,
相當(dāng)于再給車車做一個(gè)美容~
一塊“魔術(shù)布”可使用15次左右
無論新車、舊車、深色車、亮光漆均可適用
綠色制劑成分還可以保護(hù)你的雙手
NO.6 擅長(zhǎng)堵的材料
FLEX TAPE 防水膠
水流不停
這膠帶一拍就堵住了
網(wǎng)上稱之為世界最強(qiáng)防水膠——
FLEX TAPE
家里水桶破了個(gè)大洞?
一拍,搞定!
家里水管爆了?
一拍,搞定!
NO.5 傳說中最變態(tài)的黑科技涂料
LINE-X 涂料
據(jù)說任何東西涂上他
都刀槍不入堅(jiān)不可摧,比如
西瓜涂上之后能抵抗錘子的猛擊
雞蛋涂上之后能彈起來了
汽車用鑰匙刮都沒任何損傷了
在活水表面涂上一層涂料
你都可以在水面
走起魔鬼的步伐
FLEX TAPE 材料
已經(jīng)應(yīng)用在各個(gè)領(lǐng)域,
尤其是軍事、汽車領(lǐng)域
比如美國(guó)五角大樓
海軍陸戰(zhàn)隊(duì)的悍馬
NO.4 具有“生命力”的水泥
生物混凝土Bio-concerte
它依托于芽孢桿菌的神奇生命力
這種細(xì)菌產(chǎn)生的孢子
能在沒有食物和氧氣的情況下
存活200年之久
它將作為細(xì)菌營(yíng)養(yǎng)來源的乳酸鈣
混合攪拌成混凝土
若混凝土開裂
雨水滲透進(jìn)去
休眠中的細(xì)菌通過代謝
把鈣和碳酸離子結(jié)合
形成石灰石,逐漸彌合裂縫
建筑物的使用壽命
有望大大延長(zhǎng)
實(shí)在是太神奇啦!
NO.3 能屈能伸,時(shí)軟時(shí)硬的材料
P4U
國(guó)外有一種材料叫 D3O
在常規(guī)狀態(tài)下是柔軟的
卻能防住突然的受力撞擊
非常安全
雞蛋摔不碎,防撞防震能力一流
目前已經(jīng)有上百種產(chǎn)品用到了D3O這種材料
從手機(jī)殼到護(hù)膝再到芭蕾舞鞋
再也不怕手機(jī)碎屏了
中國(guó)市場(chǎng)對(duì)D3O也有強(qiáng)烈的需求
但 是
前期中國(guó)企業(yè)從國(guó)外采購(gòu)時(shí)遇到不少阻力
難道國(guó)內(nèi)就不能開發(fā)出類似的材料嗎?
我們就不能做出“國(guó)產(chǎn)版的D3O嗎”??
可以的!
它就是前面提到的
P4U
NO.2 能吃的塑料袋
這款塑料袋非常環(huán)保
由紅薯、玉米、馬鈴薯與植物油
等12種可食用原料做成
100%有機(jī)食品
就連印刷字的油墨都是可以吃的
不僅如此
它的韌性和耐用性
不輸普通塑料袋
扛得住重物,挨得過焚燒
更重要的是
它具有生物可降解性
在野外它180天就可自然降解
埋進(jìn)土里45天,扔進(jìn)水中1天
沸水中15秒就可以完全溶解
一個(gè)塑料袋雖小,卻足以改變世界啊
NO.1 點(diǎn)沙成土,造福人類
可以讓沙漠變成土壤的黏合劑
重慶交通大學(xué)力學(xué)教授
易志堅(jiān)帶領(lǐng)研究團(tuán)隊(duì)
經(jīng)過7年的反復(fù)試驗(yàn)
研發(fā)出一種
可以讓沙漠變成土壤的黏合劑
這是一種從植物中提取的
植物纖維黏合劑
它能賦予沙粒一種約束
使得沙粒像土壤一樣能從任何方向結(jié)合
具有自修復(fù)和自調(diào)節(jié)的特性
將沙子與黏合劑混合后
把水倒進(jìn)沙坑里再也不會(huì)輕易流失了
這項(xiàng)偉大的發(fā)明可以讓沙漠變良田
中國(guó)科研團(tuán)隊(duì)已經(jīng)在內(nèi)蒙古阿拉善盟的
25畝沙漠里進(jìn)行了實(shí)地實(shí)驗(yàn),并取得成功
未來,我們將會(huì)看到
越來越多的沙漠逐漸變成綠洲
沙漠不再是寸草不生
反而可以種植瓜果蔬菜
造福人類的發(fā)明,大贊!

 

藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

設(shè)計(jì)語言 – 按鈕 (button)

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

一個(gè)簡(jiǎn)單的按鈕需要經(jīng)歷無數(shù)次推敲,才能整合為設(shè)計(jì)語言。今天主講設(shè)計(jì)語言中的基礎(chǔ)部分,組件部分的其中一個(gè)部分-按鈕。設(shè)計(jì)語言從結(jié)構(gòu)上分為:基礎(chǔ)部分、規(guī)則規(guī)范部分和業(yè)務(wù)部分,后面我也會(huì)把其它部分補(bǔ)全。

基礎(chǔ)部分的畫布大小是250000×56000,共47個(gè)組件部分;規(guī)格規(guī)范部分就很龐大了(工業(yè)設(shè)計(jì)、交互設(shè)計(jì)、平面設(shè)計(jì)、設(shè)計(jì)心理學(xué)等);業(yè)務(wù)部分是按系列來分的,有主次之分,目前只分了兩個(gè)系列(N和S),N系列對(duì)應(yīng)基礎(chǔ)組塊,S系列對(duì)應(yīng)嵌套定制組塊。我把一個(gè)系列的主系列稱為主版,把子系列稱為子版。N系列的一個(gè)子版大概有50個(gè)頁(yè)面,每個(gè)頁(yè)面又包含三種樣式,每個(gè)系列中大概有20個(gè)子系列。工程量很大,大致算了一下,要做完兩個(gè)大系列(N和S)需要做:50(頁(yè)面)x3(樣式)x20(系列數(shù))x2(大系列類別)=6000(頁(yè)面)。

以上簡(jiǎn)單描述的這些工作,目前都是我一個(gè)人在做,這東西成型以后,做一套網(wǎng)站(從前期到上線),最快只需要15分鐘。而我做它的目的也很簡(jiǎn)單,就是希望幫助企業(yè)豎立品牌形象,并用專業(yè)知識(shí)解決他們所面臨的問題,質(zhì)量高價(jià)格低。我的信仰是幫助企業(yè)或個(gè)人實(shí)現(xiàn)社會(huì)價(jià)值,賦予企業(yè)或個(gè)人一定的能力,讓他們?yōu)檫@個(gè)社會(huì)做一定的貢獻(xiàn),履行一定的社會(huì)責(zé)任。先利他再利己,集體利益和集體主義優(yōu)先。從成本評(píng)估到定價(jià),我是不賺錢,但只要我能活著,就一定履行我的社會(huì)責(zé)任。

說的有點(diǎn)多了,言歸正傳,這章其實(shí)不難,但有些基礎(chǔ)知識(shí)需要細(xì)心講解,對(duì)于有些設(shè)計(jì)師而言廢話較多,但對(duì)于新手而言卻有可學(xué)之處,多多體諒一下吧。

目錄

1.網(wǎng)格基數(shù)的設(shè)置

2.按鈕的基礎(chǔ)規(guī)范

3.按鈕的字符限制

4.按鈕的交互狀態(tài)

1.網(wǎng)格基數(shù)的設(shè)置

這里的網(wǎng)格不是平面設(shè)計(jì)中的網(wǎng)格系統(tǒng),是包含在繪圖工具中的網(wǎng)格功能,雖然它倆在本質(zhì)上是相同的,但現(xiàn)在先不要給它倆做過多的區(qū)分。用繪圖工具繪制網(wǎng)格能幫助我們約束模塊,使模塊的比例存在一定的關(guān)系。例如我就拿尺寸大小為137×31的按鈕A,和尺寸大小為128×32的按鈕B舉例,尺寸大小為137×31的按鈕A是不規(guī)范的,寬137和高31是不存在比例關(guān)系的。而尺寸大小為128×32的按鈕B就是規(guī)范的,寬128和高32不僅是倍數(shù)關(guān)系(128/32=4倍),而且兩個(gè)數(shù)都可以整除我們?cè)谌种性O(shè)的基數(shù)4(32/4=8,128/4=32,這里的4為基數(shù))。




當(dāng)我們理解了按鈕的比例關(guān)系后,我們就要在繪圖工具中(AI、Ps、Sketch、Affinity Designer)找到我們的網(wǎng)格功能,設(shè)一個(gè)數(shù)為基準(zhǔn),定其為基數(shù),然后按照這個(gè)基數(shù)來進(jìn)行按鈕的繪制,按鈕就相對(duì)是比較規(guī)范的。因?yàn)樵O(shè)置完一個(gè)基數(shù)后,只要你在網(wǎng)格上畫按鈕,都是存在一定的比例關(guān)系的。那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢,在Ps繪圖工具中找到:【編輯】-【首選項(xiàng)】-【參考線、網(wǎng)格和切片】- 彈出首選項(xiàng)對(duì)話框 -【網(wǎng)格 – 網(wǎng)格線間隔 / 子網(wǎng)格】- 網(wǎng)格線間隔設(shè)為【4】- 子網(wǎng)格設(shè)為【1】;




在Affinity Designer矢量工具中找到:【視圖】-【網(wǎng)格和軸管理器】- 彈出網(wǎng)格和吸附軸對(duì)話框 -【基本】- 間距設(shè)為【4】- 分割設(shè)為【1】。這里為什么要把網(wǎng)格基數(shù)設(shè)置為【4】呢。這是谷歌Material Design繪制小組件的規(guī)范,而模塊之間定義的基數(shù)則為【8】,這里的度量單位是DP,平時(shí)繪制網(wǎng)頁(yè)的話單位用px像素就可以。




2.按鈕的基礎(chǔ)規(guī)范

當(dāng)我們會(huì)運(yùn)用繪圖工具中的網(wǎng)格功能,設(shè)置基數(shù)來繪制按鈕,用熟練了就會(huì)相當(dāng)講究,每一個(gè)細(xì)小的間距都應(yīng)該符合倍數(shù)關(guān)系,不僅物理位置上能得到統(tǒng)一,視覺上也能滿足一定的美感,例如下圖所示。




當(dāng)我們理解了如何用網(wǎng)格功能繪制一個(gè)按鈕后,接下來就可以理解按鈕的邊角的曲率設(shè)置了。那我把按鈕的邊角分為三種樣式:直角、曲率圓角和圓角。直角就是邊角呈90度的角,曲率圓角和圓角的差別在于,曲率圓角的角弧度沒有那么大,而圓角的角弧度就是一半個(gè)圓。我將按鈕的曲率按照不同的樣式分布展示了出來,如下圖所示。




理解了按鈕邊角的三種樣式,要怎么設(shè)置他們呢。直角設(shè)置無曲率/90度直角。圓角就設(shè)置為50%的曲率,剛好就是半個(gè)圓。而曲率圓角就稍微有點(diǎn)麻煩,因?yàn)榍蕡A角是要根據(jù)按鈕的大小做相對(duì)的變化的。按鈕的尺寸變大曲率就應(yīng)該也隨之變大,按鈕尺寸越大差異越明顯。另外曲率弧度的值也應(yīng)該有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系,例如:4/8/16, 4/6/8,4/8/12,都是可取的。




理解了如何設(shè)置網(wǎng)格基數(shù),如何設(shè)置圓角的曲率,就要講到按鈕的常用尺寸了,要注意的是這個(gè)常用尺寸是基于Web端的,道理是相同的,就看設(shè)計(jì)師如何在移動(dòng)端上進(jìn)行設(shè)置了。常用的按鈕尺寸有:24px、32px、40px、48px,超出48px的按鈕都屬于特殊按鈕,需要進(jìn)行單獨(dú)設(shè)置的。




這里的尺寸不是死的,設(shè)計(jì)師可以根據(jù)自己的理解進(jìn)行尺寸的設(shè)置。而采用這幾個(gè)尺寸(24px、32px、40px、48px)的目的是更好的統(tǒng)一并規(guī)范按鈕,因?yàn)?4px、32px、40px、48px都是4的倍數(shù),數(shù)與數(shù)之間也都是±8的關(guān)系,另外在繪制按鈕時(shí)尺寸也可以平分,留出按鈕上下均等的距離,另外這幾個(gè)數(shù)值從Web端的體驗(yàn)上來看,比例也是相對(duì)更合適的,所以采用這幾個(gè)數(shù)較為規(guī)范一些。




3.按鈕的字符限制

一個(gè)按鈕包含和“無圖標(biāo)”和“有圖標(biāo)”兩種形式,無圖標(biāo)比較好處理,直接把相應(yīng)文本放在按鈕中水平、垂直居中就可以了,然后再算清文本與邊框之間的距離就可以了。




那設(shè)計(jì)有圖標(biāo)的按鈕時(shí),就要考慮把圖標(biāo)的內(nèi)邊距算出來,并與圖標(biāo)到按鈕外邊距的距離算出來。




當(dāng)我們掌握的以上幾種繪制按鈕的方法,就可以繪制出一整套符合規(guī)范的按鈕組件。




英文也一樣,英文與中文的差別在于細(xì)微的尺寸差異。英文字體結(jié)構(gòu)要比中文字體結(jié)構(gòu)看上去更小一些,英文的字符長(zhǎng)度也要比中文長(zhǎng)很多。但問題不大,只要把控好文本/圖標(biāo)和按鈕邊角的距離,按照基數(shù)遞增,就不會(huì)有什么問題。




4.按鈕的交互狀態(tài)

一個(gè)按鈕的交互狀態(tài)有四種,分布是:無狀態(tài)、hover(觸碰)、點(diǎn)擊后、禁止。采用的配色可以遞增(由淺到深),也可以遞減(由深到淺)。按鈕交互狀態(tài)的配色深淺也是根據(jù)整體頁(yè)面有關(guān)的。如果整體的調(diào)性偏深,配色可以遞減(由深到淺),如果整體的調(diào)性偏淺,配色可以遞增(由淺到深)。




而顏色按鈕的交互狀態(tài)是根據(jù)配色的色階決定的,同理配色遞增(由淺到深),配色遞減(由深到淺)。




另外附上一張彩色按鈕狀態(tài)效果圖,配色為明亮柔和。





這些按鈕的繪制看似簡(jiǎn)單的不得了,其實(shí)都是些高精度的工作,差一個(gè)像素點(diǎn)都不可以,當(dāng)然更需要具備一定的毅力與耐心。我覺得做設(shè)計(jì)應(yīng)該追求,重視體驗(yàn)和功能,讓形式追隨內(nèi)容,而不是內(nèi)容追隨形式,就這樣吧。

藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

設(shè)計(jì)思維工作坊—頭腦風(fēng)暴法

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

在我們的設(shè)計(jì)工作當(dāng)中最不可缺乏的就是創(chuàng)意了,那這種創(chuàng)意是從何而來呢?當(dāng)我們拿到一個(gè)項(xiàng)目時(shí)最熟悉不過的流程的就是小組討論,那小組討論中占據(jù)大部分的就是“頭腦風(fēng)暴”了,我們先來系統(tǒng)介紹一下頭腦風(fēng)暴。 

【一】什么是頭腦風(fēng)暴法?

頭腦風(fēng)暴法(Brain storming), 該方法主要由價(jià)值工程工作小組人員在正常融洽和不受任何限制的氣氛中以會(huì)議形式進(jìn)行討論、座談,打破常規(guī),積極思考,暢所欲言,充分發(fā)表看法。它最早是精神病理學(xué)上的用語,指精神病患者的精神錯(cuò)亂狀態(tài)而言的,如今轉(zhuǎn)而為無限制的自由聯(lián)想和討論,其目的在于產(chǎn)生新觀念或激發(fā)創(chuàng)新設(shè)想。 

 

【二】頭腦風(fēng)暴法的組織形式

1)設(shè)主持人一名,主持人只主持會(huì)議

2)設(shè)置記錄員1-2名,要求認(rèn)真將與會(huì)者每一設(shè)想不論好壞都完整記錄下來

3)小組人數(shù)一般為6-10人

4)最好由不同專業(yè)或不同崗位者組成

5)時(shí)間一般為20-60分鐘;(發(fā)散/收斂/整理3回合)

主持人和主持的注意事項(xiàng):

1)提前了解會(huì)議主題及可能的引言內(nèi)容

2)控制好自己主持人的氣場(chǎng)

3)控制好時(shí)間

4)照顧好每一位成員;讓每個(gè)人都能發(fā)言

5)引導(dǎo)會(huì)議流暢展開

6)保持團(tuán)隊(duì)積極參與氣氛

7)適度延伸發(fā)展發(fā)言者的想法

8)隨機(jī)應(yīng)變   

【三】頭腦風(fēng)暴法遵循的主要原則

       (1)自由奔放思考

         

       2)不批判

         

       3)以量求質(zhì)

         

       (4)搭便車,想法無專利

        

焦點(diǎn)時(shí)刻: 

      藍(lán)藍(lán)設(shè)計(jì)組織部分小組成員以“如何成為一家很牛的UI設(shè)計(jì)公司?”為主題進(jìn)行了一次頭腦風(fēng)暴活動(dòng)。我們將過程做了一下梳理。 

   (1)主持人引言之后,與會(huì)者每個(gè)人進(jìn)行了積極地思考并將想法寫在便利貼上

        

   (2)每人根據(jù)自己的想法暢所欲言,并延伸其他人的想法。

   (3)將便利貼適度的分類整理。

        

   (4)最后我們整理出來了結(jié)果(wow!/有了更好/基礎(chǔ)的     

     

             



總結(jié): 

腦力激蕩并不是為了提出主意讓他人去評(píng)估和選擇。通常在最后階段,本組成員會(huì)自己評(píng)估這些主意并從中挑選出解決問題的方法貫徹整個(gè)解決方案的每一步都必須對(duì)小組成員透明,并有責(zé)任分配給每一人以便他們?cè)谄渲袚?dān)任重要的角色。在項(xiàng)目還未明朗時(shí),必須有一個(gè)共同的決策過程來推進(jìn)協(xié)作努力的成果并對(duì)任務(wù)進(jìn)行重新分配。在重要轉(zhuǎn)折點(diǎn)上,需要有評(píng)判標(biāo)準(zhǔn)來決定小組討論是否朝著最終的答案行進(jìn)。在整個(gè)過程中需要不斷的鼓勵(lì),以便讓參與者保持他們的熱情。

 通過這個(gè)過程,員工的親身參與,對(duì)“很棒的UI設(shè)計(jì)公司”的定義,再落實(shí)行動(dòng),向著WOW的方面努力!

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

信息的阻力設(shè)計(jì)

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

什么是阻力?


用戶使用App時(shí)需要穿越層層頁(yè)面,在穿越這些頁(yè)面時(shí)需要消耗時(shí)間和精力,稱之為阻力。


首先探討一下品類方面的阻力。


Image title


如圖,這是幾個(gè)電商App界面,一眼望過去并不知道哪個(gè)頁(yè)面是哪家電商,其實(shí)這個(gè)并不重要。如果你到一個(gè)平臺(tái)購(gòu)物,往往不是因?yàn)榫€上產(chǎn)品用戶體驗(yàn)不一樣,而是因?yàn)橘u的商品不一樣,或者商品的價(jià)格亦或配送速度不一樣。所以這里它們長(zhǎng)的一樣我覺得沒有太大問題,甚至我認(rèn)為他們之間雷同是一件好事,用戶省去了切換的成本,尤其是新平臺(tái)跟老平臺(tái)長(zhǎng)得像都是沒什么問題的,這樣用戶切換新平臺(tái)阻力就小了很多。


但是當(dāng)我們需要定義一個(gè)新品類時(shí),這個(gè)思路就會(huì)不一樣。



定義新品類


舉個(gè)例子,國(guó)際化品牌Airbnb,在2014年的改版中做了很大的調(diào)整,這次改版后發(fā)現(xiàn),要找房子下單,搜索瀏覽和操作效率并不是很高,但是他們還是做了這種低效高顏值的選擇。


Image title


對(duì)大多數(shù)人來說,私人房屋短租給其他人的這種服務(wù)是個(gè)新產(chǎn)品,是高端還是低端用戶其實(shí)沒有概念。所以在2014年Airbnb重新推廣的時(shí)候,他的設(shè)計(jì)理念是各位房客先別管這個(gè)產(chǎn)品是什么樣的模式,先說這個(gè)事情是不是看起來很酷。是不是酷這件事對(duì)于一個(gè)新產(chǎn)品是重要的,如果我用過一個(gè)酷的產(chǎn)品,分享給朋友。對(duì)方往往也會(huì)因?yàn)槲曳窒淼漠a(chǎn)品酷而覺得我這個(gè)人很酷。有些實(shí)用性還不錯(cuò)但是品牌調(diào)性沒那么高的產(chǎn)品,用戶使用完后會(huì)覺得“把這個(gè)產(chǎn)品分享給別人,并不會(huì)給我加分”而止步分享。鑒于此,我認(rèn)為Airbnb高顏值雖然一定程度上犧牲了效率,但是拔高了品牌調(diào)性,也就提高了產(chǎn)品的推薦值,是一個(gè)正確的選擇。


那么當(dāng)我們需要重新定義一個(gè)已有品類時(shí),我們的思路是什么呢?



重新定義品類


Image title



這是我們2016年發(fā)版的首頁(yè)設(shè)計(jì),自如和跟之前的租房平臺(tái)不太一樣,所以我們的首頁(yè)設(shè)計(jì)要重新定義一個(gè)品類。以前,尤其是我們80后對(duì)于租房會(huì)有什么樣的感受都是有一些認(rèn)知的,比如說黑中介…其實(shí)大家都有一些印象,被坑過的80后不在少數(shù)。自如出現(xiàn)的時(shí)候可能就需要重新整理大家對(duì)于這個(gè)品類的認(rèn)知。所以我們?cè)谠O(shè)計(jì)首頁(yè)的時(shí)候,先用一個(gè)高顏值大圖展現(xiàn)一下房子是什么樣子(因?yàn)槲覀兊姆孔哟_實(shí)顏值很高品質(zhì)不錯(cuò)),搜索按紐也不是很大。所傳達(dá)的思路是我們希望用戶在找房子之前對(duì)我們的平臺(tái)有些認(rèn)知,或者說對(duì)租房這個(gè)品類,打破固有的刻板印象,有重新的認(rèn)知。我把這種重新定義已有品類的設(shè)計(jì)方法定義為“我們不一樣”。



在今年,自如的影響力大了很多,在這個(gè)背景下我們進(jìn)行了新一輪的改版。雖然從用戶的角度講可能進(jìn)APP第一件事是要找房子,但是從企業(yè)的角度,企業(yè)有很多想要傳達(dá)給用戶的信息,這個(gè)頁(yè)面也是讓用戶知曉其他業(yè)務(wù)的入口(自如給大多數(shù)人的印象是一個(gè)租房平臺(tái),但是我們也有像保潔,搬家這類的服務(wù))這些入口也許用戶當(dāng)時(shí)不會(huì)點(diǎn)擊,可是當(dāng)他需要用保潔,或者搬家的時(shí)候就會(huì)想到好像自如有這么一個(gè)業(yè)務(wù),之后他會(huì)去自如的首頁(yè)找。所以多條業(yè)務(wù)線的并列呈現(xiàn),也有類似廣告曝光的作用。


Image title


我用這張圖來代替我們的原型圖,我們要展現(xiàn)多條用戶線的時(shí)候很依賴于這個(gè)界面上的多個(gè)按紐,當(dāng)時(shí)就想能不能順著這個(gè)思路在盡可能的情況下做的好看一點(diǎn)。我們之所以覺得這個(gè)界面給你的感覺沒那么好,是因?yàn)檫@個(gè)界面信息量太大了,還有色彩的沖撞過猛了。 


我覺得色彩的間隙太小了,應(yīng)該加大,所以加了一些白框,讓這些顏色之間離的更遠(yuǎn),顏色間的沖撞也就比較小。


Image title


然后再看這個(gè)顏色本身,我們是不是可以選一些相對(duì)共性的顏色,比如把標(biāo)準(zhǔn)的紅綠藍(lán)改成紅,暖綠,和偏綠的藍(lán)(暖藍(lán)),然后把選中的顏色找他的擴(kuò)展色,用擴(kuò)展色畫出一些按紐。


Image title


這就是我們后來首頁(yè)的樣子。



低頻應(yīng)用的阻力設(shè)計(jì)


作為一個(gè)低頻使用的App,跟高頻使用的App阻力設(shè)計(jì)思路最重要的不同點(diǎn)是什么呢?我從學(xué)習(xí)成本這點(diǎn)來切入。



學(xué)習(xí)成本


微信的聊天記錄刪除功能,有一點(diǎn)學(xué)習(xí)成本。


Image title


用戶在使用中偶爾向左滑發(fā)現(xiàn)了可以刪除聊天記錄,通過偶爾的觸發(fā),用戶學(xué)會(huì)了這樣刪除聊天記錄。通過后期每天不斷地使用強(qiáng)化了對(duì)這個(gè)功能點(diǎn)的記憶。


但是我們的低頻App似乎沒有這個(gè)機(jī)會(huì),由于使用次數(shù)比較少,有些功能隱藏起來的話用戶大概率永遠(yuǎn)都不會(huì)去用。設(shè)計(jì)時(shí)不但要把點(diǎn)贊的按紐放出來,而且點(diǎn)贊的時(shí)候還要告訴用戶,點(diǎn)贊后飄在右上角。


Image title


告訴用戶收藏之后,收藏列表可以點(diǎn)擊右上角這個(gè)按鈕查看。我們不但要把所有的功能擺出來,而且還要告訴用戶這個(gè)功能下一步怎么走。因?yàn)樗绻@次沒學(xué)會(huì),以后可能也不會(huì)用這個(gè)App了,這點(diǎn)跟高頻的產(chǎn)品不一樣。



點(diǎn)擊數(shù)據(jù)


我們?cè)O(shè)計(jì)首頁(yè)的時(shí)候?qū)τ邳c(diǎn)擊數(shù)據(jù)會(huì)有一個(gè)預(yù)期和目標(biāo),但是往往數(shù)據(jù)反饋會(huì)跟設(shè)計(jì)初衷多少有些不相符。大家可以猜一下哪是點(diǎn)擊率最高的…在這里我只能告訴大家一個(gè)大概的排名。我們當(dāng)初希望是租房的點(diǎn)擊高一些,因?yàn)橛脩酎c(diǎn)擊后可以了解我們有多少個(gè)租房產(chǎn)品,所以我們把它在視覺上設(shè)計(jì)的重了一些。但是其實(shí)搜索是排在他前面的,用戶對(duì)于大面積的區(qū)域像banner這類東西是有免疫力的,所以不管做的多花哨其實(shí)用戶會(huì)習(xí)慣性的忽略掉,也就是視覺中心和實(shí)際的交互中心不見得一樣。合租在租房的前面,整租都可以在前面,看來用戶還是比較仔細(xì)的看了我們的界面,而且可以斷定大家對(duì)于合租是什么東西了解的很清晰。


Image title


可以看到,“租房”這個(gè)按紐我們剛開始設(shè)計(jì)的時(shí)候,感覺應(yīng)該是高的,因?yàn)檫@個(gè)是總集,我們?cè)诤笃诘脑L問中發(fā)現(xiàn)用戶認(rèn)為這個(gè)是表示分類,所以設(shè)計(jì)的雖然明顯,但是用戶仍然認(rèn)為這個(gè)不可點(diǎn)。



減少阻力


減少阻力,需要跟用戶的預(yù)期相符。


租房按紐怎么做交互才能讓用戶感到順暢?租房的按紐包括右邊的四種,其實(shí)是個(gè)1.5級(jí)(介于一級(jí)頁(yè)面和二級(jí)頁(yè)面之間)的界面,所以點(diǎn)擊左側(cè)的租房,用戶會(huì)進(jìn)入“租房”頁(yè)面。而右邊的這四個(gè)Button應(yīng)該還在,只是這四個(gè)按紐變成放大精細(xì)版。包括租房Button的底圖,也是放大放在頁(yè)面最上面,這跟用戶的預(yù)期才比較一致。


Image title


從首頁(yè)到列表,到詳情再到下單及更深層的頁(yè)面,頁(yè)面的ICON和精細(xì)程度和用力程度都不一樣,層級(jí)越深視覺沖擊越輕。


Image title


如圖,最右側(cè)預(yù)約那一列,假設(shè)設(shè)計(jì)師有足夠精力和時(shí)間,是否可以把最右側(cè)的頁(yè)面做的視覺更豐富,甚至跟首頁(yè)一樣?然而我們現(xiàn)在的規(guī)范里面仍然不允許做的更花哨,原因是我們認(rèn)為在前半段的時(shí)候,用戶需要一些阻力來提升注意力,從首頁(yè)先認(rèn)知這個(gè)租房APP跟他平時(shí)認(rèn)知的不一樣,接下來有一些信息的輸入比如圖片,再往后,如果一旦點(diǎn)約看或者是點(diǎn)簽約,這時(shí)他的決策做好了,產(chǎn)品要做的事就是一步步往以最快的速度,完成這個(gè)事情,不要讓他有任何的猶豫,不要讓他分心,任何的分心都有一定的概率讓這個(gè)流程中止甚至是終止。


Image title


如圖,我把整個(gè)流程的信息阻力畫了一個(gè)曲線,首頁(yè)阻力是最大的,越往后越小,實(shí)質(zhì)性的信息越多。決策前需要讓用戶提升注意力,所以信息量要大,表達(dá)要豐富。一旦決策后,信息的傳達(dá)以最簡(jiǎn)潔的排他形式存在,讓用戶路徑盡可能的縮短也讓信息阻力盡可能的變小。


以上就是是我對(duì)信息阻力設(shè)計(jì)的整理,希望大家能夠有所收獲。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)。

你的設(shè)計(jì),用戶真的看得懂嗎?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

設(shè)計(jì)師經(jīng)常犯的一個(gè)錯(cuò)誤就是上帝視角,高估了用戶的理解能力。一頓操作猛如虎,結(jié)果用戶可能根本沒看懂你的設(shè)計(jì)。

前段時(shí)間個(gè)人所得稅app 上線,用戶可以在線辦理個(gè)稅專項(xiàng)扣除申報(bào)。我自己也嘗試使用了一波,在申請(qǐng)房貸利息抵扣的時(shí)候發(fā)現(xiàn)了一個(gè)問題。

在房貸信息模塊里需要我輸入證書編號(hào),但是我根本不知道到底要哪個(gè)證書編號(hào)。輸入提示非常的簡(jiǎn)潔,就三個(gè)字「請(qǐng)輸入」,到底要輸入什么?這樣的表單在很多產(chǎn)品中都可以看到,讓用戶輸入生日,但沒有告知日期的格式。日期格式真的太多了,用戶到底選擇哪種?

設(shè)計(jì)師經(jīng)常犯的一個(gè)錯(cuò)誤就是上帝視角,高估了用戶的理解能力。一頓操作猛如虎,結(jié)果用戶可能根本沒看懂你的設(shè)計(jì)。

更快:交互層

有的時(shí)候用戶并不是看不懂你的設(shè)計(jì),而是沒時(shí)間看你的設(shè)計(jì)。如果我們做了一個(gè)抽獎(jiǎng)活動(dòng),用戶看了一眼主界面沒有弄明白是怎么玩的,那么這個(gè)抽獎(jiǎng)大概率是失敗的。你或許會(huì)不服,我明明把活動(dòng)規(guī)則已經(jīng)寫在下方了,可是用戶根本不會(huì)看。因?yàn)樗麄冋娴暮堋笐小埂?

所以讓「用戶看懂你的設(shè)計(jì)」,首先我們應(yīng)該做到「讓用戶更快的看懂」。我們需要提升信息的傳遞效率。

1. 信息可視化

俗話說「字不如表,表不如圖」。用戶對(duì)于具象元素(表格、插畫、icon和圖像等)的感知能力更強(qiáng),具象元素也更能傳遞情緒。例如:道路兩旁的路標(biāo)多數(shù)是以圖形為主體的。這是因?yàn)樵谲囎痈咚傩旭偟倪^程中,司機(jī)沒有足夠的時(shí)間閱讀標(biāo)示上的文字。

場(chǎng)均122.4分,30.6個(gè)助攻,45.0個(gè)籃板……這些數(shù)據(jù)對(duì)于我們來說只是冷冰冰的數(shù)字,我們很難理解其背后的含義。雷達(dá)圖對(duì)球隊(duì)數(shù)據(jù)進(jìn)行了可視化處理,提升了信息的可讀性。因?yàn)橄噍^于純文本,大腦處理圖形的速度要快得多。

以谷歌日歷為例,如果我要做瑜伽,那么就會(huì)在日程詳情頁(yè)配一個(gè)瑜伽墊的插畫;如果我要跑步,那么就會(huì)配一幅跑鞋插畫。用戶甚至不用看文字,通過插畫上所描繪的場(chǎng)景就可以知道自己接下來的行程。用戶可以更快地看懂。

2. 合適的組件

選擇合適的組件可以降低用戶的學(xué)習(xí)和操作成本。以上面的生日為例,與其通過輸入提示告訴用戶日期格式,還不如直接給用戶提供一個(gè)日期組件。

多數(shù)的選擇場(chǎng)景中我們都會(huì)使用底部動(dòng)作欄來承載選項(xiàng),如選擇優(yōu)惠券/銀行卡。參考了一些產(chǎn)品,發(fā)現(xiàn)他們都在底部加上了關(guān)閉/確定按鈕。我們不妨來思考:動(dòng)作欄界面底部需不需要提供關(guān)閉/確定按鈕?

決定一個(gè)元素的去留,我們需要明白它的作用是否可以被替代。底部的按鈕是供用戶點(diǎn)擊關(guān)閉底部動(dòng)作欄的,光看「關(guān)閉動(dòng)作欄」這個(gè)動(dòng)作,底部按鈕并不具備不可替代性。因?yàn)辄c(diǎn)擊上方的空白區(qū)域或者把關(guān)閉按鈕放在右上角都可以關(guān)閉動(dòng)作欄。

這樣一看,底部的按鈕是可以刪除的。那為什么其他的產(chǎn)品都保留了呢?因?yàn)槲覀兒鲆暳私M件的信息屬性,我們沒有考慮如果沒有它是否會(huì)對(duì)用戶了解系統(tǒng)當(dāng)前的狀態(tài)造成影響。

沒有底部的按鈕,用戶無法確定底部動(dòng)作欄是否正常加載。用戶不知道我是只有一張銀行卡還是只加載出來一張銀行卡。

更準(zhǔn):文案層

前段時(shí)間去體檢,發(fā)現(xiàn)排隊(duì)顯示屏中有的人前面有咖啡圖標(biāo),有的人沒有。好奇的我特地找護(hù)士問了一下,發(fā)現(xiàn)咖啡意味著接下來的體檢項(xiàng)目不需要空腹,你可以去吃早飯了。圖標(biāo)的確很簡(jiǎn)潔,可是有多少人看到這個(gè)咖啡圖標(biāo)會(huì)立刻意識(shí)到自己可以吃早飯了呢?

過度追求信息傳遞的效率,而忽視了精度,從一個(gè)極端走向另一個(gè)極端——簡(jiǎn)潔易懂的文案是保障信息準(zhǔn)確性的重要措施。

前段時(shí)間針對(duì)報(bào)錯(cuò)文案做了一個(gè)梳理,發(fā)現(xiàn)了一些文案中的共性問題。

1. 沒有提供解決方案

一個(gè)合格的報(bào)錯(cuò)文案應(yīng)該由:報(bào)錯(cuò)場(chǎng)景、報(bào)錯(cuò)原因和解決方案共同構(gòu)成。首先告知用戶具體遇到了什么樣的報(bào)錯(cuò)場(chǎng)景并且解釋原因,最后提供解決方案。多數(shù)文案都只做到第一步,只描述了報(bào)錯(cuò)場(chǎng)景,這并不能滿足用戶的需要。

  • 如果照片上傳失敗,用戶需要知道是因?yàn)楦袷讲粚?duì)還是圖片太大了。
  • 如果因?yàn)橄到y(tǒng)升級(jí),導(dǎo)致服務(wù)暫停,用戶需要知道什么時(shí)候可以再次提供服務(wù)。
  • 如果把報(bào)錯(cuò)場(chǎng)景看成是一個(gè)坑,那么報(bào)錯(cuò)文案應(yīng)該告訴用戶你掉進(jìn)了一個(gè)什么樣的坑,為什么掉進(jìn)來以及怎么樣才能爬出去。

2. 擁抱數(shù)字

多數(shù)的文案都不愛提供數(shù)字,用戶能獲取的信息也比較模糊。我們盡量給用戶提供準(zhǔn)確的數(shù)字,包括時(shí)間、金額、次數(shù)等,讓用戶對(duì)當(dāng)前的狀態(tài)有一個(gè)準(zhǔn)確的認(rèn)識(shí)。

輸入手勢(shì)密碼錯(cuò)誤是有次數(shù)限制的,可是你并沒有告訴用戶今天還剩幾次機(jī)會(huì)。

我們經(jīng)常會(huì)遇到資料審核的場(chǎng)景,最常見的方法就是告訴用戶「資料審核中」,非常的省事。但是用戶會(huì)疑惑到底要審核多久,給用戶提供一個(gè)大致的審核時(shí)間,讓用戶有目的的去等待。

備胎:在線客服

如果前面兩個(gè)方法都不能解決用戶的疑問,那么我們只好給用戶提供在線客服了。

1. 入口的必要性和統(tǒng)一性

客服的入口一般在首頁(yè)或者用戶的個(gè)人信息頁(yè),除此之外我們需要在用戶有客服訴求的場(chǎng)景中給用戶提供客服入口。如果不提供入口,用戶遇到問題就要返回到首頁(yè)或者我的頁(yè)會(huì)很繁瑣。如果用戶在一個(gè)表單頁(yè)中錄入信息,突然對(duì)某一項(xiàng)內(nèi)容不確定,返回到首頁(yè)找客服咨詢。這樣可能會(huì)導(dǎo)致用戶之前填寫的信息丟失,用戶需要重新輸入一遍。

以下圖為例,這是一個(gè)借款的表單頁(yè),用戶在這里錄入借款信息。我們會(huì)給用戶推薦一款借款人安全險(xiǎn)的保險(xiǎn)產(chǎn)品,提示文案是「保費(fèi)60元,貸款利息可節(jié)約55.33元」。

但是用戶反饋不知道這個(gè)60元的保費(fèi)是一次性扣除還是每月都會(huì)收取,并且這個(gè)利息節(jié)省是什么意思。因?yàn)閷?duì)收費(fèi)標(biāo)準(zhǔn)不確定,用戶的購(gòu)買意愿也會(huì)受到影響。這里的文案表述不清楚,我們可以給用戶提供一個(gè)客服的入口。

因?yàn)樵诰€客服是一個(gè)共有的模塊,不同的業(yè)務(wù)線都可能會(huì)調(diào)用。那么在入口的設(shè)計(jì)上,我們需要注意一致性。當(dāng)然我們也不能過于死板的追求一致性,因?yàn)椴煌瑘?chǎng)景用戶對(duì)于客服的訴求是不一樣的。就以支付寶為例,生活繳費(fèi)和螞蟻借唄兩者在線客服的入口是不一樣的。

因?yàn)橄鄬?duì)來說,用戶對(duì)借錢的場(chǎng)景更加敏感,有更多的疑問去確認(rèn)。這筆貸款的利率怎么算的?還款方式是怎么樣的?會(huì)不會(huì)影響我的個(gè)人征信?所以在借唄頁(yè)中,用戶對(duì)于客服的訴求更高,所以在布局上會(huì)放在更加顯眼的位置。

2. 對(duì)話式交互

用戶進(jìn)入客服系統(tǒng)不意味著立馬可以跟客服小姐姐聊天。咨詢問題一般會(huì)經(jīng)歷以下幾個(gè)步驟:

  • 提供猜你想問的問題;
  • 客服機(jī)器人;
  • 真人客服。

以支付寶為例,首先會(huì)根據(jù)你的來源給你推薦你可能想問的問題。例如:你從充值中心進(jìn)入客服,首先會(huì)給你推薦充值繳費(fèi)相關(guān)的問題。

如果提供的問題列表里沒有用戶想問的,用戶就需要手動(dòng)去查找問題。這時(shí)客服機(jī)器人登場(chǎng),根據(jù)你輸入的關(guān)鍵詞,給你提供相應(yīng)的解決方案。如果客服機(jī)器人不能解決你的問題,那么可以召喚真人客服來幫你解答。

京東金融與支付寶的客服流程大同小異,其中的一個(gè)區(qū)別在于它額外提供搜索框來查找問題,而支付寶是通過對(duì)話式交互來查找問題。

對(duì)話式交互也是近年來比較熱門的一個(gè)話題。對(duì)話式交互主要的優(yōu)點(diǎn)在于學(xué)習(xí)成本低,我們現(xiàn)有的交互體系都是建立在人工智能不夠智能的基礎(chǔ)上。如果足夠的智能,未來的產(chǎn)品界面可能就是兩個(gè)對(duì)話框,你只要打出或者說出你的需求就可以了。

年初一下午我要看韓寒的新電影,幫我預(yù)定一張票。系統(tǒng)根據(jù)你的行程和之前的觀影記錄,猜測(cè)出你當(dāng)天觀影的影院和時(shí)間順便根據(jù)你的喜好選好座位,生成了一個(gè)訂單或者同時(shí)生成好幾個(gè)訂單供你選擇,你確認(rèn)一下就可以。

當(dāng)然這只是一種設(shè)想,目前的技術(shù)還無法實(shí)現(xiàn),系統(tǒng)無法真正分析出用戶的真實(shí)意圖并且做出反饋。例如,在現(xiàn)實(shí)人與人的對(duì)話中,同樣的一句話,不同的語境下有著不同的意思。

把這個(gè)場(chǎng)景帶入客服中,我們輸入「修改」可以發(fā)現(xiàn)有這么多相關(guān)的問題。如果我從白條頁(yè)面中進(jìn)入客服,我輸入「修改」,那么應(yīng)該優(yōu)先從白條相關(guān)的問題中篩選出與「修改」相關(guān)的問題。而目前來說,不管從哪個(gè)模塊進(jìn)入客服,輸入「修改」給你推薦的問題都是一樣的,沒有考慮語境。在這種不夠智能的情況下,對(duì)搜索結(jié)果的展示上傳統(tǒng)的搜索框模式更加合適。

總結(jié)

以上是我簡(jiǎn)單的分析和總結(jié),如果你有不同的看法和建議歡迎留言。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)。

 

2019廣告營(yíng)銷案例搶先看

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

2018年已過,轉(zhuǎn)眼又到了2019,但營(yíng)銷圈中戰(zhàn)火從未消停過……

2018年各大品牌營(yíng)銷玩出了新花樣,優(yōu)秀的營(yíng)銷案例層出不窮,攬獲了眾人的芳心。

面對(duì)2019新的一年到來,各大品牌當(dāng)然也不會(huì)放過一個(gè)大好的借勢(shì)營(yíng)銷黃金機(jī)會(huì),都爭(zhēng)先恐后搭上了這趟“借勢(shì)營(yíng)銷”的順風(fēng)車,為打響2019年第一炮,自然是無可厚非的。

然而,迎來2019新年,各品牌紛紛借勢(shì)“?;ㄕ小保什惠斖?,各種多元化新玩法碰撞在一起產(chǎn)生了巨大的火花,再次燃燒整個(gè)營(yíng)銷界。因此,在這個(gè)競(jìng)爭(zhēng)激烈的營(yíng)銷戰(zhàn)場(chǎng)上,頻繁出現(xiàn)了眾多品牌活躍的身影,各種刷屏級(jí)的案例也相繼誕生。

下面為大家盤點(diǎn)的刷屏案例,看看這些品牌都是如何借助“新年”這個(gè)熱點(diǎn)事件的勢(shì)能,迅速搶占超級(jí)流量,賺足眾人的眼球?

特侖蘇

主題文案:更好的2019,做更好的自己!

點(diǎn)評(píng):往年的特侖蘇代言人只有陳道明、靳東,而今年又有兩位新代言人加入特侖蘇——張鈞甯和鄧倫。特侖蘇邀請(qǐng)了這四大代言人共同拍攝了2019廣告,又以一個(gè)全新的面孔面向用戶。

廣告中花式植入產(chǎn)品,將產(chǎn)品巧妙融入到畫面情境中,以達(dá)到潛移默化的宣傳效果,順理成章地符合了產(chǎn)品植入講究“隨風(fēng)潛入夜,潤(rùn)物細(xì)無聲”的最高境界。

四大代言人共同拍攝廣告,無疑是突破了傳統(tǒng)的廣告模式,強(qiáng)大陣容助陣,可大大體現(xiàn)出明星在營(yíng)銷中的號(hào)召力與影響力,明星背后帶著龐大的粉絲群體,推動(dòng)這次廣告更廣泛地覆蓋目標(biāo)受眾。加大了此次廣告營(yíng)銷的宣傳力度,從中也表達(dá)了特侖蘇堅(jiān)持“從更好的開始”的品牌主張。其次,對(duì)于用戶而言,特侖蘇這波新年廣告帶給大家更多的是驚喜與新年的美好祝愿:更好的2019,努力做更好的自己。

京東白條

主題文案:“一點(diǎn)當(dāng)?shù)湫小本W(wǎng)紅店橫空出世

點(diǎn)評(píng):就在2018年尾聲已敲響時(shí),京東白條又出來“搞事情”了,竟然在京城“四大兇宅之首”—— 朝內(nèi)81號(hào)開了快閃店,使得擁有百年歷史的“京城第一鬼宅”, 搖身一變,成為了一家網(wǎng)紅店,吸引眾多時(shí)尚潮人前來打卡,深夜排隊(duì)的壯觀場(chǎng)面實(shí)在令人驚嘆。

京東白條精準(zhǔn)洞察年輕人現(xiàn)實(shí)痛點(diǎn)和情感需求,以及抓住了他們的獵奇心理,將無數(shù)傳說的冒險(xiǎn)勝地——朝內(nèi)81號(hào),首次改造成京東白條“一點(diǎn)當(dāng)?shù)湫小?,為大眾提供了全新的刺激潮玩體驗(yàn)。讓年輕人通過【當(dāng)與換】的儀式感,把負(fù)能量、情緒、雜念統(tǒng)統(tǒng)“分期”丟掉,切身感受“一點(diǎn)改變,好過一成不變”,告別社畜、廢青的過去,獲得新生,在2019開始更好的人生。

京東白條“一點(diǎn)當(dāng)?shù)湫小本W(wǎng)紅店的問世,可謂打破傳統(tǒng)印象中的金融理財(cái)玩法和當(dāng)鋪玩法,從一點(diǎn)事務(wù)局到一點(diǎn)當(dāng)?shù)湫校〇|金融始終在突破體系和行業(yè)的限定,持續(xù)打造坐擁“潮人”人設(shè)的品牌。同時(shí)也彰顯出一個(gè)擁有年輕人的潮玩精神、有溫度的品牌,更有效建立了品牌與用戶深度溝通的情感紐帶。不得不說,這一反常態(tài)玩起時(shí)尚新潮,簡(jiǎn)直是顛覆了人們對(duì)京東白條的印象,京東白條這波營(yíng)銷實(shí)在是妙!

據(jù)悉,2019年將會(huì)有5期系列活動(dòng)陸續(xù)落地全國(guó),既佛系又喪的年輕人,不可錯(cuò)過!

OLAY

主題文案:下一站,無懼年齡

點(diǎn)評(píng):新的一年里,BBDO廣州攜手OLAY,帶來無懼年齡的《下一站》,OLAY這支反逼婚廣告,戳中了多少人的心窩?相信,給了你不少啟發(fā)。

廣告中講述的是一個(gè)發(fā)生在“年齡列車”上的故事,女主手握一張名為“年齡”的車票,正在尋找著自己的位置,突然驚奇發(fā)現(xiàn)這里的車廂都是按照年齡劃分的。通過這極為扎心的故事情節(jié)激發(fā)更多“大齡剩女”的思考,但也引發(fā)了更多女性產(chǎn)生堅(jiān)定的想法,不應(yīng)該因?yàn)槟挲g而倉(cāng)促步入婚姻的殿堂。

其實(shí),這一廣告刷屏朋友圈,那是因?yàn)檫@廣告基于對(duì)女性的心理洞察,找準(zhǔn)眾多女性的痛點(diǎn),讓人產(chǎn)生強(qiáng)烈的代入感,更能給予女性啟發(fā),正確面對(duì)自己的每一個(gè)年齡階段。由始至終,OLAY給人傳達(dá)了一種“不畏年齡,勇敢做最真實(shí)的自己”的精神,無形中體現(xiàn)了OLAY對(duì)用戶的最切實(shí)的關(guān)懷,使得其品牌深得人心。

迪士尼

主題文案:“夢(mèng)想成真”

點(diǎn)評(píng):迎來新的一年,這支由迪士尼推出的暖心廣告正式上線后,獲得眾多網(wǎng)友的一致好評(píng),都稱這已被故事中的“小白鴨”所吸引。

廣告片講述了一只小白鴨費(fèi)盡千辛萬苦,終于和偶像唐老鴨見面的故事。以呆萌的“小白鴨”形象,然后制造感人的故事,直擊用戶的內(nèi)心深處的情感,從而引起用戶的共鳴,加強(qiáng)了用戶對(duì)品牌的認(rèn)同感。

這次廣告貼合了現(xiàn)實(shí)生活,從用戶的情感出發(fā),喚醒人們的夢(mèng)想,不忘初心,勇往直前,因此,迪士尼給人傳遞的不只是對(duì)美好生活的向往,更多的是對(duì)夢(mèng)想的追求與執(zhí)著。還有向用戶表達(dá)了:盡管我們都長(zhǎng)大了,迪士尼還在守護(hù)我們最童真的夢(mèng)想。所以,迪士尼通過這一波觸動(dòng)人心的情感營(yíng)銷,為品牌與用戶之間架起了一座真正的情感橋梁。

榮耀手機(jī)

手機(jī)性能測(cè)試

(掃描二維碼觀看視頻)

點(diǎn)評(píng):說到手機(jī)的耐摔性,很多人都會(huì)想到諾基亞,但諾基亞在現(xiàn)如今的手機(jī)市場(chǎng)普及性明顯不如其他品牌。而在今年,榮耀手機(jī)開始耍出了新招——推出一創(chuàng)意廣告,鐵證榮耀手機(jī)才是“堅(jiān)強(qiáng)者”。

這是一支榮耀測(cè)試手機(jī)性能的宣傳片,讓手機(jī)歷經(jīng)各種考驗(yàn),包括油煙考驗(yàn)、零下40度的超低溫測(cè)試、高達(dá)55度的超高溫測(cè)試、殘酷的刮擦實(shí)驗(yàn)等,最后用結(jié)果彰顯:榮耀手機(jī)的性能強(qiáng)大。

所以,榮耀手機(jī)通過展示這優(yōu)質(zhì)的手機(jī)性能來加強(qiáng)用戶對(duì)其產(chǎn)品的認(rèn)知,刷新用戶的榮耀手機(jī)原有的印象。從用戶的角度考慮,用實(shí)驗(yàn)證明,體現(xiàn)產(chǎn)品的最大價(jià)值,從而滿足用戶對(duì)手機(jī)產(chǎn)品的各種需求,也引導(dǎo)用戶對(duì)榮耀手機(jī)產(chǎn)生正面的認(rèn)識(shí)。最后也突顯了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用實(shí)力說話”的產(chǎn)品廣告,自然會(huì)把人征服得心服口服。

網(wǎng)易云音樂

主題文案:“遇見你真好”年度聽歌報(bào)告

點(diǎn)評(píng):2018年的網(wǎng)易云音樂的年度報(bào)告,居然在2019年的第四天才遲到出現(xiàn),網(wǎng)易云音樂的“遇見你真好”年度聽歌報(bào)告,又雙叒叕刷屏了……

眾所周知,網(wǎng)易云音樂于2013年4月23日正式發(fā)布,也是國(guó)內(nèi)首個(gè)以“歌單”作為核心架構(gòu)的音樂APP,每次網(wǎng)易云音樂的營(yíng)銷與“走心”產(chǎn)生了密不可分的關(guān)系,大眾千呼萬喚始出來的網(wǎng)易云音樂年度總結(jié)報(bào)告終于出來了,雖然QQ音樂、酷狗音樂也在年前亮出了年度音樂總結(jié),但偏偏是網(wǎng)易云音樂的年度聽歌報(bào)告刷屏了。

這次的年度總結(jié),滿足了用戶對(duì)音樂的需求,也滿足了一些有情懷的用戶,而且其歌單給予用戶滿滿的成就感,輕易地完成了一次階段總結(jié)。吸引更多用戶參與其中,紛紛曬出自己的年度歌單報(bào)告,使得這次網(wǎng)易云的年度聽歌報(bào)告,引發(fā)了廣泛的傳播。

屈臣氏

主題文案:“做自己,美有道理”

(掃描二維碼觀看視頻)

點(diǎn)評(píng):就在2019年到來的鐘聲一響起,大家便紛紛立了新的flag,而屈臣氏上線的H5,彰顯著“做自己,美有道理”的品牌主張,剛好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

視頻中的“四位小姐姐”show出了“不跟隨、不妥協(xié)、不偽裝”的模樣,還有人的語言配合動(dòng)感的畫面,折射出現(xiàn)實(shí)生活中年輕女生渴望表達(dá)自我,追求個(gè)性與態(tài)度。呼喚大家在新的一年,立起了2019新flag。同樣也展現(xiàn)了屈臣氏就是一個(gè)有態(tài)度的品牌。

只想說,在這2019新年之際,屈臣氏推出了這一波滿滿正能量的廣告,能俘獲用戶的芳心也是毋庸置疑的了。

縱觀以上品牌營(yíng)銷案例,可謂各有千秋,但共同點(diǎn)旨在使得品牌深入人心。

然而,眾多品牌營(yíng)銷過程中需要從用戶角度出發(fā),都說,一個(gè)成功的營(yíng)銷,是因?yàn)椤白咝摹?,在傳達(dá)品牌產(chǎn)品信息的同時(shí),也能使得受眾與品牌成功產(chǎn)生情感的共鳴,讓用戶更深刻地記住其品牌。

當(dāng)然,我們也更期待2019,品牌主們能推出更多刷屏級(jí)的好案例。

藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

日歷

鏈接

個(gè)人資料

存檔