從“秋天的第一杯奶茶”到“打工人”，從老鄉(xiāng)雞的土味發(fā)布會(huì)到嗶哩嗶哩的《后浪》，刷爆屏幕的傳播一浪接一浪，成為我們這個(gè)時(shí)代永不落幕的風(fēng)景。產(chǎn)品怎樣做出刷屏級(jí)傳播呢？本文作者總結(jié)了五種思路，與你分享。

互聯(lián)網(wǎng)刷屏現(xiàn)象層出不窮，其關(guān)聯(lián)因素紛繁復(fù)雜，其發(fā)生和走勢(shì)看起了很難把控，但通過(guò)對(duì)很多案例進(jìn)行復(fù)盤，拆解其中機(jī)理，還是可以發(fā)現(xiàn)很多共同的規(guī)律。

鑫爺認(rèn)為，那些刷屏的傳播，大多數(shù)逃不了以下五種路徑。

01 漣漪式：同頻傳導(dǎo)，無(wú)限裂變

漣漪式傳播模型

漣漪式傳播，通俗講就是病毒式傳播、社交式傳播，信息通過(guò)社交媒體上人與人之間的鏈條，不停地向外無(wú)限的傳導(dǎo)、裂變，直至達(dá)到引爆點(diǎn)。就像水中的漣漪，波紋從起始點(diǎn)擴(kuò)散，通過(guò)水波引起的震動(dòng)，一步步將能量傳遞到更大的范圍。

漣漪式傳播是一種去中心化的傳播，消息可以從任何一個(gè)人那里發(fā)出，經(jīng)由社交媒介的轉(zhuǎn)發(fā)、點(diǎn)贊、互動(dòng)，形成指數(shù)級(jí)的裂變，一生二，而生三，三生無(wú)限。這是互聯(lián)網(wǎng)世界最基本、也是最重要的傳播途徑。

比如說(shuō)，當(dāng)年火爆世界的“冰桶挑戰(zhàn)”活動(dòng)，引來(lái)名流紛紛@對(duì)方并參與，帶來(lái)了一場(chǎng)全球公益的狂歡；今年老鄉(xiāng)雞的土味戰(zhàn)略發(fā)布會(huì)，只用幾百元預(yù)算做的視頻，竟然在社交媒體上獲得10w+的播放量和3.3w+的在看，成為疫情期間最大的廣告贏家。

漣漪式傳播的發(fā)生機(jī)制，主要是口碑效應(yīng)。人們出于人際交流、展現(xiàn)自我形象、獲得社會(huì)認(rèn)同的目的，將有意思的東西內(nèi)容給朋友，從而實(shí)現(xiàn)人際間的自傳播。

那么，什么樣的內(nèi)容最有口碑價(jià)值呢？《瘋傳》一書認(rèn)為，滿足以下六種因素的內(nèi)容，最容易引起口碑傳播：

• 社交貨幣：可以作為茶余飯后談資的東西，比如說(shuō)名人八卦、網(wǎng)紅打卡地等。
• 誘因：在特殊情景、場(chǎng)合的刺激因素，比如疫情期間的共享員工用工。
• 公共性：切中大眾關(guān)注的敏感話題，比如住房、食品安全、疫情期間經(jīng)濟(jì)問(wèn)題。
• 情緒：比如憤怒、焦慮、恐懼、勵(lì)志等情緒，比如幼兒園虐童事件、各種雞湯等。
• 實(shí)用性：跟受眾切身利益有關(guān)、對(duì)其有用處，比如本地民生政策、健康指南等。
• 故事姓：一波三折，情節(jié)有趣：比如最近一在反轉(zhuǎn)的美國(guó)大選。

除了內(nèi)容以外，漣漪式傳播要達(dá)到理想效果，還需要傳播渠道上進(jìn)行最優(yōu)設(shè)計(jì)，將正式傳播（如官方發(fā)布）與人際傳播（民間爆料）、中心式傳播（如明星、KOL）與非中心式傳播（素人轉(zhuǎn)發(fā)）結(jié)合起來(lái)，形成立體式的傳播鏈路。

比如說(shuō)，如果你要在微博引爆一個(gè)事件，你可以先由素人小號(hào)爆料，再由明星轉(zhuǎn)發(fā)，官方回應(yīng)等，大V觀點(diǎn)跟進(jìn)等，一步步鋪陳直至引爆；也可以先由官方發(fā)布消息，其他明星、大V轉(zhuǎn)發(fā)評(píng)論，無(wú)數(shù)的素人小號(hào)配合造勢(shì)；也可以先發(fā)布到電視或紙媒廣告，然后微博、微信等社交媒體跟進(jìn)，做進(jìn)一步的討論、延伸。

當(dāng)然，具體操作上，要需要結(jié)合傳播內(nèi)容和整體廣告策略來(lái)決定。

02 破圈式：夯實(shí)地盤，破壁出圈

在過(guò)去的電視時(shí)代，人們的聚集是集中化的、“廣場(chǎng)式”的，全國(guó)人民同時(shí)看一個(gè)電視臺(tái)；而如今在互聯(lián)網(wǎng)時(shí)代，人們的聚集更多的是分散的、“圈層式”的。尤其是95、00后的Z世代用戶，他們更多而基于興趣、亞文化聚在一起，形成一個(gè)一個(gè)的圈子，比如當(dāng)今各種獸圈、飯圈、谷圈等等，不一而足。

Z世代圈子解析

在圈層式的受眾結(jié)構(gòu)中，當(dāng)某種信息在圈子內(nèi)部的影響力越來(lái)越大，就可能突破原有的圈層堡壘，進(jìn)入主流的大眾人群，讓更多的人知道，這種傳播就可以叫“破圈式傳播”。

圖：破圈式傳播模型

比如說(shuō)，B站原來(lái)的用戶群體主要是二次元的人群，具有典型的圈層化特征。這幾年來(lái)，B站力圖將用戶拓展到更多的年輕人群，而今年推出的演講版的《后浪》視頻，有效的吸引了很過(guò)二次元圈外的年輕人乃至中老年人，無(wú)疑是典型的破圈式傳播。

同樣的，這幾年在抖音、快手等流行的漢服風(fēng)、JK制服、手辦等，也有了出圈的態(tài)勢(shì)。

具體而言，傳播破圈又分為三種類型：

• 一是從專業(yè)向大眾破圈。比如咖啡文化的傳播，就是先從專業(yè)級(jí)的手沖咖啡圈，再破圈進(jìn)入資深咖啡愛好者圈，最后破圈進(jìn)入普通喝咖啡人群。
• 二是從特定階層向普通階層破圈。比如說(shuō)，在古代，像翡翠、紅木家具這些品，都是皇室貴胄、高門大戶才能擁有的，如今已經(jīng)破圈進(jìn)入更多的階層。還有牛仔褲，最初是美國(guó)西部礦工、牛仔人群穿的，后來(lái)經(jīng)過(guò)改良，成為大眾流行服飾，風(fēng)靡全世界。
• 三是由亞文化群向主流人群破圈。比如二次元文化、街頭文化、COSPLAY、古風(fēng)等這些亞文化，都已經(jīng)融入了中國(guó)的大眾流行之中，被越來(lái)越多人人喜愛。

破圈式營(yíng)銷的發(fā)生機(jī)制，是“參照群體”效應(yīng)。人們?yōu)榱巳诤系缴鐣?huì)中，或是凸顯個(gè)性，會(huì)找到一個(gè)參考的人群，并模仿他們的行為。比如說(shuō)，中產(chǎn)階層會(huì)模仿上層階級(jí)人群，購(gòu)買更有體味、更能體現(xiàn)社會(huì)地位的品；年輕人會(huì)模仿那些有個(gè)性同齡人的興趣愛好，以便讓自己顯得與眾不同。

要做好破圈式營(yíng)銷，一定要把握好傳播的節(jié)奏。在《創(chuàng)新的擴(kuò)散》一書中，提出了一個(gè)很經(jīng)典的傳播模型：新事物需要先讓那些喜歡嘗新的早期使用者（也就是種子用戶），培養(yǎng)和激勵(lì)這批鐵桿人群，讓他們影響早期大眾人群，最后擴(kuò)展到晚期大眾人群，借以實(shí)現(xiàn)破圈。

創(chuàng)新的擴(kuò)散模型

比如說(shuō)，當(dāng)初小米手機(jī)起家之前，是通過(guò)第一批骨灰級(jí)用戶，這些用戶多為手機(jī)論壇的資深用戶，小米邀請(qǐng)他們參與MIUI的設(shè)計(jì)、研發(fā)、反饋等，建立了很好的忠誠(chéng)度和口碑。

借助這些種子用戶，小米實(shí)現(xiàn)了“冷啟動(dòng)”，同時(shí)通過(guò)線下論壇交流、“小米同城會(huì)”等建立參與感，吸引了更多的“米粉”，進(jìn)而破壁出圈，擴(kuò)散到更龐大的發(fā)燒友人群。

03 共創(chuàng)式：全民參與，一起狂歡

共創(chuàng)式傳播，就是通過(guò)“發(fā)動(dòng)人民群眾”，號(hào)召受眾一同參與進(jìn)來(lái)，大家一起玩嗨，一起創(chuàng)造傳播內(nèi)容，傳播者和用戶共同成就了整個(gè)傳播，乃至共同擁有產(chǎn)品和品牌。

共創(chuàng)式傳播模型

我認(rèn)為最善于做共創(chuàng)式傳播的機(jī)構(gòu)，莫過(guò)于新世相。他們發(fā)起的“地鐵丟書大戰(zhàn)”，號(hào)召大家在地鐵、車站等留下一本書，給其他人閱讀，引起了全網(wǎng)的討論；還有“4小時(shí)逃離北上廣”事件，號(hào)召一線城市想逃離的白領(lǐng)們，即時(shí)趕到機(jī)場(chǎng)，可以報(bào)銷機(jī)票，一時(shí)間引起朋友圈刷屏和討論。

另外，像網(wǎng)易云將用戶的走心評(píng)論當(dāng)做地鐵廣告素材，“認(rèn)養(yǎng)一頭?！惫膭?lì)消費(fèi)者認(rèn)養(yǎng)牛奶并邀請(qǐng)參觀牧場(chǎng)，抖音上發(fā)起的全民模仿“哪吒頭”，中國(guó)銀聯(lián)“銀行POS機(jī)”一元購(gòu)買留守兒童詩(shī)歌作品，都是共創(chuàng)式營(yíng)銷的典范案例。

共創(chuàng)式營(yíng)銷的傳播機(jī)制，在于提供“參與感”。受眾感覺自己能夠被尊重、被看見，并且獲得參與其中的快樂體驗(yàn)，很容易形成自發(fā)的分享，并且容易與傳播者形成一種深度的互動(dòng)關(guān)系，從而建立起持久的忠誠(chéng)度。

要建立廣受擁戴的參與感，需要滿足以下條件:

• 一是簡(jiǎn)單易操作。比如天與空聯(lián)合安利發(fā)起的“頭頂食物”公益活動(dòng)，抖音上的“一鍵變漫畫”視頻應(yīng)用，都是非常簡(jiǎn)單的，這樣才能最大限度地降低參與門檻，讓全民一起嗨起來(lái)。
• 二是讓人有分享動(dòng)機(jī)。共創(chuàng)式傳播，不光要吸引參與，更重要的是要吸引他轉(zhuǎn)發(fā)，那些具有身份代入感、能夠增進(jìn)自我形象、感覺自己能夠以小行動(dòng)助益社會(huì)的活動(dòng)，才會(huì)更容易引起分享。

比如說(shuō)人民日?qǐng)?bào)發(fā)起的“傳照片生成自己的軍裝照”H5，就很有代入感；還有像奈雪之茶這些高顏值茶飲產(chǎn)品，消費(fèi)者自愿拍照分享，則是為了凸顯自己的品味和形象；參與關(guān)愛自閉癥兒童的“今天不說(shuō)話”活動(dòng)，則是滿足了助力社會(huì)的自我實(shí)現(xiàn)心理。

04 蒲公英式：星火燎原，所向披靡

所謂蒲公英模式，是讓傳播渠道或者傳播事件不斷復(fù)制，派生出很多次級(jí)傳播單元，在各個(gè)角落落地生根，從而形成全覆蓋的浩瀚態(tài)勢(shì)，從而達(dá)到“星火燎原”的引爆效果。

(圖：蒲公英式傳播模型 )

有一些IP式的活動(dòng)，有共同的主題和形式，然后在不同城市不斷進(jìn)行復(fù)制，最終達(dá)到落地生根、全面開花的效果。

比如當(dāng)年優(yōu)步剛進(jìn)入中國(guó)時(shí)，就是靠“一鍵呼叫”系列事件，在各大城市引爆關(guān)注狂潮的。北京的一鍵呼叫人力車、上海一鍵呼叫直升機(jī)、成都的一鍵呼叫搖櫓船、青島的一鍵呼叫游艇，每個(gè)城市都復(fù)制了活動(dòng)的基本形式，但又結(jié)合本地文化進(jìn)行了調(diào)整，最終匯聚成席卷神州的強(qiáng)大聲量。

蒲公英模式的另外一種形式，是傳播渠道上，在核心渠道以外配合很多的分子渠道，從而形成多陣列的全覆蓋效果。

比如公眾號(hào)“吃貨小分隊(duì)”，除了“吃貨小分隊(duì)”這公眾號(hào)，還有多倫多吃貨小分隊(duì)、灣區(qū)吃貨小分隊(duì)、洛杉磯吃貨小分隊(duì)、溫哥華吃貨小分隊(duì)、波士頓吃貨小分隊(duì)等十三個(gè)子公眾號(hào)，在微信平臺(tái)頗有影響力，獲得了全美120萬(wàn)以上的粉絲青睞。

再比如樊登讀書會(huì)，他們除了官方APP，還會(huì)把官方的視頻素材剪輯成小片段，打包給到全國(guó)各城市代理商。眾多的代理商被允許在抖音、快手等社交媒體開設(shè)賬號(hào)，發(fā)布這些資料。于是，網(wǎng)上鋪天蓋地都是樊登讀書會(huì)的視頻內(nèi)容，形成無(wú)處不在的曝光效果。

蒲公英式傳播的發(fā)生機(jī)制，是矩陣協(xié)同作用。眾多的傳播單元，形成密集的陣列，相互支撐、相互補(bǔ)充、相互呼應(yīng)，可以起到1+1大于2的放大作用。這跟7-11便利店的密集開店的渠道拓展模式，以及一些品牌“全國(guó)萬(wàn)店聯(lián)合促銷”的玩法，有著異曲同工之妙。

05 喇叭式：集中引爆，一舉成名

喇叭式傳播，就是集中廣告資源，借助大媒介、大明星、大投入，讓傳播信息進(jìn)行密集曝光，從而快速引爆事件。

喇叭式傳播模型

喇叭式傳播，是一種中心化的傳播模式，在傳統(tǒng)的電視、紙媒時(shí)代，很多品牌都不惜砸重金競(jìng)標(biāo)央視黃金時(shí)間，或者在短期內(nèi)在各大衛(wèi)視同時(shí)打廣告，進(jìn)行形成全國(guó)性的曝光。直到今天，像瓜子二手車、大衛(wèi)拖把這些品牌，也是通過(guò)密集的電梯廣告進(jìn)行轟炸式的宣傳，這也算是喇叭式傳播。

到了互聯(lián)網(wǎng)時(shí)代，喇叭式的傳播其實(shí)并沒有消失，只是相比過(guò)去的單向輸出，多了實(shí)時(shí)的反向互動(dòng)和分享，這樣就有了二次傳播的可能。

比如說(shuō)與明星聯(lián)名做推廣，找李佳琦、薇婭這樣的頭部KOL種草，或者像完美日記那樣，集中火力在小紅書投放了大量種草日記，都是屬于喇叭式傳播，其效果可以即時(shí)獲得受眾反饋。

喇叭式傳播的發(fā)生機(jī)制，是從眾心理。當(dāng)我們?cè)诙虝r(shí)間內(nèi)，看到小紅書、抖音、微信、微博乃至整個(gè)網(wǎng)絡(luò)，都在使用某個(gè)產(chǎn)品或者討論某個(gè)品牌，就會(huì)覺得這個(gè)品牌實(shí)力很強(qiáng)，他的產(chǎn)品大家都在買，從而跟風(fēng)拔草。

不過(guò)，喇叭式傳播也有其局限性，就是需要足夠的預(yù)算做支持。盡管喇叭式傳播的重點(diǎn)是拼媒介、拼覆蓋面，但是在具體執(zhí)行中，也要想辦法讓傳播內(nèi)容盡可能有些梗、有些料，以便刺激受眾二次傳播，廣告效果會(huì)更好一些。

讓廣告公關(guān)化，在廣告中融入可討論的話題，不失為提升喇叭式傳播效果的一種可行思路。

比如，早幾年世界杯期間刷屏的“法國(guó)隊(duì)奪冠，華帝退全款”事件，還有今年疫情期間網(wǎng)易嚴(yán)選的“勸你別看廣告了”路牌廣告，以及最近網(wǎng)易嚴(yán)選“退出雙11”的操作，都是在傳播中融入了公關(guān)的要素，掀起了極高的話題討論度。

06 小結(jié)

從傳統(tǒng)時(shí)代到移動(dòng)互聯(lián)網(wǎng)時(shí)代，傳播環(huán)境不斷變化，刷屏玩法層出不窮。這種情況下，我們不光要學(xué)習(xí)借鑒的傳播案例，還要把握傳播的原理和模式，才能以不變應(yīng)萬(wàn)變。

5種互聯(lián)網(wǎng)傳播模式總結(jié)

以上5種基本模式，各有優(yōu)缺點(diǎn)以及使用范圍，我們需要結(jié)合傳播的目的和策略，匹配最合適的方案。最后，祝大家天天10萬(wà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ù)

大家平時(shí)手機(jī)APP中有多少是跟提升和學(xué)習(xí)有關(guān)的？自己碎片化的時(shí)間都用來(lái)做什么呢？是否在微博、微信、淘寶、抖音之間游走？在這些APP里獲得即時(shí)的快樂后，又很空虛？

別急，今天我就給大家推薦幾款我親測(cè)好用的APP，讓大家能輕松的利用碎片化的時(shí)間去提升自己。

身為設(shè)計(jì)師，提升審美是非常重要的，可以說(shuō)，審美是決定一個(gè)設(shè)計(jì)師發(fā)展的關(guān)鍵性因素。但是，審美的提升不是一朝一夕能實(shí)現(xiàn)的，是一個(gè)長(zhǎng)期積累的過(guò)程，要多去看好的作品，多去分析，多去記憶。接下來(lái)給大家推薦幾個(gè)可以看作品的APP：

之前我們經(jīng)常告訴大家，提升審美的一個(gè)快速的方式就是多去看好的攝影照片。國(guó)家地理大家都比較熟悉了，是風(fēng)光、人文、紀(jì)實(shí)類攝影機(jī)構(gòu)，這里有很多世界頂尖攝影師拍攝的照片，并且可以下載高清圖片，欣賞的同時(shí)還可以作為自己的靈感庫(kù)。每天這個(gè)app都會(huì)推薦5-10張照片，不斷刷新你的圖庫(kù)。

