<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          2021年中國電商市場的9大趨勢預測

          資深UI設計者

          今年受到新冠疫情的影響,線上電子商務行業飛速發展。直播帶貨、社區團購等成為新的風口,未來它們還能這么火嗎?本文作者從自身工作經驗出發,對2021年中國電商市場的趨勢進行預測,與你分享。

          2020年受新冠疫情影響,線上電子商務行業飛速發展。社區團購,C2M趨勢越來越明顯,因此預計2021年將是中國電子商務市場充滿創新和擴展的一年。各商家將采用新的舉措和技術,并希望將業務擴展到低端城市。以下是2021年中國電子商務市場的10大趨勢預測。

          1. 直播將成為重要的傳播媒介。
          2. 從KOL營銷向KOC營銷的轉變。
          3. 短視頻應用程序將繼續結合電子商務。
          4. 隨著主要電子商務平臺啟動團購功能,團購將持續增長。
          5. 小程序提供新的購物平臺。
          6. 快遞運輸將更快。
          7. 中國基于數據的消費者到制造商(C2M)模式將推動電子商務的發展。
          8. 垂直電子商務網站將獲得吸引力。
          9. 跨境電子商務的格局正在發生變化。

          因此:2021年將是中國電子商務市場創新與擴展的一年。

          • 實時流媒體和短視頻為零售商和品牌提供了與消費者互動和推廣其產品的手段。
          • 新興購物渠道(包括團購和小程序)將與主導的電子商務平臺一起蓬勃發展。
          • 垂直電子商務網站將在2021年實現強勁增長。
          • 零售業中越來越多的技術采用和數據使用將使消費者對制造商(C2M)業務模型的增長以及更快的交付服務成為可能。
          • 跨境電子商務將通過阿里巴巴收購考拉平臺進行整合,從而進一步鞏固該公司在在線領域的主導地位。

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

          實時流媒體在2020年對消費者的購物行為產生了更大的影響,并將在2021年繼續在中國電子商務市場中發揮越來越重要的作用。這種銷售媒介類似于電視購物(例如QVC),但在21世紀得到了升級。

          直播會話的視頻內容實時廣播,觀眾可以通過在線鏈接在觀看視頻的同時購買商品。就像QVC上的導購一樣,實時流媒體主持人出售各種各樣的產品,從服裝和化妝品到電子產品和汽車。

          購物者被直播吸引的原因有幾個:

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

          通過這些策略,直播主持人能夠吸引大量的購物者。例如,在2019年雙十一,李佳琦直播了六個多小時,吸引了3680萬觀眾。

          在2019年雙十一期間,超過100,000個品牌使用在線直播作為銷售方式。在購物狂歡節的第一個小時內,在線直播產生的商品總銷量(GMV)超過了去年在線直播的全日總成交量??傮w而言,2019年11月11日,GMV達到200億日元(28.5億美元),約占阿里巴巴2684億日元總銷售額的7.5%。

          02 從KOL營銷向KOC營銷的轉變

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

          KOC越來越受歡迎的原因之一是:消費者越來越意識到KOL是由品牌贊助來提出產品建議的人,因此他們認為提供的信息不那么可信和真實。另一方面,KOC本身就是日常消費者,他們更能提供公正的產品評論。

          KOC越來越受歡迎的部分原因是購物者希望從日常消費者那里尋求建議。例如,新父母在選擇母嬰產品時會尋求他們的朋友和其他有經驗的父母的建議。通過的社交應用,這些購物者現在可以在做出購買決定之前,觀看經驗豐富的KOC的視頻和評論。

          實際上,KOC營銷是「完美日記」營銷計劃的關鍵組成部分之一,該計劃已使其成為中國化妝品品牌之一。在公司成立之初,該品牌就開始與KOC進行大規模合作,這使普通消費者覺得該品牌非常受歡迎。

          03 短視頻應用程序將繼續結合電子商務

          短視頻應用程序已涉足電子商務市場,我們預計這一趨勢將在2021年繼續。短視頻的長度通常為10–20秒,富含了各種各樣的內容。據報道,一些用戶在短視頻應用上日平均花費數小時。借助人工智能技術和算法,鼓勵用戶根據瀏覽歷史和喜好定制個性化內容,更大提高了用戶對短視頻的擁護。

          短視頻行業在中國蓬勃發展,截至2019年,中國的用戶數量超過8.2億。據商業智能提供商QuestMobile稱,這一總數同比增長了32%。在中國10個移動互聯網用戶中,平均有7.2個使用了快手和抖音等短視頻應用程序。根據QuestMobile的數據,自2018年以來,用戶在這些平臺上花費的時間同比增長了8.6%,總計每月超過22個小時。

          為了利用這些統計數據和消費者行為模式,短視頻應用程序已采取步驟以通過其用戶流量獲利:

          • 在2019年10月,抖音添加了一項新的功能,稱為“營銷標簽”,該功能為內容分配了標簽,以幫助零售商鎖定想要搜索產品的消費者。
          • 在2019年11月,TikTok取消了限制,允許所有用戶通過平臺銷售產品。以前,社交應用程序對用戶訪問電子商務功能的要求為3,000個粉絲。此舉可以幫助擁有32億每日活躍用戶的抖音轉變為基于短視頻的電子商務網站。

          04 隨著主要電子商務平臺啟動團購功能,團購將持續增長

          到2021年,電商平臺將大力發展社區團購,如果消費者大量購買,團購將以大大降低的價格提供產品和服務。這種購物模式對預算有限的購物者特別是二、三線城市的購物者具有吸引力。

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

          這些用戶在雙十一購物狂歡節中提供了巨大的消費能力:聚劃算報告稱,有576種產品在前兩個小時內收到了超過1000萬張訂單;京東表示,其40%的新客戶來自靖西。而拼多多在11月11日的前16分鐘內售出了1000多輛汽車。

          對品牌的影響:團購模式將以較低的價格提供給想要擴展到中國低端城市的品牌。這些地區的消費者往往對價格更為敏感,并且可能會尋找便宜貨。團購還為零售商提供了清理庫存的好機會。

          05 小程序提供新的購物平臺

          小程序可在支付寶,美團和微信等應用程序中運行。他們為品牌提供了一個額外的在線平臺來銷售其產品,用戶無需下載單獨的應用程序即可執行類似的功能。

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

          資料來源:阿瑪尼的微信小程序

          小程序為希望打入低端市場的品牌提供了優勢,購物者可能不愿下載新的應用程序。品牌可以將小程序與團購結合起來,以訪問較低線城市的微信用戶。

          對品牌的影響:由于小程序的容量很輕,因此品牌在此投資進行營銷,客戶參與和電子商務是一件好事。微信小程序的創造者微信報告說,截至2019年,它已擁有7億用戶,他們每月使用微信小程序42.6次。

          06 快遞運輸將更快

          我們預計到2021年,物流提供商將通過升級物流基礎設施和增加保稅倉庫的產能來提供更快的交貨速度。這樣就可以為更多產品提供當天交貨。阿里巴巴的菜鳥計劃旨在通過幫助物流公司大規模部署物聯網(IoT)解決方案來數字化并加速整個交付過程。菜鳥計劃在2020年至2022年之間將1億臺智能設備連接到其IoT技術,包括其倉庫,交付機器人和算法支持的管理系統。

          菜鳥還將通過最后一公里送貨業務“菜鳥郵局”建立10萬個中轉站,以增加送貨選擇。菜鳥郵局提供定期送貨,智能儲物柜和送貨上門取件等服務。

          通過采用5G技術,物流提供商將能夠提供更,更快的交付。京東物流于2019年北京開設了首個由5G供電的智能物流園區,并使用一代的連接性對叉車的位置和路線進行實時監控,并提供異常預警情況。

          對品牌的影響:新技術將推動中國交付的進一步加速。品牌和零售商可以利用諸如智能路由之類的工具,該工具使用機器學習算法來優化交付路線,從而提高交付效率。

          07 中國基于數據的消費者到制造商(C2M)模式將推動電商的發展。

          中國的消費者對制造商(C2M)模式將成為電子商務發展的新動力,幫助企業更好地滿足消費者的需求并實現銷售增長。

          在C2M模式中,工廠變得以消費者為中心。零售商和制造商從客戶那里收集數據,并使用大數據創建客戶資料,分析消費特征并計劃生產。這有助于制造商預測產品需求并減少庫存和供應鏈風險,這也使品牌商和零售商受益。

          在2019年的光棍節購物節期間,天貓用戶搶購了1.70億個C2M產品。一家公司報告說,電動牙刷的銷量在11月11日達到了25,000。羅曼利用天貓的消費者見識來影響牙刷的設計,例如牙刷頭的尺寸和牙刷的顏色等。

          C2M模型還與中國對產品個性化需求的增長相吻合,中國由80年代后的消費者(1980-1989年出生的人)和90年代后的消費者(1990-1999年出生的人)主導。C2M模式將允許制造商和零售商根據消費者的需求生產產品。

          品牌影響:根據中國研究公司艾瑞咨詢的數據,中國的C2M市場在2018年達到175億日元(25億美元),預計到2022年將達到420億日元(60億美元),復合年增長率為24.4%。據Statista估計,這相當于2018年中國電子商務總銷售額的0.4%和2022年中國電子商務總銷售額的0.6%。品牌可以使用C2M模型更好地滿足消費者需求,并提高整個供應鏈的效率。

          08 垂直電子商務網站將獲得吸引力

          垂直市場是電子商務平臺,在該平臺上,商品和服務被出售給特定的客戶群,他們可以通過在線社區相互聯系。我們預計此類網站將在2021年蓬勃發展。Babytree(專注于母嬰產品)和Gegejia(面向女性市場的全球食品進口商)等網站和應用都是成功的垂直市場的例子。

          • 垂直平臺自然將志趣相投的消費者捆綁在一起,并形成了圍繞特定行業或產品的強大社交社區。例如,對于父母和嬰兒市場Babytree,平臺上的用戶共享嬰兒產品的育兒技巧和建議。
          • 垂直平臺提供了更好的內容,可以幫助用戶做出購買決定。根據麥肯錫(Mckinsey)在2019年的一項調查,中國三分之二的消費者使用他們從垂直網站收集的信息來影響他們的購買決定。

          對品牌的影響:隨著消費者對其購買選擇的了解越來越復雜,我們希望垂直的電商站點能夠吸引人們的注意力,不僅提供產品知識,而且還提供志趣相投的客戶可以進行交互的社區。品牌可以與這些平臺一起有效地將其產品定位到適當的消費者基礎。

          09 跨境電子商務的格局正在發生變化

          我們預計跨境電商的格局將在2020年得到鞏固。阿里巴巴于2019年9月收購了中國當時最大的跨境電商平臺考拉,并將其整合到天貓。然后,阿里巴巴將占中國跨境電商市場的50%以上:根據研究公司iMedia Research的數據,網易考拉在2019年上半年占據了27.7%的市場份額,而阿里巴巴的天貓全球市場則占據了25.1%的份額。

          這項收購將增加阿里巴巴接觸需要跨境購買商品的中國購物者的機會。這也將幫助該公司實現天貓的商業模式多樣化,該模式主要涉及邀請外國品牌在其網站上開設在線商店——考拉通常直接從外國商人那里大量購買各種商品,然后再轉售給中國消費者。首席執行官Daniel Zhang表示,阿里巴巴對考拉的收購將通過阿里巴巴整個生態系統的協同效應,進一步提升該公司為中國消費者提供的進口服務和體驗。

          10 2021電商市場趨勢總結

          實時流媒體將在2021年的電子商務中扮演更重要的角色,因為它使品牌和零售商可以實時向消費者推銷產品,并為消費者提供限時折扣的優勢。

          電商的格局將變得更加多樣化,短視頻平臺和小程序將持續開展直播帶貨,為零售商提供諸如AR之類的技術,以進一步與潛在客戶互動。電商大廠將繼續投資,以擴大產品范圍,例如阿里巴巴收購中國跨境電子商務平臺考拉,并利用技術為消費者提供更無縫的購物體驗(例如,使用5G連接簡化交付流程)。

          基于關系的營銷方法將在2021年激增:垂直市場為購物社區提供參與機會。團購將以相對較低的成本提供產品,從而成為零售商吸引來自中國二線城市消費者的一種有效方法。


          文章來源:人人都是產品經理   作者:阿木木

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          解讀2021年9種UI/UX設計趨勢

          前端達人

          還有半個月,我們就要跟2020年說再見了~~ 世界每一天都在按照它的意志變化著,每年也都在影響著設計趨勢的走向,今天我們就花點時間來討論一下,2021年可能會出現的UI/UX的設計趨勢。      



          undefined



           1. 3D


          3D設計將有很大可能繼續延續,成為2021年的設計趨勢,廣泛應用于UI、網站、角色、以及動畫設計中。



          UI設計



          圖標設計



          角色設計




          產品細節展示





          2. 玻璃擬態


          在說到Glassmorphism(玻璃擬態)之前,我們先來回憶一下另一種擬態:


          在2019年底,設計圈突然刮起一陣新擬態風(Neumorphism),最初是烏克蘭設計師Alexander Plyuto在Dribbble

          發布的一張設計作品,引發大家的激烈討論和爭相模仿。



          新擬態(Neumorphism)的出現,為當時已經流行很久的扁平化設計開辟了一種新的表現形式,很多人猜測和議論,此風格會不會接替「扁平化設計」成為新的設計主流。


          從美學價值上來說,新擬態(Neumorphism)足夠現代、看起來也頗具有時尚感、科技感也很足。


          不過隨著時間的發展,設計師們漸漸發現,在實際的應用上,新擬物化本身確實不能算是一種系統全面的設計風格,因為在很多具體的設計上,新擬態比較難以保證可用性和易用性,在層次的表達上,也有很多局限。




          以IOS14和Mac OS Big Sur操作系統發布為標志,一種新的擬物風格正在悄悄流行。



          Glassmorphism


          這種把陰影、透明度以及模糊的背景結合到一起的設計思路,使界面呈現出介于玻璃和塑料板之間的質感,被Michal Malewicz稱為Glassmorphism(玻璃擬態),對比之前火爆一時的Neumorphism(新擬態),這種新趨勢更加垂直。


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



          玻璃擬態的設計有幾個特點:


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

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

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

          · 半透明物體上的細微淺色邊框





          這種隔著一層玻璃的質感,呈現出一種獨特的「虛實結合」的美感




          毛玻璃風格ICON


          值得一提的是,玻璃擬態與「 macOS Big Sur 和 iOS 14 」在視覺美學上也保持著高度的一致,尤其是在系統的設計美學邏輯上是統一的。


          相比于看起來高級但是炫技多于實用性的「新擬態」,「玻璃擬物化」這種風格在各大操作系統的實行和驗證之下,實用性更強,視覺美感上也得到目前的操作系統的驗證。


          不過作為善變的人類,我們很容易就會對流行的趨勢感到厭倦,所以每隔幾年就會流行到另一種不同的風格。扁平化的風格已經流行了很長一段時間了,或許現在又會慢慢向色彩更豐富、更立體、更炫麗的風格回歸了。




          附上那個引領新擬態風格的烏克蘭設計師Alexander Plyuto 的作品






          3. 真實的照片


          插圖和3D并不一定適合所有人,有時候真人和真實的物品會對用戶產生更大的吸引力,讓他們更加感同身受。




          網站主頁



          華碩(ASUS)官網




          制作美食



          航空公司




          4. 多彩的顏色搭配


          許多設計都使用了多色搭配,使得自己的設計呈現出神奇、空靈、包羅萬象的感覺,而且,鮮艷的色彩更容易區分和讓人記住。




          圖標的多色搭配





          時尚移動應用




          色彩應用



          Ins的圖標改版



          5. 模糊的彩色背景


          使用模糊彩色背景的設計看起來有種特別的溫暖和熱情。












          6. 極簡主義


          極簡主義本身是一種設計理念,應用到UI或者平面設計領域當中的時候,可以理解為:設計中的每一個元素都應該是有用的,它簡單,干凈,漂亮,且實用。極簡主義的設計易于用戶理解,參與度也高。




          大量的留白






          元素規整、有條理和秩序




          扁平化的元素




          簡化配色





          可讀性較高的字體


          極簡主義的好用之處在于它凸顯關鍵,為用戶呈現最重要的東西,并且讓用戶關注最重要的事情。






          7.幾何結構


          越來越多的設計呈現整合、規整、有秩序的視覺結構,使用戶增加使用和觀看的樂趣。



          視覺設計的平面幾何





          空間幾何





          平面設計



          8. 野蠻主義


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



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


          而在數字設計中衍生的的「野蠻主義」是一種故意試圖顯得原始、隨意、無裝飾的樣式。刻意的不設計使這些網站幾乎沒有美感甚至顯得有些簡陋。


          盡管很少有人將這種設計風格歸類為漂亮,但它對于某些內容類型確實具有獨特的表達魅力。而且具有鮮明大膽的風格。



           

          野蠻主義設計風格短期內應該不會深入到UI設計中去,更多的會在網站,或者雜志的設計運用此種設計思想。





          9. 簡化UI/UX流程


          此處說的簡化,不是指視覺效果的簡化。設計流程做的太復雜,不論對于用戶或者是設計師都是不利的。


          優秀的設計師會兼顧美學和實操效果,把流程簡化到減無可減,給用戶以絲滑流暢的體驗效果。






          2021年,設計將變得更多元、更新穎,不同風格也會相互碰撞,新技術也被應用在設計中。我們作為設計師,要更好的理解和跟上新趨勢的發展,擴大自己知識的范圍,例如設計美學和心理學知識等,就可以知道設計趨勢如此流行的原因和源頭。在此基礎上利用好新知識和新工具,為更好的服務大眾時刻準備著。

          文獻:Diana Malewicz (UX Collective)  素材來源dribbble,侵權刪 




          今天先跟大家分享到這里,謝謝觀看~ 

          轉自:站酷

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          UX設計之動效終極指南

          前端達人

          這文章拜讀過多次,細是真的細,借鑒了很多動畫行業的原則。文章比較長,翻譯過來,同大家一起學習探討。

          如今,我們很難通過界面動效給人留下深刻的印象或者帶來驚喜。它展示了屏幕之間的交互,解釋了如何使用該應用程序,或者只是簡單地吸引用戶的注意。在瀏覽相關動效的文章時,我發現幾乎所有的文章都只描述了某些特定的例子或一般通用型的動效知識,但是我沒有見過一篇文章都可以清晰,確切全面地描述所有動效規則。正如此,在本文中,我不會加入任何新的東西,我只想在一個地方列出所有主要的動效原理和規則,這樣其他想要開始制作界面動效的設計師就不必查找額外的動效知識。


          01動效的持續時間和速度

          當元素更改其狀態或位置時,動效的持續時間應該適當慢到用戶可以注意到,但同時應足夠快,以免引起用戶等待。

          控制好動效的持續時間。既不要太快,也不要慢地讓用戶打哈欠


          眾多研究結果表明:界面動效的最佳速度在200到500毫秒之間。這個時間是基于人腦的特有機制而得出的結論。任何短于100毫秒的動效都是瞬時的,根本不會被人腦識別。而動效時間超過1秒將傳遞一種遲鈍感,因此對用戶來說會產生無聊厭煩感。

          動效持續時間建議


          在移動設備上,Material Design Guidelines還建議將動效的持續時間限制為200-300毫秒。至于平板電腦,持續時間應延長30%,大約為400-450毫秒。原因很簡單:屏幕尺寸更大,物體在改變位置時需要經過更長的路徑。因此,在可穿戴設備上,持續時間應縮短30%,大約為150-200 ms,因為在較小的屏幕上,運動路徑更短。

          針對不同屏幕尺寸,動效時間也需要做出調整


          網頁動效的處理方式則有所不同。由于我們習慣于在瀏覽器中迅速打開網頁,因此我們希望也能在不同狀態之間快速轉換。因此,網頁動效的持續時間應比移動設備短約2倍-大概在150-200毫秒之間。否則,用戶將不可避免地認為計算機死機或網絡連接出現問題。


          但是,如果您要在網站上創建裝飾性動效或試圖吸引用戶對某些元素的關注,則無需考慮這些規則。在這些情況下,動效時間可以更長一些。

          電腦大屏幕并不等于緩慢的動效!


          您需要記住,無論在哪個顯示設備,動效的持續時間不僅僅取決于動效元素行進距離,還取決于動效元素的大小。較小的動效元素或具簡單小幅度動效應適當縮短持續時間(加快運動速度)。反之,具有較大且復雜元素的動效則需要加長持續時間。


          在相同大小的移動物體中,第一個停下的是運動距離最短的物體。(注:作者此處指例1、例2)

          小物體與大物體相比移動速度較慢,因為它們(注:此處作者指大物體)會產生較大的形變量/偏移量。

          動效的持續時間取決于物體的大小和運動距離


          當物體碰撞時,碰撞的能量必須根據物理定律在它們之間平均分配。因此,最好避免使用彈跳效果。僅在有意義的特殊情況下使用它。

          避免使用彈跳效果,因為它會分散注意力


          物體的運動應該清晰且銳利的,因此不要使用運動模糊(是的,說的就是AE用戶,這次不可以)。即使在現代移動設備上也很難實現該效果,并且運動模糊不適用于界面 。

          不要在動效中使用運動模糊效果


          清單列表(新聞卡片,電子郵件列表等)之間應該有很短的延遲時間。每次出現新元素應持續20到25 ms。界面元素出現的速度較慢可能會惹惱用戶。

          表單列表的動效應持續20–25毫秒


          緩動

          緩動使得物體的運動更加自然。這是在《生活的幻覺:迪斯尼動畫》書中詳盡描述一個重要的動效原則,這本書由兩個迪斯尼主動畫師-奧利·約翰斯頓和弗蘭克·托馬斯編寫。


          為了使動效看起來不顯得那么生硬和機械感,動效物體應以一定的加速度或減速度移動,就像物理現實世界中的所有物體一樣。

          與純線性動效相比,具有緩動效果的動效看起來更自然


          線性動效

          不受任何物理力影響的物體將線性移動,即以恒定速度移動。正因為如此,人眼看起來會覺得非常不自然和生硬。


          所有動效應用程序都使用動效曲線。我將解釋如何閱讀它們以及它們的含義。下圖曲線顯示物體位置(y軸)一段時間(x軸)間隔內如何變化。在下圖中,運動都是線性的,因此物體在同一時間行進相同的距離。

          直線運動曲線

          舉個例子,線性動效曲線可以用在物體改變顏色或者透明度的時候。大致來講,物體不改變位置時,我們可以使用線性動效曲線。

          緩入或加速曲線

          我們可以在曲線上看到,在開始時物體的位置變化緩慢,而速度則逐漸增加。這意味著物體正在以一定的加速度運動。

          加速度曲線


          當物體以全速飛出屏幕時,應使用此曲線。這些可以是系統通知,也可以只是界面卡片。但是請記住,僅當物體永遠離開屏幕且我們無法調用或喚起它們時,才應使用此類曲線。

          將卡扔出屏幕的加速度曲線


          動效曲線有助于恰當地表達情緒。在下面的示例中,我們可以看到所有物體的移動持續時間和距離是相同的,但是即使曲線上的微小變化也可以影響動效情緒。


          當然,通過更改動效曲線,可以使物體更好的模擬真實物理世界。

          持續時間和距離相同,但動效情緒不同

          緩出或減速曲線

          它與緩入曲線相反,因此物體會快速移動很長的距離,然后緩慢降低速度,直到最終停止。

          減速曲線 


          當元素移入屏幕時應使用這種類型的動效曲線-它以全速在屏幕上運動,然后逐漸變慢直到完全停止。這也可以應用于從屏幕外部卡片或者物體飛入屏幕的動效。

          移入動效的減速曲線

          緩進緩出或標準曲線

          該曲線使物體在開始時獲得速度,然后將其緩慢降低回零。此類曲線是界面動效中最常使用的東小區現。當您不知道使用哪種類型的運動時,請使用標準曲線。

          標準曲線


          根據Material Design Guidenlines,最好使用非對稱曲線使機芯看起來更自然和逼真。我們應當強調曲線的末端即后半段動效,所以減速的時間要比加速時間要長。在這種情況下,用戶將更加關注元素的后半段,從而更容易關注元素的新狀態。

          標準的對稱和非對稱曲線之間的區別


          當物體從屏幕的一側移動到另一側時,應當使用緩入緩出功能。在這種情況下,可以避免用戶過于關注物體的運動。

          卡片橫跨屏幕運動的非對稱動效曲線


          當物體從屏幕消失,用戶也可以隨時喚起消失的物體回到原先的位置時,這類運動的動效曲線(注:抽屜導航的收起動效)應當使用非對稱動效曲線。這類的動效包括抽屜導航動效等。

          抽屜導航收起時的非對稱動效曲線


          這些案例還可以得出一個很多初學者都容易忽略的基本原則,即起始(出現)動效不等于結束(消失)動效曲線。就以抽屜導航為例,抽屜導航是以減速曲線出現以標準曲線消失的。


          此外,根據Google Material Design的說法,物體出現的動效時間應更長一些,以引起更多關注。

          側面菜單的出現和消失分別通過減速度和標準曲線實現


          Cubic-bezier函數(注:貝塞爾函數)是用來描述運動曲線的。之所以名稱叫做Cubic,是因為它是基于四個點。

          貝塞爾圖形圖形上定義了兩個坐標點,第一個點坐標是(0,0),第二個點坐標是(1,1)


          基于這些我們只需要描述圖形上另外兩個點,通過函數(x1,y1,x2,y2)的四個參數描述這另外兩個點,前兩個參數是第一個點的x軸y軸,后兩個是第二個點的x軸y軸。


          為了便于您定義貝塞爾曲線,建議您使用easings.net和cubic-bezier.com網站。第一個包含最常用曲線參數,您可以將其參數復制到交互原型工具中使用。第二個網站可以實時預覽不同參數的運動效果。

          各種貝塞爾線以及對應的參數

          動效編排

          就像芭蕾中的舞蹈編排一樣,動效編排大致意思就是在動效中以流式的方向來引導用戶的注意力。

          動效編排有兩種——平等互動和從屬互動。

          平等互動

          平等互動意味著物體都要按照同一特定規則出現。


          在這種情況下,所有卡片會像是流水一樣,一個方向從上到下引導用戶的注意。如果我們不遵循同一特定規則,那么用戶的注意力將會分散。同時所有元素立馬就會看起來變得糟糕。

          應該用一個流式方向引導用戶注意力


          對于表格視圖,情況會更復雜。在表格里,應該按照對角線的方式來引導用戶的關注點,所以一個接一個地展示元素是一個糟糕的選擇。逐個顯示每個元素會使動效時間過長,并且用戶的關注路線會過于曲折,這是錯誤的。

          卡片表格視圖動效的對角線呈現

          從屬互動

          從屬交互意味著我們有一個吸引所有用戶注意力的主體,而所有其他元素都從屬于它。這種動效使得畫面有了秩序感,并讓人們更為關注核心內容。


          如果不這么做,用戶會不知道關注哪一塊內容,用戶的注意力會被分散。因此,如果有多個要設置動效的元素,則需要明確它們的運動順序并確定主體,并且盡量減少同一時間運動的元素。

          明確動效中的主體,其他對象保持跟隨。不然用戶會不知道關注哪一塊,從而分散注意力。


          根據Materal Design,當物體不按照自身比例改變大小時,它們應沿著弧線而不是直線移動。它有助于使運動更自然。

          物體非同比形變時,應沿弧線運動


          當物體按自身比例形變時,物體應當按照直線路徑運動。因為直線運動的實現比較簡單,因此通常會忽略物體非自身比例形變時應該采用弧線運動的規則。反觀現有的實際應用案例,直線運動確實占大多數。

          同比形變時的直線路徑


          曲線運動可以通過兩種方式實現:第一種稱為“ 垂直出”——水平開始,垂直結束;第二個(水平出)——垂直開始,水平結束。


          物體曲線運動路徑必須與界面滾動的主軸線重合(注:這里可以理解為曲線運動結束時的切線,與界面滾動的方向重合)。例如,在下一張圖像上,我們可以上下垂直地滾動界面,因此卡片應當以“ 垂直出”的方式展開——首先移動到右側,然后向下運動。收起的運動方式則相反——即卡首先垂直上升,然后水平移動回到初始位置。

          如果物體的運動路徑彼此相交,則它們將無法穿過彼此。物體應當加速或者減速給其他物體留下運動空間?;蛘咭部梢允褂梦矬w推動其他物體。為什么會這樣?因為我們大腦總是把這些物體看做是在同一水平面。

          在運動過程中,物體不應相互穿過,而應給其他物體預留運動空間


          在另一種情況下,運動物體可以飛越其他物體。但是再不能直接穿過物體或交匯穿過。為什么?由于我們認為界面中的元素都是遵循顯示物理規律的,因此現實世界中沒有任何固體物體能夠做到這些。

          物體可以飛越其他物體

          結論

          因此,我們總結所有上述動效規則和原則,界面中的動效應映射的是我們熟知的顯示物理世界中道的運動——摩擦,加速度等。模仿物體在現實中的運動行為,我們可以構建一個用戶容易理解熟悉的界面動效。


          如果動效使用得當,則它既不會太引人注目,也不會不會分散用戶的注意。反之,您要么需要弱化動效,要么甚至將其刪除。動效不應降低用戶操作速度或阻止用戶完成任務。


          但是請不要忘記,動效不僅僅是一門科學更是一門藝術,因此最好提前對用戶進行試驗和測試。



          轉自:站酷

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          實用的組件庫詳細制作邏輯和注意點

          前端達人

             17年開始進行視覺組件庫的搭建,也出過一個B/G端設計分析方法的文章總結,里面從大的方面介紹了組件。后來看到很多關于組件庫的文章,但是大都是從“分子原則”等很寬泛的方法來講,很少去細講實際搭建過程中會遇到的問題,甚至有些方法深究或者實際做下去是有問題。這里會全面的寫下sketch搭建組件庫(或者說是視覺規范)的邏輯,以及容易混淆思路的點。

                

              為了讓大家容易看完,先簡短說下制作組件庫的目的,再分三點講搭建方法。


              一 為什么制作組件庫

           

              Q1:很多人認為table、tabs等通用組件不需要再搭建,很多大廠已經出來規范,可以復用,為什么還要單獨制作自己的

              A1:這些通用組件都是由基礎的樣式粒子:填充色值、描邊大小與色值、圓角大小、文字大小與色值等組成,就拿form表單來講,不同的描邊、行高、圓角、文字樣式營造的感覺也完全不同。


              Q2:搭建后能發揮什么作用呢

              A2:統一性:避免多人多風格的現象,保證所有產品都呈現一致的設計語言,新成員加入,也可快速接手工作; 性:改一個組件,可以使用該組件的全部設計圖更改;在現有組件庫的基礎上,也可通過修改,生成不同項目的組件庫。

           

              Q3:搭建后如何確保大家都能正確使用?

              A3:需要大家了解自身項目組件庫的搭建邏輯,統一講解遠程組件庫使用方法,并有專人定期維護更新遠程組件庫。


              二 組件庫具體搭建方法

           

              分三方面說明:(一)、內容架構;(二)、注意點;(三)、遠程協作。

           

              (一)內容架構


              內容架構要考慮的是兩方面:一個是文檔的邏輯,二是組件的邏輯。三哪些制成組件,哪些制作成樣式。

           

           

           

              文檔的邏輯

           

           

              如上:點擊創建組件按鈕后,所有的組件都會出現在“圖層/組件”界面,默認的排序方式是軟件自定的,不好分類和查看,除非每次創建后再進行挪動。第二個“組件》”這個位置是不能直接切換看到組件的,只能在左側看到所有的組件名稱。再加上制作之前,也需要繪制出內容,所以我們需要在圖層處建立界面,繪制我們的內容。樣式也是如此,只能在“組件》”看到所有的樣式名稱。

          所以我們整理出:“樣式”page——所有需要創建樣式的內容在此處整理分類繪制;“components組件”page——所有組件在此處分類繪制,再進行創建;“layout 布局”page——說明系統的布局和響應方案;“examples場景模塊”典型場景模塊,“更新日志”page——標明每次變動,當然sketch是自動導出“組件”page。另外根據系統特性,比如數據統計類界面多的情況,可以增加“data visualization數據分析”page

           

              組件的邏輯

           

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

           

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


           

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

           

              哪些制成組件:本質上講就是兩大類,1是icon;2是其它無法用簡單樣式的常出現內容(也就是上面按“組件邏輯”整理出來的內容”

              何時需要制成復合組件:1需要通過很多基礎樣式切換才能改變狀態時候。而且通過多個樣式切換不同狀態,麻煩的地方在于覆蓋層的優先級比較高,即使切換成了同類其他組件,也還是被覆蓋,必須更新

          如下:

           

              我們可以在創建symbol后,在右側取消內部相應的樣式覆蓋,然后建立所需的多個狀態的平行組件,通過直接切換不同組件來切換狀態。

           

              2如果該組件有上一級組件,并且要用到該組件的不同狀態,就要把該組件的不同狀態改為組件,不然一層一層改很麻煩。

           

              (二)、注意點

           

              制作組件的過程中雖然按著大的架構走,還是很容易混亂或者卡住。以下注意點,可以幫助我們理清關系。這部分其實也是我重點想說明的內容。

              命名


           

           

              1無論是組件還是樣式的名稱,最后一級相平行的,最好是可以相互切換的狀態。這樣就可以在右側屬性中直接切換。

              2 組件只能切組件,樣式只能切樣式?!?也就是說定好一個基本元素是樣式,那么與它平行的切換內容也需要是樣式。

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


           

              截圖1(圖層》組件page)和2處,選中進入后,均可找到對應的修改。修改后其他頁面已放置好的組件名不被修改,反過來,在圖層處其他位置修改,亦不能修改好組件的命名。

              4 sketch里默認的分組是通過命名時的“/”,要修改組件或樣式加載時的分組,需在切換到此處,進行拖拽。修改后,組件的名稱也會被修改。

           



           

              5 要將一個元素的組件命名到一處去,理清楚如上的關系。如果遇到無法用到的基本元素搭建,需要新的元素,可放到該組的element里(如上圖)

           

              樣式或組件的修改

           

           

              樣式變化后,更新按鈕變為可點擊,點擊此處可以更改樣式,重設樣式可以還原

              組件編輯覆蓋層后在右側更新,如果想修改組件,通過編輯母版

           

              響應

           

              要考慮好響應方式,每個組件在此處做好設定

           

              (三)、遠程協作

           

              遠程原因


           

              如上,只要復制過來的新內容中有組件,就會再下面自己建立出組件,很不方便組件管理,團隊人多時,容易使組件發生變化,用遠程組件能夠做到完全統一。

           

              遠程方案


              1 藍湖



           

              無論樣式還是組件添加后,還得自己分組重新整理,組件使用方法,在“藍湖設計規范云”中找到相應的,自己拖過去用,很麻煩。

           

              2 語雀

              可以通過語雀的sketch插件上傳或者下載,加載后便是類似遠程組件的使用方法。

           

              3 sketch clould
          |

           



              單獨通過線下傳library文件加載使用,比較不容易統一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帳戶云能力創建的 Sketch的云端設計庫,使用前需要對其進行設置。使用時,打開 Sketch 左上角第一個菜單的 Preference,選擇 Libraries 卡片,將本地 iCloud Drive 中的規范文件拖拽進這個區域,然后關閉該窗口。

           

              綜上所述,我們常選sketch cloud或者 語雀的kitchen插件來進行遠程使用。另外會線下發送整個文件,方便整體復用一些組件和example里的頁面。

              

              以上是我目前關于視覺組件庫制作的一些經驗和個人看法,歡迎留言交流~


          轉自:站酷

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          深度解析設計系統

          ui設計分享達人

          你覺得設計系統重要嗎?那目前手里的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范?那怎么避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感?


          設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規范、設計模式、設計語言、設計原則有什么關系?


          設計系統

          設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。


          設計模式

          設計模式是一種經常性,可重復使用的解決方案,可用于解決設計問題,我們經常會說解決整個方案我們要運用什么樣的設計模式。


          設計語言

          設計語言是把設計作為一種“溝通的方式”,用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。


          設計原則

          設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。


          比如Airbnb的設計原則可以簡單歸納為幾點:

          設計規范

          設計規范對于設計師來說并不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。


          那是不是只要制作一套設計系統,在團隊進行擴散就可以了?那平臺的統一性就解決了?


          我曾經加入一個設計團隊,看到平臺風格不統一,當時很自豪很堅定的制定了一套平臺設計規范,從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平臺統一性指日可待,沒想到這個規范就成了我自己的規范,僅僅是我在自嗨。

          為什么已經建立設計規范了,還是沒能解決平臺統一的問題?這里延伸出另一個問題,為什么其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什么推不起來?


          那要追溯到設計體系的目的是什么?它的意義何在?

          1-建立統一的設計文化體系

          2-保證多團隊成員共同參與的項目視覺一致性

          3-提升品牌調性

          4-節省與研發人員的溝通成本

          5-將元素組件化,提升設計師和程序員的工作效率

          6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。

          7-在用戶層方面,對某產品的體驗一致性得到落實

          8-減少設計出錯率

          ……


          整體可以歸納為

          1-對內統一,對外區分

          2-管理與協作變得方便

          3-建立設計文化體系,建立品牌感

          4-減少、優化錯誤出現


          對內統一,對外區分

          規范定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別于同類競品的,比如阿里云、騰訊云,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站,各個頁面的設計差異明顯,像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。


          undefined



          管理與協作變得方便


          for Designer:

          多個設計成員協同一個產品,迭代與更改規范都能更快的同步??梢栽囍胂笠幌乱粋€幾十人的設計團隊,如果沒有統一設計規范,那網站會變成什么樣子。


          for Developer:

          在UI還原中,設計需要經常與前端進行溝通“這里這里這樣做,那里那里這樣做”,對于每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。

          設計規范統一后,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。


          建立設計文化體系,突出品牌感

          做品牌的時候需要制定一整套VI規范手冊,那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。



          undefined


          你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎?


          減少、優化錯誤出現

          設計經常碰到設計完后需要修改一個點,然后就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。


          設計規范的意義這么強大,對網站及品牌有至關重要的作用,那為什么還會出現沒有應用起來的情況呢?

          很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規范是不是就失去了變化和新鮮感?那設計還有什么意義?開發都可以做設計的事情了?!?


          這里就要看設計規范理解的深度—設計規范是分層次的,平臺規范歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本


          對無法拆分的底層基礎元素做嚴格規定

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



          增強界面設計的靈活性和可維護性

          對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的復合組件減少過于局限的限定條件,考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態,多種可能。



          設計規范隨著業務的發展或技術的變革終究是會過時的,是需要迭代的。

          設計規范是需要迭代的,而不是我只要制作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻

          ~~希望我每天都有新衣服穿,做夢中~


          對設計體系的誤解

          設計體系最大的重要性毋庸置疑就是規范節省人力,設計師可以更多的時間去發揮創造性。


          誤解1-設計系統限制了設計師的創造力

          很多設計師覺得統一了規范,那我的創造性從哪發揮,界面都長的差不多。在設計中,設計目的是解決商業或用戶的問題,并不僅僅是為了有創意而引入新的樣式或交互方式。


          有了設計體系,統一了整體品牌風格,不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上,更多的回去關注更全局的設計策略。


          誤解2-設計系統只關乎設計,可由設計師獨立完成

          它僅僅是設計軟件上可復用的組件,所以可由設計師獨立完成,這種想法是錯誤的,是需要來自不同角色支持和參與的,這里包括前端、品牌、動態設計、 用戶研究等。


          誤解3-設計系統是一勞永逸的

          有時候會想只要完成了規范就大功告成了,其實不然,對待設計規范就像對待產品一樣,是需要維護和改進的,包括兩個方面:一種是對內部使用的開發以及同事,一種是對用戶的,應該定期收集用戶以及同事的反饋,確保及時更新迭代。


          誤解4-設計系統的重要性

          1-提高設計開發效率,最顯而易見的好處就是,組件庫的可復用性。

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

          2-確保設計一致性,為用戶提供連貫一致的用戶體驗,設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。

          網站統一的視覺規范、交互體驗,會讓用戶產生一種掌控感。

          3-設計系統促進了公司內部的合作和交流,一個成功的設計系統是需要跨功能團隊參與,設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。


          那我們要如何去執行呢?

          已經了解了規范的目的/意義,那該怎么去著手呢?


          • 對于設計規范的意義要同步給設計人員,提高認知,這是一件提率的規范,規范必須落地。

          在制定規范前期,不應該是一個人規定這個規范,設計團隊的成員應積極參與,前期先把規范的基調定好,人人都參與進來了,規范也就能更好的運營,當時我就是一個人定了規范,只是單純把規范發給其他設計人員,他們沒有參與,自然不會使用規范,對里面的設計元素沒有加深理解。


          主導人

          這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力,這樣能把紕漏降到。

          undefined


          • 應用規范里的界面、交互規范必須得遵循

          大家一般說的設計規范是界面的視覺規范,從UI的定義,User Interface—用戶界面,用戶與界面之間的交互關系,可以歸納規范其實可以包含兩大類,一類是視覺規范,一類是交互規范。


          視覺規范可以給用戶傳達統一的品牌形象,確保視覺一致性。后期的設計元素須復合規范的原則。


          交互規范可以減少用戶的學習成本,讓用戶有歸屬感。交互規范在制定的過程中,需要寫好交互規則與條件,不然后期維護會混亂。像蓋房子一樣,地基都沒打穩的話,整個樓都是偏的。


          那在使用規范時,一定要遵循規范里的要求進行應用,否則會亂套,不僅起不到統一的品牌風格,反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。



          設計規范的節點

          節點和公司的進度搭邊,看當前的產品是應該先獨立風格還是先統一基礎規范。


          1-固定的設計風格規范,比如:google的“扁平”,微軟的“磁貼”,可以全局使用,并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊,定好基調,不會走偏。


          2-不斷優化的設計規范,根據公司的節奏,有些產品目前比較迫切的是需要界面統一性、交互統一性。基礎做完以后,進而考慮產品固定風格。這種比較適合小團隊協作??梢噪S時調整。



          建立規范


          ·制作原理—利用粒子構成的原理與三維解構

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


          ·具體過程

          建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。


          ·元素是工具庫的必要部分

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


          ·組件的命名規范化

          規范組件命名,方便查找、方便協作。


          協作

          一鍵導出/同步組件到Sketch模板。

          標注方面,目前我們團隊使用的是藍湖私有化。



          那是不是所有的公司都需要創建設計系統?

          一般情況下,公司有不同的產品線,且都需要長期的開發與迭代。

          公司中,越來越多的設計師加入,設計風格需要統一。


          那建立一套設計體系會面臨什么挑戰?

          設計體系里面包含了設計語言、設計規范,需要與前端、品牌、動態設計、 用戶研究等溝通,還是需要迭代優化的,這是非常繁瑣耗時的項目,初期會非常的艱難,當設計師開始做組件時,也是非常耗時的工作,需要考慮不同場景下的使用情況以及設計的延展性,都需要投入大量的設計人力。


          聊了這么多,大家對設計系統有了一定了解,建立好設計系統可以事半功倍,以此提升效率才能提升UED價值。


          思考點:

          1-對于設計團隊只有一兩個人的時候,是否需要建立設計系統?

          2-你是否愿意把時間花費在前期建立設計系統,后期更多時間用于創造性地東西?

          3-建立設計系統前很枯燥,你會怎么堅持,怎么讓設計體系價值更大化?


          文章來源:站酷   作者:瑪麗的設計筆記

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          設計師如何洞察用戶需求?

          資深UI設計者

          在設計工作中,你可能會遇到這樣一種場景:甲方爸爸開發了一款產品,委托你進行包裝推廣,但是甲方對于設計將要解決的需求并沒有明確定義,或者只給出了行為層的建議,好比高端、大氣、上檔次,低調、奢華、有內涵balabala,甚至發來帶有魔幻主義色彩的參考圖,上來就要求出幾版方案先看看,這些情況在服務中小型企業時十分常見。


          這種情況怎么辦?

          無視甲方的奇葩要求?憑著自己的經驗干?還是順著甲方的偏好干?畢竟人家是金主吖?

          恐怕都難有好結果。

          對于設計師是自找改稿,畢竟你連將要解決的問題都不清楚,自然無法有效的論證“設計為什么這么做”,這就相當于把方案的主導權拱手讓給了非專業的甲方。而甲方如果思維跳躍“很有想法”,你就有改不完的稿子了。

          對于甲方而言,則可能買回一堆無用品,畢竟方案出街后面向的用戶其實是甲方的客戶,靠設計師和甲方拍腦袋本身是舍本逐末,解決不了問題,用戶才是真“爹”。

          so,一切以主觀為意志的設計行為都不明智,最終很可能落得一個雙輸的結局。


          正確的做法是怎樣的呢?

          這種情況下就需要設計師上升到產品思維的高度,與甲方溝通推進,乃至于進一步的用戶調研。

          一個面向市場的產品,被制造出來一定是為了滿足市場上某一類用戶的需求缺口,否則它就沒有存在的理由。而設計是為產品賦能的角色,所以在確定設計將要解決什么問題,以及產生洞見的過程中,一定是圍繞“用戶需求”為中心,只有真正明確了這一點,你的設計才是有意義的。


          那么,如何搞明白用戶需求呢?

          接下來我會從“什么是用戶需求、如何通過做用戶調研、如何萃取用戶需求”這三個部分來和大家分享,如何通過洞察用戶需求,來幫助我們更好的設計。理解了這些能夠幫助你提升一個段位(配合收藏+點贊食用更佳)。



          一、用戶需求都有哪些?

          在介紹具體的方法論之前,首先你得知道用戶需求都有哪些。 人的需求通??梢苑譃椤肮δ苄枨蟆焙汀扒楦行枨蟆眱纱箢?,分別由左右腦管控。


          功能需求,是顯而易見的外在具體需求。

          比如找工作你會關注工資、五險一金、福利待遇,買電腦會看內存、CPU、屏幕大小,點外賣會看價格、送餐速度。功能需求是用戶的“左腦”需求,也是用戶基本想要的東西。


          情感需求,則是與之相對的,隱性的、抽象的內在心理層次需求。

          比如這家火鍋店的服務太周到了,讓我感覺心里暖暖的,喝一杯星巴克,體驗到白領小資的情調,穿上這套西裝,讓我感覺自己像明星模特。情感需求同樣重要,它是感性驅使,用戶“右腦”情緒上的需求。


          李叫獸曾在《十四天改變計劃》課程中的產品戰略模塊細分出了十類用戶需求

          這些同樣可以歸納為“功能需求”和“情感需求”這兩大類。


          A功能需求:低價、性能、便捷性、可達性、降低風險。

          B情感需求:高端、定制化、新穎、過程體驗、理想自我。


          給大家解讀一下:


          • A1-低價

          低價,是解決了“用戶曾經因為價格原因無法獲得的,現在可以獲得了”的需求。

          比如我們身邊各種無節操的促銷活動▽


          拼夕夕動不動的砍一刀▽


          拼夕夕一言不合就轟炸的紅包▽


          這些都是切中低價需求的設計,low不low且不說,但它們是成功有效的。

          反之如果把一個促銷頁做成買不起的樣子,那注定是個失敗的設計。畢竟商業設計從來不是自我陶醉的做出一些高逼格的東西,而是在不同情景下使消費者內心與行動上買單。


          • A2-性能

          性能,解決的是“滿足用戶對某項功能追求”的需求

          比如Intermarché 橙汁▽

          為了進一步強調產品“新鮮”的特性,在包裝上白底黑字印上了超大的數字時間,表示生產日期。這一設計巧思,使產品上市當天便獲得5000萬次社交媒體曝光,一個月內銷量增長了4600%。

          深澤直人的仿生包裝▽

          通過對產品包裝的色彩、造型,甚至工藝質感上的直觀呈現,來表達產品“原生態”的特性,幫助商品在琳瑯滿目的貨架上脫穎而出,大大增加產品售出的機會。


          • A3-便捷性

          便捷性,解決的是“降低非貨幣成本”的需求。

          比如亞馬遜▽

          amazon作為全球商品品種最多的網上零售商,所主張的就是“降低你線下購物的時間成本”,包括亞馬遜的標志傳遞的也是“從A到Z,應有盡有”的概念。

          再到聯邦快遞▽

          不論是標志中隱含的箭頭,還是對外的品牌創意廣告,都是在強調“24小時使命必達”的強大的貨運能力。解決的同樣是用戶的“便捷性”需求。


          • A4-可達性

          可達性,是解決“獲得過去難以獲得的某些東西”的需求。

          比如數碼相機▽

          在膠卷相機時代,拍完了照片得洗出來后才能看到拍的好不好,而數碼相機的設計,讓你可以實時看到拍攝后的樣子,達到了以前達不到的功能,解決了以前不能解決的問題。

          美圖秀秀▽

          你可以讓自己變得更加苗條,更美麗。以前只有設計師經過專業學習才能P出好看的照片,現在普通人也可以輕易的對自己的人像實現美化。同理,都是“可達性”的需求切入。


          • A5-降低風險

          降低風險,是解決“降低本次消費帶來風險”的需求。

          比如神州專車▽

          用滴滴你可能會遇到黑車、黑司機,之前也鬧出過這樣的新聞,神州專車則撿大品牌的漏,通過自營車輛專門解決打車過程隱患的風險,解決的就是“降低風險”的問題,在對外推廣中也都是在強調專業和安全。



          以上是功能性需求,那么情感需求呢?


          • B1-高端

          所謂高端,切中的是馬斯洛需求模型中的尊重需求“身份認同”

          比如小罐茶▽

          我給朋友送禮希望擺上一盒茶葉,朋友就知道這茶很貴,不需要解釋也能體現我對朋友的重視,自然就需要穩定價格和品質的品牌。小罐茶則抓住了茶類的這一空白地帶,順利打入市場,設計的調性同樣都是圍繞這一策略服務。



          • B2-定制化

          定制化,解決的是“滿足用戶特定功能與體驗”的需求。

          比如檸檬盒子▽

          根據消費者的健康情況,量身定制滿足消費者每日所需的維生素,從對外的廣告到帶有姓名的產品包裝,都是在強調“定制性維生素”的品牌定位,這種差異化打法,讓檸檬盒子從保健品中脫穎而出。




          • B3-新穎

          新穎,是解決“消費者對過去陳舊市場不滿,追逐潮流”的情感需求。

          比如味全每日的拼字飲料▽

          通過包裝的貨架創意呈現,與消費者形成互動,最終形成社交媒體自傳播,上市后每個月的銷售額都有同比40%的成長。

          Milgrad牛奶▽

          最近也是在社交平臺上形成現象級刷屏,為品牌省下不少廣告費。

          二廠汽水▽

          去年夏天的老牌新造,成功逆襲成為網紅品牌,年銷近三個億。這些都是從情感性需求“新穎”的角度切入。


          • B4-過程體驗

          過程體驗,是解決了“ 消除用戶在完成某個任務的過程中所存在的阻礙”的需求。

          比如海底撈▽

          餐廳高峰期經常人滿為患,排隊體驗差。海底撈則會在你排隊等待的時候,提供免費美甲、護手、零食...等等各種周到服務,贏得了口碑傳播。如果你留心觀察,你會發現海底撈的標志也是用了一個打招呼的氣泡Hi,來強調服務為先的品牌定位,解決的是情感需求中的過程體驗。



          • B5-理想自我

          理想自我,解決的是“幫助用戶成為更理想的自己”的需求。

          比如Odorono止汗劑▽

          1912年智威湯遜著名廣告人詹姆斯·楊,在幫助客戶推廣面向女性群體的止汗劑時,砍掉了原來“出汗是一種疾病”的推廣策略,推出了一條新的至今人被人津津樂道的策略:“出汗將會影響你的人際關系,讓你不再受男性歡迎”,這一策略在美國形成現象級轟動,遭到女性憤怒的同時,也成功幫助Odorono打開了女性市場,是“理想自我”的典型應用。



          受于篇幅,以上十點講的比較概括,這些案例很多都非常經典,感興趣大家可以自己百度搜索。

          通過這些案例你會發現,設計其實有很多種“玩法”。

          講這十點的意義,一是啟發大家在實際工作中思考多個角度可能性,先把思路做多,而不是只局限在通過設計強調產品的某一功能特點,接著著眼于形式,那樣很可能我們一開始的切入點就沒找對。

          另一方面,讓大家對這兩類需求有更具體的認識,你會發現這些“玩法”都是基于用戶需求而存在,不是直覺或玄學更不是毫無章法的創意。設計是基于嚴謹思考推理的解決問題的過程,而解決的問題無非歸納為理性的“功能需求”與感性的“情感需求”這兩類。



          那么應該如何發現用戶到底有怎樣的需求呢?支撐依據是什么? 

          固然不是靠甲方拍腦袋,更不是靠設計師拍腦袋,而是靠“用戶調研”。



          二、如何做用戶調研?

          想想看你都接觸過哪些調研方式?

          常見的調研方式包括問卷法、后臺數據法、訪談法、觀察法等等。這些調研方式前兩者屬于“定量型”,后兩者屬于“定性型”,它們有不同的側重點與優缺點。


          1.定量型

          定量型調研側重于“廣度”,是通過大數據,量化用戶的行為偏好。包括:


          ●后臺數據法

          通過產品APP或者平臺的后臺來提取用戶操作數據,來獲取用戶的選擇偏好。

          舉個例子,比如你將要設計某個電商產品詳情頁,那么你就可以提取該電商平臺的后臺數據,通過品類下關鍵詞的搜索詞頻,來獲取用戶的真實需求,作為設計方向的指導依據。具體可以參考南孚充電寶詳情頁的設計過程。

          這種調研方式的優點,是能快速獲取到用戶真實的顯性需求,缺點是受限于互聯網產品或科技類產品。所以對于小眾產品,一般會采用第二種定量調研方式。


          ●問卷法

          對覆蓋用戶以問卷的形式采訪,也是最常見的調研方式。比如可以通過目前的主流問卷平臺:問卷星、金數據、騰訊問卷等渠道來取樣,問卷法的優點是操作簡單,易擴散,能夠獲取到大量的基礎反饋數據,缺點是獲取到的信息深度十分有限,基本只能獲得自己預設范圍內的反饋,畢竟大部分用戶根本不關心你問卷的填空題。

          整體而言,定量性調研只能獲取到用戶行為層面的顯性數據,對于用戶為什么會產生這些行為是沒有答案的,所以一般情況下還需要定性型調研來配合。


          2.定性型

          定性型調研側重于“深度”,是聚焦少量人群,洞察行為背后真實想法的方式。包括:


          ●訪談法

          針對某一類問題,與少量不同的目標用戶約談,通過溝通,挖掘他們行為背后更深層的情感需求。

          舉個例子,比如肯德基曾經推出了一款特價咖啡,為了從主要競爭對手星巴克手中搶奪用戶,當時訪談了很多用戶,調查他們選擇或不選擇星巴克的原因。最終發現購買星巴克的大多數人是為了星巴克提供的附加價值,如第三空間、品牌體驗等,包括發現很多人喜歡拿著星巴克的杯子自拍;而不買星巴克的原因是認為咖啡本身太貴,原料不具有性價比。

          最后肯德基推出了“咖啡為了覺醒,不是為了凹造型”的廣告來攻擊星巴克。暗示星巴克的購買者是追求面子、擺造型的膚淺的人,而肯德基咖啡的使用者卻是“聰明的消費者”。這種通過對用戶行為背后價值觀的挖掘,幫助肯德基更好的拉進了產品與受眾的心理距離,爭取到更多的潛在顧客。這也是定性調研的意義所在。


          那么具體來說,訪談的過程中有哪些要點呢?

          1)以人為本

          將關注焦點始終放在對方身上,而不是對問題清單上固定的內容進行提問和記錄。


          2)不斷追問

          問原因、問細節、問感受。你為什么覺得它好?你覺得它好在哪里?你當時是怎么想的呢?這些追問能幫助我們挖掘到用戶行為背后,更深層的想法與價值觀是怎樣的,這也是定量調研無法觸及到的部分。


          3)留意情感表達

          關注對方背后的情感是怎樣的?比如隨著第二步,留意對方有沒有感覺上的形容詞并順著追問。“你說到上次的購買體驗很糟糕,能具體說說當時的情況嗎?”這些都能幫助我們捕捉到那些沒有被用戶說出來的隱藏情感需求。


          需要注意的是,有時候用戶可能并不知道自己的真實需求是什么,或者不愿意說。所以在用戶訪談的過程中,不僅要著眼于對方說出來的需求,還需要去觀察用戶沒有說出來的需求,這里就涉及到第二種方法:“觀察法”。


          ●觀察法

          什么是觀察?觀察不等于“看”,而是調用你的眼睛、耳朵,以及所有感官去感知,并用心去揣摩用戶行為背后的原因。


          舉個例子,腦白金創始人史玉柱當年在做產品調研的過程中,經常會找小區樓下和老頭老太太聊天,詢問他們:如果有一個便宜但很好的保健品你會購買嗎?不會,如果更便宜呢?還是不會。

          史玉柱通過對不同老人的接觸與觀察發現,老人對自己是很摳門的,他們更愿意把錢留下來給自己的兒孫。但是,如果是別人送給自己的,尤其是自己的兒孫買給自己的,他們則很樂意接受。一方面能感受到兒孫的孝心,另一方面可以和其它老人炫耀。后來腦白金團隊花了大量時間鉆研如何把送禮這件事說的好,才誕生了那句經典的廣告語。諸如此類的偉大洞見,很多都來自于觀察中誕生。


          那么應該如何來觀察呢?其實可以有很多角度:


          1)觀察自己

          自己作為用戶試用一遍產品,就相當于換位思考一遍,記錄自己整個過程的使用感受,優點是能獲得直觀的反饋。缺點也很明顯,就是你的體驗不一定和其它用戶是一致的,畢竟每個人的認知和偏好是不同的,蘿卜青菜各有所愛,所以只能作為參考和驗證方向。


          2)觀察用戶真正在乎的事

          用戶有時候會“說謊”。就像史玉柱問老人是否買保健品他們回答“買不起”,但顯然不是真買不起只是摳門不愿意買而已。再比如你問人為什么會買幾萬塊的品,他的回答大概率是像精致的做工致敬,而不會說是為了身份認同。亦或者,用戶可能會給出受限于自身認知的答案,好比如果在過去時代,你問用戶理想的交通工具是怎樣的,它可能說想要一匹更快的馬。面對這些情況,你就需要抽絲剝繭,揣摩用戶行為背后的用意,而不是執著于具體回答。


          3)觀察極端用戶

          極端用戶是指消費群體的天平兩端。比如很多游戲公司,都會著重調研初次接觸游戲的新手玩家,和職業玩家的反饋,這兩波人群就是極端用戶,因為他們可能會放大被普通用戶被忽視的需求。同理,如果你要推廣某產品,去研究初次消費以及最頻繁消費的那兩波人群,觀察他們的需求上怎樣的。這并不是指用少數人的需求代替多數人,而是從極端用戶身上尋找啟發,用來向大多數普通用戶驗證,他們可能會給你帶來寶貴的回饋。如Odorono止汗劑廣告的成功,就是從對極端用戶的觀察中產生洞見。


          4)觀察用戶的變通行為

          很多時候,用戶并不會注意到某個產品或設計中體驗不好的地方,他們往往只會認為“它們本身就是這樣的”。你能想象旅行箱的輪子,是在旅行箱發明之后的200年后才加上的嗎?在這之前他們都使用推車來運輸行李箱。所以,你可以觀察用戶在使用過程中是否有采用變通方式,有沒有“兩波三折”的過程,或者是否有“蹩腳”的行為,來判斷某些不合理的地方,捕捉這些未被滿足的需求。


          以上是關于定量型與定性型的調研方式和技巧分享。

          而當我們通過這些調研方法,拿到一堆龐雜的數據,又該如何的利用這些數據產生洞見,幫助我們做出更好的設計呢?我們還可以通過一些技巧萃取用戶需求,轉化成具體的解決對象,幫助我們產生創新想法。



          三、如何萃取需求?

          關于萃取需求,主要給大家介紹兩個實用的方法工具。


          1.用戶畫像

          “用戶畫像”是一個使用頻率非常高的工具,它是建立在用戶調研的結果之上,通過找到優先級比較高的需求,虛構出“典型人物”,來代表和還原一群人的行為特征。


          目的一是“總結”,將用戶調研的結論,用更直觀、可視化的方式呈現,幫助團隊更好的了解用戶,促進共同決策。

          二是“移情”,建立與用戶的同理心。幫助我們從用戶視角出發,更好的領會對方的需求和痛點是什么。


          這就像打仗前,在地圖上勾畫敵人的行軍路線,幫助我們催生策略與洞見。


          怎么做用戶畫像?

          第一步,找出工作目的與用戶需求的交集。比如你將要設計一則廣告,目的是說服用戶購買某產品,那么你就要找出用戶購買這個產品的動機是什么,以及為什么會產生這樣的動機?這些就是你工作目的與用戶需求的交集。


          第二步,提煉出用戶需求的共性,將調研數據合并同類項,提煉出那些覆蓋面廣,權重最高的幾個共同點需求。


          第三步,將畫像具象化。用更直觀生動的方式演繹用戶需求和用戶特征。


          一般來說,一個用戶畫像包括:

          1)用戶的基本信息:肖像、名字、性別、年齡、工作等等。 

          2)用戶與調研主題相關的特征描述:比如性格、興趣、習慣等等。 

          3)用戶的動機與痛點描述:他想要什么?為什么想要這些?阻攔他達到目標的障礙是什么?

          前兩個是顯性數據,通過定量型調研就能拿到,最后一個是定量性與定性型調研綜合的結果,也是畫像的核心。


          舉個小栗子,南孚充電寶的電商詳情頁設計,經過前期后臺數據調研,和用戶訪談。

          得知用戶購買充電寶的場景有:

          1)外出旅行  2)出門逛街  3)商務出差。

          用戶對充電寶的特征和偏好有:

          1)希望容量大,夠用。2)希望體積迷你,方便攜帶。3)希望是大品牌,更安全有保障。

          那么我們就可以勾勒出一張用戶畫像,如下所示。



          這樣一張畫像就完成了。當然一張畫像只能代表一部分群體,不能代表全部類型的用戶,所以按照調研需求,可以分別勾勒出多張不同的用戶畫像。具體數量取決于想要覆蓋的人群。比如還可以有:王小麗38歲,公司高管,經常旅游······周小芳22歲,大學生,喜歡逛街·····


          在確定了用戶畫像之后,再給大家介紹第二種啟發創作思路的工具:用戶觸點地圖。



          2.用戶觸點地圖


          所謂用戶觸點地圖,也叫服務藍圖,或者用戶旅程地圖,也就是研究用戶是怎樣與我們的產品&服務發生接觸的,一共有哪些接觸點,每一次會接觸有怎樣的體驗?將這一連串接觸點像地圖一樣呈現出來,從而幫助我們汰劣留良。


          海底撈在這方面做的就特別好,它將用戶從進店到離店的整個體驗過程,細分出了N多個接觸點,從進店、帶位、點餐、用餐、結賬、甚至上洗手間,都面面俱到的顧及客人需求,你排隊不耐,給你擦鞋、美甲,你用餐時擔心頭發沾上味道,給你發圈,你孩子哭,給你帶娃······


          而用戶觸點地圖在其中的意義,則是一個有效的整體體驗規劃工具。通過觸點地圖的繪制,你可以知道用戶在各個環節下,在想什么、要什么、有什么感受,幫助我們提煉出待改善或是創新的機會點,完善整體體驗。


          怎么繪制用戶觸點地圖?

          很多專業書籍和文章會講的很復雜,但其實關鍵就兩步:

          1)橫坐標畫出用戶使用產品從“始”到“終”的過程,

          2)縱坐標畫出三種感受,分為滿意、一般、糟糕。并在坐標內填充各個關節的體驗是怎樣的。


          舉個例子,我經常會收到一些求職者的簡歷作品集,但是在這一個過程體驗有時候并不好,比如文件太大,有的文件打不開,有的干脆發過來源文件或者網址······如果把這個體驗過程從始(收到email)到終(保存聯系)畫出來,可能是這樣的。


          如果在這之前就針對這一過程,從用戶的角度出發繪制了用戶觸點地圖,那么你就能很大程度避免這些誤區。這也是繪制用戶觸點地圖的主要意義。


          最后再啰嗦一句,用戶觸點地圖不僅能幫助我們建立整體認識,避免踩雷,還能幫助我們找到關鍵節點,更合理的分配資源。這里涉及到一個諾獎級別的配套知識點“峰終定律”。


          所謂峰終定律,指的是人們在經歷了一次事件后,只會記住兩個因素,一個是事件的高潮,即為“峰”,還有一個是事件的結束,即為“終”。這一定律在服務體驗中經常被用到。


          比如在宜家的購物流程中有很多負體驗,迷宮般的路線、有時還得自己搬運產品。但是看到精致優雅的產品,以及結束后的1元冰淇淋,會讓我們覺得整體的體驗還是不錯的,愿意下次再來。正是因為在關鍵時刻和結尾帶給我們的體驗是正峰值。


          這給到我們最大的啟示是,任何商業以及設計行為,能調用的資源是有限的,而我們可以通過在關鍵節點與結尾,制造正峰值,達到資源的更大化利用。

          比如在很多日本的設計上都有這樣的小巧思。

          蘑古力零食,吃完以后,盒子最里面寫著“無論何時,都請再來享受一刻小憩”。



          拉面館喝完最后的拉面湯才看得到碗底寫著“謝謝”。顧客對店主肯定的同時,也獲得了店主的感謝。



          這些小彩蛋,都是對用戶終值體驗的提升,甚會因此細節而留意,成為回頭客。

          這些何不是精妙的設計?

          設計是一門科學的藝術,我們要懂得利用社會上已被證實的方法論,避免行為的盲目性。這比單純的從速成派大師那里學一些水面上的術,重要太多了。


          總結一下本文講述的內容。

          設計不是玄學也不是直覺,它是有邏輯的滿足用戶需求的過程,而調研則是洞察用戶需求與創新之源。

          關于「如何洞察用戶需求」這個話題。


          首先,我們分析了用戶的需求有兩類,一類是“功能需求”,它是表面的、理性的,另一類是“情感需求”,它是深層的、感性的。功能需求包括但不限于低價、性能、便捷性、可達性、降低風險;情感需求包括但不限于高端、定制化、新穎、過程體驗、理想自我,這些都能啟發我們思考不同方向的可能性。


          其次,介紹了兩類基礎的調研方法,分別是“定量型”“定性型”。定量調研側重于廣度,如后臺數據法、問卷法,能幫助我們獲得大量顯性數據;定性調研側重于深度,如訪談法、觀察法,能幫助我們捕捉用戶行為背后的原因,這些也都是洞察用戶需求的基本功。


          最后,我們介紹了兩種萃取用戶需求的工具,分別是“用戶畫像”“用戶觸點地圖”。用戶畫像是提煉用戶關鍵需求,虛構出具體人物來代表一類人群,是一種可視化的用戶需求總結方法,同時也能幫助我們切換視角,與用戶同理共情,催生創新想法。 用戶觸點地圖是細分出用戶接觸產品的各個環節,幫助我們汰劣留良,發現機會點,以及更合理的分配資源。


          文章來源:站酷   作者:兩個太陽

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          深度解析B端用戶畫像從理解到建立

          資深UI設計者

          在B端的設計中,用戶畫像的建立一直困擾著廣大設計師朋友們,由于對于業務的不熟悉、對建立目的的不明確,經常會采用無腦硬套C端用戶畫像、刻意為建立畫像而畫像、過于追求畫像廣度而不注重深度這樣的方式來進行用戶畫像的勾勒。導致的結果就是建立的用戶畫像與業務場景的關聯甚微無法對垂直業務進行有效賦能、目標客戶鎖定出現偏差導致無法創造真正的用戶價值,間接的導致產品無法創造商業價值等一系列問題


          今天我們就來討論如何更為精準地建立B端用戶畫像,從而能更好的為你的設計進行決策,為產品打下優良的準備基礎











          B端用戶畫像在大體的定義上其實和C端沒有太大的差別,都可以簡而言之地定義為是一種勾畫目標用戶/客戶、洞察用戶特征、聯系用戶訴求與設計目標有效工具都采用貼標簽的方式對用戶進行分析和描述,解決的問題也都是更為明確的告訴設計師:“我們服務的是一群什么樣的人?”





          之所以最后的落腳點還是人是因為無論是To C還是To B我們所服務的目標用戶始終都是人這樣一個載體,都是在為人做設計(明確這點很重要)。所以這就要求我們無論是C還是B始終都需要站在人的角度來進行情感體驗帶入、痛點需求分析、決策因素推導,和C端一樣B端同樣需要想方設法的通過設計與用戶達到情感共振


          只是對比C端而言B端所聚焦的方向有所不同,較為籠統說就是To C的用戶畫像是對個人個性、特征的放大、篩選、整合,To B的用戶畫像是對于具體行業職能、職位和權重需求的發現、剖析和理解。而這具體的異同點我會在后面的篇章中詳細的講解










          2.1 基礎特征

          從基礎特征來說,B端和C端的共通特征其實并沒有太大的出入,都具有:標簽性、真實性、實用性。


          鮮明而獨特的標簽使是我們連接目標用戶的依據,告訴我們為什么選擇這類用戶而不是那一類用戶,同時可以讓設計團隊進一步驗證產品定位。在標簽不斷被豐富的過程中,用戶的形象也在不斷變得立體,產品與設計的思考決策隨之會更全面


          可信的真實度可以讓設計師、產品經理較為有依據地對客戶的訴求進行把握不至于被錯誤的信息影響設計目標的確立,同時這也是在項目推進的過程中與各部門溝通強有力的憑借和背書,能有效地搶奪設計過程中的話語權,所以一定要盡量去對你的目標客戶進行的真實還原


          實用的意義主要存在于項目工作效率中,在B端的設計和產品中會比C端更加強調效率,項目的進程總是一環扣一環,前一個環節的錯誤都必然會影響到后面的環節,從而影響整體的進度,好的用戶畫像是一定能為你的設計開個好頭,準確切中正確用戶的正確需求,以其實用性大大提升整個團隊的生產效率




          2.2 獨有特征

          除了上述的基礎特征之外,B端用戶畫像還有著其獨特的特點,而這也往往是困擾設計師們在建立有關用戶畫像的時候的難點,具體體現在:


          2.2.1 用戶信息獲取壁壘較高

          在這點上我把他們大概總結為四種主要原因:用戶樣本少、數據獲取難、業務理解需求高、測試難進行




          第一,說到B端用戶畫像感受最為直接的就是:“關于B端的用戶反饋是真的少”這主要是因為B端的用戶的總量從體量上來說就比C端少了很多。要成為一個B端的用戶首先得是一個有B端系統賦能之下的工作的從業人員,這就一下子刷掉了許多人可以成為目標的客戶,不像是C端基本上沒有什么太大的限制


          然后再加上B端行業的領域性較強,經過具體垂直行業的細分后,能夠成為你所研究的某一具體行業的目標客戶者更是少之又少,這就導致了可調研的樣本不足(因為可以被接收到的反饋的聲音就少了)很難去做定量研究


          第二,對于行業內部用戶的有關數據的獲取來說同樣不是一個容易的過程,畢竟多數都是很難通過互聯網的查閱就直接進行獲取的,通常需要通過詢問目標客戶組織內的關鍵人物如:CEO、業務負責人、商務BD、行業顧問專家才能相對準確的獲得相關數據,而這些數據的保密程度都較高,像企業目前的經營概況、主要合作方信息、公司內部架構……這類信息本身都有較高的獲取成本,更何況對方也不一定愿意透露


          哪怕是通過外部數據公司進行購買,也需要你的公司或者團隊有能力、有意愿去承擔在這方面所付出的成本,還需要你本人有能夠甄別數據是否可用的本事,如此,就在你構建用戶畫像的調研階段形成了一道天然的行業壁壘


          第三,對于業務的理解需求在B端行業尤其重要,特別是對于UX來說。對業務較為深入的理解可以快速有效的幫我們熟悉在具體工作中角色與角色之間形成的業務泳道,進而準確抓取畫像中的關鍵角色




          比如我們需要為餐飲行業從業人員提供一套線上B端解決方案以提高他們的運營效率,在描繪這個用戶畫像的時候我們可以先通過對業務的理解梳理出從點餐到買單的整條業務的泳道圖,在圖中我們得出了一系列的角色,從中分析出這條業務鏈中的關鍵角色(或者說是關鍵決策人):前臺、服務員,將其定為目標用戶,然后針對關鍵角色開始通過業務分析痛點需求,為其建立用戶畫像


          這說起來容易但是實踐卻很難,前文就講過行業之間千差萬別,很多時候真的就是隔行如隔山,不同行業的業務泳道完全不是我們能夠通過固有的經驗能推測的出來的,需要實實在在反復做用研才有可能完全將其還原,雖然不是說要多年深耕其中,但是起碼要對業務有一個較為立體的認知,后文會具體講到


          而這對于我們傳統的設計師尤其是新手設計師來說并不屬于我們的“天賦技能”,畢竟傳統意義上對于業務的深入理解完全不在我們的工作需求范圍,還是習慣于做一個產品經理提需求然后卑微照做的“擼圖小美工”,就算有心也很少有機會能夠參與到用戶調研中去了解業務。對于是設計自家企業內研系統的同學來說可能還好一點,可以通過很多公司內部的人員與數據去了解,甚至還能比較容易地實地考察,但是對于外包、SaaS類型的設計同學來說自身用研經驗不足、缺少方法論無法真正理解業務是阻礙精準建立用戶畫像的又一道壁壘


          第四,由于B端的產品和公司的業務息息相關會直接影響到公司的日常運營,所以很難像C端那樣悄無聲息地或者是有選擇性的將用戶放置在真實場景中進行灰度測試、A/B Test等,很容易造成新的功能與交互與用戶原習慣不相符的情況從而耽誤日常工作,這是絕對不被允許的,就算是招募了用戶進行專門的測試,也很容易因為提前告知這是測試的刻意性使用戶造成心理偏差從而導致測試結果的會有偏頗。


          這就直接導致了用戶畫像中推測的痛點需求很難被及時有效驗證


          2.2.2 角色與角色之間差異較大

          首先,角色與角色之間的差異較大也是B端用戶群體較為顯著的一個特點,這主要是因為職位的不同導致的,不同的職位除了會形成表面上的上下級關系外本質上來看應該是形成了不同的職能、產生了不同的權重,對于用戶而言這就導致了不同角色之間關心的價值不同(可以說是用戶目標不同)、決策權大小不同、使用人數不同……


          舉個最簡單的例子就是,一家店老板是一個角色、店長又是一個角色、前臺又是一個角色,這三者之間關心的與自身價值相關的事兒肯定是不一樣的,比如老板的目的是如何通過降本增效達到店鋪的利潤最大化,店長的目標是如何提升團隊管理效率提升自我業績,前臺的目標是如何優化日常交互提升自己的工作體驗與效率

          個人認為可以將角色的差異聚焦到以下四個維度作為參考比較:用戶目標、使用人數、使用頻次和決策權重,那么套用到以上的例子中就可以呈現為下圖




          通過此圖我們可以較為直觀的感覺到角色差異所帶來的特征,同樣的通過對這些差異的比較也有助于我們找到關鍵角色、關鍵決策人(權重較高的人)


          其次,除了用戶目標這些差異外,對于設計師來說很重要的一點就是明確不同用戶的具體使用場景,因為事實上就算是同一家門店、同一家公司的各個角色他們的使用場景都有可能千差萬別


          舉個例子同樣是老板和前臺的兩個崗位會因為崗位職責要求個人使用偏好習慣這個兩個主要因素導致他們選擇使用產品的場景、平臺有所區別




          前臺因為是執行層員工所以有必須天天到崗的要求,所以她的使用場景大部分情況下都會是在門店內,更準確的說是門店的前臺位,而從工作內容上來說主要是高頻地處理每天店內的各種訂單業務、進行登記、結賬、數據錄入等所以在端口的選擇上可能會更多的選擇固定端口、Web端,這就構成了屬于前臺的基本使用場景

          而立足于老板而言,他沒有每天都需要到崗的需求,主要需求是通過系統查看門店的營業數據,快速進行一些較為大型的申請的審批等,而且使用頻次不高,所以老板的使用場景除了門店外可能更多的是要考慮到在店外、在家的場景,而使用端口上則應該更加偏好移動端APP來進行操作(當然這個還是要放到具體的項目中具體分析)


          本質上來說和用戶目標等因素一樣,使用場景主要也是由行業中的具體崗位職責所決定的


          最后,角色與角色之間的差異還體現在置于產品不同階段的決策鏈路中同一個角色的參考權重會不一樣。聽著是不是很抽象,沒關系舉個例子你就迅速能明白




          在產品的銷售階段,也就是目標客戶的初次購買階段,此時決策鏈路的關鍵是老板是否出資購買產品?很明顯的是員工在這個階段是沒有出資決策權的,而且員工的態度對促成這個鏈路影響甚微,那么我們的主要精力就是應該放在打動老板這個角色的目標上,此時老板的意見、需求……會成為我們用戶畫像中參考權重較為重大的部分甚至是全部


          而在產品的續費階段,此時決策鏈路的關鍵變成了老板是否會進行續費?雖然表面上看似乎和初次購買區別不大,但是實際上此時員工的態度的參考權重已相對提升。這是因為老板會通過員工在使用系統時的反饋和通過引進系統所帶來的效果作為是否續費考量,此時執行層的體驗需求是設計師需要去重點關注的,他們的意見在畫像中的參考權重會提升,這就是為什么角色的參考權重會隨著產品階段的改變而改變


          總結一下,角色與角色之間的差異體現在不同角色的用戶目標不同、使用場景不同、使用頻次不同、使用人數不同、決策權重不同和不同階段意見參考權重不同


          2.3 內容組成

          經過以上的特征分析用戶畫像的構成在我們的腦中已經初具雛形了,那么具體來說用戶畫像的構成應該如何較為系統的拆解呢?個人認為較為合理的方式應該是先思考用戶畫像的功能或者說用戶畫像需要反饋什么信息


          這個問題的答案其實從之前的特征中我們可以較為明確的找到即反映企業的信息反映企業中角色的信息,這兩部分的信息我比較喜歡將其稱之為客戶畫像和角色畫像




          2.3.1 客戶畫像

          客戶畫像簡而言之就是指你目前的設計所服務的組織、公司的畫像,它涵蓋了該組織所在行業的特征、現狀(包括行業類別、產業鏈細分等)和自身企業特征(規模、發展階段、市場、業務情況等)。這有助于我們快速地驗證我們對產品的定位準確性并且迅速地找準大致方向以便于隨時補充所在該垂直領域相關信息以更加了解客戶。當然從團隊協作的角度來說,這些信息還可以幫助銷售團隊更為方便的找到目標客戶進行簽約


          客戶畫像以一種較為精煉的方式進行拆解可以分為基本信息、業務信息、組織架構和關鍵角色,其中具體來說


          基本信息:行業屬性、地理位置、企業規模


          業務信息:業務概覽、經營模式、付費能力、使用目標


          組織架構:組織自上而下有哪些機構,彼此之間有何聯系


          關鍵角色:組織中所包含的各個崗位




          如果我們以一家連鎖餐飲門店為案例那么可以具體這樣進行進行描繪




          2.3.2 角色畫像

          而角色畫像就是指你目前的設計所服務的組織、公司中的使用人員包括了公司的高、中、底層即決策層、中間管理層、執行層,它包括了你所研究的角色的個人特質或者說崗位特征(包括了崗位特征、職能、職場處境、決策鏈路位置、希望解決問題的目標等)


          角色畫像以一種較為精煉的方式進行拆解可以分為角色名稱、基本信息、工作目標、和使用場景,其中具體來說


          角色名稱:具體職位的具體職位名稱或是工種


          基本信息:文化水平、辦公場地、平臺偏好、使用頻次


          工作目標:崗位職能、崗位責任和使用期望


          使用場景:以較為干練的故事敘事的方式對日常工作的各個場景進行描述





          如果我們以一家連鎖餐飲門店的店長為案例那么可以具體這樣進行進行描繪




          而在細化到每一個角色崗位的情況下,在使用場景上甚至可以進行武裝到牙齒般的場景再細分,比如廚師長在一天后廚管理中最高頻的需求是什么?對后廚訂單的顯示有什么樣的自己的想法需求?這都是我們可以在畫像部分進行不斷深入思考的,當然不斷細化勢必會自然而然涉及交互的具體設計,由于篇幅原因之后會單獨寫一篇文章來進行敘述,這里就不做過多的探討


          大家一定需要記住的就是構成用戶畫像的基本組成部分包括了客戶畫像、角色畫像兩大部分,而每個大部分中又分成了屬于各自的小部分,具體的細分和調整還是要落實到具體的業務、具體的行業中去進行構建


          2.4 B端與C端用戶的不同

          之前就提到過B端的用戶畫像與C端用戶畫像的特征上有比較大的區別,而且對用戶的描繪側重不同,這也是為什么很多從C端的設計師同學在轉B端設計的時候發現在用戶畫像的勾勒上一些形式無法直接復用的原因,具體來說分為以下這些區別:




          2.4.1 產品選擇

          C端用戶選擇產品的感性(主觀)因素相對較多,而B端則更趨于理性。什么意思呢?影響C端用戶的購買因素一般包括品牌偏好、商品顏值、社交信息影響等因素,這類因素都較為主觀化、情緒化。這是因為C端的產品對于用戶而言更多的時候是通過購買達到一種自我滿足、自我彰顯,用戶目標的個性化較強,簡單的來說就是我買來是讓我爽的,所以C端購買商品的時候會趨于感性與主觀


          而反觀B端來說影響到用戶的購買因素就理性的多,也更加的謹慎與全面,比如:易用性、投入產出比、能為業務賦能的程度、員工學習成本等,這是因為B端的產品與用戶的盈利、運作都息息相關,會直接影響到用戶日常的工作,用戶的目標主要是通過購買產品達到對自己工作、業務的賦能,提升效率和盈利,不會有誰說我用美團的系統就比你用微盟的系統更高一層,說白了誰能讓我的工作更加的、誰能讓我的公司賺更多的錢誰就會成為我的選擇,所以這也是B端的用戶購買決策都比較理性的原因


          2.4.2 購買決策權

          C端的用戶購買決策權一般不受社會關系的影響而B端的購買決策比較受其影響。這里的社會關系主要是指職業、崗位,這點其實比較好理解。很簡單C端的產品大部分面向用戶的細分不會像B端那么局促很多時候C端的商品只要用戶的經濟實力足夠其實是可以隨時隨地隨性進行購買,如果用戶愿意哪怕是光頭猛男也可以購買小裙子,別人是管不著的(當然也不一定啊)


          但是B用戶的購買決策權其實在前文就很明顯的看出是非常受社會關系的影響的,比如一個執行層的小員工因為公司系統太垃圾突然想一拍腦袋給公司換個系統,然后第二天公司就自上而下換了一套新系統這種事兒想想都不太可能(當然一般也沒有人腦子抽了想這么干)


          這是因為無論如何在這條決策鏈中執行層小員工始終都是處在一個使用者的身份上,縱然你再有錢也不可能成為一個出資方的身份(當然除了那種你把公司買了自己當老板的)你最多只有建議權,并沒有購買權,只有決策層的領導(很多時候都是最大的老板)是具備出資的權利的(注意我說的是權利不是能力),所以這樣的結構特征在基因上就決定了B端和C端用戶在購買決策權上有本質的區別


          2.4.3 年齡、性別影響因素

          C端用戶相對來說購買傾向上受年齡、性別、職業、受教育水平這些因素的影響而B端相對較小。很簡單C產品的購買理由雖然相對自由,但是對于產的定位還是會以一定的年齡層次、不同的性別等因素進行劃分從而達到精準營銷,畢竟不是那么多產品都是男女老少皆宜的,舉個例子,美柚APP在大部分情況下用戶都是女性而且是青年中年女性,服務于女性通過其監控自己的生理健康,一般情況很少有男性用戶(例外除外啊),再比如經常會有APP給年輕人打造自己的潮流社群這樣的定位,說明這個產品的用戶主打年輕人這個群體


          而放在B端這些因素其實參考價值并不大,這是因為首先一個組織、一個公司、一個門店的員工組成是復雜的,自上而下很可能覆蓋了老中青三個年齡層次,性別男女都有,不會因為你的這些屬性就影響了了產品的購買決策,全公司除了老板之外基本都是無理由被動接受產品并使用的客觀狀態,所以在這種狀態下年齡、性別等問題的參考價值就基本不大了


          以上的區別造成了B端和C端的用戶畫像在基因上就有“種族區別”,所以在對B端用戶進行標簽設計的時候再次提醒千萬不能生搬硬套照搬C端,還是要深入了解業務、職能之后才能做出較為落地的符合屬于你的用戶的畫像







          3.1 B端用戶畫像的價值

          其實在用戶畫像的價值上B端和C端沒有太大的區別,主要都是為了進行精準營銷個性化服務




          精準營銷的的價值主要是針對市場和銷售團隊而言的,我們所收集到的關于客戶的每一點信息都可以稱之為是一組數據,在大數據營銷已經逐漸成熟的當下一個成功的用戶畫像是可以助力銷售團隊更快速的找到正確的業務方向,篩選出真正的目標用戶,提升轉化率,大大降低了浪費在與非目標用戶的交流上,也是銷售團隊不斷進行調整自我調整的指南


          對于市場來說,通過對于用戶畫像的具體分析可以更為準確的調整營銷內容和營銷策略,從而更好的對渠道選擇進行更合理的配置,在有效的用戶畫像基礎之上思考創造出更多的有效客戶。是一個非常有效的降本增效的輔助




          而個性化服務的價值則是對于產品、產研團隊而言的。當今的B端產品大致可以分為三種大的類目:企業自研、外包和SaaS,在面對自己的客戶進行產品設計與服務的時候都多多少少會對每個用戶不同的需求進行具體問題具體分析,從而進行一定的個性化定制服務


          所以當用戶畫像足夠的時候產研團隊可以的對用戶的一些差異化需求進行精準把控并制定出最適合的解決方案,而在產品迭代的階段也能更加具有針對性的對產品的功能、交互進行完善


          3.2 B端用戶畫像的意義

          用戶畫像的意義其實是貫穿了從產品研發到產品是投入服務的每一個階段的




          3.2.1 產品定位

          在研發初期,用戶畫像的明確可以幫我們迅速清晰產品定位模糊這個問題,因為很多產品在研發初期其實是搞不清楚自己的產品定位的,這會導致后面一系列的開發問題造成連鎖反應,而用戶畫像是為了在項目一開始就幫助我們地知道我們在為一群什么樣的人服務,這樣就把準了產品的相對較為準確的定位,規避了后面出現偏差的風險




          3.2.2 產品架構

          在畫像確立后的設計階段我們需要對產品進行架構設計,用戶畫像是防止我們的架構設計混亂,梳理層級輕重、功能優先級的指南利器。我們經常會一下子同時接到各種各樣的需求,很多人選擇無論吞棗的一股腦把需求中的功能全部堆砌上去,這樣直接導致的就是產品層級混亂,功能無歸類,交互毫無邏輯,開發效率低下,就算最后做出來了用戶也很難上手,甚至無法通過產品順利走完一套業務閉環


          明確的用戶畫像可以在一開始就為你產品的功能排布、架構設計賦予邏輯,因為用戶畫像可以明確的知道用戶的具體目標,從而將需求可以進行輕重緩急的分類,此時每一個功能都可以歸類到相應的模塊,功能所處的位置可以按照需求的重要程度進行優先級的位置放置,同時交互更加符合實際使用場景,確保產品在產品再投入使用后能快速上手,快速解決用戶的問題




          3.2.3 團隊爭議

          在設計進行的階段團隊內部會議時,不同崗位之間經常會出現對功能設計、視覺設計、交互設計不同的意見,甚至會產生很大的爭議,在面對這樣的爭議很多時候其實設計師在產品經理、運營的面前是沒有什么話語權的,這主要是因為大部分設計師其實對業務的熟悉和用戶思維背書較弱,而別的崗位也會經常把設計當作擼圖工具人使用,所以導致了現在很多設計師尷尬的現狀:經常會被面臨提出設想后被斃稿的情形


          而一個具有說服力的用戶畫像其實在很大程度上能夠對這個弱項進行彌補,用戶畫像代表了我們所服務的目標用戶,那么我們需要解決的一切問題都是要圍繞他來展開的,通過對于用戶畫像的核心需求的利用作為你的方案最好的佐證材料,不僅能夠在設計目標上與同事達成共識,解決溝通過程中的各種爭議問題,還能讓你的設計真正做到言之有物,經得起推敲從而大大提升你的話語權





          3.2.4 產品測試

          到了產品的測試階段,用戶畫像同樣發揮著其重要的作用,雖然B端的產品相對來說測試較為難以進行,但是找到最為符合目標的用戶對其進行產品可用性測試記錄其實還是具有非常重要的意義的。精準的用戶畫像可以較為快速幫我們鎖定我們需要進行招募的用戶


          3.2.5 產品迭代

          當產品上線后用戶畫像的作用也還并沒有結束,任何產品都希望自己的產品生命周期能更為長久,這就需要通過對自己的目標用戶進行不斷的深入需求挖掘,在不斷的迭代中成為最適合你所服務的用戶的定制化產品


          而一個完善的用戶畫像是具有不斷的需求挖掘潛力的,產研團隊可以通過對于畫像的深入研究進行用戶的深入需求挖掘,從而指導產品功能的良性生長。







          4.1 前提

          建立用戶畫像的第一個前提是要知道用戶畫像被一般會被需要的時機,這點來說其實比較好理解,那就是當業務需求出現或是改變,產品出現了一些有待解決的問題時候,這也是設計、改版被需要的時候。舉個例子當我們發現我們的產品上線后效益一直處于并不樂觀的情況,這時候很可能是我們對于用戶的需求分析出現了偏差,導致供應無法對應需求


          那么我們就應該重新設計我們的用戶畫像,再次深入挖掘正確的需求,以適應我們的目標用戶


          還有一個前提就是你需要大致明確你所服務的用戶,也就是開篇說的“我們服務的是一群什么樣的人”在這一步你對這個概念不一定需要有一個十分的把控,但是至少需要大方向上的正確,因為這是為你后面的信息數據收集工作進行導航,確定查找范圍,以防方向上的失誤


          4.2 信息準備與假設

          當確立了具體的大致方向后,我們就要開始初步的信息收集與準備工作,也就是具體了解你所服務用戶的業務,這是你能做好的B端用戶畫像的前提


          4.2.1 原因

          首先,這是因為如果不了解你的業務很容易造成你無法從一個全局視角對你的設計業務進行理解,當你不知道你的用戶所處在業務中的位置,會很容易造成對真正的關鍵人的定位失誤,造成用戶同理心的缺失,那么也就無法真正分析出最為貼合用戶的需求,對業務足夠理解你就不會對關鍵人的尋找定位失誤,也能上站在用戶的角度來思考問題




          其次,對業務較為理解的通透,是有利于你在信息求證階段(用戶訪談階段)與用戶進行較為順暢的溝通的。你對業務的理解足夠深入能夠在被訪談的用戶面前樹立出一種專業的感覺,這可以讓用戶較為放心地和你進行交流,你與用戶之間也才會存在共鳴,同時用戶會因為你的專業感產生與你繼續交談的興趣,你才有可能獲取到更多的信息,畢竟大家都喜歡跟懂行的人聊天


          相反當你不理解業務時與用戶進行交流本身就會存在一種不自信感,而你所設計的問題會表現的十分生澀,造成用戶覺得與你交流是在浪費時間的感覺。要知道用戶其實是很不喜歡和你解釋一些行業內所謂的“懂得都懂”的術語、表面問題的,而且很多概念可能就是用戶實際工作中不存的顯得很荒誕。如果你要問我怎么知道的,不怕大家笑話我的第一次用戶訪談基本上全程踩雷


          由于對業務的不熟悉就冒然進行用戶訪談,會導致最后用戶在問我:“你到底要問什么呢?”“你是不是要問這個?”“你說的我不是很理解,我們好像從沒聽過這個名詞”這樣的情況真的十分尷尬


          最后,深入了解業務不僅能通過激發被訪談用戶興趣的方式啟發你們對與更深層次需求的交流,這些深層次的需求捕捉是可以作為你后面在建立用戶畫像標簽、推進項目的時候很有利的背書,作為你的設計的有利支撐依據





          4.2.2 獲取手段

          在初步的信息獲取階段,其實我們是可以有較多的手段來進行的,我將其分為外部資源、內部資源兩大部分




          內部資源包括:


          1. 像產品經理索要業務方面的相關文檔,這些文檔具體來說可以是在做業務的過程形成的資料入:提案或者結案時候的PPT、Keynote文檔,通過成功的或已經在進行的案例快速了解業務信息和行業概況,還有就是可以通過進入一些客戶反饋群來收集整理客戶實時反饋的需求信息


          2.公司后臺數據,公司后臺數據是你的獨特優勢,因為一般公司的后臺數據都比較少進行公開屬于內部資料,但普遍具有較強的真實性,你可以通過內部的資源搜索找到你需要的數據


          3.通過與銷售團隊和客戶成功團隊(CSM)的訪談交流得知行業和用戶的信息,尤其是CSM團隊他們和客戶的接觸周期最長,最快也最全地能拿到關于客戶的一手數據,是很好的可以去獲取數據的途徑


          4.公司高層訪談,公司高層決策層面對客戶考慮問題相對而言會更加全面,通過與高層的交流可以拓展你的思維廣度


          外部資源包括:


          1. 同行交流,在行業中尋找業務能力較為強的同行朋友,虛心向對方進行請教受益良多(這也是我最經常用的方式)


          2.付費數據,在市場上存在著比較多的進行數據付費的機構,比如企查查、客戶堂、用友等,當然這個需要考慮支付成本,承受能力


          3.公司官網、行業資訊門戶網站,通過對目標客戶的公司官網進行一定的研究可以較為直觀的對客戶的特征進行了解,而想要獲取行業特征與資訊可以養成經常上行業資訊門戶網站的習慣,進行對行業需求風向的實時把控,如:艾瑞網


          4.相關的文章資料,可以通過類似于人人都是產品經理或者是收藏一些比較有權威性的語雀知識庫,同樣是一個比較好的渠道


          4.2.3 必要信息搜集



          通過豐富的渠道你可以對你需要的數據進行大量的搜集,但其中一定需要搜集到的信息包括如下:


          1. 客戶公司基本信息,這其中包括:公司或組織相關的關鍵人(決策者)信息、組織的人員架構(尤其是對每個決策連路上關鍵人的位置把握),如果業務涉及CRM的模塊還需要去了解公司的管理制度、賞罰機制、晉升制度


          2.客戶主營業務信息,這其中包括了:客戶基本業務、核心業務、業務整體架構、核心業務使用場景、達成業務目標的資源需求和能力配置


          3.客戶公司產業鏈信息,這點的搜集雖然比較繁瑣涉及面廣,但是如果時間允許還是建議去搜集,當知道了客戶業務處于其產業鏈的哪一個位置,其中有那些頭部公司,就可以更加理解客戶的各種決策背后的因素


          4.一些專業術語的掌握,專業術語的掌握可以為后續你在求證假設的訪談階段起到重要作用,不僅能給對方創造你很專業的感覺,還能減少對方不必要的專業名詞解釋工作,節省用研時間成本


          4.2.4 問題整理與假設

          當我們從各種渠道搜集完信息之后,信息是較為駁雜的,我們需要進行的是對于信息的第一遍過濾處理,將問題按照關聯度的輕重進行篩選(不然很容易出現面對很多問題時我們無法抓住最為顯著的主要問題),然后就是對于你想要了解但是還沒有通過資料找到的部分以自己的經驗進行假設并記錄,通過后面對信息的求證部分完成對于你的假設部分的驗證


          4.2.5 收集目的

          將這些信息收集是有明確的目的性存在的,主要分為三點:




          第一,初步找到客戶信息中的共性要素,在尋找各路數據的過程中,是經常會多次被反饋到相同的信息的,當你被反饋相同的信息頻次比較高的時候,你就要特別注意這些信息,因為這很可能是你的目標客戶群具有的共性,可以初步寫入你的畫像草案中


          第二,圈定設計目標與范圍,當了解了客戶的大致基本信息時,我們就應該對我們的設計目標有了一個大致的判斷,同時知道客戶對于不同的需求優先級,通過對于優先級的梳理,我們可以在畫像信息中將這些需求進行有秩序的排布,有利于項目推進中大家集中資源優先解決重要問題,范圍的劃定也有效放置了我們在調研過程中的方向偏離


          第三,將你的調研目標具體化,為下一步信息求證做準備,當我們經過了初步的信息收集與檢索后我們就對我們的用戶有了一個更加清晰的認知,此時我們即將進行對這些數據的再一次求證,當求證之前我們需要圈定我們的調研具體目標,而這一步的意義就是為用戶訪談做準備


          4.3 信息求證

          信息求證的階段其實是與目標用戶的接觸,也就是我們經常聽說的用戶調研,如果說在之前的階段我們都是通過間接的方式了解用戶,那么到了這個階段就是與用戶進行直接的溝通,概括的來說就是通過設計好的問題詢問到我們需要的數據


          涉及到的方法其實有很多比如:用戶訪談、問卷調查、實地調研、詢問專家用戶……由于篇幅的限制我就淺談一下用戶訪談這一求證方式,日后也可以出一篇單獨講用戶訪談篇目的




          首先要知道的是無論進行什么方式的驗證其本質目的都是為了豐富和校正我們的用戶畫像,是帶有一定認知基礎進行的,所以我們的核心目的一定是:盡量深入的挖掘用戶需求和驗證自己的假設以對畫像進行補充,在這個思路基礎之上來進行


          4.3.1 準備與限制

          這個階段很難說做到定量訪談,所以需要提前明確的是我們進行的一定是有計劃的定性訪談,我們首先需要經過精挑細選通過自己的判斷篩選出5-7個我們認為值得去調研的對象并提前與之取得聯系


          然后就是設計準備好問題提綱,錄音設備和文字記錄設備(可以是筆記本也可以是電腦)這里需要注意的是問題的設計的問題要有針對性,比如你想確切的了解具體在實際場景中員工是如何操作執行的;還有就是問題的設計盡量以解決你初步整理資料后留下的疑問為目標,這樣會比較有效率;詢問的問題在文案上盡量口語化,不然很容易讓被訪問者有一種“被審問的反感”





          4.3.2 執行與交流



          當一切準備就緒后我們就開始了與用戶的交流,在訪談開始時不要表現的目的性那么強,很容易讓客戶產生疏離感,我們可以先與客戶進行簡單的寒暄當作熱場,讓對方的話匣能盡量打開,卸下對方下意識的防備,在訪問中除了注意及時記錄還需要注意的是:




          1. 注意問題的開放性,不要將問題限制的過于小,比如,只是問:“你們現在有外賣業務嗎?”那么你得到的回答對你的指導意義并不大,比如你在后面可以加上“您認為在這塊兒的業務有哪些可以更加改進的地方?有什么自己的看法?”把問題變成開放式問題,讓客戶有自己發揮的空間,這樣做有利于你從客戶口中能了解到更多存在于“專家盲點區”的深層需求


          2.要以一種學徒的心態來進行交流,千萬不要用戶半句話還沒說完你就突然又蹦出一個問題,用戶訪談對于執行者來說是一個極其克制的過程,很多時候寧愿等對方說完,冷場個兩三秒,也不要急于主動發言,這會大大降低每一次問題所能帶給你信息反饋量,很多時候執行者要做的就是傾聽


          實話實說我的第一次用戶訪談用戶體驗非常差就是因為自己性子急躁,突然想到問題就立馬問,這是一定要避免的


          3.當對于一個問題存疑的時候,可以先進行記錄,在用戶敘述完后針對這個問題以不斷問為什么的方式進行提問,直到用戶無法繼續回答,這是一種典型對問題深入挖掘的方式,在實際訪談中很受用


          4.對隱私問題謹慎提問,沒有人不對隱私被問起不反感,如:店鋪這個月的營收狀況。當需要問起隱私問題的時候需要斟酌再三,能不問就不問,如果真的需要問可以在訪談結束后,以一種非正式的方式進行提問,會比較妥當


          4.3.3 訪后資料整理

          采訪后整理資料并不是是說所有采訪結束后再整理,而是在每一次采訪結束后就習慣性進行一次整理。這是因為這有助于我們二次加深每次訪談中的重點問題,而且在冷靜的狀態下通過回顧的方式可以更有效地過濾出每位用戶的需求重點


          除了及時進行歸檔備份外在十分確認的關鍵點上及時將其補充至畫像標簽庫中;在仍有存疑的問題上進行記錄保留想辦法在下一次訪談中得到答案;思考在訪談中自身的不足之處,進行改正,避免在下一次訪談中再犯


          在這樣的良性循環中,能確保你的訪談能達到最高的效率


          4.4 信息篩選與整合



          當所有的調研工作結束之后,你已經對客戶有了一個較為立體的認知,下面就需要對你收集到的所有數據進行一個篩選整合


          這一步做目的就是找到相同角色的共性特征,并提取一些必要的差異化需求,對角色進行較為真實的還原


          比如我們可以從樣本中提取所有門店同一個角色:店長,針對店長這個角色對其進行在行為變量和痛點上的分析建模,所謂的行為變量比如就是角色日常在使用場景中的活動、自身對系統的學習能力等等,他能直接幫助我們推測出用戶對產品的接受程度、使用成本等問題





          當我們把行為變量和痛點需求羅列成坐標后,把符合的角色帶入模型中進行一一映射,就可以快速的知道哪些是共性特征,哪些是值得研究的獨有特征,哪些痛點是普遍痛點,哪些是差異性特點,詳情見下圖




          至此,我們的信息篩選與整合部分就算是完成了,那么畫像的產出也顯得水到渠成、順理成章


          4.5 信息產出

          如果上面的工作做的較為順利,畫像的呈現將會較為順理,通過提煉的共同點將其對應的點反應在畫像上的各個部分,由于在2.3.2部分中已經敘述過用戶畫像基本的組成部分,這里就不再過多的贅述,主要是以展示信息是如何有理有據地產生的這個過程為主


          還是以2.3.2中角色畫像的形式呈現來進行案例演示,通過對于我們收集到的數據來進行具體文字敘述的對應轉化,逐漸構建出我們所看到的用戶畫像




          當然痛點、共性和需求肯定遠遠不止上述所示,用戶畫像的信息還可以被更為細化的進行擴充,根據自身產品的特點、業務、定位進行更為貼合信息補充






          至此,用戶畫像的建立就完成了,感謝你看到這里,在最后一部分我想和大家再討論討論用戶畫像中比較常見的錯誤,有我自己的教訓也有前輩告知的經驗




          5.1 重形式感,實用性差

          這應該是不管是B端還是C端的用戶畫像經常會出現的一個問題了,具體表現為:一味地追求形式的炫酷,在絲毫不考慮為什么要添加這些標簽的情況下,直接在一些渠道上照著別人的用戶畫像就是一頓猛抄,盲目更風生搬硬套,給人一種為了畫像而去畫像的感覺(由于怕被打我就不放圖了),很多時候就是當你問他為什么要添加這個標簽的時候,他的回答就是:“我看別人畫像上也有這個,我也這么用”(不要笑這樣的情況還真不少)


          這樣導致的結果就是用戶畫像與我們目標用戶的業務、使用場景關聯度并不高,設計無法真實還原用戶的使用情況,設計流于表面,銷售也很難通過用戶畫像找到真正的KA客戶,這樣的用戶畫像可以說是基本處于一種不可用的狀態。


          其實甄別可用還是不可用最為直接的辦法就是找到一個很確定的目標客戶,將以上痛點和使用場景通過對其訪談詢問,帶入真實工作場景就可以進行最直接的驗證




          所以我們在這點上還是要以實用性大于形式感的思路、高場景關聯度的方式,去踏實地進行繪制才有可能繪制出可信度高,可用性高的用戶畫像


          5.2 片面追求完整性導致設計成本浪費

          許多比較有實力的公司對于用戶畫像十分重視,希望通過大量的成本投入來盡可能的全面展示其用戶的特征,這本是好事兒,但是很多時候會出現“用力過猛”的情況,具體表現為:通過大量的對用戶的每個細節進行標簽建立并記錄并存檔,導致用戶本身關鍵性特征不明確。有一句話叫:“一個人如果都是特點,那么他也就沒有特點了”這是對這種情況最中肯的評價


          導致的后果就是,你會發現的你的標簽庫中存在著大量的標簽,但是會完全抓不準用戶的主要矛盾進行發力。當好不容易從幾百個標簽中抓住了核心發力點,發現其實至少一半以上的標簽都是出于閑置狀態,也沒有對業務的拓展起到更多的作用,非常浪費設計資源、設計成本




          所以我們還是要從一開始就抓住用戶最核心的訴求,在以核心訴求為中心,進行需求的發散,不同的痛點羅列出不同的優先級,集中資源優先解決最重要的問題,面對標簽的態度應該是在精而不在多


          5.3 不注重用戶標簽的維護和迭代

          我把這種情況稱之為“形而上學”的的用戶畫像,具體情況表現為:當產品第一次成功上線后,所建立的用戶畫想就一勞永逸基本不去進行信息更新了。誠然由于很多產品產品周期的長久,面對的用戶使用周期較長,很多時候用戶標簽的迭代看上去是一件沒有必要的事兒,但是想要產品長期高度貼合用戶的需求,保持優良的體驗感,就一定要重視對于用戶畫像標簽的維護和迭代升級





          因為用戶的需求和業務都是動態變化的,那么對于我們服務供應側來說對于用戶的認知也一定要隨時處于一個動態的狀態,但凡產品突然滿足不料用戶的需求了,那么客戶隨時可能找一個更為合適的替代品,用戶的忠誠度就和渣男渣女心一樣,都經不起考驗,不要抱有任何的幻想,隨時對用戶保持清醒的認知,對他們的特征進行記錄,才能長久的做出貼合其需求的產品,所以用戶畫像的更新迭代,任重而道遠


          結語:

          關于B端用戶畫像其實還遠不止以上的內容,僅希望通過以上的心得體會能幫助到正在為之犯難的你,與大家相互交流,如果能碰巧助你一臂之力那么真的不甚榮幸,祝正在努力的我們都能變得更強


          文章來源:站酷   作者:核糖bro


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          榜單排名數據,如何做好看?

          ui設計分享達人

          排名榜單數據在我們日常生活中經常會遇到:


          比如微博、抖、快的熱搜榜單、各省份之前的GDP對比、雙11的現場的榜單數據等等


          都會涉及到,可以說排名數據已經涉及到了我們生活中的方方面面。


          那我們應該如何做好榜單排名數據可視化呢?


          我們常遇到的榜單排名數據主要分為兩種:

          ↑ 榜單排名數據分類


          1. 一種是無數據的排名,也就是只有排名和名稱;

          2. 另外一種就是有數據的排名,也就是包含了具體的數值;



          那么,本篇文章我將按無數據的排名和有數據的排名,給大家帶來,當我們遇到榜單排名數據時,應該如何將圖做的更好看!

          總共涉及到大于15種可視化表現形式,希望能夠對你有所幫助!




          一 沒有數值的排名數據,如何做得好看?


          1 基于數字本身去做變化


          最簡單的方法,我們可以從排名的數字本身去做優化,比如將排名數字1、2、3....去做內容的填充豐富,改為TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...


          還可以基于數字本身所處的環境去做優化,比如在其底部加入填充形狀墊底,讓數字排名更突顯出來(如正方形、矩形等等)。



          通過這兩種形式,可以讓單調的排名數字有了更多的細節,內容更豐富,展示更好看。

          ↑ 基于數字本身去做優化的案例



          2 基于整體,通過形狀元素去做變化


          在數字本身變化的基礎上我們還可以加入對文字的變化,比如在文字的底部墊上形狀(如圓圈、條形圖等等)。這樣通過對數字和文字本身的設計強調,就從整體上得到了優化。

          ↑在文字底部墊上圓圈,在整體上突出設計感


          雖然排名沒有具體的數值,無法生成條形圖,但是依舊可以通過等比縮放的矩形來強調文字,比如倒立金字塔和橫向柱狀圖。

          ↑通過矩形形成倒立金字塔和條形圖,在整體來突出設計感



          3 基于內容主題傳達,來做變化


          3.1借助icon元素,來做變化

          如果排名數據內容所傳達的主題是品類、物品、或者城市,那么就可以借助icon來豐富可視化。


          3.2 借助定制插畫,來做變化

          排名的數據如果涉及的是品類中的細分物品,比如生活中常見到的吃的、穿的,用的,那么就可以使用定制插畫來豐富排名可視化。


          3.3 借助頭像、品牌LOGO、產品實景圖,來做變化

          當我們的排名數據中涉及到了人物、品牌、產品之間的排名時,我們可以通過與之對應的頭像、品牌LOGO、產品實景圖來豐富排名的可視化表現。


          3.4借助地圖,來做變化

          如果排名數據講的是省份之間的排名對比,那么我們就可以借助地圖元素來豐富排名的展示。但是如果要用到中國地圖,一定要注意使用中國標準的地圖,當然基于設計的風格,你也可以使用簡約風格,去掉地圖元素,只保留可視化的部分。




          4 借助背景設計元素,去做變化


          排名數據也可以借助視覺背景模板來做變化,比如在涉及某個主題排名榜單時(如淘榜單、星數榜單等)就可以通過背景視覺元素來突出排名。

          其實這種背景視覺模板,對可視化的要求并不高,你只需將排名通過單一表格的形式展示出來,但需要一個很強的視覺背景版來做襯托,這樣,做好一個模板,其余的榜單都可以進行復制使用了。





          二 如果排名數據包含數值,如何做得好看?

          1 基礎可視化排名數據圖


          如果數值單一,那么可以通過常規的可視化表現形式進行展示(如基礎柱狀圖、餅圖、圓圈大小、直角三角形柱狀圖、180°變形柱狀圖等等)。


          1.1 橫向柱狀圖展示

          結合第一節講到的基礎排名樣式再加上橫向柱狀圖來進行展示。這樣的排名展示形式簡單、直觀,特別適合單一排名數據之間的對比展示。


          1.2 餅圖、圓圈大小占比展示

          如果排名數據中數值所傳達的是占比,那么便可使用餅圖或圓圈大小的形式對排名數據進行展示。


          1.3 直角三角形柱狀圖(柱狀圖變種)展示

          通常我們會使用常規的豎向柱狀圖來表現數值的大小,但其實還可以對其進行一點點變形,比如將柱子的右側直角邊去掉,那么就變身成為了直角三角形柱狀圖。

          這時如果排名的文字比較多,我們還可以將排名和文字置于柱子的上方進行展示,一方面節省了空間,另一方面在視覺上也起到了美觀度。


          1.4 180°變種柱狀圖展示

          柱狀圖的變種,在《如何做出比別人好看的柱狀圖?》系列文章中有講到,大家對如何實現這種形式感興趣的可以看下之前的文章,同樣的排名數據也可以基于180°的變種柱狀圖來進行展示。


          2 將主題元素和基礎可視化排名圖進行結合

          除了基礎的可視化展示和排名數據結合外,如果排名數據所涉及的是一些主題元素(如生活中吃的、穿的、用的等等)。那么就可以將基礎的可視化和icon、頭像、產品實景圖、插畫等等去做結合來豐富可視化。


          3 使用?;鶊D來體現排名

          當排名的數據中,還多了一列數據涉及到分類, 那么就可以使用桑基圖來進行可視化的展示(如國家屬于什么地區、公司屬于什么行業、城市屬于什么省份等等)。對如何實現?;鶊D感興趣的可以看看之前發的?;鶊D教程。


          4 排名連線圖展示

          如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。


          4 排名連線圖展示

          如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。


          5 地圖展示

          和第一節講到的地圖一樣,如果排名數據中涉及到了地理位置數據,那么可以結合地圖進行排名數據的展示。通常情況下,完成地圖可視化后,可將具體的排名信息以表格的形式羅列在地圖的空白區域內,這樣結合地圖和具體的詳細排名數據,就會更加的直觀和豐富。


          6 組合圖展示

          如果我們的排名數據維度非常的豐富,數據所包含的信息點在3個以上,那么就可以通過將多種可視化的表現來進行結合,通過組合式的可視化來進行展示。




          7 動態柱狀圖、動態折線圖展示排名


          7.1 動態柱狀圖

          排名數據也可以通過簡單的動態柱狀圖來進行展示。如果只是單一的排名沒有涉及年份的變化,那么可以通過柱子從上到下一個一個地出現來進行展示(如下圖左),如果涉及到年份的變化, 那么就可以通過柱子隨著年份的上升或下降來進行動態的展示(如下圖右)。

          動態柱狀圖的實現方法也很多,我在想做出漂亮的圖表,這12個網站不能錯過!中有講過,可以通過flourish網站(https://flourish.studio/)來快速的實現。同時如果想自己DIV得到更定制化版本的動態柱狀圖,也可以使用B站UP主見齊的開源可視化項目(http://r6d.cn/JdYy)進行實現。


          7.2 動態折線圖

          同樣的我們還可以通過動態折線圖的形式進行展示,這種表現形式主要看的是排名的趨勢變化,同樣的,借助flourish網站(https://flourish.studio/)就可以實現這種動態折線圖的展示效果。

          8 3D建模渲染可視化展示


          當然,我們的排名數據也可以使用現在市面上很火的3D可視化的表現形式來進行展示,比如隨著攝像機移動的3D柱狀圖、還有基于主題而自定義化的3D場景排名展示等等。


          8.1 3D柱狀圖展示

          將基礎的柱狀圖,通過3D立體柱狀圖的形式進行展示,排名的結果并不是啪的一下直接公布,而是隨著鏡頭慢慢地公開,對觀眾來說隨著鏡頭的視角觀看有一種慢慢揭秘的感覺!


          8.2 3D內容場景展示

          如果我們的數據,所要傳達的信息非常富有主題場景感,那么就可以通過3D場景渲染的形式進行展示,比如下圖GIF中,在表現《哪個國家上班族工作時間最長》就可以將各個國家的學生,置于一個教室中,再通過鏡頭的移動位移來進行展示。

          這種展示形式,實際投入成本還是很大的,從建模到渲染至少也需要2-3天的時間。所以最好基于一個好的選題再選擇這種形式,要不然就會出現”雖然視頻本身展示酷炫,但是由于選題不好,最終播放量不高“的尷尬情況。



          三 做好排名數據的一些小事項


          1 時間緊急時,一切從簡

          比如說,當我們在時間非常緊急的時候,排名數據如果是和地理數據相關的,那么我們會盡量避免使用地圖元素來豐富可視化,因為這會增加我們審核檢查地圖正確性的時間成本。我們可采取常規的可視化表現形式進行展示,雖然會丟失掉一些美觀度,但是正確性會有更高的保障。


          2 強調重點數據

          基于文章內容,需要在圖中重點強調某些數據時,可通過填充顏色、框選、重點信息豐富(比如展示TOP3)的形式來對排名進行強調.




          四 總結


          排名數據看似簡單,但其實所包含的展示形式和細節還是非常多的。希望當你在遇到排名數據時,這篇文章能夠對你有所幫助!

          文章來源:站酷   作者:鄒磊ZouL


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          3種常用網頁布局與設計注意點

          資深UI設計者

          頁面布局是頁面設計的一部分,我們不僅要處理頁面上視覺元素的布局與排列,還要考慮這些元素在不同大小的屏幕上的適配問題。


          頁面布局不僅僅是前端同學要考慮的問題,也是設計同學要重點關注的;怎樣的布局能更好的展示頁面內容同時兼容不同屏幕的大小呢?不同的布局形式下,設計師要著重考慮哪些點呢?今天就來探討下這個問題。


          一、固定布局(靜態布局)

          固定布局(Fixed Layout):網頁上所有的元素寬度以像素(px)為單位。例如,直接設定網頁的主體部分寬度為960px/1200px,某個搜索框寬度為60px等等。這種布局具有很強的穩定性與可控性,缺點也顯而易見,即不能根據用戶的屏幕尺寸做出不同的表現。當前,大部分門戶網站、新聞資訊類網站、企業的PC宣傳站點都采用了這種布局方式。


          1.設計方法:

          PC:大多采用居中布局,所有樣式使用絕對寬度/高度(px),設計一稿合適的尺寸就可以,在屏幕寬高縮小時,使用橫向和豎向的滾動條來查閱被遮掩部分;如果大于這個寬度則內容居中,填加背景寬度。頁面的模塊、彈窗、間距等都是固定尺寸,需要設計補充的頁面規約比較少。


          2.優劣勢:

          優勢:這種布局方式對設計師來說是最簡單的,跟動態布局相比,能夠更好地控制頁面的美觀度,排版穩定,在窗口拉伸過程中規避了內容重疊或者不規則的情況,仍保持原始比例,靜態位置和內容樣式。

          劣勢:顯而易見,即不能根據用戶的屏幕尺寸做出不同的表現,對于超大屏和超小屏用戶不友好。


          3.舉例:

          知乎網頁端:



          微博網頁端:



          2.流式布局(百分比布局)


          流式布局(Liquid)的特點是頁面元素的寬度按照屏幕分辨率進行適配調整,但整體布局不變。

          流式布局也叫也叫百分比布局,是移動端開發中經常使用的布局方式之一。元素的寬度按照屏幕分辨率自動進行適配調整,保證當前屏幕分辨率發生改變的時候,頁面中的元素大小也可以跟著改變。

          流布局與固定寬度布局基本不同點 就在于對網站尺寸的側量單位不同。固定寬度布局使用的是像素,但是流布局使用的是百分比,這位網頁提供了很強的可塑性和流動性。把元素的寬,高,邊距,間距不再用固定數值,改用百分比,這樣元素的高,間距會根據頁面的尺寸隨時調整,以達到適應當前頁面的目的。屏幕分辨率變化時,頁面里元素的大小會變化而但布局不變。

          * 百分比是基于元素父級的大小計算得來的;* 元素的水平或者豎直間距都是相對于父級的寬度計算的.* 邊框不能用百分比設置


          1.設計方法:

          網頁中主要的劃分區域的尺寸使用百分數(搭配寬度最大值、最小值屬性使用),例如,設置網頁主體的寬度為80%,最小寬為960px,(最小寬也就是保證頁面內容不會錯亂的情況下的寬度,到達最小寬度后,不再適應,出滾動條)圖片也作類似處理(寬度:100%, 最大寬一般設定為圖片本身的尺寸,防止被拉伸而失真)。

          注意:

          寬度自適應,但是里面的圖標、字體等也是固定大小的,并不是所有的東西都是自適應的。一些大的圖片,設置寬度為百分比自適應即可,隨著屏幕大小進行變化,對于小圖標或者文本等, 一般都是固定寬高大小。

          同時考慮到頁面具體模塊、彈窗、字段等在最小寬度下的顯示,比如給出字段最小寬度,在最小寬度顯示不下時如何處理。可以參考阿Zi之前的文章:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

          在網頁布局中,我們通過設置元素的寬高定義元素的顯示大小,但是,在不同窗口大小,不同分辨率下,寬高相同的元素顯示狀況是不同的。所以,我們往往需要元素的大小能夠根據窗口或子元素自動調整以達到自適應。沒錯,在頁面設計中,自適應的規則往往是需要設計補充的最多的。

          因為阿Zi所在公司的管理系統是采用左側導航欄固定,右側內容區自適應的流式布局,所以舉幾個實際工作中的應用的規約例子:


          a.彈窗自適應


          b.模塊、卡片自適應


          一種是當頁面橫向拉伸時,卡片里內容個數不變,布局不變??梢园褜挾染殖蓭讐K,然后內容在模塊內居中,給出最小寬度;如下,設定單個最小寬100px,如到達最小寬度后顯示不全,出現橫向滾動條;更靈活的情況就是收縮時內容/區塊布局變動的。同樣要設置區塊最小寬;向右自適應—橫向排序,右側不夠則折行;最小寬度平均分成均等份,剩余寬度均分到其他列。


          據統計,PC端用戶的主流分辨率主要為 1920、1440 和 1366,個別系統還存在 1280 的顯示設備。有些情況下不太好控制內容自適應,那么就需要出2,3套尺寸的設計稿來適配??梢愿鶕唧w情況判斷系統是否需要進行適配,以及哪些區塊需要考慮動態布局,哪些時候出多套尺寸。


          2.優劣勢:

          優勢:流式布局一般用于解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)

          劣勢:因為寬度使用%百分比定義,但是高度和文字大小等大都是用px來固定,所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,顯示不協調。


          3.經典的流式布局結構:

          兩欄

          常見的做法是將左邊的導航欄固定,對右邊的工作區域進行動態縮放。

          兩欄的左側固定寬欄框大多在40到300范圍(適用于左側導航、篩選的情況)。



          舉例:

          Ant Design



          三欄

          在特殊場景下,左側會有雙重左欄的情況,適用與一級導航簡單,二級導航復雜的頁面。


          舉例:Teambition



          還有兩側固定,中間自適應的布局,有圣杯布局和雙飛翼布局。圣杯布局來源于文章In Search of the Holy Grail,而雙飛翼布局來源于淘寶UED。雖然兩者的實現方法略有差異,但是視覺上都差不多,就是三欄,然后左右兩邊寬度固定,中間寬度自適應。


          還有瀑布流布局也是流式布局的一種。是當下比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest,逐漸在國內流行開來。

          優點 

          1.有效的降低了界面復雜度,節省了空間;

          2.對觸屏設備來說,交互方式更符合直覺:在移動應用的交互環境當中,通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣,而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。

          3.更高的參與度:以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上,從而讓他們更樂于沉浸在探索與瀏覽當中。

          缺點 

          1.有限的應用場景:無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容。 

          例如,在電商網站當中,用戶時常需要在商品列表與詳情頁面之間切換,這種情況下,傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。 

          2.關于頁面數量的印象:其實站在用戶的角度來看,這一點并非負面;不過,如果對于你的網站來說,通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略,那么單頁無限滾動的方式對你并不適用。

          3.關于精準定位:無限滾動加載讓用戶很難精準定位到某一模塊。


          舉例:pinterest



          三.響應式布局


          響應式布局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。響應式布局能使網站在手機和平板電腦上有更好的瀏覽體驗,也就就是說一個網站能后兼容多個終端,而不是為了每一個終端做一個特定的版本。

          響應式布局意味著,無論用戶是在iPhone還是筆記本電腦上查看網站,都應該能夠訪問所需的內容,擁有一致的用戶體驗,這就要求UX/UI設計人員考慮的問題更多,同時考慮到網站和移動設備的場景,忽略這些肯定會阻礙網站或移動應用程序的用戶體驗。

          接下來從響應式設計的特點著手,展開下設計師需要了解和注意的點。


          1.響應式設計的特點

          CSS斷點

          CSS斷點是響應式網站的經典特征。他們的工作是根據屏幕大小將設計“分解”為較小的網站版本。斷點通常具有最小和最大寬度,這些寬度決定了用戶可以看到哪個版本的設計。

          但是,一個網站需要多少個斷點才能真正響應?如果設備不適合最小或最大寬度,則網站設計仍然看起來很奇怪,這違背了創建響應式設計的全部目的。

          尼克·巴比奇(Nick Babich)指出,大多數響應式網站都需要至少三個或四個斷點才能正常工作。根據縮放的大小,內容將相應地進行調整。斷點通常針對移動設備,平板電腦和臺式機視圖進行細分,盡管您可以擁有更多的斷點,以便涵蓋所有基礎,以提高設備的靈活性。許多設計師還包括“較小”的斷點,這些內容在內容中會自行調整以保持設計的視覺平衡,但不會發生大的變化。這包括更改字體大小之類的內容,但不包括一般結構。


          最佳的視覺效果

          圖像在任何網站中都非常重要,無論是高分辨率照片還是自定義插圖。那里的一些設計師相信裁剪圖像,以便用戶只能在較小的屏幕上看到圖像的一部分,因此視覺效果保持不變。對于我們而言,最好的方法是使用矢量圖像。


          移動設備優先

          對于許多設計團隊而言,最好首先關注最小的屏幕來開始設計。這主要是因為通過將移動設計放在首位,團隊可以對內容的去向有一個很好的了解。

          響應式設計圍繞內容,假設你采用建議的“移動設備優先”方法,則意味著您應該為移動設備分配重要內容的優先級,并隨著屏幕尺寸的增加添加更多內容。

          當涉及到響應式設計時,與常規設計相對應的只是關注內容。因此,通過首先創建移動版本,我們可以縮小從一開始就需要顯示的關鍵內容(用戶絕對需要的部分)的范圍。從那里,我們可以在進入更大的屏幕時添加更多的細節和更多的內容,或者找到更好的方式來顯示關鍵內容。


          2.響應式設計的注意事項:

          1)注意視覺層次,從最小寬度的斷點開始

          這建議從最小的屏幕分辨率開始的原因有關。這不僅是要了解內容的哪些部分絕對重要,還在于了解呈現這些內容的最佳方法。


          當網站在不同的斷點切換時,網站的視覺層次結構可能必須適應,從某種意義上說,它需要適應屏幕尺寸的變化,為了保持產品的可用性,組件也必須適應。


          如上所述,在響應式網頁設計中使用的每個斷點都將有一個最小寬度和一個最大寬度。當使用移動優先的方法設計,一個好的經驗法則就是可以從你的三個斷點的每個最小寬度開始設計。這樣,您將為較小的設備設計屏幕,并在屏幕變大時添加更多內容和UI元素。請記?。合蛏贤卣苟皇窍蛳驴s放,向上拓展總是容易的。

          2)按鍵尺寸至關重要

          對于基于Web的產品,按鈕可能非常簡單。畢竟,光標是幾乎任何人都可以使用的準確工具,但我們的手指說的不一樣。所討論的手指的大小可能因用戶而異,并且設計人員需要考慮移動屏幕上的可用空間很小。

          根據Apple的《人機界面指南》,平均手指輕觸為44×44像素。為了提高可用性,請確保針對此平均值對按鈕和可點擊區域進行適當調整。

          3)優先瀏覽

          如果您依賴導航欄作為查找信息的主要方式,則需要在移動設計中仔細確定導航欄的優先級。該產品的各個方面(例如導航設計)絕對至關重要,需要在響應迅速的網站中進行仔細計劃。隨著設備屏幕的變小,該導航欄的空間將越來越小。

          那么像這些問題就需要我們重點考慮:什么時候隱藏導航選項?全部隱藏嗎?首先隱藏哪些?


          常用的做法是,將導航、頭部搜索、用戶信息等內容隱藏在按鈕后面,例如我們在手機上經常能看到的漢堡菜單。的確,漢堡菜單并不是唯一的選擇,但不可否認的是,整個導航菜單都需要隱藏在智能手機中。


          這就是要嘗試確定整個產品中最重要的頁面,并確保無論使用哪種設備,用戶都可以找到它們。在設計過程中盡早完成此優先級設置總是最好的,因此,如果我們從移動設計入手,我們將已經需要包含一些重要的內容。


          3.優劣勢

          優勢:


          a.用戶體驗友好

          隨著電腦尺寸多元化,智能設備(pad/智能手機)普及化,在當下追求用戶體驗至上的時代,網站普遍使用固定的寬度逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上,兩邊留白過多。在手機上顯示,內容顯示過小,用戶為了看清楚,首先需要放大界面,再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境,自動調整界面布局、展示內容、內容大小,提供非常好視覺展示效果,一致性友好體驗。

          b.提高轉換率和銷量

          響應式網站意味著您無需在網站設置跳轉,從而極大完善了用戶體驗,這也是響應式網站的最大優勢所在。另外,使用集成式設計和CSS表單一類的功能使網站無論在何種設備上都能營造出風格一致的感覺和外觀。若熟悉這種布局,用戶可以在任何設備上輕松瀏覽您的網站,進而提高轉換率。

          c.節省開發投入

          摒棄傳統網站,選擇響應式網頁,單從開發階段就節省大量時間和金錢。為不同的設備同時開發多個網站,意味著后期也需要更多的開發支持費用和維護成本。

          d.三站合一,維護簡單

          電腦、手機、微信三個網站使用的是同一個網址,同一個后臺管理,數據同步更新,所有圖片和內容只需要上傳更新一次即可,維護簡單輕松。


          劣勢:

          a.設計與風格有局限性

          雖然響應式布局擁有如此顯著的優點,但它也并不是十全十美的,在很多方面,它也有它自身的局限性:

          自由度太低,局限性較大,這種情況就是必須兼顧移動端以及PC端的表現,比如最常見的移動端并沒有懸停效果,PC端就要酌情考慮了。需要考慮在手機,pad,PC上三種屏幕下的頁面內元素的呈現,會導致有著非常大的局限。

          b.對IE老板兼容性不友好

          對于老版本IE(IE6、IE7、IE8)支持不好,這是一個致命的問題,如果你的網站用戶大多還采用老版本IE的話,建議不做響應式網頁設計。

          c.靈活性有所欠缺

          基于不同終端的設備屬性不同,對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計,如:電商類型網站,寬屏的pc端內容如果全部要在手機端進行展示,勢必導致手機端的界面非常長,需要根據手機端屬性進行重新信息框架設計,這樣對響應網站要求非常高,實現難度與成本非常高。但是大型網站為了提高用戶體驗,通常做法,把高分辨率寬屏網站最小的響應尺寸響應到1024px,不再適配手機端,手機端重新設計開發一套手機網站,簡單理解為2.5響應,如:電商網站亞馬遜、Calvin Klein、Nike、視頻網站Youtube,等。

          d.速度可能會變慢


          由于響應式頁面是同時下載多套CSS樣式代碼,可能在手機上就下載PC、Pad的冗余代碼,導致文件變大,影響加載速度。



          根據響應式網站的優缺點,我們不難看出:企業官網、單頁宣傳網站非常適合做響應式網站設計,由于它們的界面內容比較少,結構比較簡單,所以在不同終端、不同尺寸設備上進行網站信息框架調整、內容加減、圖片、文字、柵格響應比較容易。內容比較多帶有功能性的網站不適合做響應式網站設計。


          3.舉例

          示例1----Dribbble

          在1960-2048的屏幕下,顯示5列內容


          在950-1330-1960屏幕下顯示3到4列


          在500-620-950尺寸下顯示1-2列布局,并且把頭部主導航、搜索框、用戶設置等內容收起到到左上角菜單:

































          示例2----Event Apart

          互動設計會議Event Apart創造了從其主要網站到其移動網站的無縫過渡。

          他們選擇在大多數平臺上保持大多數相同的布局,平板電腦版本與臺式機相同,并且可以使用。這是因為他們為清晰起見選擇在白色背景上以粗體顯示內容,并且在調整大小時,可以輕松滾動信息。

          唯一真正的變化是,對于移動版本,頂部的面包屑折疊成一個漢堡菜單,并用“菜單”一詞明確指示。

          示例3----Popular Science

          無論使用哪種設備,Popular Science都能為您帶來出色的用戶體驗。

          正如您所期望的那樣,內容處于中心位置,并且具有響應式圖像和簡潔的版式,Popular Science成功地創建了易于閱讀和使用的響應式網站。本網站上的信息以一種可以在各種設備上輕松按比例縮小其所有內容的方式顯示。


          最后

          雖然目前響應式設計的模式的普及還是有很多難題需要突破:比如響應式的圖片、跨端交互、更高的性能、全新的合作流程等等。但是隨著科技不斷發展,響應技術逐漸完善,給響應式設計提供強有力的技術支持;響應式設計可以在不同終端提供完美展示效果與友好的用戶體驗,吻合用戶體驗至上的趨勢。所以說,響應式設計必定是未來發展趨勢。

          文章來源:站酷   作者:ZZiUP 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          前端達人

          什么是設計規范?

          設計規范是一個老生常談的話題了,網上相關的文章也非常多,但我相信有很多設計師對設計規范的理解還是比較模糊,認為設計規范指的就是字體,顏色,控件規范那些,這種理解其實是比較狹隘的。

          于我而言,設計規范用一句話總結就是:設計規范是針對特定產品所制定出來的一整套產品標準,包括流程標準,技術標準,設計規則等等。通過這套標準,能減少錯誤發生率并提高設計質量和輸出穩定性。

          舉個例子,我在做QQ的3D厘米秀項目的時候,一開始合作方提交的設計資源正確率很低,風格也各不相同。然后為了解決這個問題,我在項目中定義了流程標準,資源標準,cp合作標準等等。通過這些規范讓多個不同設計團隊能合作到一起,提升了整體協作的效率和質量,這些標準就成了設計規范的一部分。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          可以說,每個項目因合作方式,人員習慣,落地形式的不同,所形成的規范是有區別的。所以,設計規范更應該是針對項目來說的,除非是問你Android或iOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的,回答更應該是一種思路的描述,比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。

          設計規范的作用

          1. 遵守用戶習慣,減少認知成本

          Don’t make me think。大家都知道,好用得產品都是盡可能的減少用戶思考,不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時,你會熟悉的去左上角找返回操作,但如果把返回操作放在右上角就會很不習慣;再比如對國內用戶來說,他們習慣正確按鈕用綠色,錯誤按鈕用紅色,如果你非要反過來制造所謂的差異化,用戶就會感到困惑,誤操作的概率也可能會大量增加。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          2. 統一品牌性格

          品牌性格不論是大到公司層面,還是小到具體某一個產品,都需要有一套品牌識別體系來約束,只有統一得視覺印象才能更好的讓用戶記住。那這些品牌識別體系其實也是設計規范的一部分,在具體執行中,可以根據一些品牌核心概念規范快速做一些風格決策。

          比如騰訊QQ的品牌影像風格關鍵詞是青春、互動,敘事和干凈,那么在選擇畫面配色的時候就可以根據關鍵詞指導畫面的選擇,使得整體的畫風得到統一。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          3. 降低新人學習成本

          這里所說的新人不單純指剛入職場的設計新人,也包括剛參與到一個新項目的設計老手,設計規范是能夠以的溝通成本實現快速上手。有成熟的控件資源和標桿的設計參考,就算是之前完全沒做過的設計師也能搭建出一個還不錯的頁面。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          4. 提高開發效率

          有了好的設計規范,開發就能把一些常用的樣式進行封裝,在需要復用的場景中直接調用。這樣做,一方面可以通過調用的方式減少樣式代碼的復制使用,提升效率的同時降低軟件包體積,另一方面也可以減少不必要的工作量,方便后期維護。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          5. 保證設計的一致性

          有設計規范的約束,能讓團隊在一個既定的框架內做設計,統一大家的輸出質量,從而保證設計的一致性。

          怎么學習設計規范

          設計規范的學習肯定不是靠死記硬背,而是要講究方法,從我自身的經驗來說,我覺得大致可以有以下2個步驟:

          在新手期,多去看一些大廠的設計規范,先建立認知,不要求全部記住。把這些規范當成字典,先大致了解一遍,等真正做的時候拿不準再去查閱就好了。這里推薦幾個必看的大廠設計規范官網,建議收藏。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          其實網上很多設計規范,原理之類的文章,源頭都來自于這些大廠規范,想獲得一手信息,最好是自己去這些網站多看看。

          這也就是我為什么不寫具體規范數值的原因,因為網上的資料實在是太多太詳細了,寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己,需要更多的主動性,這樣才能提升自己的學習能力和解決問題的能力。

          針對自己要做的模塊,有針對性的找市面上大廠的應用作為參考,直接截圖標注,自己總結規律印象會更加深刻。

          我開始做UI的時候就這樣學習的,不知道字體該用多大,間距用多大,顏色怎么用,就直接去找相類似的界面截圖參考,量它們的尺寸,吸它們的顏色,然后就這樣一步步的把規范經驗積累起來了。

          比如從QQ的動態tab頁面中,我們可以借鑒到很多信息,比如列表的高度,列表左側的圖標尺寸和圓角,間隔線高度和配色,右側的箭頭大小和配色,列表文字的字號和配色,用戶頭像大小和結合的樣式,圖標與文字的間距等等。這些借鑒并非是抄襲,要你做的跟這個界面一模一樣,只是參考這里面的某幾個屬性然后結合自己的產品綜合運用,減少出錯。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          發現了嗎?一個優秀的界面設計,上面的任何信息其實都可以拿來參考,就看你會不會用了。

          需要強調的是,這些參考來的標準,并非是標準答案,還是要根據自己的實際項目需要做調整,只是至少知道一個范圍,在這個范圍內不大會犯錯。

          這就像剛開始做設計時一樣,去參考這些規范相當于做臨摹的練習,這種臨摹是需要的,臨摹的過程中不斷加入自己的思考,然后通過總結,變成自己的知識體系。

          怎樣定義出設計規范

          隨著對設計規范理解的加深,自身設計能力的不斷提高,就要開始從設計規范的使用者轉變為規范的制定者了。如何制定針對項目的設計規范呢?我的經驗是在項目過程中把做的好的和踩坑后的正確解法進行總結,并形成文字,積累多了就形成了規范。要把每一次遇到的問題都當成是一次改進流程和規范的機會。

          我自己是有隨時記錄的習慣,項目中一旦發現問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現問題的,因為出了問題才能找到優化的機會,自己也能從中找到解決問題的成就感。

          曾經在QQ的3D厘米秀項目中遇到過非常多的坑,然后從填坑的過程中慢慢總結出各種設計規范,去幫助項目減少錯誤率,提升設計質量。從最終的產出和結果來看,自身的進步是可觀的,對產品的幫助也比較大,所以很值得去做。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          使用規范會影響設計的創意性嗎?

          剛掌握設計規范的時候,干活是特別舒服的一件事,因為做需求可以很快,好像拼拼組件就能完成。但稍微做久一點時間,又會覺得好像沒啥進步,天天拼組件,擔心影響設計的創意性,真是挺矛盾的。

          其實,規范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規范框架不變化,又要在設計的過程中給用戶制造驚喜。比如,整個UI的配色和字體需要保持統一,但在一些圖形,動效上可以做出亮點,讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規范的打破與重建一定是需要一個動態平衡的過程。

          總結

          設計規范絕對不需要死記硬背,而是要充分理解并靈活使用,才能發揮它的價值。隨著UI行業的不斷成熟,設計工具的簡單化,各種組件化資源和思維越來越普及,可以預見的是未來一般的UI界面會高度組件化,設計師單純在界面上花費的時間可能會越來越少。

          這從行業的發展來說,減少了很多體力勞動,讓設計和開發有更多的時間去打磨產品細節,肯定是好事。但對設計師自身來說,省下了以前那種常規設計需求的時間后還能做些什么,設計師的價值又在哪?值得每個設計師去思考。


          轉自:優設網

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合