給大家看看我近期下載的圖片

△ 《冰山的紋理》photograph by Nancy Leigh 圖片來(lái)自：國(guó)家地理APP

這是南極洲的天堂灣( Paradise Cove)，有許多彷佛經(jīng)過(guò)精雕細(xì)琢的冰山。這座冰山表面有著令人驚嘆的美麗紋理，就像高爾夫球桿揮過(guò)草皮留下的痕跡，還有一道道的條紋。它以迷人的姿態(tài)，歡迎著我們來(lái)到這個(gè)有著湛藍(lán)海水、冰河與詭異天色的海灣。2013年攝于南極洲的天堂灣。

△ 《雨驟來(lái)》photograph by 林曉敏 圖片來(lái)自：國(guó)家地理APP

大雨驟來(lái)，巷中食肆排檔的食客不慌不忙，以雨景伴晚飯，慢活是一種生活態(tài)度。

可能很多同學(xué)納悶，我看攝影圖片到底看什么呢？

可以看構(gòu)圖、光影、色彩、色調(diào)等等，這些在你設(shè)計(jì)時(shí)都會(huì)潛移默化影響你，比如，上面兩張圖片，最吸引我的是它們的色彩，第一張整體是藍(lán)色調(diào)的，我可以用它的顏色作為我畫面的配色。第二張圖片，色彩的冷暖對(duì)比很大，給我一種賽博朋克的感覺，設(shè)計(jì)非常酷的畫面時(shí)，就可以用到這樣的配色。

tips：

「國(guó)家地理」APP，安卓和蘋果系統(tǒng)都可以下載，安卓系統(tǒng)是免費(fèi)的，蘋果系統(tǒng)要收1元的費(fèi)用。

看展絕對(duì)是可以提升審美的好方法，「iMuseum」是一款可以定位搜索你附近的美術(shù)館畫廊的APP，覆蓋全球，包含了幾乎所有地區(qū)的展覽消息。

「VART」這個(gè)可以說(shuō)是「iMuseum」的升級(jí)版，它的功能很強(qiáng)大，「iMuseum」有的功能，它也有，除了定位全球查找展覽信息和看其他人看展動(dòng)態(tài)之外，還有很多功能，比如：

• 它可以線上購(gòu)票，APP上能看到近期開始的和即將結(jié)束的展覽，看到感興趣的即可在線購(gòu)票，拿著電子票據(jù)就能去線下看展了。
• 它可以通過(guò)場(chǎng)館尋找展覽，當(dāng)你定位好后，直接選擇場(chǎng)館模式，就會(huì)出現(xiàn)這個(gè)城市的所有展館，非常方便我們查找。
• 它包含了很多國(guó)內(nèi)外藝術(shù)家/作者的生平簡(jiǎn)介和作品介紹，以及相關(guān)的展覽信息（簡(jiǎn)直不要太棒了?。┻€可以關(guān)注藝術(shù)家，以便下次接著觀看。
• 它可以全景線上看展，其實(shí)對(duì)于一二線城市之外的設(shè)計(jì)師來(lái)說(shuō)，想看展是比較麻煩的事，一個(gè)是距離，一個(gè)時(shí)間，并且在這一年疫情期間，更是難上加難，但是，有了這個(gè)APP，就可以線上看展了。

大家千萬(wàn)別錯(cuò)過(guò)這里的展覽海報(bào)設(shè)計(jì)，有一些還是很值得學(xué)習(xí)的，看到好的記得保存到手機(jī)里，充實(shí)自己的靈感庫(kù)。

看名字應(yīng)該就明白這個(gè)app的主打內(nèi)容了——雜志，這里全是日本雜志，這里大多數(shù)雜志的編排都是非常好的，提升審美的同時(shí)，還能讓我們?cè)O(shè)計(jì)的時(shí)候有所借鑒。

在線瀏覽不方便，你也可以下載到手機(jī)里，只不過(guò)需要交28元的費(fèi)用，在我看來(lái)還是挺劃算的。當(dāng)然，如果你只是看好了某一頁(yè)，點(diǎn)擊下方的保存，就會(huì)存到手機(jī)相冊(cè)內(nèi)。

tips：這個(gè)app可能你在安卓的商店內(nèi)搜不到，需要直接用網(wǎng)頁(yè)搜索「雜志迷」，同樣可以下載。

「Behance」是一款A(yù)dobe旗下用于展示并發(fā)現(xiàn)創(chuàng)意作品的在線平臺(tái)。這個(gè)APP很多人都比較熟悉了，是全球非常知名的分享平臺(tái)，各行各業(yè)的設(shè)計(jì)師或愛好者在上面分享自己的作品，讓你能看到除了平面設(shè)計(jì)外更廣闊的領(lǐng)域。

「ins」是Facebook公司的一款免費(fèi)提供在線圖片及視頻分享的社區(qū)應(yīng)用軟件。

這個(gè)平臺(tái)有明星，有素人，也有很多知名的設(shè)計(jì)師，它像一個(gè)大的朋友圈，每個(gè)人在平臺(tái)上分享自己的生活照片或者設(shè)計(jì)作品，下面分享一些，我在上面關(guān)注的賬號(hào)，這里有插畫、海報(bào)、時(shí)尚、藝術(shù)、雜志、海報(bào)等等，看這些作品同樣可以提升審美。

設(shè)計(jì)師絕不能局限于眼前的設(shè)計(jì)稿，要多去增長(zhǎng)見識(shí)，多去開闊眼界，當(dāng)你的知識(shí)面拓寬了，就會(huì)給你提供源源不斷的設(shè)計(jì)靈感，所以，多去看和設(shè)計(jì)“無(wú)關(guān)”的東西，也是對(duì)于設(shè)計(jì)師大有裨益的，比如說(shuō)歷史、電影、時(shí)尚、攝影等等。

下面就給大家推薦幾個(gè)能增長(zhǎng)見識(shí)的APP

這個(gè)APP原來(lái)的名字叫“全歷史”，現(xiàn)在叫「全世界」，一看格局就是變大了，它還有網(wǎng)頁(yè)端，功能基本是一樣的。

這款A(yù)PP我本人真的是強(qiáng)烈推薦！因?yàn)樵谶@里你可以按照時(shí)間軸、關(guān)系圖譜、時(shí)間地圖查看各國(guó)，各個(gè)歷史時(shí)代的歷史相關(guān)內(nèi)容。

根據(jù)導(dǎo)航你還能看到全畫作、全古籍、全人物、全戰(zhàn)爭(zhēng)等內(nèi)容。這些內(nèi)容里面還藏了很多細(xì)小的分支，讓你從頭把歷史捋順了。

網(wǎng)上對(duì)于這款A(yù)PP的評(píng)價(jià)：這是一個(gè)時(shí)光機(jī)歷史地圖 + 文學(xué)藝術(shù)編年史 + 典籍名著中英對(duì)照 + 全球博物館在線閱覽。驚喜的是，它還在不斷更新它的數(shù)據(jù)庫(kù)，所以，你還在等什么？快去下載吧！！

「開眼」是一個(gè)全球精品短視頻平臺(tái)，匯集了動(dòng)畫、廣告、影視、運(yùn)動(dòng)、創(chuàng)意、游戲、旅行等領(lǐng)域的優(yōu)質(zhì)短視頻以及這些領(lǐng)域的創(chuàng)意人群。

和我們平時(shí)刷的短視頻不一樣，開眼APP上的視頻都是精挑細(xì)選的高清視頻，覆蓋范圍也很廣泛，包含了旅行、運(yùn)動(dòng)、創(chuàng)意、廣告、生活、科普等18個(gè)熱門分類，界面設(shè)計(jì)的也不錯(cuò)，每日推送3-5條視頻。

開眼，簡(jiǎn)直就是短視頻界的一股清流，可以從這里看到很多優(yōu)質(zhì)的視頻內(nèi)容，比如下面這個(gè)二維世界的圖形實(shí)驗(yàn)。

「TOPYS」app是由中國(guó)成立最早、的創(chuàng)意垂直網(wǎng)站，TOPYS推出的移動(dòng)端應(yīng)用，是一個(gè)面向創(chuàng)意人、創(chuàng)意領(lǐng)域愛好者開放的創(chuàng)意學(xué)習(xí)平臺(tái)。

這里包含了文案、視頻、名人訪談、設(shè)計(jì)項(xiàng)目等等，汲取每日新鮮靈感，了解創(chuàng)意圈熱門動(dòng)態(tài)，滿足審美體驗(yàn)。

除了提升審美和增長(zhǎng)見識(shí)外，我們還需要提高工作的效率，這就需要用到工具了。當(dāng)然，網(wǎng)頁(yè)端也有很多不錯(cuò)的設(shè)計(jì)利器，以后我再給大家分享，今天分享一些在手機(jī)上就能實(shí)現(xiàn)的小工具！

「PantoneConnect」這款A(yù)PP，我只在蘋果商店里找到了，安卓的沒有找到。

這個(gè)就是最近頻上熱搜的潘通公司所開發(fā)的APP，主要是幫助設(shè)計(jì)師簡(jiǎn)化他們的色彩選擇和設(shè)計(jì)流程，提升工作效率。

它這里有很多色彩庫(kù)，讓你根據(jù)不同的印刷需要進(jìn)行選擇，還可以根據(jù)你上傳的圖片進(jìn)行分析，提取出相應(yīng)的合理的配色，比如我們?cè)凇竾?guó)家地理」中下載的攝影照片。

它還有很多功能，就等大家自己去挖掘了。

如果你無(wú)法下載「PantoneConnect」APP，你可以試試下載「色采」，功能一樣很強(qiáng)大。

1. 相機(jī)實(shí)時(shí)配色

通過(guò)相機(jī)，捕捉下眼前的美景和心儀的色彩，將眼前的美景收錄為你的專屬色卡。

2. 靈感探索配色

從中西經(jīng)典藝術(shù)作品、自然風(fēng)光、電影動(dòng)畫等提取的600多種原創(chuàng)配色。

3. 照片智能配色

更精準(zhǔn)的顏色識(shí)別算法，從自己的相片中發(fā)現(xiàn)配色靈感。

現(xiàn)在吸引大家注意力的事物太多了，而且大多數(shù)會(huì)給你即時(shí)的快樂，讓你欲罷不能，不知不覺間，時(shí)間就消失了，導(dǎo)致沒有辦法集中注意力去做事情，這個(gè)布谷番茄，就是一個(gè)管理時(shí)間的效率工具。

番茄時(shí)鐘可以幫你追蹤花在每項(xiàng)事務(wù)上的時(shí)間。還可以根據(jù)實(shí)際情況靈活地選擇每個(gè)番茄時(shí)間段的具體長(zhǎng)度。

布谷番茄將你工作和生活中的待辦任務(wù)與目標(biāo)技能關(guān)聯(lián)起來(lái)，讓你做過(guò)的事務(wù)都成為累積技能成長(zhǎng)的一部分。通過(guò)在“做事”和“成長(zhǎng)”之間建立清晰的聯(lián)系，讓刻意練習(xí)變得簡(jiǎn)單，讓你成為時(shí)間管理的高手。

這里可以最多添加4個(gè)任務(wù)，如果想要添加更多的任務(wù)，需要充值12元錢，如果你確實(shí)在時(shí)間管理方面存在很多問(wèn)題，那這12元錢花的還是很值得的。

今天分享了12款A(yù)PP給大家

互聯(lián)網(wǎng)的發(fā)展，讓我們學(xué)習(xí)更加便利，與此同時(shí)五花八門的各種APP吸引著我們的注意力，“殺掉”我們的時(shí)間。身為設(shè)計(jì)師，如果無(wú)法保持一個(gè)學(xué)習(xí)力，那就很難有好的發(fā)展，工作之余，我們完全可以利用通勤、如廁、睡前、午休等等碎片化的時(shí)間翻看這些APP，給自己一個(gè)提升的機(jī)會(huì)。

藍(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ù)

1.為什么用戶使用對(duì)齊標(biāo)簽填寫表單的速度更快

想象一下，一個(gè)用戶已經(jīng)準(zhǔn)備好注冊(cè)您的站點(diǎn)了。他們會(huì)進(jìn)入你的表格并輸入他們的信息。字段標(biāo)簽對(duì)齊的方式會(huì)影響用戶填寫表單的速度。

你是想給用戶提舒適體驗(yàn)，還是想給他們一個(gè)麻煩？

如果您想讓他們的體驗(yàn)更快更容易，請(qǐng)使用輸入框上面的字段對(duì)齊標(biāo)簽.或輸入框內(nèi)的對(duì)齊標(biāo)簽?zāi)Ｊ健?

與左對(duì)齊和右對(duì)齊的標(biāo)簽相比，頂部對(duì)齊或內(nèi)部左對(duì)齊標(biāo)簽填寫起來(lái)更快、更容易。這是因?yàn)闃?biāo)簽只需要有一半多的視覺固定物。

頂部對(duì)齊標(biāo)簽還允許用戶以一個(gè)可視方向向下移動(dòng)輸入框。左對(duì)齊和右對(duì)齊的標(biāo)簽需要兩個(gè)視覺指示才能填寫。

頂部對(duì)齊標(biāo)簽的唯一缺點(diǎn)是，它們可以使表單變得很長(zhǎng)。但是現(xiàn)在用戶滾動(dòng)的頻率越來(lái)越高，所以這不是問(wèn)題。

通過(guò)減少字段之間的空白，可以減少表單長(zhǎng)度。您還可以將表單拆分成多個(gè)頁(yè)面，以使表單更短。

頂部和左/右對(duì)齊標(biāo)簽之間的差異很明顯。頂部對(duì)齊標(biāo)簽更容易在眼睛上，并使表格更容易填寫。雖然他們可以使表單更長(zhǎng)，

但用戶將從完成表單所需的時(shí)間和精力的減少中獲益更多。

如果頂部對(duì)齊的標(biāo)簽?zāi)軌蚪o用戶提供更好的表單體驗(yàn)，那么它是值得采用的。設(shè)計(jì)師應(yīng)該更多地考慮他們的字段標(biāo)簽對(duì)齊。

它可以區(qū)別于用戶填寫表單還是放棄表單。

2.為什么對(duì)話框中的“確認(rèn)”按鈕在右邊工作得最好

有很多設(shè)計(jì)經(jīng)常會(huì)問(wèn)我一些關(guān)于按鈕上的問(wèn)題那我今天也來(lái)獻(xiàn)丑講以下我對(duì)按鈕的一些理解，這段時(shí)間針對(duì)這些東西研究了很久，在對(duì)話框中放置“確認(rèn)”和“取消”按鈕的位置?！按_認(rèn)”按鈕是完成任務(wù)的主要操作。

“取消”按鈕是在沒有完成任務(wù)的情況下將用戶帶回原來(lái)屏幕的輔助動(dòng)作。

根據(jù)它們的功能，最好的順序是什么？“確定”按鈕應(yīng)該出現(xiàn)在“取消”按鈕之前還是之后？

許多人提到了以下幾點(diǎn)平臺(tái)約定作為答案。雖然這似乎是一個(gè)解決問(wèn)題的方法，但實(shí)際上并非如此。它不能回答哪個(gè)位置對(duì)用戶更好，以及為什么。為了一致性而遵循平臺(tái)慣例的建議是不夠好的，給設(shè)計(jì)師留下了空手而歸的機(jī)會(huì)。

“一致性”是設(shè)計(jì)師們常用的一個(gè)詞。不深入考慮用戶面臨的設(shè)計(jì)問(wèn)題也是一個(gè)流行的借口。如果一個(gè)人不知道為什么會(huì)存在，遵循設(shè)計(jì)慣例有什么好處呢？

如果某個(gè)設(shè)計(jì)約定對(duì)用戶有害呢？設(shè)計(jì)師應(yīng)該為了一致性而盲目地遵循嗎？糟糕的設(shè)計(jì)實(shí)踐是否應(yīng)該持續(xù)下去，因?yàn)樵O(shè)計(jì)師們希望通過(guò)平臺(tái)設(shè)計(jì)的一致性來(lái)解決每一個(gè)問(wèn)題？

今天，有一些平臺(tái)設(shè)計(jì)約定被廣泛使用，因?yàn)樗鼈兪菫橛脩艄ぷ鞯摹５@里的要點(diǎn)是，平臺(tái)設(shè)計(jì)的一致性永遠(yuǎn)不應(yīng)該讓設(shè)計(jì)師滿意，因?yàn)檫@是做某事的唯一理由。理解為什么您應(yīng)該以一種方式而不是另一種方式來(lái)設(shè)計(jì)您的用戶界面的原因是關(guān)鍵。

按鈕放置事項(xiàng)

人們可能會(huì)說(shuō)，讓你的動(dòng)作按鈕突出給它更多的視覺重量和一個(gè)清晰清晰的標(biāo)簽比它的位置更重要。雖然動(dòng)作按鈕的視覺重量和標(biāo)簽是一個(gè)重要的設(shè)計(jì)方面需要考慮，但它不是唯一的方面。

只關(guān)注一個(gè)設(shè)計(jì)方面而不是其他方面是一個(gè)粗心的設(shè)計(jì)師的行為。一絲不茍的設(shè)計(jì)師會(huì)思考每個(gè)設(shè)計(jì)方面是如何影響用戶的。

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，最難搞清楚的是主動(dòng)作和次要?jiǎng)幼魇侨绾畏胖玫?。這就是為什么“確認(rèn)”/“取消”按鈕的爭(zhēng)論在設(shè)計(jì)師中如此流行的原因。

為什么‘確認(rèn)’按鈕在右邊工作得最好？

當(dāng)你通過(guò)了平臺(tái)慣例的爭(zhēng)論后，你會(huì)質(zhì)疑哪個(gè)位置最有效。您可以通過(guò)分析設(shè)計(jì)如何影響用戶來(lái)解決這個(gè)問(wèn)題。

減少視覺固定

一些設(shè)計(jì)師認(rèn)為，在第二個(gè)操作之前將主操作放在左邊對(duì)用戶更好，因?yàn)樗咏?，因此，點(diǎn)擊的時(shí)間更少。

這是有意義的，但您不能忽視這樣一個(gè)事實(shí)，即用戶在選擇要采取的操作之前將查看他們的所有選項(xiàng)。

這意味著大多數(shù)用戶不會(huì)盲目地單擊主操作按鈕而不查看它旁邊的輔助操作按鈕。

他們將首先看到左邊的主要?jiǎng)幼?，然后查看右邊的次要?jiǎng)幼鳌Ｈ缓?，他們?huì)把眼睛移回主要的動(dòng)作，點(diǎn)擊它。這將在多個(gè)方向上總共創(chuàng)建三個(gè)視覺固定。

將其與放置在對(duì)話框右側(cè)的主操作和放置在左側(cè)的輔助操作進(jìn)行比較。用戶從第二個(gè)動(dòng)作的眼睛開始，然后將眼睛移到主動(dòng)作上單擊按鈕。這在一個(gè)方向上總共創(chuàng)建了兩個(gè)視覺固定，給用戶一個(gè)更快的視覺流。

用戶只關(guān)注每個(gè)按鈕一次，并在主動(dòng)作按鈕上結(jié)束。將主操作放在左邊可能會(huì)使用戶更容易到達(dá)，但是當(dāng)您從用戶的思維過(guò)程和視覺固定的角度來(lái)看速度時(shí)，將主操作放置在對(duì)話框的右側(cè)實(shí)際上更快。

用戶點(diǎn)擊或操作按鈕的心里狀態(tài)

當(dāng)用戶單擊輔助操作按鈕時(shí)，他們期望應(yīng)用程序什么也不做，并將它們帶回到原來(lái)的屏幕。因此，“取消”按鈕的功能類似于“后退”按鈕。

當(dāng)用戶單擊主操作按鈕時(shí)，他們期望應(yīng)用程序執(zhí)行按鈕所述的操作，并將其轉(zhuǎn)到下一個(gè)屏幕。因此，“確認(rèn)”按鈕的功能類似于“下一頁(yè)”按鈕。將輔助動(dòng)作按鈕放置在左側(cè)，主動(dòng)作按鈕在右邊映射到用戶可以期待的‘后退’和‘下一步’按鈕功能。

它類似于分頁(yè)按鈕的放置方式。將用戶帶到下一頁(yè)的按鈕位于右側(cè)，將用戶帶回其早期頁(yè)面的按鈕位于左側(cè)。這個(gè)按鈕的放置工作是因?yàn)樗成涞接脩魪淖蟮接业拈喿x和導(dǎo)航方向，其中右是前進(jìn)的方向，左是后退的方向。

對(duì)話框中的“確認(rèn)”和“取消”按鈕應(yīng)該遵循類似的交互模式，因?yàn)樗鼈兊墓δ茴愃朴诜猪?yè)按鈕。

不僅如此，在中國(guó)用戶習(xí)慣了左右方向的模式。

將您的主要操作放在右側(cè)，將次要操作放置在左側(cè)，將使您的對(duì)話框按鈕更容易、更直觀地為用戶所理解。

為用戶提供更有效的視覺流暢度

將您的按鈕放置在終端區(qū)域可以讓用戶看到他們最后需要采取的主要操作。這不僅改善了視覺流，也改善了任務(wù)流。

用戶在掃描時(shí)不會(huì)跳過(guò)主動(dòng)作按鈕。當(dāng)他們通過(guò)時(shí)，他們的眼睛就會(huì)盯著它，所以他們可以立刻點(diǎn)擊它。

按鈕放置在中間還是放置在左右兩邊？

另一個(gè)問(wèn)題是設(shè)計(jì)師經(jīng)常想知道他們是應(yīng)該把按鈕放在角落里，還是把它們放在一起。當(dāng)您將主操作和輔助操作放置在對(duì)話框

的角中時(shí)，它將很好地映射到左右方向。但是，由于‘取消’和‘確認(rèn)’按鈕不是導(dǎo)航按鈕，所以沒有必要遵循方向映射。有時(shí)它弊大于利。

如果應(yīng)用程序要執(zhí)行用戶無(wú)法撤消的關(guān)鍵操作，那么用戶可以看到“取消”按鈕和“確定”按鈕是很重要的。在這種情況下，“取消”按鈕的功能可能像“先前”按鈕，但更重要的是，因?yàn)樗洚?dāng)安全按鈕，以防止任何更改。

在左下角放置“取消”按鈕的危險(xiǎn)是，由于兩個(gè)按鈕之間的視覺分隔很大，它可能導(dǎo)致用戶忽略它。將“取消”按鈕和“確定”按鈕放在一起，可以使用戶更容易在一次凝視中查看和比較這兩個(gè)動(dòng)作，從而選擇最佳的操作和點(diǎn)擊。

我們經(jīng)常卸載軟件的時(shí)候一不留神就會(huì)點(diǎn)錯(cuò)，或者是我們?cè)谘b某一個(gè)軟件的時(shí)候全家桶一擁而上。所以在不同場(chǎng)景當(dāng)中我們所用的按鈕形態(tài)也是不一致的。

3.下拉菜單加圖標(biāo)和不加圖標(biāo)的區(qū)分在哪里！

大的側(cè)邊欄菜單甚至?xí)層脩艨雌饋?lái)很不雙我們應(yīng)當(dāng)如何解決這一個(gè)問(wèn)題。

其原因是設(shè)計(jì)人師在做顯示菜單項(xiàng)的時(shí)候會(huì)出現(xiàn)的問(wèn)題。

當(dāng)它們都有相同的視覺處理時(shí)，菜單項(xiàng)很難進(jìn)行識(shí)別與區(qū)分。

如果不修復(fù)這個(gè)問(wèn)題，會(huì)導(dǎo)致用戶放慢他的瀏覽速度從而導(dǎo)致用戶的流失在大的層面來(lái)講，小的層面來(lái)講閱讀不爽導(dǎo)致關(guān)閉頁(yè)面。

菜單欄沒有主次之分

當(dāng)您對(duì)菜單項(xiàng)進(jìn)行全文本或全圖標(biāo)處理時(shí)，問(wèn)題就會(huì)出現(xiàn).當(dāng)用戶掃描他們想要的項(xiàng)目時(shí)，他們的注意力分散在菜單周圍。這是因?yàn)闆]有層次來(lái)吸引他們的注意力。

通過(guò)將用戶的注意力引導(dǎo)到您的主要項(xiàng)目，使您的菜單可掃描。

要實(shí)現(xiàn)這一點(diǎn)，我們可以看下面設(shè)計(jì)形式來(lái)強(qiáng)調(diào)重點(diǎn)內(nèi)容

主項(xiàng)圖標(biāo)

與其在每個(gè)菜單項(xiàng)上放置圖標(biāo)，還不如將其放置在主菜單項(xiàng)上。視覺強(qiáng)調(diào)首先將用戶的注意力引導(dǎo)到這些項(xiàng)目上。

次要項(xiàng)目上缺少圖標(biāo)，這使得它們能夠得到其余的關(guān)注。

略大一點(diǎn)的圖標(biāo)

如果要使所有圖標(biāo)處，請(qǐng)稍微放大需要突出的圖標(biāo)。

稍微的增大會(huì)使視覺效果有很大的不同，同時(shí)字形更容易辨認(rèn)，每一行的線高也會(huì)增加。讓整個(gè)看起來(lái)更加有空間感一些。

讓用戶瀏覽閱讀起來(lái)也會(huì)更加舒暢一些。

4.在按鈕上避免顏色對(duì)比度錯(cuò)誤

想象一下，當(dāng)用戶在您的界面上遇到一對(duì)按鈕時(shí)，他們猶豫不決。

用戶向左看，然后向右看，比較它們。經(jīng)過(guò)一番思考，他們做出了選擇。

他們的選擇按鈕做出決定，而且不確定，因?yàn)槟愕陌粹o沒有層次結(jié)構(gòu)。

不要使用相同的顏色輪廓按鈕

甚多的設(shè)計(jì)師設(shè)通常喜歡使用主按鈕的輪廓形狀作為輔助按鈕。按鈕樣式看起來(lái)可能不一樣，但還不夠。

他們?nèi)匀粫?huì)競(jìng)爭(zhēng)，因?yàn)樗麄兊念伾珜?duì)比度相等。

為了給主按鈕更多的注意，削弱輪廓按鈕的對(duì)比度。與其使用重顏色，不如使用它的色調(diào)。你可以通過(guò)降低重顏色的亮度和飽和度來(lái)制作。確保對(duì)比度足夠高，以達(dá)到主要的按鈕突出性。

不要使用黑色輔助按鈕

設(shè)計(jì)師的另一個(gè)趨勢(shì)是把第二個(gè)按鈕變成黑色。他們認(rèn)為，使用中性的顏色，它是不會(huì)競(jìng)爭(zhēng)的。然而，黑色按鈕更為突出，因?yàn)樗幸粋€(gè)更高的對(duì)比度。

不要使用黑色，而要使用重顏色的色調(diào)，以使輔助按鈕比主按鈕更弱。要做到這一點(diǎn)，增加亮度和降低飽和水平。

不要在主色調(diào)上使用淺色

將彩色按鈕與中性灰色配對(duì)并不總是意味著彩色按鈕會(huì)得到更多的關(guān)注。如果主按鈕的顏色太輕，則中性輔助按鈕將更加突出

要避免這一錯(cuò)誤，請(qǐng)選擇不太明亮的顏色。明亮的顏色可能看起來(lái)很有吸引力，但它與白色背景或文字的對(duì)比不太好。在主按鈕上使用更暗的顏色，這樣第二個(gè)按鈕就不會(huì)引起注意。

5.復(fù)選框的設(shè)計(jì)與使用方式哪種更好

在界面上使用復(fù)選框之前，您必須先問(wèn)自己幾個(gè)問(wèn)題。復(fù)選框是否是在此上下文中使用的正確組件？如果是的話，最有用的顯示方式是什么？

許多設(shè)計(jì)師沒有問(wèn)這些問(wèn)題，自動(dòng)使用復(fù)選框，沒有太多的事先考慮。

因此，它們通過(guò)在錯(cuò)誤的上下文中使用它們而產(chǎn)生可用性問(wèn)題。

不僅如此，許多設(shè)計(jì)人員都很懶惰，期望前端寫成默認(rèn)選框完成這項(xiàng)工作，而不是

自定義復(fù)選框設(shè)計(jì)。但問(wèn)題是，前端默認(rèn)的復(fù)選框不能完成這項(xiàng)工作，因?yàn)樗鼈兊?

可用性很差。

大多數(shù)設(shè)計(jì)人員在復(fù)選框上會(huì)犯的幾個(gè)可用性錯(cuò)誤，這些錯(cuò)誤會(huì)破壞用戶體驗(yàn)。

單選與重復(fù)的選擇

在設(shè)計(jì)當(dāng)中我們經(jīng)常會(huì)遇到做選擇性的勾選，往往很多設(shè)計(jì)師會(huì)犯的一些錯(cuò)誤問(wèn)題和選擇障礙問(wèn)題。

通過(guò)更大的目標(biāo)來(lái)明確與用戶進(jìn)行選擇更為明確

我們?cè)O(shè)計(jì)單選框的時(shí)候這不是秘密而是讓用戶做出選擇，復(fù)選框是很難點(diǎn)擊，因?yàn)樗麄兊男糁心繕?biāo)。

設(shè)計(jì)師通常會(huì)讓標(biāo)簽點(diǎn)擊，但如果它不是直觀的，那也于事無(wú)補(bǔ)。

通過(guò)將復(fù)選框轉(zhuǎn)換為復(fù)選標(biāo)記，您可以為用戶提供更大的命中目標(biāo)和更清晰的交互提示。

重復(fù)物品的重量及數(shù)量選擇

有時(shí)你可能想提供不同數(shù)量的商品。使用多個(gè)復(fù)選框復(fù)制它會(huì)產(chǎn)生更多的文本來(lái)讀取，并使界面混亂,且讓用戶難以進(jìn)行選擇。對(duì)于增量輸入更改使用數(shù)字選擇器一次顯示該項(xiàng)會(huì)為更好些。

總結(jié)以上兩點(diǎn)，實(shí)際商用應(yīng)用案例如下所示

6.在設(shè)計(jì)當(dāng)中我們?cè)撊绾慰刂苾?nèi)容的突出性與閱讀性

新聞卡片的設(shè)計(jì)怎么才能突出信息內(nèi)容

卡片內(nèi)容有幾種文本類型，提供不同的信息功能。讓我們看看基本內(nèi)容卡的文本類型。

首先是眉毛，它是一個(gè)明確的詞或短語(yǔ)，用來(lái)描述內(nèi)容的主題。

還有一個(gè)標(biāo)題，它用一個(gè)句子中的幾個(gè)單詞告訴用戶內(nèi)容是關(guān)于什么的。

在此之后，就會(huì)有一個(gè)描述內(nèi)容的正文。

最后，就是時(shí)間與操作的按鈕

必須通過(guò)確定哪些文本類型對(duì)用戶更重要，從而為您的卡片新聞建立文本層次結(jié)構(gòu)。

此內(nèi)容新聞卡片的適當(dāng)文本層次結(jié)構(gòu)為：

1.眉毛-可以是時(shí)間，可以是新聞分類

2.標(biāo)題-最重要的是，因?yàn)樗枋龅膬?nèi)容最快。

3.正文-包含一個(gè)描述性段落，但閱讀時(shí)間最長(zhǎng)。

4.描述內(nèi)容的正文對(duì)內(nèi)內(nèi)容的簡(jiǎn)要描述。

您的內(nèi)容卡應(yīng)指導(dǎo)用戶按此順序?yàn)g覽文本類型。要實(shí)現(xiàn)這一點(diǎn)，您需要使用瀏覽控制對(duì)文本類型應(yīng)用適當(dāng)?shù)囊曈X強(qiáng)調(diào)。

控制用戶的瀏覽順序

通過(guò)適當(dāng)?shù)囊曈X強(qiáng)調(diào)，可以控制用戶瀏覽的順序，并指定反映文本層次結(jié)構(gòu)的瀏覽模式。

當(dāng)掃描遵循文本層次結(jié)構(gòu)時(shí)，用戶會(huì)浪費(fèi)更少的眼球運(yùn)動(dòng)，并且可以更快地處理信息。

下面的示例說(shuō)明了瀏覽控制如何讓眼球工作比較。不同的是強(qiáng)調(diào)不同的文本類型。

其他文本類型具有相同的強(qiáng)調(diào)度，這使得它們爭(zhēng)奪用戶的注意力。

其他設(shè)計(jì)形式及瀏覽方式

在內(nèi)容顏色的控制上我們可以為三種，重要的突出的需要用戶重點(diǎn)進(jìn)行關(guān)注的就用黑色

例如：#333333      #222222   #454545     等等色值

在不需要突出的內(nèi)容上我們可以用稍微淺一點(diǎn)的色值保證用戶能夠進(jìn)行閱讀即可，

例如：#999999      #787878   #666666     等等色值更加容易記住

其他輔助的內(nèi)容表達(dá)比內(nèi)容正文更淺

例如：#bbbbbb      #A8A8A8    等等色值

說(shuō)到這里我要說(shuō)一用戶體驗(yàn)關(guān)于文字的事情如果做出來(lái)的設(shè)計(jì)文字是給自己看的隨意設(shè)計(jì)讀沒人會(huì)說(shuō)你，有句話說(shuō)的好：現(xiàn)在

是內(nèi)容為王的時(shí)代，如果在內(nèi)容上不夠吸引或者顏色不夠吸引眼球那就是一個(gè)很失敗的案例。

轉(zhuǎn)自：站酷

作者：  東峰實(shí)業(yè)集團(tuá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ù)

設(shè)計(jì)的思考不僅要注重表象層面，也需要圍繞信息傳達(dá)這一設(shè)計(jì)的本質(zhì)功能，以充滿自省的精神深化和反思自己的設(shè)計(jì)意識(shí)，即做到“好看、好用”。在設(shè)計(jì)過(guò)程中，要站在公司的利益上，懂用戶所想，在每一個(gè)關(guān)鍵點(diǎn)都要帶給用戶意想不到的驚喜，這些往往都是通過(guò)細(xì)節(jié)體現(xiàn)出來(lái)的。

01.「微信」添加好友-掃描與被掃指尖切換

產(chǎn)品體驗(yàn)：

使用微信掃一掃添加好友時(shí)，如果對(duì)方打開二維碼的速度較慢（網(wǎng)絡(luò)不好/手機(jī)卡頓/操作不熟），為避免自己久等，可通過(guò)左下角的二維碼入口將自己的個(gè)人二維碼提供給對(duì)方掃描添加。

設(shè)計(jì)思考：

微信的掃一掃功能簡(jiǎn)直強(qiáng)大到不敢相信，除了我們?nèi)粘Ｒ玫闹Ц陡犊?、物品查詢、各種信息的獲取等，還有一個(gè)重大的功能就是添加好友。不知道大家有沒有碰到過(guò)這種情況，需要添加好友時(shí)，自己打開掃一掃，過(guò)了很久卻發(fā)現(xiàn)對(duì)方還在功能的路徑中徘徊，遲遲沒有打開二維碼頁(yè)面，這時(shí)我們不得不說(shuō)一聲“你掃我吧”，于是自己從掃描頁(yè)面返回，一頓騷操作，把自己的個(gè)人二維碼給對(duì)方展示了出來(lái)。

微信在掃一掃頁(yè)面左下角提供的個(gè)人二維碼入口，便于在加好友出現(xiàn)問(wèn)題時(shí)，隨時(shí)由被動(dòng)變?yōu)橹鲃?dòng)，指尖切換掃描與被掃的添加方式，節(jié)約用戶時(shí)間成本以及緩解掃描等待的焦慮感。基于用戶添加好友時(shí)所處的使用環(huán)境，考慮周全且人性化，極大方便用戶使用。

02.「高德地圖」錄入車牌號(hào)-降低限行違章概率

產(chǎn)品體驗(yàn)：

在高德地圖的導(dǎo)航設(shè)置中，錄入自己的車牌號(hào)并開啟避開限行提醒，在導(dǎo)航過(guò)程中如果途徑限行路段，系統(tǒng)會(huì)有語(yǔ)音播報(bào)提醒并自動(dòng)避開限行路段重新規(guī)劃路線。

設(shè)計(jì)思考：

自北、上、廣、深四個(gè)一線城市交通部分別出臺(tái)汽車限行措施后，其他部分城市也相繼出了限外政策，外地車牌如果想要在本城市隨時(shí)出行，需要（部分城市通過(guò)搖號(hào)）獲得本地車牌號(hào)方可。不管我們對(duì)交通路線有多熟悉、或者經(jīng)過(guò)其他城市的限行路段，因限行導(dǎo)致的違章真是防不勝防，畢竟每個(gè)地方的限行政策都是通過(guò)固定渠道對(duì)外宣布，不會(huì)通知到每一個(gè)駕駛員，如果不能第一時(shí)間獲得限行訊息，悔之晚矣。

使用高德地圖導(dǎo)航，在登錄后錄入車牌號(hào)并開啟“避開限行”，系統(tǒng)就會(huì)自動(dòng)檢測(cè)導(dǎo)航路線，如果要經(jīng)過(guò)限行/限外路段時(shí)會(huì)自動(dòng)重新規(guī)劃，通過(guò)繞行來(lái)避讓限行的路段，如果無(wú)法避開則提示：已無(wú)法為你規(guī)避限行路段，請(qǐng)合理安排出行。自動(dòng)規(guī)劃路線能夠有效避免因限行導(dǎo)致的違章，給我們?cè)斐山?jīng)濟(jì)損失，尤其是駕照，畢竟一周期才12分。就算無(wú)法避開，也可以通過(guò)語(yǔ)音提前知道限行路段，并合理安排出行時(shí)間。

（PS：雖然很多用戶感覺無(wú)需登錄也可以正常使用，但登錄之后可以享受更多特權(quán)以及更加優(yōu)質(zhì)的服務(wù)）

03.「支付寶」你想要的收款二維碼樣式是這樣的

產(chǎn)品體驗(yàn)：

在支付寶的收款二維碼頁(yè)面截圖時(shí)，系統(tǒng)預(yù)判用戶有使用二維碼收款的需求，通過(guò)彈窗提示是否需要保存二維碼圖片，自動(dòng)去掉無(wú)關(guān)信息并統(tǒng)一規(guī)范樣式。

設(shè)計(jì)思考：

移動(dòng)支付自上線開始，微信支付和支付寶支付各自占領(lǐng)著半江山，只要涉及線上交易，絕大多數(shù)用戶每天必定會(huì)選擇其中一個(gè)使用，雖然兩大企業(yè)的方向截然不同，但支付系統(tǒng)在用戶體驗(yàn)方面都是一如既往的持續(xù)提升，以此來(lái)增加用戶的粘性。

支付寶收款二維碼頁(yè)面觸發(fā)截圖，在截取成功的狀態(tài)下，同時(shí)彈出保存二維碼圖片提示。跟設(shè)備截取的圖片相比，單獨(dú)保存的二維碼樣式更加簡(jiǎn)潔，且規(guī)范統(tǒng)一，信息內(nèi)容更加聚焦，便于用戶直接傳送或打印使用。其實(shí)進(jìn)入收款二維碼頁(yè)面，在下方原本就有保存圖片入口，基于用戶進(jìn)入此頁(yè)面的需求明確，對(duì)性子較急且耐性較低的用戶來(lái)說(shuō)，這個(gè)被弱化的保存入口，可能直接忽略（別不信，我見過(guò)有人手上拿著手機(jī)還在到處找手機(jī)）。截圖時(shí)出現(xiàn)的彈窗提示，相當(dāng)于上了一道保險(xiǎn)，避免使用截圖自行裁剪打印的樣式不統(tǒng)一，導(dǎo)致付款用戶心中原本就已存在的默認(rèn)收款二維碼樣式發(fā)生變化，形成認(rèn)知負(fù)擔(dān)。

04.「抖音」暗示用戶-好看就要分享

產(chǎn)品體驗(yàn)：

在抖音短視頻頁(yè)面停留一段時(shí)間后，分享圖標(biāo)會(huì)自動(dòng)變成最近常分享的某個(gè)用戶頭像，暗示用戶好東西要分享。

設(shè)計(jì)思考：

抖音作為當(dāng)前最火的短視頻（直播）平臺(tái)，相信很多用戶即使不經(jīng)常玩，但最起碼會(huì)玩，雖然有部分低俗、劣質(zhì)的用戶在破壞著平臺(tái)的規(guī)則，但整體看來(lái)是利大于弊的，其他的交給人心。下載抖音的用戶大部分獲取來(lái)源應(yīng)該是來(lái)自于他人的分享，一傳十十傳百，最終傳到人手必備，所以平臺(tái)是相當(dāng)注重分享功能的用戶體驗(yàn)。

抖音的分享功能，其實(shí)還有一個(gè)小細(xì)節(jié)，當(dāng)我們停在某個(gè)短視頻頁(yè)面一段時(shí)間時(shí)，原本的分享圖標(biāo)會(huì)變成最近分享的用戶的頭像。用戶對(duì)分享功能都有常規(guī)的認(rèn)知，當(dāng)我們?cè)谟^看某個(gè)視頻一段時(shí)間后，系統(tǒng)自動(dòng)評(píng)判該用戶對(duì)此視頻感興趣，基于用戶看到感興趣的東西就喜歡炫耀、分享的心理（比如“孫悟空到此一游”），系統(tǒng)將分享圖標(biāo)變成用戶頭像，意在提醒觀者分享，以達(dá)到最大化傳播可能的目的，以及為平臺(tái)拉取新用戶。

05.「智行火車票」搜索攻略-確保使用的流暢性

產(chǎn)品體驗(yàn)：

首次打開智行火車票的搜索功能，會(huì)自動(dòng)彈出搜索攻略，以指導(dǎo)用戶可搜索的范圍及使用規(guī)范，后續(xù)再次打開搜索即恢復(fù)常規(guī)用法，如果再次了解，點(diǎn)擊搜索攻略即可。

設(shè)計(jì)思考：

對(duì)于搜索功能，可謂是熟悉的不能再熟悉了，千篇一律的輸入關(guān)鍵字即可，大不了重新再來(lái)。搜索是產(chǎn)品中不可或缺的一部分，無(wú)論打開哪個(gè)App,都能很快找到，但如果搜索功能做的好了，也是用戶轉(zhuǎn)化的關(guān)鍵流量入口，比如搜索方式、呈現(xiàn)樣式、搜索引導(dǎo)等，用戶體驗(yàn)不容忽視。

智行火車票APP的搜索攻略就是在合適的時(shí)間、合適的地點(diǎn)準(zhǔn)確的傳達(dá)給用戶。首次進(jìn)入，即自動(dòng)彈出搜索攻略教育新用戶，明確的告知使用搜索功能可以搜什么？怎么搜？避免用戶一打開就直接擼字，而造成使用錯(cuò)誤的概率提高以及影響搜索結(jié)果的準(zhǔn)確性，用戶一旦碰壁，很有可能轉(zhuǎn)身就離開。自動(dòng)彈出的搜索攻略由被動(dòng)變?yōu)橹鲃?dòng)，可以提前告知用戶搜索范圍及關(guān)鍵詞示例，降低出錯(cuò)的幾率，讓整個(gè)搜索流程更加順暢，為后續(xù)的使用提供便利，減少用戶的流失。

06.「蝦米音樂」評(píng)論-一鍵表達(dá)心情

產(chǎn)品體驗(yàn)：

在蝦米音樂聽歌時(shí)，進(jìn)入評(píng)論功能，除了可文字評(píng)論外，還能表達(dá)聽歌時(shí)的心情，隨時(shí)查看有多少同樣心情的人在聽這首歌，很有代入感。

設(shè)計(jì)思考：

文字是我們交流常用的元素，但很多時(shí)候因使用的方法不當(dāng)而造成含義上的變化，比如一段話后面加個(gè)感嘆號(hào)，到底是消極還是敵意？聲音也是一樣，當(dāng)我們開著車對(duì)行人按喇叭，是表示禮貌還是憤怒？而表情則是不同，它表達(dá)的是一種類型，比如一個(gè)笑臉，可以理解為滿意、開心、高興等。表情除了可以委婉的表達(dá)自己內(nèi)心的情感之外，也是因?yàn)楸砬榈臒o(wú)責(zé)任性，你會(huì)聽到人說(shuō)，請(qǐng)注意你的言行，但沒人會(huì)說(shuō)，請(qǐng)注意你的表情包。

蝦米音樂APP在歌曲的評(píng)論功能，除了有文字評(píng)論之外，還可以表達(dá)聽歌時(shí)的心情，即表情評(píng)論。進(jìn)入評(píng)論頁(yè)面，首先看到的是某某等幾人使用的什么樣的心情評(píng)論，并提示共有多少人參與，引導(dǎo)用戶接下來(lái)該做什么，讓用戶快速地進(jìn)入到產(chǎn)品使用中，給予了明確行為操作的指令，觸發(fā)并提高了用戶的參與度。另外使用表情相比文字評(píng)論更容易操作，系統(tǒng)預(yù)設(shè)好可供用戶選擇的表情包并附帶文字提示，用戶無(wú)需思考便可一鍵操作，很大程度上降低了完成的難度。事實(shí)表明，同樣能達(dá)到目的的辦法，簡(jiǎn)單的是最實(shí)用、也是。

07.「美團(tuán)」收貨地址-二次提醒降低出錯(cuò)的概率

產(chǎn)品體驗(yàn)：

在美團(tuán)提交訂單頁(yè)面選擇好地址后，頁(yè)面上滑，詳細(xì)地址會(huì)懸浮在導(dǎo)航欄，便于用戶二次確認(rèn)或修改。

設(shè)計(jì)思考：

線上購(gòu)物已經(jīng)成為了我們的家常便飯，外賣行業(yè)解決著我們“吃”的問(wèn)題更不例外。通常我們?cè)谶x擇好商品后，地址作為重量級(jí)的信息都會(huì)優(yōu)先展示在訂單頁(yè)面的頂部，首先基本都會(huì)提供一個(gè)默認(rèn)地址，如果不需要進(jìn)入地址修改即可?？v然如此，依然有部分用戶因?yàn)榧庇谙聠?，后續(xù)發(fā)現(xiàn)地址錯(cuò)誤，就需要聯(lián)系商家修改地址或者取消訂單重新下單，浪費(fèi)時(shí)間不說(shuō)，還會(huì)影響心情。

美團(tuán)APP在提交訂單頁(yè)面，針對(duì)地址方面相當(dāng)于加了一道保險(xiǎn)。用戶在選擇完地址上滑頁(yè)面后，詳細(xì)地址懸浮在的標(biāo)題欄上，點(diǎn)擊可直接修改收貨地址，雖然不一定每個(gè)用戶都能看到，但長(zhǎng)時(shí)間懸浮在頁(yè)面頂部，時(shí)刻都在提醒著用戶，只要稍一抬頭，即可看到醒目的大字（地址），便于用戶潛意識(shí)的瀏覽或眼睛的余光掃描，發(fā)現(xiàn)有誤及時(shí)修改，降低下單時(shí)地址出錯(cuò)的概率，考慮周全，給予更好的用戶體驗(yàn)。

08.「菜鳥」下拉刷新-趣味化的“空投”

產(chǎn)品體驗(yàn)：

菜鳥APP在頁(yè)面下拉刷新的過(guò)程中，會(huì)有一個(gè)紙箱從空中落下的動(dòng)畫效果，類似空投，仿佛在說(shuō)“你的補(bǔ)給已送到，請(qǐng)及時(shí)查收”，非常貼合平臺(tái)的屬性及特征。

設(shè)計(jì)思考：

下拉刷新早就不是什么新鮮的東西了，幾乎所有的應(yīng)用里都會(huì)有這個(gè)功能，通常都是一個(gè)持續(xù)的動(dòng)效在告知用戶，頁(yè)面的數(shù)據(jù)正在加載，請(qǐng)稍等，市場(chǎng)上很多APP的刷新樣式都是大同小異。不過(guò)一旦做好刷新樣式，就不僅僅是告知用戶當(dāng)前頁(yè)面狀態(tài)這么回事了，比如下拉刷新前后兩種狀態(tài)借助過(guò)渡動(dòng)效連接到一起，讓用戶了解界面到底發(fā)生了什么改變，以及在刷新的過(guò)程中如何留住用戶繼續(xù)等待，避免用戶焦躁的情緒......

菜鳥APP在下拉刷新的過(guò)程中就使用了趣味性的動(dòng)畫方式，首先通過(guò)空中出現(xiàn)的箱子緩緩落到地面，有趣又貼合產(chǎn)品整體的設(shè)計(jì)概念，用生動(dòng)形象的情感化設(shè)計(jì)反饋平臺(tái)行為，為人機(jī)交互增加了趣味性和互動(dòng)性，而且還可以緩解用戶在等待刷新過(guò)程中的焦慮感；其次，這種動(dòng)效可用幫助用戶理解屏幕上發(fā)生了什么，也會(huì)讓用戶有所期待。

（看到這個(gè)動(dòng)效，有沒有似曾相識(shí)的感覺“哇，那邊有空投，馬上要落地了，趕緊上車沖過(guò)去”）

09.「美團(tuán)」匿名差評(píng)-降低商家對(duì)用戶的騷擾

產(chǎn)品體驗(yàn)：

對(duì)美團(tuán)的訂單進(jìn)行評(píng)價(jià)時(shí)，如果選擇差評(píng)（1~2分），系統(tǒng)將自動(dòng)開啟匿名開關(guān)以便于用于匿名評(píng)價(jià)，商家是無(wú)法查詢到匿名用戶信息的。

設(shè)計(jì)思考：

評(píng)價(jià)在商品頁(yè)面展示給所有用戶，對(duì)店鋪商品起著至關(guān)重要的作用。95%的用戶購(gòu)物之前都會(huì)參考評(píng)價(jià)，好評(píng)會(huì)增加用戶購(gòu)買信心；而差評(píng)可能會(huì)讓用戶放棄購(gòu)買這個(gè)商品，甚至認(rèn)為這不僅僅是劣質(zhì)商品，更有劣質(zhì)店鋪的潛在想法。其實(shí)有很多商家都有通過(guò)刷單來(lái)提升店鋪的銷售量和買家秀的質(zhì)量，作假都尚且如此，何況是真實(shí)用戶呢？所以商品一旦有了差評(píng)，不僅會(huì)影響店鋪的整體動(dòng)態(tài)評(píng)分和好評(píng)率，還會(huì)降低店鋪排名，很大程度上會(huì)影響其他用戶判斷及產(chǎn)品的轉(zhuǎn)化率，所以商家一看到差評(píng)就激動(dòng)得馬上打電話和買家溝通改評(píng)價(jià)，低頭認(rèn)錯(cuò)，尤其是新店或者新品有差評(píng)時(shí)，不斷的聯(lián)系（騷擾）會(huì)給消費(fèi)者帶來(lái)一定的困擾。

美團(tuán)APP的訂單評(píng)價(jià)如果選擇差評(píng)，系統(tǒng)將自動(dòng)開啟匿名評(píng)價(jià)，由被動(dòng)變?yōu)橹鲃?dòng)，避免用戶因情緒化或忘記打開匿名，而遭受到商家電話的騷擾，通過(guò)補(bǔ)償被要求修改或刪除差評(píng)。當(dāng)然，如果用戶不想匿名，關(guān)閉開關(guān)即可。匿名評(píng)價(jià)不僅降低用戶的困擾，還能提升商品評(píng)論的真實(shí)性，以協(xié)助平臺(tái)通過(guò)大數(shù)據(jù)對(duì)整體店鋪進(jìn)行排名和評(píng)分展示，減少對(duì)后來(lái)消費(fèi)者的誤導(dǎo)。

（杠精思維“這樣豈不是讓很多鍵盤俠來(lái)惡意給店鋪差評(píng)”。其實(shí)別忘了一個(gè)前提，就是必須要通過(guò)下單支付并等待訂單完結(jié)后才可以進(jìn)行評(píng)價(jià)，畢竟大部分用戶不會(huì)刻意這樣做，任何產(chǎn)品不就是滿足80%以上的用嗎？）

10「釘釘」保護(hù)信息隱私的密聊

產(chǎn)品體驗(yàn)：

從釘釘好友對(duì)話框的右上角進(jìn)入設(shè)置頁(yè)面，點(diǎn)擊進(jìn)入密聊，即可對(duì)聊天信息上一道鎖，保護(hù)信息隱私安全。

設(shè)計(jì)思考：

眾所周知，我們?cè)诹奶斓倪^(guò)程中，信息很容易泄露，有很多窺探用戶隱私的程序，比如進(jìn)入某些網(wǎng)頁(yè)會(huì)提示需要獲取用戶位置、讀取通訊錄等都屬于隱私。尤其是社交類型的應(yīng)用，會(huì)有相關(guān)保護(hù)交流信息的安全措施。如消息撤回、閱后即焚、動(dòng)態(tài)瀏覽權(quán)限等都有一定效果。

釘釘推出的密聊功能就是聊天信息的一道安全鎖。進(jìn)入密聊后，消息禁止復(fù)制和轉(zhuǎn)發(fā)、頭像名字打碼防截屏、不可被錄屏、消息通知不顯示內(nèi)容等，很大強(qiáng)度上保護(hù)交流信息的隱私，給用戶帶來(lái)安全保障。

（有人會(huì)問(wèn)，用微信的人更多，為什么沒有密聊功能呢？從用戶群體和性質(zhì)來(lái)分析，微信主打社交，男女老少通吃，基本上都是嗨聊、打發(fā)時(shí)間或平時(shí)的常規(guī)交流等；而釘釘主打的移動(dòng)辦公，主流的用戶基本趨向于白領(lǐng)類型的群體，一般屬于工作交流，很多聊天都涉及到商業(yè)信息，包括一些文件和商業(yè)機(jī)密，誰(shuí)都清楚商業(yè)機(jī)密泄露的嚴(yán)重性）

結(jié)語(yǔ)：

設(shè)計(jì)師需要養(yǎng)成體驗(yàn)產(chǎn)品的好習(xí)慣并將優(yōu)秀的產(chǎn)品細(xì)節(jié)記錄下來(lái)，加強(qiáng)自己的記憶，不僅能提升自己的語(yǔ)言組織和總結(jié)能力，也為日后輸出優(yōu)秀的作品當(dāng)鋪墊，對(duì)自己的能力提升以及未來(lái)的職業(yè)發(fā)展帶來(lái)便利。

轉(zhuǎn)自：站酷

作者： 大漠飛鷹CYSJ 

藍(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ù)

導(dǎo)語(yǔ)：在面向客戶的設(shè)計(jì)系列文章中，主要分為兩部分。此文為第一部分，講述什么是根據(jù)客戶意愿進(jìn)行設(shè)計(jì)的理論；而在第二部分，作者將會(huì)深入地介紹在電子商務(wù)網(wǎng)站重新設(shè)計(jì)項(xiàng)目中，使用該方法的一個(gè)實(shí)際示例。

作為UX設(shè)計(jì)師，我們喜歡采用“以人為本”的方法，即在解決問(wèn)題過(guò)程的所有步驟中引入人的視角。無(wú)論我們是在與客戶交談，還是與用戶共同創(chuàng)造解決方案，這種思維方式都允許我們推出滿足人類需求和目標(biāo)的產(chǎn)品和服務(wù)。

問(wèn)題是，兩個(gè)人在幾分鐘內(nèi)就能相互理解信息在數(shù)字產(chǎn)品中很難復(fù)制。不管人工智能專家怎么說(shuō)，當(dāng)今存在的任何商業(yè)技術(shù)都無(wú)法替代與另一個(gè)人的對(duì)話。

而且，不管我們?nèi)绾我匀藶橹行模覀內(nèi)匀辉跒楸忍睾拖袼卦O(shè)計(jì)，數(shù)字產(chǎn)品仍然是數(shù)字化的。

然而，作為用戶體驗(yàn)設(shè)計(jì)師，我們的目標(biāo)是設(shè)計(jì)這些數(shù)字場(chǎng)所，以滿足人類的需求、目標(biāo)和動(dòng)機(jī)。我們經(jīng)常問(wèn)自己的問(wèn)題是，我們能讓我們?cè)O(shè)計(jì)的數(shù)字世界更人性化嗎？

我們得出的答案是，受限于媒體的一些限制，我們需要設(shè)計(jì)一種體驗(yàn)，在這種體驗(yàn)中，隨著數(shù)字場(chǎng)所的變化，盡其所能（在沒有聊天機(jī)器人的情況下）讓用戶獲得近似于一次面對(duì)面的對(duì)話。

所以問(wèn)題是：我們能在多大程度上讓我們?cè)O(shè)計(jì)的網(wǎng)站、產(chǎn)品和服務(wù)與用戶進(jìn)行更多的“真實(shí)對(duì)話”？

一、定義用戶和企業(yè)之間的真實(shí)對(duì)話

在數(shù)字/網(wǎng)絡(luò)在線環(huán)境中，用戶和企業(yè)之間的“真實(shí)對(duì)話”是什么？

最初，企業(yè)按部門或業(yè)務(wù)線組織網(wǎng)站導(dǎo)航。如：企業(yè)有這5個(gè)部門，所以這5個(gè)部門將在我們的主頁(yè)頂部。我們的假設(shè)是——而且通常仍然是——網(wǎng)站的業(yè)務(wù)和最終用戶在需求上100%一致。

起初，這是因?yàn)榭蛻粼趯W(xué)習(xí)如何使用互聯(lián)網(wǎng)時(shí)期望值很低。沒有太多的競(jìng)爭(zhēng)性的東西吸引他們的注意力，也沒有一個(gè)公共平臺(tái)來(lái)記錄他們的抱怨。

多年來(lái)，人們的上網(wǎng)的習(xí)慣已經(jīng)發(fā)生了變化。一定程度上，是因?yàn)槲覀児ぷ髯龅暮?，客戶開始期望企業(yè)表現(xiàn)得更“人性化”。

換句話說(shuō)，客戶希望在網(wǎng)站上找到自己所需的任何東西，就像詢問(wèn)店內(nèi)客服代表一樣容易。并且他們希望能夠從網(wǎng)站/應(yīng)用程序上的任何地方滿足他們的需求，而不僅僅在菜單或頂部的主導(dǎo)航欄。

在數(shù)字資產(chǎn)應(yīng)該以更“人性化”的方式表現(xiàn)的預(yù)期背景下，我們將“有機(jī)對(duì)話”定義為客戶和品牌之間的自然流動(dòng)，不論他們遇到了什么數(shù)字媒體。

我們還認(rèn)為，通過(guò)設(shè)計(jì)為基于意圖的導(dǎo)航（我們稱為“為客戶意圖設(shè)計(jì)”）我們可以創(chuàng)建出一種“有機(jī)對(duì)話”。

只有當(dāng)我們了解，記錄和設(shè)計(jì)客戶與數(shù)字媒體交互時(shí)打算做什么，而不是針對(duì)企業(yè)倉(cāng)庫(kù)中的內(nèi)容進(jìn)行設(shè)計(jì)時(shí)，才能實(shí)現(xiàn)這一點(diǎn)。

換句話說(shuō)，我們問(wèn)一個(gè)問(wèn)題：“當(dāng)客戶訪問(wèn)網(wǎng)站或使用產(chǎn)品或服務(wù)時(shí)，打他們的目標(biāo)是完成什么任務(wù)？” 然后，我們?cè)O(shè)計(jì)導(dǎo)航以填寫答案。

二、導(dǎo)航作為有機(jī)對(duì)話的起點(diǎn)

在詳細(xì)介紹如何圍繞客戶意圖設(shè)計(jì)導(dǎo)航結(jié)構(gòu)之前，讓我們先暫停一下，考慮一下導(dǎo)航本身。

導(dǎo)航是數(shù)字財(cái)產(chǎn)里非常重要但被低估的結(jié)構(gòu)?，F(xiàn)在的導(dǎo)航結(jié)構(gòu)通常是頂部導(dǎo)航（即，“首頁(yè)”頂部或菜單中的那些鏈接）和一些帶有相關(guān)內(nèi)容的頁(yè)面導(dǎo)航的組合。

但是，無(wú)處不在的概念往往會(huì)隨著時(shí)間的推移而過(guò)時(shí)，導(dǎo)航需要改進(jìn)的地方還有很多。

如果我們退后一步想想，把導(dǎo)航看作是數(shù)字資產(chǎn)和用戶之間的有機(jī)對(duì)話，那么導(dǎo)航將成為促進(jìn)人類交流的橋梁。在這個(gè)角色中，導(dǎo)航在設(shè)計(jì)中具有新的意義。它成為了數(shù)字資產(chǎn)與其用戶進(jìn)行“有機(jī)對(duì)話”的一種方式。

三、主要思想

考慮到所有這些因素，我們不僅要把導(dǎo)航視為層次結(jié)構(gòu)（即每個(gè)部門/業(yè)務(wù)線），并且要采取進(jìn)一步的措施。結(jié)合全面的層次結(jié)構(gòu)，創(chuàng)建橫向的、基于意圖的導(dǎo)航結(jié)構(gòu)，以促進(jìn)品牌與客戶之間的“有機(jī)對(duì)話”。

我們基于目的的導(dǎo)航想法源于普遍的信息架構(gòu)和 Dan Willis’ Intent Paths 的目的路徑圖。

此圖形表示人們可以用來(lái)瀏覽軟件應(yīng)用程序或網(wǎng)站的路徑。六邊形代表數(shù)字屬性(例如網(wǎng)頁(yè))上的個(gè)位置。位于六邊形中間的人可以使用幾種路徑（即網(wǎng)頁(yè)上的鏈接）來(lái)到達(dá)下一個(gè)位置。

在左邊，我們看到了一個(gè)客戶路徑的例子，它通常定義在軟件項(xiàng)目中。如果你以前從事過(guò)軟件項(xiàng)目，那么你會(huì)認(rèn)為這是一條基本路徑。

基本路徑是假設(shè)用戶有一個(gè)單一的任務(wù)，一旦他們開始執(zhí)行某個(gè)任務(wù)，用戶就會(huì)完全專注于他或她的任務(wù)。在此過(guò)程中，用戶沒有分心、問(wèn)題或想法。

太多的導(dǎo)航是以這種非常線性的方式構(gòu)建的，以確?？蛻舯黄茸咴诨韭窂?。不幸的是，這種方法在現(xiàn)實(shí)生活中沒有起到作用，而且它肯定不能促進(jìn)自然的對(duì)話。

對(duì)于用戶或客戶來(lái)說(shuō)，將路徑選擇限制為=再非常線性的、基本路徑上，感覺更像是業(yè)務(wù)告訴他們應(yīng)該去哪里，而不像業(yè)務(wù)支持他們?nèi)ニ麄兿肴サ牡胤健?

因此，強(qiáng)制的線性導(dǎo)航會(huì)降低用戶的內(nèi)在動(dòng)機(jī)(定義為做一些沒有任何明顯的外部獎(jiǎng)勵(lì)的事情)，減少：

1. 能力，或者是控制和掌握你所處的網(wǎng)絡(luò)環(huán)境及其結(jié)果的愿望；
2. 自主性，或行使自由意志的愿望。

現(xiàn)在，讓我們看看右邊的六角圖形，更真實(shí)的路徑。

在這個(gè)例子中，用戶通過(guò)快樂路徑門，然后決定向右走。很快，他們的環(huán)境發(fā)生了改變，以支持實(shí)現(xiàn)他們的意圖。

通過(guò)獲得權(quán)限，用戶為系統(tǒng)提供了有關(guān)其訪問(wèn)意圖的線索。使用更真實(shí)的路徑，不管他們是否停留在快樂的路徑上，導(dǎo)航路徑都會(huì)變形并根據(jù)其動(dòng)作進(jìn)行自定義，因此不會(huì)有導(dǎo)航“錯(cuò)誤”要恢復(fù)。

考慮到用戶在選擇和培育數(shù)字接口時(shí)所考慮的因素，數(shù)字生態(tài)系統(tǒng)的想法增加了能力和自主性，從而增加了內(nèi)在動(dòng)力。生態(tài)系統(tǒng)變形的能力取決于根據(jù)滿足客戶意圖建模的聲音信息結(jié)構(gòu)。

四、圍繞客戶意圖設(shè)計(jì)導(dǎo)航

如果我們?cè)O(shè)計(jì)的數(shù)字導(dǎo)航結(jié)構(gòu)能夠支持“真實(shí)之路”，那么我們將創(chuàng)造人與人之間的綠色對(duì)話，并使客戶能夠?qū)崿F(xiàn)其對(duì)數(shù)字財(cái)產(chǎn)的計(jì)劃。

反過(guò)來(lái)，這將增加客戶的內(nèi)在動(dòng)力，使他們更加快樂和忠誠(chéng)，并最終使企業(yè)盈利。

此外，橫向的、基于意圖的導(dǎo)航支持：

• 客戶體驗(yàn)：一個(gè)人對(duì)品牌的感知是決定客戶盈利和留住客戶的關(guān)鍵因素，它是資產(chǎn)負(fù)債表上的無(wú)形價(jià)值，這是他們的善意。
• 可查找性：當(dāng)客戶能夠根據(jù)他們的需要，而不是根據(jù)業(yè)務(wù)項(xiàng)目的路徑去找一個(gè)站點(diǎn)或產(chǎn)品時(shí)，查找信息的方便性得到了提高。
• 喜悅：“他們?cè)趺粗牢以谡宜?”這種意想不到的魔力，這是大多數(shù)企業(yè)所缺乏的認(rèn)知，它是今天能否贏得市場(chǎng)中競(jìng)爭(zhēng)的關(guān)鍵因素。當(dāng)你知道某人的意圖并設(shè)計(jì)信息結(jié)構(gòu)來(lái)滿足這些意圖時(shí)，創(chuàng)造這種愉悅感比你想象的要容易得多。
• 客戶忠誠(chéng)度：隨著時(shí)間的推移，有了足夠的重復(fù)、有機(jī)、愉快的互動(dòng)，客戶忠誠(chéng)度——也被稱為“圣杯”——得到了極大的提升，使得SWOT分析中的T失去了它的重要性。當(dāng)公司的價(jià)值觀符合顧客的價(jià)值觀時(shí)，競(jìng)爭(zhēng)就不再是競(jìng)爭(zhēng)。

重要的是要記?。簩?dǎo)航不僅僅是關(guān)于“導(dǎo)航欄”或者“漢堡包菜單”，它也與公司部門、業(yè)務(wù)線或公司政治無(wú)關(guān)。坦率地說(shuō)，這甚至與產(chǎn)品和服務(wù)無(wú)關(guān)。

導(dǎo)航是指服務(wù)于客戶想要在網(wǎng)站或產(chǎn)品上做的事情，或者稱為客戶意向。

通過(guò)設(shè)計(jì)你的信息結(jié)構(gòu)來(lái)滿足客戶的意圖，你正在設(shè)計(jì)一個(gè)有機(jī)流程，您正在幫助客戶滿足基于他們的想法、他們的需求和他們打算做什么的信息，而不是基于您的業(yè)務(wù)結(jié)構(gòu)。

你也沒有強(qiáng)迫用戶去尋找你的層次結(jié)構(gòu)，而是幫助他們根據(jù)他們的需要探索。這允許有機(jī)對(duì)話的出現(xià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ù)

今年受到新冠疫情的影響，線上電子商務(wù)行業(yè)飛速發(fā)展。直播帶貨、社區(qū)團(tuán)購(gòu)等成為新的風(fēng)口，未來(lái)它們還能這么火嗎？本文作者從自身工作經(jīng)驗(yàn)出發(fā)，對(duì)2021年中國(guó)電商市場(chǎng)的趨勢(shì)進(jìn)行預(yù)測(cè)，與你分享。

2020年受新冠疫情影響，線上電子商務(wù)行業(yè)飛速發(fā)展。社區(qū)團(tuán)購(gòu)，C2M趨勢(shì)越來(lái)越明顯，因此預(yù)計(jì)2021年將是中國(guó)電子商務(wù)市場(chǎng)充滿創(chuàng)新和擴(kuò)展的一年。各商家將采用新的舉措和技術(shù)，并希望將業(yè)務(wù)擴(kuò)展到低端城市。以下是2021年中國(guó)電子商務(wù)市場(chǎng)的10大趨勢(shì)預(yù)測(cè)。

1. 直播將成為重要的傳播媒介。
2. 從KOL營(yíng)銷向KOC營(yíng)銷的轉(zhuǎn)變。
3. 短視頻應(yīng)用程序?qū)⒗^續(xù)結(jié)合電子商務(wù)。
4. 隨著主要電子商務(wù)平臺(tái)啟動(dòng)團(tuán)購(gòu)功能，團(tuán)購(gòu)將持續(xù)增長(zhǎng)。
5. 小程序提供新的購(gòu)物平臺(tái)。
6. 快遞運(yùn)輸將更快。
7. 中國(guó)基于數(shù)據(jù)的消費(fèi)者到制造商（C2M）模式將推動(dòng)電子商務(wù)的發(fā)展。
8. 垂直電子商務(wù)網(wǎng)站將獲得吸引力。
9. 跨境電子商務(wù)的格局正在發(fā)生變化。

因此：2021年將是中國(guó)電子商務(wù)市場(chǎng)創(chuàng)新與擴(kuò)展的一年。

• 實(shí)時(shí)流媒體和短視頻為零售商和品牌提供了與消費(fèi)者互動(dòng)和推廣其產(chǎn)品的手段。
• 新興購(gòu)物渠道（包括團(tuán)購(gòu)和小程序）將與主導(dǎo)的電子商務(wù)平臺(tái)一起蓬勃發(fā)展。
• 垂直電子商務(wù)網(wǎng)站將在2021年實(shí)現(xiàn)強(qiáng)勁增長(zhǎng)。
• 零售業(yè)中越來(lái)越多的技術(shù)采用和數(shù)據(jù)使用將使消費(fèi)者對(duì)制造商（C2M）業(yè)務(wù)模型的增長(zhǎng)以及更快的交付服務(wù)成為可能。
• 跨境電子商務(wù)將通過(guò)阿里巴巴收購(gòu)考拉平臺(tái)進(jìn)行整合，從而進(jìn)一步鞏固該公司在在線領(lǐng)域的主導(dǎo)地位。

01 直播將成為更加重要的傳播媒介

實(shí)時(shí)流媒體在2020年對(duì)消費(fèi)者的購(gòu)物行為產(chǎn)生了更大的影響，并將在2021年繼續(xù)在中國(guó)電子商務(wù)市場(chǎng)中發(fā)揮越來(lái)越重要的作用。這種銷售媒介類似于電視購(gòu)物（例如QVC），但在21世紀(jì)得到了升級(jí)。

直播會(huì)話的視頻內(nèi)容實(shí)時(shí)廣播，觀眾可以通過(guò)在線鏈接在觀看視頻的同時(shí)購(gòu)買商品。就像QVC上的導(dǎo)購(gòu)一樣，實(shí)時(shí)流媒體主持人出售各種各樣的產(chǎn)品，從服裝和化妝品到電子產(chǎn)品和汽車。

購(gòu)物者被直播吸引的原因有幾個(gè)：

• 精選的產(chǎn)品： 直播間主持人會(huì)根據(jù)粉絲的喜好精心挑選產(chǎn)品，這不僅吸引了觀眾，而且還提高了轉(zhuǎn)換率。的確，淘寶聲稱它在2018年的直播中擁有65％的轉(zhuǎn)化率。
• 種類繁多的產(chǎn)品：通過(guò)直播，在美容，時(shí)尚和雜貨行業(yè)中推廣各種產(chǎn)品。一些主持人甚至賣電影票和酒店套票。
• 低廉的價(jià)格：淘寶直播主持人經(jīng)常與品牌合作，向粉絲們分發(fā)禮品或產(chǎn)品折扣，直播觀眾通常對(duì)價(jià)格更為敏感。
• 抽獎(jiǎng)：抽獎(jiǎng)是主持人與觀眾互動(dòng)的一種流行方式。例如，著名的中國(guó)主要輿論領(lǐng)袖（KOL）李嘉琪（被稱為“口紅之王”）通常會(huì)通過(guò)舉辦比賽來(lái)贏得戴森吹風(fēng)機(jī)，iPhone11和小米電視等高價(jià)值電子產(chǎn)品，以此來(lái)吸引觀眾參與。
• 數(shù)量有限和限時(shí)優(yōu)惠：直播主持人經(jīng)常采用快速銷售策略，每次銷售僅持續(xù)很短的時(shí)間，可用產(chǎn)品的數(shù)量有限。此外，主持人將定期宣布庫(kù)存余額，以增加觀眾購(gòu)買的緊迫感。
• 克服“選擇悖論”：如果向購(gòu)物者提供了太多選擇，他們可能會(huì)在購(gòu)買商品時(shí)感到困惑，因此什么也沒買。在直播會(huì)話期間與消費(fèi)者互動(dòng)，以幫助消費(fèi)者專注于一種產(chǎn)品并更輕松地做出購(gòu)買決定。

通過(guò)這些策略，直播主持人能夠吸引大量的購(gòu)物者。例如，在2019年雙十一，李佳琦直播了六個(gè)多小時(shí)，吸引了3680萬(wàn)觀眾。

在2019年雙十一期間，超過(guò)100,000個(gè)品牌使用在線直播作為銷售方式。在購(gòu)物狂歡節(jié)的第一個(gè)小時(shí)內(nèi)，在線直播產(chǎn)生的商品總銷量（GMV）超過(guò)了去年在線直播的全日總成交量?？傮w而言，2019年11月11日，GMV達(dá)到200億日元（28.5億美元），約占阿里巴巴2684億日元總銷售額的7.5％。

02 從KOL營(yíng)銷向KOC營(yíng)銷的轉(zhuǎn)變

關(guān)鍵意見消費(fèi)者（KOC）是通過(guò)視頻制作和帖子發(fā)布以分享自己產(chǎn)品使用體驗(yàn)感的普通消費(fèi)者。這種新興趨勢(shì)將為品牌商和零售商提供一種新的傳播途徑，使他們采用有影響力的營(yíng)銷方式，而不是使用KOL。由于包括快手、小紅書和抖音在內(nèi)的一些中國(guó)社交應(yīng)用程序的普及，KOC可以輕松共享其產(chǎn)品評(píng)論，從而影響其他購(gòu)物者的購(gòu)買決定。

KOC越來(lái)越受歡迎的原因之一是：消費(fèi)者越來(lái)越意識(shí)到KOL是由品牌贊助來(lái)提出產(chǎn)品建議的人，因此他們認(rèn)為提供的信息不那么可信和真實(shí)。另一方面，KOC本身就是日常消費(fèi)者，他們更能提供公正的產(chǎn)品評(píng)論。

KOC越來(lái)越受歡迎的部分原因是購(gòu)物者希望從日常消費(fèi)者那里尋求建議。例如，新父母在選擇母嬰產(chǎn)品時(shí)會(huì)尋求他們的朋友和其他有經(jīng)驗(yàn)的父母的建議。通過(guò)的社交應(yīng)用，這些購(gòu)物者現(xiàn)在可以在做出購(gòu)買決定之前，觀看經(jīng)驗(yàn)豐富的KOC的視頻和評(píng)論。

實(shí)際上，KOC營(yíng)銷是「完美日記」?fàn)I銷計(jì)劃的關(guān)鍵組成部分之一，該計(jì)劃已使其成為中國(guó)化妝品品牌之一。在公司成立之初，該品牌就開始與KOC進(jìn)行大規(guī)模合作，這使普通消費(fèi)者覺得該品牌非常受歡迎。

03 短視頻應(yīng)用程序?qū)⒗^續(xù)結(jié)合電子商務(wù)

短視頻應(yīng)用程序已涉足電子商務(wù)市場(chǎng)，我們預(yù)計(jì)這一趨勢(shì)將在2021年繼續(xù)。短視頻的長(zhǎng)度通常為10–20秒，富含了各種各樣的內(nèi)容。據(jù)報(bào)道，一些用戶在短視頻應(yīng)用上日平均花費(fèi)數(shù)小時(shí)。借助人工智能技術(shù)和算法，鼓勵(lì)用戶根據(jù)瀏覽歷史和喜好定制個(gè)性化內(nèi)容，更大提高了用戶對(duì)短視頻的擁護(hù)。

短視頻行業(yè)在中國(guó)蓬勃發(fā)展，截至2019年，中國(guó)的用戶數(shù)量超過(guò)8.2億。據(jù)商業(yè)智能提供商QuestMobile稱，這一總數(shù)同比增長(zhǎng)了32％。在中國(guó)10個(gè)移動(dòng)互聯(lián)網(wǎng)用戶中，平均有7.2個(gè)使用了快手和抖音等短視頻應(yīng)用程序。根據(jù)QuestMobile的數(shù)據(jù)，自2018年以來(lái)，用戶在這些平臺(tái)上花費(fèi)的時(shí)間同比增長(zhǎng)了8.6％，總計(jì)每月超過(guò)22個(gè)小時(shí)。

為了利用這些統(tǒng)計(jì)數(shù)據(jù)和消費(fèi)者行為模式，短視頻應(yīng)用程序已采取步驟以通過(guò)其用戶流量獲利：

• 在2019年10月，抖音添加了一項(xiàng)新的功能，稱為“營(yíng)銷標(biāo)簽”，該功能為內(nèi)容分配了標(biāo)簽，以幫助零售商鎖定想要搜索產(chǎn)品的消費(fèi)者。
• 在2019年11月，TikTok取消了限制，允許所有用戶通過(guò)平臺(tái)銷售產(chǎn)品。以前，社交應(yīng)用程序?qū)τ脩粼L問(wèn)電子商務(wù)功能的要求為3,000個(gè)粉絲。此舉可以幫助擁有32億每日活躍用戶的抖音轉(zhuǎn)變?yōu)榛诙桃曨l的電子商務(wù)網(wǎng)站。

04 隨著主要電子商務(wù)平臺(tái)啟動(dòng)團(tuán)購(gòu)功能，團(tuán)購(gòu)將持續(xù)增長(zhǎng)

到2021年，電商平臺(tái)將大力發(fā)展社區(qū)團(tuán)購(gòu)，如果消費(fèi)者大量購(gòu)買，團(tuán)購(gòu)將以大大降低的價(jià)格提供產(chǎn)品和服務(wù)。這種購(gòu)物模式對(duì)預(yù)算有限的購(gòu)物者特別是二、三線城市的購(gòu)物者具有吸引力。

• 自2015年成立以來(lái)，拼多多經(jīng)歷了爆炸性的增長(zhǎng)。按市值計(jì)算，拼多多目前已成為僅次于阿里巴巴，騰訊，美團(tuán)和京東的第五大互聯(lián)網(wǎng)公司，截至2020年已超過(guò)百度。拼多多的成功在很大程度上應(yīng)歸功于與其團(tuán)購(gòu)模式保持一致，消費(fèi)者與朋友一起購(gòu)物以確保獲得更好的交易。
• 京東于2018年6月在微信上開始了其團(tuán)購(gòu)小程序，并于2019年4月推出了其團(tuán)購(gòu)應(yīng)用程序。蘇寧于2018年7月建立了自己的團(tuán)購(gòu)應(yīng)用程序。
• 阿里巴巴于2010年推出了其快速銷售和團(tuán)購(gòu)平臺(tái)聚劃算。阿里巴巴的Alipay在2018年3月推出了名為拼購(gòu)的功能。

這些用戶在雙十一購(gòu)物狂歡節(jié)中提供了巨大的消費(fèi)能力：聚劃算報(bào)告稱，有576種產(chǎn)品在前兩個(gè)小時(shí)內(nèi)收到了超過(guò)1000萬(wàn)張訂單；京東表示，其40％的新客戶來(lái)自靖西。而拼多多在11月11日的前16分鐘內(nèi)售出了1000多輛汽車。

對(duì)品牌的影響：團(tuán)購(gòu)模式將以較低的價(jià)格提供給想要擴(kuò)展到中國(guó)低端城市的品牌。這些地區(qū)的消費(fèi)者往往對(duì)價(jià)格更為敏感，并且可能會(huì)尋找便宜貨。團(tuán)購(gòu)還為零售商提供了清理庫(kù)存的好機(jī)會(huì)。

05 小程序提供新的購(gòu)物平臺(tái)

小程序可在支付寶，美團(tuán)和微信等應(yīng)用程序中運(yùn)行。他們?yōu)槠放铺峁┝艘粋€(gè)額外的在線平臺(tái)來(lái)銷售其產(chǎn)品，用戶無(wú)需下載單獨(dú)的應(yīng)用程序即可執(zhí)行類似的功能。

品牌可以使用小程序作為大型電子商務(wù)平臺(tái)的補(bǔ)充，而不是替代。小程序用作輔助銷售渠道，可以列出通過(guò)快速促銷快速銷售的需求商品。小程序也可以用作品牌工具——品牌可以創(chuàng)建交互式的視覺程序，以更好地吸引客戶并鼓勵(lì)他們與朋友分享內(nèi)容。微信小程序現(xiàn)在支持增強(qiáng)現(xiàn)實(shí)（AR），它將虛擬圖像疊加到物理世界上。這種類型的第一個(gè)是阿瑪尼的化妝品小程序，該程序允許用戶通過(guò)用戶在手機(jī)上使用的自帶攝像頭來(lái)測(cè)試不同化妝品的外觀，例如各種色調(diào)的唇膏。

資料來(lái)源：阿瑪尼的微信小程序

小程序?yàn)橄Ｍ蛉氲投耸袌?chǎng)的品牌提供了優(yōu)勢(shì)，購(gòu)物者可能不愿下載新的應(yīng)用程序。品牌可以將小程序與團(tuán)購(gòu)結(jié)合起來(lái)，以訪問(wèn)較低線城市的微信用戶。

對(duì)品牌的影響：由于小程序的容量很輕，因此品牌在此投資進(jìn)行營(yíng)銷，客戶參與和電子商務(wù)是一件好事。微信小程序的創(chuàng)造者微信報(bào)告說(shuō)，截至2019年，它已擁有7億用戶，他們每月使用微信小程序42.6次。

06 快遞運(yùn)輸將更快

我們預(yù)計(jì)到2021年，物流提供商將通過(guò)升級(jí)物流基礎(chǔ)設(shè)施和增加保稅倉(cāng)庫(kù)的產(chǎn)能來(lái)提供更快的交貨速度。這樣就可以為更多產(chǎn)品提供當(dāng)天交貨。阿里巴巴的菜鳥計(jì)劃旨在通過(guò)幫助物流公司大規(guī)模部署物聯(lián)網(wǎng)（IoT）解決方案來(lái)數(shù)字化并加速整個(gè)交付過(guò)程。菜鳥計(jì)劃在2020年至2022年之間將1億臺(tái)智能設(shè)備連接到其IoT技術(shù)，包括其倉(cāng)庫(kù)，交付機(jī)器人和算法支持的管理系統(tǒng)。

菜鳥還將通過(guò)最后一公里送貨業(yè)務(wù)“菜鳥郵局”建立10萬(wàn)個(gè)中轉(zhuǎn)站，以增加送貨選擇。菜鳥郵局提供定期送貨，智能儲(chǔ)物柜和送貨上門取件等服務(wù)。

通過(guò)采用5G技術(shù)，物流提供商將能夠提供更，更快的交付。京東物流于2019年北京開設(shè)了首個(gè)由5G供電的智能物流園區(qū)，并使用一代的連接性對(duì)叉車的位置和路線進(jìn)行實(shí)時(shí)監(jiān)控，并提供異常預(yù)警情況。

對(duì)品牌的影響：新技術(shù)將推動(dòng)中國(guó)交付的進(jìn)一步加速。品牌和零售商可以利用諸如智能路由之類的工具，該工具使用機(jī)器學(xué)習(xí)算法來(lái)優(yōu)化交付路線，從而提高交付效率。

07 中國(guó)基于數(shù)據(jù)的消費(fèi)者到制造商（C2M）模式將推動(dòng)電商的發(fā)展。

中國(guó)的消費(fèi)者對(duì)制造商（C2M）模式將成為電子商務(wù)發(fā)展的新動(dòng)力，幫助企業(yè)更好地滿足消費(fèi)者的需求并實(shí)現(xiàn)銷售增長(zhǎng)。

在C2M模式中，工廠變得以消費(fèi)者為中心。零售商和制造商從客戶那里收集數(shù)據(jù)，并使用大數(shù)據(jù)創(chuàng)建客戶資料，分析消費(fèi)特征并計(jì)劃生產(chǎn)。這有助于制造商預(yù)測(cè)產(chǎn)品需求并減少庫(kù)存和供應(yīng)鏈風(fēng)險(xiǎn)，這也使品牌商和零售商受益。

在2019年的光棍節(jié)購(gòu)物節(jié)期間，天貓用戶搶購(gòu)了1.70億個(gè)C2M產(chǎn)品。一家公司報(bào)告說(shuō)，電動(dòng)牙刷的銷量在11月11日達(dá)到了25,000。羅曼利用天貓的消費(fèi)者見識(shí)來(lái)影響牙刷的設(shè)計(jì)，例如牙刷頭的尺寸和牙刷的顏色等。

C2M模型還與中國(guó)對(duì)產(chǎn)品個(gè)性化需求的增長(zhǎng)相吻合，中國(guó)由80年代后的消費(fèi)者（1980-1989年出生的人）和90年代后的消費(fèi)者（1990-1999年出生的人）主導(dǎo)。C2M模式將允許制造商和零售商根據(jù)消費(fèi)者的需求生產(chǎn)產(chǎn)品。

品牌影響：根據(jù)中國(guó)研究公司艾瑞咨詢的數(shù)據(jù)，中國(guó)的C2M市場(chǎng)在2018年達(dá)到175億日元（25億美元），預(yù)計(jì)到2022年將達(dá)到420億日元（60億美元），復(fù)合年增長(zhǎng)率為24.4％。據(jù)Statista估計(jì)，這相當(dāng)于2018年中國(guó)電子商務(wù)總銷售額的0.4％和2022年中國(guó)電子商務(wù)總銷售額的0.6％。品牌可以使用C2M模型更好地滿足消費(fèi)者需求，并提高整個(gè)供應(yīng)鏈的效率。

08 垂直電子商務(wù)網(wǎng)站將獲得吸引力

垂直市場(chǎng)是電子商務(wù)平臺(tái)，在該平臺(tái)上，商品和服務(wù)被出售給特定的客戶群，他們可以通過(guò)在線社區(qū)相互聯(lián)系。我們預(yù)計(jì)此類網(wǎng)站將在2021年蓬勃發(fā)展。Babytree（專注于母嬰產(chǎn)品）和Gegejia（面向女性市場(chǎng)的全球食品進(jìn)口商）等網(wǎng)站和應(yīng)用都是成功的垂直市場(chǎng)的例子。

• 垂直平臺(tái)自然將志趣相投的消費(fèi)者捆綁在一起，并形成了圍繞特定行業(yè)或產(chǎn)品的強(qiáng)大社交社區(qū)。例如，對(duì)于父母和嬰兒市場(chǎng)Babytree，平臺(tái)上的用戶共享嬰兒產(chǎn)品的育兒技巧和建議。
• 垂直平臺(tái)提供了更好的內(nèi)容，可以幫助用戶做出購(gòu)買決定。根據(jù)麥肯錫（Mckinsey）在2019年的一項(xiàng)調(diào)查，中國(guó)三分之二的消費(fèi)者使用他們從垂直網(wǎng)站收集的信息來(lái)影響他們的購(gòu)買決定。

對(duì)品牌的影響：隨著消費(fèi)者對(duì)其購(gòu)買選擇的了解越來(lái)越復(fù)雜，我們希望垂直的電商站點(diǎn)能夠吸引人們的注意力，不僅提供產(chǎn)品知識(shí)，而且還提供志趣相投的客戶可以進(jìn)行交互的社區(qū)。品牌可以與這些平臺(tái)一起有效地將其產(chǎn)品定位到適當(dāng)?shù)南M(fèi)者基礎(chǔ)。

09 跨境電子商務(wù)的格局正在發(fā)生變化

我們預(yù)計(jì)跨境電商的格局將在2020年得到鞏固。阿里巴巴于2019年9月收購(gòu)了中國(guó)當(dāng)時(shí)最大的跨境電商平臺(tái)考拉，并將其整合到天貓。然后，阿里巴巴將占中國(guó)跨境電商市場(chǎng)的50％以上：根據(jù)研究公司iMedia Research的數(shù)據(jù)，網(wǎng)易考拉在2019年上半年占據(jù)了27.7％的市場(chǎng)份額，而阿里巴巴的天貓全球市場(chǎng)則占據(jù)了25.1％的份額。

這項(xiàng)收購(gòu)將增加阿里巴巴接觸需要跨境購(gòu)買商品的中國(guó)購(gòu)物者的機(jī)會(huì)。這也將幫助該公司實(shí)現(xiàn)天貓的商業(yè)模式多樣化，該模式主要涉及邀請(qǐng)外國(guó)品牌在其網(wǎng)站上開設(shè)在線商店——考拉通常直接從外國(guó)商人那里大量購(gòu)買各種商品，然后再轉(zhuǎn)售給中國(guó)消費(fèi)者。首席執(zhí)行官Daniel Zhang表示，阿里巴巴對(duì)考拉的收購(gòu)將通過(guò)阿里巴巴整個(gè)生態(tài)系統(tǒng)的協(xié)同效應(yīng)，進(jìn)一步提升該公司為中國(guó)消費(fèi)者提供的進(jìn)口服務(wù)和體驗(yàn)。

10 2021電商市場(chǎng)趨勢(shì)總結(jié)

實(shí)時(shí)流媒體將在2021年的電子商務(wù)中扮演更重要的角色，因?yàn)樗蛊放坪土闶凵炭梢詫?shí)時(shí)向消費(fèi)者推銷產(chǎn)品，并為消費(fèi)者提供限時(shí)折扣的優(yōu)勢(shì)。

電商的格局將變得更加多樣化，短視頻平臺(tái)和小程序?qū)⒊掷m(xù)開展直播帶貨，為零售商提供諸如AR之類的技術(shù)，以進(jìn)一步與潛在客戶互動(dòng)。電商大廠將繼續(xù)投資，以擴(kuò)大產(chǎn)品范圍，例如阿里巴巴收購(gòu)中國(guó)跨境電子商務(wù)平臺(tái)考拉，并利用技術(shù)為消費(fèi)者提供更無(wú)縫的購(gòu)物體驗(yàn)（例如，使用5G連接簡(jiǎn)化交付流程）。

基于關(guān)系的營(yíng)銷方法將在2021年激增：垂直市場(chǎng)為購(gòu)物社區(qū)提供參與機(jī)會(huì)。團(tuán)購(gòu)將以相對(duì)較低的成本提供產(chǎn)品，從而成為零售商吸引來(lái)自中國(guó)二線城市消費(fèi)者的一種有效方法。

藍(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ù)

還有半個(gè)月，我們就要跟2020年說(shuō)再見了～～ 世界每一天都在按照它的意志變化著，每年也都在影響著設(shè)計(jì)趨勢(shì)的走向，今天我們就花點(diǎn)時(shí)間來(lái)討論一下，2021年可能會(huì)出現(xiàn)的UI/UX的設(shè)計(jì)趨勢(shì)。      

 1. 3D

3D設(shè)計(jì)將有很大可能繼續(xù)延續(xù)，成為2021年的設(shè)計(jì)趨勢(shì)，廣泛應(yīng)用于UI、網(wǎng)站、角色、以及動(dòng)畫設(shè)計(jì)中。

UI設(shè)計(jì)

圖標(biāo)設(shè)計(jì)

角色設(shè)計(jì)

產(chǎn)品細(xì)節(jié)展示

2. 玻璃擬態(tài)

在說(shuō)到Glassmorphism（玻璃擬態(tài)）之前，我們先來(lái)回憶一下另一種擬態(tài)：

在2019年底，設(shè)計(jì)圈突然刮起一陣新擬態(tài)風(fēng)（Neumorphism），最初是烏克蘭設(shè)計(jì)師Alexander Plyuto在Dribbble

發(fā)布的一張?jiān)O(shè)計(jì)作品，引發(fā)大家的激烈討論和爭(zhēng)相模仿。

新擬態(tài)（Neumorphism）的出現(xiàn)，為當(dāng)時(shí)已經(jīng)流行很久的扁平化設(shè)計(jì)開辟了一種新的表現(xiàn)形式，很多人猜測(cè)和議論，此風(fēng)格會(huì)不會(huì)接替「扁平化設(shè)計(jì)」成為新的設(shè)計(jì)主流。

從美學(xué)價(jià)值上來(lái)說(shuō)，新擬態(tài)（Neumorphism）足夠現(xiàn)代、看起來(lái)也頗具有時(shí)尚感、科技感也很足。

不過(guò)隨著時(shí)間的發(fā)展，設(shè)計(jì)師們漸漸發(fā)現(xiàn)，在實(shí)際的應(yīng)用上，新擬物化本身確實(shí)不能算是一種系統(tǒng)全面的設(shè)計(jì)風(fēng)格，因?yàn)樵诤芏嗑唧w的設(shè)計(jì)上，新擬態(tài)比較難以保證可用性和易用性，在層次的表達(dá)上，也有很多局限。

以IOS14和Mac OS Big Sur操作系統(tǒng)發(fā)布為標(biāo)志，一種新的擬物風(fēng)格正在悄悄流行。

Glassmorphism

這種把陰影、透明度以及模糊的背景結(jié)合到一起的設(shè)計(jì)思路，使界面呈現(xiàn)出介于玻璃和塑料板之間的質(zhì)感，被Michal Malewicz稱為Glassmorphism（玻璃擬態(tài)），對(duì)比之前火爆一時(shí)的Neumorphism（新擬態(tài)），這種新趨勢(shì)更加垂直。

這種垂直性讓用戶可以通過(guò)它看到底層的元素，用戶可以確定界面的層次結(jié)構(gòu)和深度。他們可以識(shí)別出哪一層在哪一層之上，就像虛擬玻璃一樣。

玻璃擬態(tài)的設(shè)計(jì)有幾個(gè)特點(diǎn)：

· 透明度（使用背景模糊的磨砂玻璃效果）

· 類似于物體漂浮在太空中的多層方法

· 背景上鮮艷的色彩突出了模糊的透明度

· 半透明物體上的細(xì)微淺色邊框

這種隔著一層玻璃的質(zhì)感，呈現(xiàn)出一種獨(dú)特的「虛實(shí)結(jié)合」的美感

毛玻璃風(fēng)格ICON

值得一提的是，玻璃擬態(tài)與「 macOS Big Sur 和 iOS 14 」在視覺美學(xué)上也保持著高度的一致，尤其是在系統(tǒng)的設(shè)計(jì)美學(xué)邏輯上是統(tǒng)一的。

相比于看起來(lái)高級(jí)但是炫技多于實(shí)用性的「新擬態(tài)」，「玻璃擬物化」這種風(fēng)格在各大操作系統(tǒng)的實(shí)行和驗(yàn)證之下，實(shí)用性更強(qiáng)，視覺美感上也得到目前的操作系統(tǒng)的驗(yàn)證。

不過(guò)作為善變的人類，我們很容易就會(huì)對(duì)流行的趨勢(shì)感到厭倦，所以每隔幾年就會(huì)流行到另一種不同的風(fēng)格。扁平化的風(fēng)格已經(jīng)流行了很長(zhǎng)一段時(shí)間了，或許現(xiàn)在又會(huì)慢慢向色彩更豐富、更立體、更炫麗的風(fēng)格回歸了。

附上那個(gè)引領(lǐng)新擬態(tài)風(fēng)格的烏克蘭設(shè)計(jì)師Alexander Plyuto 的作品

3. 真實(shí)的照片

插圖和3D并不一定適合所有人，有時(shí)候真人和真實(shí)的物品會(huì)對(duì)用戶產(chǎn)生更大的吸引力，讓他們更加感同身受。

網(wǎng)站主頁(yè)

華碩（ASUS）官網(wǎng)

制作美食

航空公司

4. 多彩的顏色搭配

許多設(shè)計(jì)都使用了多色搭配，使得自己的設(shè)計(jì)呈現(xiàn)出神奇、空靈、包羅萬(wàn)象的感覺，而且，鮮艷的色彩更容易區(qū)分和讓人記住。

圖標(biāo)的多色搭配

時(shí)尚移動(dòng)應(yīng)用

色彩應(yīng)用

Ins的圖標(biāo)改版

5. 模糊的彩色背景

使用模糊彩色背景的設(shè)計(jì)看起來(lái)有種特別的溫暖和熱情。

6. 極簡(jiǎn)主義

極簡(jiǎn)主義本身是一種設(shè)計(jì)理念，應(yīng)用到UI或者平面設(shè)計(jì)領(lǐng)域當(dāng)中的時(shí)候，可以理解為：設(shè)計(jì)中的每一個(gè)元素都應(yīng)該是有用的，它簡(jiǎn)單，干凈，漂亮，且實(shí)用。極簡(jiǎn)主義的設(shè)計(jì)易于用戶理解，參與度也高。

大量的留白

元素規(guī)整、有條理和秩序

扁平化的元素

簡(jiǎn)化配色

可讀性較高的字體

極簡(jiǎn)主義的好用之處在于它凸顯關(guān)鍵，為用戶呈現(xiàn)最重要的東西，并且讓用戶關(guān)注最重要的事情。

7.幾何結(jié)構(gòu)

越來(lái)越多的設(shè)計(jì)呈現(xiàn)整合、規(guī)整、有秩序的視覺結(jié)構(gòu)，使用戶增加使用和觀看的樂趣。

視覺設(shè)計(jì)的平面幾何

空間幾何

平面設(shè)計(jì)

8. 野蠻主義

「野蠻主義」一詞，最早出現(xiàn)于1950年，由瑞典建筑師漢斯·阿斯普隆德用以描述烏普薩拉一座名為「Villa G?th」的現(xiàn)代磚房。

顧名思義，野蠻主義的特征十分「簡(jiǎn)單粗暴」，通常都由不斷重復(fù)的元素拼接而成，以筆直的線條和鋒利的棱角居多。對(duì)于大型建筑物而言要么追求奇形怪狀，要么追求嚴(yán)格對(duì)稱，落成的建筑外墻多為毫無(wú)修飾的磚塊和混凝土，整體看起來(lái)異常冰冷和沉重。

而在數(shù)字設(shè)計(jì)中衍生的的「野蠻主義」是一種故意試圖顯得原始、隨意、無(wú)裝飾的樣式?？桃獾牟辉O(shè)計(jì)使這些網(wǎng)站幾乎沒有美感甚至顯得有些簡(jiǎn)陋。

盡管很少有人將這種設(shè)計(jì)風(fēng)格歸類為漂亮,但它對(duì)于某些內(nèi)容類型確實(shí)具有獨(dú)特的表達(dá)魅力。而且具有鮮明大膽的風(fēng)格。

野蠻主義設(shè)計(jì)風(fēng)格短期內(nèi)應(yīng)該不會(huì)深入到UI設(shè)計(jì)中去，更多的會(huì)在網(wǎng)站，或者雜志的設(shè)計(jì)運(yùn)用此種設(shè)計(jì)思想。

9. 簡(jiǎn)化UI/UX流程

此處說(shuō)的簡(jiǎn)化，不是指視覺效果的簡(jiǎn)化。設(shè)計(jì)流程做的太復(fù)雜，不論對(duì)于用戶或者是設(shè)計(jì)師都是不利的。

優(yōu)秀的設(shè)計(jì)師會(huì)兼顧美學(xué)和實(shí)操效果，把流程簡(jiǎn)化到減無(wú)可減，給用戶以絲滑流暢的體驗(yàn)效果。

2021年，設(shè)計(jì)將變得更多元、更新穎，不同風(fēng)格也會(huì)相互碰撞，新技術(shù)也被應(yīng)用在設(shè)計(jì)中。我們作為設(shè)計(jì)師，要更好的理解和跟上新趨勢(shì)的發(fā)展，擴(kuò)大自己知識(shí)的范圍，例如設(shè)計(jì)美學(xué)和心理學(xué)知識(shí)等，就可以知道設(shè)計(jì)趨勢(shì)如此流行的原因和源頭。在此基礎(chǔ)上利用好新知識(shí)和新工具，為更好的服務(wù)大眾時(shí)刻準(zhǔn)備著。

文獻(xiàn)：Diana Malewicz （UX Collective）  素材來(lái)源dribbble，侵權(quán)刪 

今天先跟大家分享到這里，謝謝觀看～ 

轉(zhuǎn)自：站酷

作者： 一個(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ù)

轉(zhuǎn)自：站酷

作者： 設(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ù)

   17年開始進(jìn)行視覺組件庫(kù)的搭建，也出過(guò)一個(gè)B/G端設(shè)計(jì)分析方法的文章總結(jié)，里面從大的方面介紹了組件。后來(lái)看到很多關(guān)于組件庫(kù)的文章，但是大都是從“分子原則”等很寬泛的方法來(lái)講，很少去細(xì)講實(shí)際搭建過(guò)程中會(huì)遇到的問(wèn)題，甚至有些方法深究或者實(shí)際做下去是有問(wèn)題。這里會(huì)全面的寫下sketch搭建組件庫(kù)（或者說(shuō)是視覺規(guī)范）的邏輯，以及容易混淆思路的點(diǎn)。

    為了讓大家容易看完，先簡(jiǎn)短說(shuō)下制作組件庫(kù)的目的，再分三點(diǎn)講搭建方法。

    一 為什么制作組件庫(kù)

    Q1：很多人認(rèn)為table、tabs等通用組件不需要再搭建，很多大廠已經(jīng)出來(lái)規(guī)范，可以復(fù)用，為什么還要單獨(dú)制作自己的

    A1：這些通用組件都是由基礎(chǔ)的樣式粒子：填充色值、描邊大小與色值、圓角大小、文字大小與色值等組成，就拿form表單來(lái)講，不同的描邊、行高、圓角、文字樣式營(yíng)造的感覺也完全不同。

    Q2：搭建后能發(fā)揮什么作用呢

    A2：統(tǒng)一性：避免多人多風(fēng)格的現(xiàn)象，保證所有產(chǎn)品都呈現(xiàn)一致的設(shè)計(jì)語(yǔ)言，新成員加入，也可快速接手工作； 性：改一個(gè)組件，可以使用該組件的全部設(shè)計(jì)圖更改；在現(xiàn)有組件庫(kù)的基礎(chǔ)上，也可通過(guò)修改，生成不同項(xiàng)目的組件庫(kù)。

    Q3：搭建后如何確保大家都能正確使用？

    A3：需要大家了解自身項(xiàng)目組件庫(kù)的搭建邏輯，統(tǒng)一講解遠(yuǎn)程組件庫(kù)使用方法，并有專人定期維護(hù)更新遠(yuǎn)程組件庫(kù)。

    二 組件庫(kù)具體搭建方法

    分三方面說(shuō)明：（一）、內(nèi)容架構(gòu)；（二）、注意點(diǎn)；（三）、遠(yuǎn)程協(xié)作。

    （一）內(nèi)容架構(gòu)

    內(nèi)容架構(gòu)要考慮的是兩方面：一個(gè)是文檔的邏輯，二是組件的邏輯。三哪些制成組件，哪些制作成樣式。

    文檔的邏輯

    如上：點(diǎn)擊創(chuàng)建組件按鈕后，所有的組件都會(huì)出現(xiàn)在“圖層/組件”界面，默認(rèn)的排序方式是軟件自定的，不好分類和查看，除非每次創(chuàng)建后再進(jìn)行挪動(dòng)。第二個(gè)“組件》”這個(gè)位置是不能直接切換看到組件的，只能在左側(cè)看到所有的組件名稱。再加上制作之前，也需要繪制出內(nèi)容，所以我們需要在圖層處建立界面，繪制我們的內(nèi)容。樣式也是如此，只能在“組件》”看到所有的樣式名稱。

所以我們整理出：“樣式”page——所有需要?jiǎng)?chuàng)建樣式的內(nèi)容在此處整理分類繪制；“components組件”page——所有組件在此處分類繪制，再進(jìn)行創(chuàng)建；“l(fā)ayout 布局”page——說(shuō)明系統(tǒng)的布局和響應(yīng)方案；“examples場(chǎng)景模塊”典型場(chǎng)景模塊，“更新日志”page——標(biāo)明每次變動(dòng)，當(dāng)然sketch是自動(dòng)導(dǎo)出“組件”page。另外根據(jù)系統(tǒng)特性，比如數(shù)據(jù)統(tǒng)計(jì)類界面多的情況，可以增加“data visualization數(shù)據(jù)分析”page

    組件的邏輯

    很多組件庫(kù)向左圖一那樣，直接把所有組件擺了出來(lái)，非常凌亂不便使用。再對(duì)比element和antdesign，后者的分類整合地更干凈整齊，涵蓋的全面，整合后的大類別少，分類相對(duì)清晰，可以借鑒，后續(xù)有自己系統(tǒng)常用模塊需要制作成組件，可以單獨(dú)增加一個(gè)分類模塊。當(dāng)然也可以按著自己的邏輯重新整理。

    哪些制成組件，哪些制作成樣式

    先說(shuō)樣式吧：1 文字（也有些會(huì)選擇直接做成組件，但我一般會(huì)制成樣式，感覺更輕量化些）；2顏色——背景色、線條色（分割線、描邊）、主色調(diào)、圖標(biāo)配色、功能色；3 容器（需制作全不同狀態(tài)的容器，內(nèi)容卡片、輸入框、標(biāo)簽等都會(huì)用到）；4投影。指的注意的是，這里的樣式基本涵蓋了所有的基礎(chǔ)樣式，后續(xù)大部分的基礎(chǔ)樣式都要盡量在在此處引用。

    哪些制成組件：本質(zhì)上講就是兩大類，1是icon；2是其它無(wú)法用簡(jiǎn)單樣式的常出現(xiàn)內(nèi)容（也就是上面按“組件邏輯”整理出來(lái)的內(nèi)容”

    何時(shí)需要制成復(fù)合組件：1需要通過(guò)很多基礎(chǔ)樣式切換才能改變狀態(tài)時(shí)候。而且通過(guò)多個(gè)樣式切換不同狀態(tài)，麻煩的地方在于覆蓋層的優(yōu)先級(jí)比較高，即使切換成了同類其他組件，也還是被覆蓋，必須更新

如下：

    我們可以在創(chuàng)建symbol后，在右側(cè)取消內(nèi)部相應(yīng)的樣式覆蓋，然后建立所需的多個(gè)狀態(tài)的平行組件，通過(guò)直接切換不同組件來(lái)切換狀態(tài)。

    2如果該組件有上一級(jí)組件，并且要用到該組件的不同狀態(tài)，就要把該組件的不同狀態(tài)改為組件，不然一層一層改很麻煩。

    （二）、注意點(diǎn)

    制作組件的過(guò)程中雖然按著大的架構(gòu)走，還是很容易混亂或者卡住。以下注意點(diǎn)，可以幫助我們理清關(guān)系。這部分其實(shí)也是我重點(diǎn)想說(shuō)明的內(nèi)容。

    命名

    1無(wú)論是組件還是樣式的名稱，最后一級(jí)相平行的，最好是可以相互切換的狀態(tài)。這樣就可以在右側(cè)屬性中直接切換。

    2 組件只能切組件，樣式只能切樣式?！?也就是說(shuō)定好一個(gè)基本元素是樣式，那么與它平行的切換內(nèi)容也需要是樣式。

    3 如何修改已制好的組件或樣式名稱

    截圖1（圖層》組件page）和2處，選中進(jìn)入后，均可找到對(duì)應(yīng)的修改。修改后其他頁(yè)面已放置好的組件名不被修改，反過(guò)來(lái)，在圖層處其他位置修改，亦不能修改好組件的命名。

    4 sketch里默認(rèn)的分組是通過(guò)命名時(shí)的“/”，要修改組件或樣式加載時(shí)的分組，需在切換到此處，進(jìn)行拖拽。修改后，組件的名稱也會(huì)被修改。

    5 要將一個(gè)元素的組件命名到一處去，理清楚如上的關(guān)系。如果遇到無(wú)法用到的基本元素搭建，需要新的元素，可放到該組的element里（如上圖）

    樣式或組件的修改

    樣式變化后，更新按鈕變?yōu)榭牲c(diǎn)擊，點(diǎn)擊此處可以更改樣式，重設(shè)樣式可以還原

    組件編輯覆蓋層后在右側(cè)更新，如果想修改組件，通過(guò)編輯母版

    響應(yīng)

    要考慮好響應(yīng)方式，每個(gè)組件在此處做好設(shè)定

    （三）、遠(yuǎn)程協(xié)作

    遠(yuǎn)程原因

    如上，只要復(fù)制過(guò)來(lái)的新內(nèi)容中有組件，就會(huì)再下面自己建立出組件，很不方便組件管理，團(tuán)隊(duì)人多時(shí)，容易使組件發(fā)生變化，用遠(yuǎn)程組件能夠做到完全統(tǒng)一。

    遠(yuǎn)程方案

    1 藍(lán)湖

    無(wú)論樣式還是組件添加后，還得自己分組重新整理，組件使用方法，在“藍(lán)湖設(shè)計(jì)規(guī)范云”中找到相應(yīng)的，自己拖過(guò)去用，很麻煩。

    2 語(yǔ)雀

    可以通過(guò)語(yǔ)雀的sketch插件上傳或者下載，加載后便是類似遠(yuǎn)程組件的使用方法。

    3 sketch clould
|

    單獨(dú)通過(guò)線下傳library文件加載使用，比較不容易統(tǒng)一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帳戶云能力創(chuàng)建的 Sketch的云端設(shè)計(jì)庫(kù)，使用前需要對(duì)其進(jìn)行設(shè)置。使用時(shí)，打開 Sketch 左上角第一個(gè)菜單的 Preference，選擇 Libraries 卡片，將本地 iCloud Drive 中的規(guī)范文件拖拽進(jìn)這個(gè)區(qū)域，然后關(guān)閉該窗口。

    綜上所述，我們常選sketch cloud或者 語(yǔ)雀的kitchen插件來(lái)進(jìn)行遠(yuǎn)程使用。另外會(huì)線下發(fā)送整個(gè)文件，方便整體復(fù)用一些組件和example里的頁(yè)面。

    以上是我目前關(guān)于視覺組件庫(kù)制作的一些經(jīng)驗(yàn)和個(gè)人看法，歡迎留言交流～

轉(zhuǎn)自：站酷

作者： younglion0610 

藍(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ì)系統(tǒng)重要嗎？那目前手里的設(shè)計(jì)系統(tǒng)是在靈活運(yùn)用？還是落灰、擺設(shè)？你對(duì)設(shè)計(jì)系統(tǒng)理解有多深？它在你的設(shè)計(jì)中有多大的用處？節(jié)省時(shí)間、減少出錯(cuò)率、視覺一致性還是僅僅覺得就應(yīng)該有個(gè)規(guī)范？那怎么避免設(shè)計(jì)系統(tǒng)帶來(lái)了統(tǒng)一和便利，但同時(shí)失去了變化和新鮮感？

設(shè)計(jì)系統(tǒng)是今年來(lái)熱門的話題之一，想要帶來(lái)良好的用戶體驗(yàn)，設(shè)計(jì)系統(tǒng)就是其中重要的一環(huán)，那它和設(shè)計(jì)規(guī)范、設(shè)計(jì)模式、設(shè)計(jì)語(yǔ)言、設(shè)計(jì)原則有什么關(guān)系？

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)用一套連貫組織、相互關(guān)聯(lián)的模式和共享實(shí)踐以達(dá)到數(shù)字產(chǎn)品的目的。簡(jiǎn)單的說(shuō)就是一系列可重用的組件和它們的使用指導(dǎo)文檔，在制作這些組件的過(guò)程中會(huì)考慮到公司的設(shè)計(jì)理論和品牌化(顏色，文案，字體等等)，所以它們也通常包括在設(shè)計(jì)系統(tǒng)里。設(shè)計(jì)系統(tǒng)為公司的各種產(chǎn)品提供了基石和指導(dǎo)。是一種動(dòng)態(tài)的，是需要維護(hù)與改進(jìn)的。

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

設(shè)計(jì)模式是一種經(jīng)常性，可重復(fù)使用的解決方案，可用于解決設(shè)計(jì)問(wèn)題，我們經(jīng)常會(huì)說(shuō)解決整個(gè)方案我們要運(yùn)用什么樣的設(shè)計(jì)模式。

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

設(shè)計(jì)語(yǔ)言是把設(shè)計(jì)作為一種“溝通的方式”，用于在特定的場(chǎng)景中進(jìn)行內(nèi)容與信息的傳遞。設(shè)計(jì)語(yǔ)言可以理解為由品牌基因+設(shè)計(jì)規(guī)范+多場(chǎng)景應(yīng)用三大要素組成的一套設(shè)計(jì)應(yīng)用規(guī)范系統(tǒng)。

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

設(shè)計(jì)原則可以理解為設(shè)計(jì)語(yǔ)言中的語(yǔ)法，是構(gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)的起點(diǎn)，用于傳達(dá)品牌主張或設(shè)計(jì)理念，它將指引業(yè)務(wù)設(shè)計(jì)執(zhí)行的方向。

比如Airbnb的設(shè)計(jì)原則可以簡(jiǎn)單歸納為幾點(diǎn)：

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

設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師來(lái)說(shuō)并不陌生，日常工作中也經(jīng)常使用。圍繞在某種風(fēng)格或者大型設(shè)計(jì)項(xiàng)目下形成可視化、數(shù)據(jù)化的標(biāo)準(zhǔn)，針對(duì)相對(duì)獨(dú)立的體系建立的統(tǒng)一遵守條款。統(tǒng)一的設(shè)計(jì)規(guī)范不僅有利于設(shè)計(jì)師提升效率，同樣可以幫助產(chǎn)品、開發(fā)、運(yùn)營(yíng)、測(cè)試等相關(guān)人員對(duì)產(chǎn)品的體驗(yàn)有更好的認(rèn)知。

那是不是只要制作一套設(shè)計(jì)系統(tǒng)，在團(tuán)隊(duì)進(jìn)行擴(kuò)散就可以了？那平臺(tái)的統(tǒng)一性就解決了？

我曾經(jīng)加入一個(gè)設(shè)計(jì)團(tuán)隊(duì)，看到平臺(tái)風(fēng)格不統(tǒng)一，當(dāng)時(shí)很自豪很堅(jiān)定的制定了一套平臺(tái)設(shè)計(jì)規(guī)范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當(dāng)時(shí)一心想著有這個(gè)規(guī)范寶典在手，平臺(tái)統(tǒng)一性指日可待，沒想到這個(gè)規(guī)范就成了我自己的規(guī)范，僅僅是我在自嗨。

為什么已經(jīng)建立設(shè)計(jì)規(guī)范了，還是沒能解決平臺(tái)統(tǒng)一的問(wèn)題？這里延伸出另一個(gè)問(wèn)題，為什么其他設(shè)計(jì)成員不用？協(xié)作不起來(lái)？是它不夠好？我嚴(yán)格按照標(biāo)準(zhǔn)來(lái)，為什么推不起來(lái)？

那要追溯到設(shè)計(jì)體系的目的是什么？它的意義何在？

1-建立統(tǒng)一的設(shè)計(jì)文化體系

2-保證多團(tuán)隊(duì)成員共同參與的項(xiàng)目視覺一致性

3-提升品牌調(diào)性

4-節(jié)省與研發(fā)人員的溝通成本

5-將元素組件化，提升設(shè)計(jì)師和程序員的工作效率

6-可以幫助設(shè)計(jì)人員有針對(duì)性地對(duì)視覺元素進(jìn)行優(yōu)化和迭代。

7-在用戶層方面，對(duì)某產(chǎn)品的體驗(yàn)一致性得到落實(shí)

8-減少設(shè)計(jì)出錯(cuò)率

……

整體可以歸納為

1-對(duì)內(nèi)統(tǒng)一，對(duì)外區(qū)分

2-管理與協(xié)作變得方便

3-建立設(shè)計(jì)文化體系，建立品牌感

4-減少、優(yōu)化錯(cuò)誤出現(xiàn)

對(duì)內(nèi)統(tǒng)一，對(duì)外區(qū)分

規(guī)范定義的基礎(chǔ)是圍繞某種風(fēng)格或者設(shè)計(jì)文化。對(duì)內(nèi)統(tǒng)一，一個(gè)品牌的設(shè)計(jì)風(fēng)格，是要有別于同類競(jìng)品的，比如阿里云、騰訊云，他們各自都有自己的品牌調(diào)性。在對(duì)外上兩個(gè)品牌是做到了對(duì)外區(qū)分，一眼可以識(shí)別出來(lái)。他們有各自規(guī)定的一套設(shè)計(jì)語(yǔ)言、設(shè)計(jì)規(guī)范。這樣才能在協(xié)作上達(dá)到對(duì)內(nèi)統(tǒng)一。我們都不希望在阿里云的網(wǎng)站，各個(gè)頁(yè)面的設(shè)計(jì)差異明顯，像跳轉(zhuǎn)到其他平臺(tái)。而這些針對(duì)用戶層一致性都是非常重要的體驗(yàn)。

管理與協(xié)作變得方便

for Designer:

多個(gè)設(shè)計(jì)成員協(xié)同一個(gè)產(chǎn)品，迭代與更改規(guī)范都能更快的同步。可以試著想象一下一個(gè)幾十人的設(shè)計(jì)團(tuán)隊(duì)，如果沒有統(tǒng)一設(shè)計(jì)規(guī)范，那網(wǎng)站會(huì)變成什么樣子。

for Developer:

在UI還原中，設(shè)計(jì)需要經(jīng)常與前端進(jìn)行溝通“這里這里這樣做，那里那里這樣做”，對(duì)于每一塊的設(shè)計(jì)，前端都會(huì)詢問(wèn)你，這樣大大增加了溝通的成本，把時(shí)間花在了無(wú)效的事情上。

設(shè)計(jì)規(guī)范統(tǒng)一后，減少了無(wú)效溝通，可以更專注創(chuàng)新方向，比如：要改變預(yù)先設(shè)定的一個(gè)輔助色，無(wú)論是設(shè)計(jì)還是開發(fā)，修改組件的顏色，全局使用到這個(gè)組件的地方都會(huì)改動(dòng)，大大節(jié)省了設(shè)計(jì)時(shí)間。

建立設(shè)計(jì)文化體系，突出品牌感

做品牌的時(shí)候需要制定一整套VI規(guī)范手冊(cè)，那平臺(tái)同樣也需要統(tǒng)一的品牌感。建立統(tǒng)一的文化體系可以讓用戶無(wú)論處在哪個(gè)頁(yè)面都會(huì)有熟悉感、掌握感。統(tǒng)一的元素、視覺風(fēng)格、交互方式，更加突出該品牌應(yīng)有的調(diào)性。無(wú)論你在聽網(wǎng)易云音樂還是QQ音樂，看到界面都可以立馬識(shí)別出這是哪個(gè)app。

你能分出哪個(gè)是網(wǎng)易云播放界面，哪個(gè)是QQ音樂播放界面嗎？

減少、優(yōu)化錯(cuò)誤出現(xiàn)

設(shè)計(jì)經(jīng)常碰到設(shè)計(jì)完后需要修改一個(gè)點(diǎn)，然后就要找出設(shè)計(jì)稿中所有相同的地方進(jìn)行修改，這樣很容易漏，統(tǒng)一規(guī)范后只需要修改組件即可。盡可能的避免錯(cuò)誤的出現(xiàn)。

設(shè)計(jì)規(guī)范的意義這么強(qiáng)大，對(duì)網(wǎng)站及品牌有至關(guān)重要的作用，那為什么還會(huì)出現(xiàn)沒有應(yīng)用起來(lái)的情況呢？

很多設(shè)計(jì)師會(huì)說(shuō)：“設(shè)計(jì)不就應(yīng)該是變化多端的嗎？就是要表現(xiàn)創(chuàng)新力呀？制定了設(shè)計(jì)規(guī)范是不是就失去了變化和新鮮感？那設(shè)計(jì)還有什么意義？開發(fā)都可以做設(shè)計(jì)的事情了?！?

這里就要看對(duì)設(shè)計(jì)規(guī)范理解的深度—設(shè)計(jì)規(guī)范是分層次的，平臺(tái)規(guī)范歸根結(jié)底是為了確保產(chǎn)品的易用性，是為了減少用戶的學(xué)習(xí)成本

對(duì)無(wú)法拆分的底層基礎(chǔ)元素做嚴(yán)格規(guī)定

底層基礎(chǔ)元素也可以說(shuō)是全局樣式，比如色彩規(guī)定、文字大小、icon線/面、botton體系等一些基礎(chǔ)的元素，給用戶一種統(tǒng)一的視覺形象，在跨界面、跨端、跨系統(tǒng)間有熟悉感，從而潛移默化地進(jìn)行品牌的滲透。

增強(qiáng)界面設(shè)計(jì)的靈活性和可維護(hù)性

對(duì)組合自由度較低的基礎(chǔ)組件做精簡(jiǎn)的樣式變化限定，對(duì)組合自由度較高的復(fù)合組件減少過(guò)于局限的限定條件，考慮各種拓展的可能性。組件在制定過(guò)程中要考慮多種狀態(tài)，多種可能。

設(shè)計(jì)規(guī)范隨著業(yè)務(wù)的發(fā)展或技術(shù)的變革終究是會(huì)過(guò)時(shí)的，是需要迭代的。

設(shè)計(jì)規(guī)范是需要迭代的，而不是我只要制作出來(lái)就放那了，就像女生買衣服，去年的衣服已經(jīng)配不上今年的我，嘻嘻

~~希望我每天都有新衣服穿，做夢(mèng)中～

對(duì)設(shè)計(jì)體系的誤解

設(shè)計(jì)體系最大的重要性毋庸置疑就是規(guī)范節(jié)省人力，設(shè)計(jì)師可以更多的時(shí)間去發(fā)揮創(chuàng)造性。

誤解1-設(shè)計(jì)系統(tǒng)限制了設(shè)計(jì)師的創(chuàng)造力

很多設(shè)計(jì)師覺得統(tǒng)一了規(guī)范，那我的創(chuàng)造性從哪發(fā)揮，界面都長(zhǎng)的差不多。在設(shè)計(jì)中，設(shè)計(jì)目的是解決商業(yè)或用戶的問(wèn)題，并不僅僅是為了有創(chuàng)意而引入新的樣式或交互方式。

有了設(shè)計(jì)體系，統(tǒng)一了整體品牌風(fēng)格，不用把精力花費(fèi)在比如調(diào)整間距、對(duì)齊元素等瑣碎的事情上，更多的回去關(guān)注更全局的設(shè)計(jì)策略。

誤解2-設(shè)計(jì)系統(tǒng)只關(guān)乎設(shè)計(jì)，可由設(shè)計(jì)師獨(dú)立完成

它僅僅是設(shè)計(jì)軟件上可復(fù)用的組件，所以可由設(shè)計(jì)師獨(dú)立完成，這種想法是錯(cuò)誤的，是需要來(lái)自不同角色支持和參與的，這里包括前端、品牌、動(dòng)態(tài)設(shè)計(jì)、 用戶研究等。

誤解3-設(shè)計(jì)系統(tǒng)是一勞永逸的

有時(shí)候會(huì)想只要完成了規(guī)范就大功告成了，其實(shí)不然，對(duì)待設(shè)計(jì)規(guī)范就像對(duì)待產(chǎn)品一樣，是需要維護(hù)和改進(jìn)的，包括兩個(gè)方面：一種是對(duì)內(nèi)部使用的開發(fā)以及同事，一種是對(duì)用戶的，應(yīng)該定期收集用戶以及同事的反饋，確保及時(shí)更新迭代。

誤解4-設(shè)計(jì)系統(tǒng)的重要性

1-提高設(shè)計(jì)開發(fā)效率，最顯而易見的好處就是，組件庫(kù)的可復(fù)用性。

比如像表格、彈窗、顏色等。一些基礎(chǔ)的組件只需要做一次。

2-確保設(shè)計(jì)一致性，為用戶提供連貫一致的用戶體驗(yàn)，設(shè)計(jì)的一致性讓用戶能縮短的學(xué)習(xí)使用產(chǎn)品的周期，讓他們能夠預(yù)見他們的操作所帶來(lái)的改變。

網(wǎng)站統(tǒng)一的視覺規(guī)范、交互體驗(yàn)，會(huì)讓用戶產(chǎn)生一種掌控感。

3-設(shè)計(jì)系統(tǒng)促進(jìn)了公司內(nèi)部的合作和交流，一個(gè)成功的設(shè)計(jì)系統(tǒng)是需要跨功能團(tuán)隊(duì)參與，設(shè)計(jì)系統(tǒng)因此促進(jìn)了公司內(nèi)部不同職位的合作和交流，這種文化的建立也會(huì)幫助公司更有效地推出新的產(chǎn)品或服務(wù)。

那我們要如何去執(zhí)行呢？

已經(jīng)了解了規(guī)范的目的/意義，那該怎么去著手呢？

• 對(duì)于設(shè)計(jì)規(guī)范的意義要同步給設(shè)計(jì)人員，提高認(rèn)知，這是一件提率的規(guī)范，規(guī)范必須落地。

在制定規(guī)范前期，不應(yīng)該是一個(gè)人規(guī)定這個(gè)規(guī)范，設(shè)計(jì)團(tuán)隊(duì)的成員應(yīng)積極參與，前期先把規(guī)范的基調(diào)定好，人人都參與進(jìn)來(lái)了，規(guī)范也就能更好的運(yùn)營(yíng)，當(dāng)時(shí)我就是一個(gè)人定了規(guī)范，只是單純把規(guī)范發(fā)給其他設(shè)計(jì)人員，他們沒有參與，自然不會(huì)使用規(guī)范，對(duì)里面的設(shè)計(jì)元素沒有加深理解。

主導(dǎo)人

這個(gè)主導(dǎo)人建議讓全隊(duì)專業(yè)能力最強(qiáng)的人輔助產(chǎn)品戰(zhàn)略分析進(jìn)行。有全局把控能力，這樣能把紕漏降到。

• 應(yīng)用規(guī)范里的界面、交互規(guī)范必須得遵循

大家一般說(shuō)的設(shè)計(jì)規(guī)范是界面的視覺規(guī)范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關(guān)系，可以歸納規(guī)范其實(shí)可以包含兩大類，一類是視覺規(guī)范，一類是交互規(guī)范。

視覺規(guī)范可以給用戶傳達(dá)統(tǒng)一的品牌形象，確保視覺一致性。后期的設(shè)計(jì)元素須復(fù)合規(guī)范的原則。

交互規(guī)范可以減少用戶的學(xué)習(xí)成本，讓用戶有歸屬感。交互規(guī)范在制定的過(guò)程中，需要寫好交互規(guī)則與條件，不然后期維護(hù)會(huì)混亂。像蓋房子一樣，地基都沒打穩(wěn)的話，整個(gè)樓都是偏的。

那在使用規(guī)范時(shí)，一定要遵循規(guī)范里的要求進(jìn)行應(yīng)用，否則會(huì)亂套，不僅起不到統(tǒng)一的品牌風(fēng)格，反倒會(huì)給人一種一團(tuán)糟、完全不專業(yè)的感覺。體驗(yàn)好是一個(gè)產(chǎn)品的競(jìng)爭(zhēng)力。

設(shè)計(jì)規(guī)范的節(jié)點(diǎn)

節(jié)點(diǎn)和公司的進(jìn)度搭邊，看當(dāng)前的產(chǎn)品是應(yīng)該先獨(dú)立風(fēng)格還是先統(tǒng)一基礎(chǔ)規(guī)范。

1-固定的設(shè)計(jì)風(fēng)格規(guī)范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時(shí)間保持的相對(duì)長(zhǎng)久。這些設(shè)計(jì)風(fēng)格在前期就完成了獨(dú)立與其他風(fēng)格的區(qū)分。后期再進(jìn)行拓展。這種比較適規(guī)模比較大的團(tuán)隊(duì)，定好基調(diào)，不會(huì)走偏。

2-不斷優(yōu)化的設(shè)計(jì)規(guī)范，根據(jù)公司的節(jié)奏，有些產(chǎn)品目前比較迫切的是需要界面統(tǒng)一性、交互統(tǒng)一性?；A(chǔ)做完以后，進(jìn)而考慮產(chǎn)品固定風(fēng)格。這種比較適合小團(tuán)隊(duì)協(xié)作?？梢噪S時(shí)調(diào)整。

建立規(guī)范

·制作原理—利用粒子構(gòu)成的原理與三維解構(gòu)

利用粒子構(gòu)成的原理與三維解構(gòu)，一個(gè)組件被科學(xué)的三維解析后由粒子再構(gòu)成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構(gòu)成元素都可變，高度靈活

·具體過(guò)程

建立單個(gè)元素——設(shè)立簡(jiǎn)單組件——構(gòu)成復(fù)雜組件——形成模板——最后組成頁(yè)面。

·元素是工具庫(kù)的必要部分

并不是每個(gè)時(shí)刻都能夠直接使用完整的組件，元素是我們工具庫(kù)必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。

·組件的命名規(guī)范化

規(guī)范組件命名，方便查找、方便協(xié)作。

協(xié)作

一鍵導(dǎo)出/同步組件到Sketch模板。

標(biāo)注方面，目前我們團(tuán)隊(duì)使用的是藍(lán)湖私有化。

那是不是所有的公司都需要?jiǎng)?chuàng)建設(shè)計(jì)系統(tǒng)？

一般情況下，公司有不同的產(chǎn)品線，且都需要長(zhǎng)期的開發(fā)與迭代。

公司中，越來(lái)越多的設(shè)計(jì)師加入，設(shè)計(jì)風(fēng)格需要統(tǒng)一。

那建立一套設(shè)計(jì)體系會(huì)面臨什么挑戰(zhàn)？

設(shè)計(jì)體系里面包含了設(shè)計(jì)語(yǔ)言、設(shè)計(jì)規(guī)范，需要與前端、品牌、動(dòng)態(tài)設(shè)計(jì)、 用戶研究等溝通，還是需要迭代優(yōu)化的，這是非常繁瑣耗時(shí)的項(xiàng)目，初期會(huì)非常的艱難，當(dāng)設(shè)計(jì)師開始做組件時(shí)，也是非常耗時(shí)的工作，需要考慮不同場(chǎng)景下的使用情況以及設(shè)計(jì)的延展性，都需要投入大量的設(shè)計(jì)人力。

聊了這么多，大家對(duì)設(shè)計(jì)系統(tǒng)有了一定了解，建立好設(shè)計(jì)系統(tǒng)可以事半功倍，以此提升效率才能提升UED價(jià)值。

思考點(diǎn)：

1-對(duì)于設(shè)計(jì)團(tuán)隊(duì)只有一兩個(gè)人的時(shí)候，是否需要建立設(shè)計(jì)系統(tǒng)？

2-你是否愿意把時(shí)間花費(fèi)在前期建立設(shè)計(jì)系統(tǒng)，后期更多時(shí)間用于創(chuàng)造性地東西？

3-建立設(shè)計(jì)系統(tǒng)前很枯燥，你會(huì)怎么堅(jiān)持，怎么讓設(shè)計(jì)體系價(jià)值更大化？