99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

首頁

如何優化交互設計

博博

1.提示欄

1.1 視覺

這個頁面第一眼最突兀的地方首先是“知道了”這3個字,因為在這個界面中,橙色產品色,而突然出現的藍色會讓你覺得特別醒目,所以我們第一眼會看到這三個字以及這一行的內容,這里只涉及到了UI層面上的視覺表現就可以將用戶的注意力吸引過來,但提示欄的視覺優先級并不應該設計的這么高。

1.2 文案

這里的業務規則是,用戶必須將保險內容全部瀏覽完才可以進入到下一階段,也就是說一共4頁內容,如果你在擊下方的checkbox或者下一步時時,內容沒有定位在4/4的分頁狀態時,就會被判定沒有閱讀完保險內容。但是這里的文案只是告訴用戶,請向下滑動瀏覽全部內容。

2.條款按鈕

2.1視覺

底部有3個條款按鈕,在視覺表現上是3個統一樣式的幽靈按鈕,點擊后會出現彈窗讓用戶閱讀條款內容,并在一定時間內允許關閉,用戶點擊閱讀完后樣式不變,但這里的規則是必須閱讀條款且全部閱讀。

2.2 交互

必須閱讀完三個條款與說明,才可進入下一步。所以這里就會出現多種問題,比如用戶閱讀完保單內容但沒有注意到中間的條款按鈕,在視覺沒有給出“必讀”的意符的情況下,用戶會先點擊下一步,但是被告知需要閱讀條款,用戶點擊閱讀完第一條條款,認為自己已經完成要求后繼續點擊下一步,但發現需要閱讀完三個條款才能完成要求。

這樣的交互與信息設計讓用戶在該頁面的操作效率大幅度下降,所以面對這種情況,我們是否可以用一些交互優化的手段來解決這些問題呢?在選擇策略和方案之前,我們需要思考一些問題:

1.條款的必讀性、風險控制

2.效率與法律責任的權衡

3.面對多文本、文檔的操作、閱讀的便利性

其實這些問題一部分是業務規則,如果業務上的要求不是必須的那么在效率上的操作空間就會比較大。比如我們經??吹降臈l款和說明的閱讀,幾乎沒有人會去全部一字不落的看完,但是為了讓用戶充分了解條款、協議的內容,以防后續帶來的風險,現在產品的設計策略就是給用戶一個5秒的閱讀倒計時,倒計時結束前無法關閉彈窗,但說實話這種設計也是雞肋的很,不想看的人你給60秒也不會去看,想看的人不設計倒計時也會很仔細的看。所以現在很多產品也做了簡化處理,例如在這個保險條款的交互方式中,我們也可以這樣設計。在底部直接將條款做成鏈接的形式,和checkbox一同做在一個欄里方便用戶操作,想看自己點,不想看就直接勾選后下一步即可。

關于風險揭示、知曉以及同意協議這個步驟有很多種做法,還有下方的3種例子:

1.將所有風險平鋪讓用戶勾選并同意,這樣的方式比做在一個模塊里打鉤其實形式上是一樣的,因為都可以全選后確認,一種同構異型的做法。將風險需知面積展示的更多,希望用戶能對其重視,但是為了效率起見還是做了一個全選,也是在形式上尊重了“風險”。

2.用標簽選擇的形式將合同、條款披露給用戶,這種形式在本質上也和上面的差不多,甚至很多用戶可能不回去點第二個標簽。

3.現在很多產品因為政策的關系都會在登錄頁面中加上用戶協議和隱私政策的說明,需要用戶自己去點擊,很多用戶都覺得在登錄前點擊該協議非常的麻煩,有時也會忽略,所以一些聰明的產品就在用戶點擊登錄后再彈出彈框讓用戶同意該協議。

最后,話又說回來,領導非讓用戶點擊完3個按鈕,才可以點擊下一步,該怎么設計呢?首先在視覺樣式層面,用常規的色塊、線條樣式的按鈕肯定是不行的,因為在這里我們要考慮幾個點:

1.如何讓用戶知道這3個條款是必須點擊閱讀的 

2.讓用戶知道只有全部閱讀完才可以進行下一步。所以做成常規按鈕,用戶無法知道該點哪個,先點哪個,要點幾個。

那可以做成勾選嗎?也不行,感覺比做成按鈕還要離譜。

那我們可以考慮這樣做,在這個步驟中也無法單獨將閱讀條款列為一個界面,所以只能繼續在頁面下方用列表的形式讓用戶去閱讀。通過這樣的設計可以讓用戶明確我該點哪個,哪個還沒有閱讀,當用戶沒有完成閱讀要求時,底部按鈕置灰。






作者:應駿
來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

用戶體驗設計流程

濤濤

用戶體驗設計流程


雖說用戶體驗是主觀的,但對于一個界定明確的用戶群體來講,其用戶體驗的共性是能夠經由研究實驗來認識,并通過良好設計去改善的。用戶體驗設計(User Experience Design,通常簡稱UX Design)就是以提升用戶體驗為目標的一套設計流程。為什么用戶體驗設計如此重要呢?因為隨著科技進步,當功能的實現不再成為挑戰時,產品的設計和體驗就成為了贏得市場競爭的關鍵因素。



由于系統軟件糟糕的UI設計(菜單排布問題)所導致的誤操作,美國居民受到導彈襲擊的驚嚇



· 美國Forester的一項研究發現,針對UX投入的每1美元,能夠帶來2~100美元的收益。


· Amazon把按鈕文字從“注冊(register)”改成“繼續(continue)”之后,銷售增長了3億元。


· McAfee重新設計UI之后,客服電話減少了90%。· Airbnb的Mike Gebbia認為,公司從接近失敗到獲得100億美元市值,最大因素要歸功于UX


UX究竟在設計些什么 

廣義的用戶體驗設計,是包含了內容功能設計,信息架構設計,用戶界面設計,交互設計,視覺設計,語言設計,動效設計,音效設計,在一定程度上涵蓋了產品物理外觀設計(工業設計),平面/包裝設計,空間設計,服務流程設計等。它意味著一個高度交叉綜合的領域,涉及到人與產品系統或服務發生關系并產生體驗的所有觸點。一般或狹義的UX Design,則主要作為與UI Design區分,多用于互聯網軟件(或消費電子等)行業基于屏幕的設計,包含信息框架設計,用戶交互設計,可用性研究等。這里的UI Design偏重于視覺上的設計。而在現實中我們也經常把UX等同于“交互”。





用戶體驗設計的核心和本質,就是研究目標用戶在特定場景下的思維方式和行為模式,通過設計提供產品或服務的完整流程,去影響用戶的主觀體驗??梢娪脩粞芯吭谡麄€UX流程當中的重要性。而認知心理學(Cognitive Psychology)則是用戶體驗設計的理論基礎和科學依據。它是一門研究認知及行為背后之心智處理(包括思維、 決定、推理和一些動機和情感的程度)的心理科學。這門科學包括了廣泛的研究領域,旨在研究記憶、注意、感知、知識表征、推理、創造力,及問題解決的運作。相關的還有人體工學(Ergonomics)與人因工程學(Human Factors Engineering),是研究人和機器、環境的相互作用及其合理結合,使設計的機器和環境系統適合人的生理及心理等特點,達到提高效率、安全、健康和舒適目的的一門科學??捎眯裕║sability)的概念最早出現于1979年,遠比唐·諾曼在1993年提出的“用戶體驗”概念要早??捎眯缘腎SO定義是“用戶在特定環境下完成指定目標的效果、效率和滿意度”(ISO 9241-11),而用戶體驗指“用戶與產品、服務、設備或環境交互時各方面的體驗和感受”。可用性的范疇比用戶體驗窄,它聚焦于任務完成。而用戶體驗是外觀呈現、功能組合、系統性能和交互行為等因素的綜合結果。




上圖將用戶體驗細分為工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌體驗(Brand Experience),最內部的圓代表最基礎的用戶體驗。


用戶體驗 / 產品設計的流程與方法


以用戶為中心的設計(User-Centered Design,簡稱UCD)概括了用戶體驗設計的典型流程和方法學。以用戶為中心的設計思想非常簡單:在設計開發產品的每一個步驟中,都要把用戶列入考慮范圍。從前期的用戶研究需求挖掘,到后期的用戶測試設計驗證,都要圍繞目標用戶群來進行。



在UCD設計流程的每個階段,都有多種不同的方法來幫助我們達到目的。

用研分析:


· 單獨訪談(Individual Interviews):一對一的用戶討論,讓你了解某個用戶是如何工作,使你知道用戶的感受,想要什么和他的經歷。


· 焦點小組(Focus Groups):組織一組的用戶進行討論,讓你更了解用戶的理解、想法、態度和想要什么。


· 關鍵利益人訪談(Stakeholders Interview)


· 情境訪談(Contextual Inquiry or Field Study):走進用戶的現實環境,讓你了解你的用戶的工作方式,生活環境等等情況。


· 日記研究(Diary Study):日記研究可以讓用戶記錄自己的進程,研究者以非打擾的視角探查用戶的體驗。


· 問卷調研(Questionnaire Study):利用網上或紙張的問題list對用戶進行發放填寫,從而收集用戶對產品的需求建議。


· 任務分析(Task Analysis):通過任務分析了解用戶使用產品時的目標和操作方式,習慣(GOMS模型)。


· 用例分析(Use Case Analysis)


· 卡片分類(Card Sorting)、樹形圖測試(Tree Testing):觀察用戶是如何理解內容和組織信息,用來幫助你的產品更合理地組織信息?!?競品分析(Competitive Analysis)、標桿分析法(Benchmarking)· 桌面研究(Desktop Research)、市場研究(Market Research)· 用戶角色模型(Personas):構建一個虛構的人來代表特定目標用戶群組,設計團隊圍繞這個虛擬人物設計開發產品。


· 用戶體驗旅程圖(User/Customer Journey Mapping or Experience Mapping):從用戶角度出發,以敘述故事的方式描述用戶使用產品或接受服務的體驗情況,以可視化圖形的方式展示,從中發現用戶在整個使用過程中的痛點和滿意點,最后提煉出產品或服務中的優化點、設計的機會點。


· 態度研究(Attitudinal Research)和行為研究(Behavioural Research)


· 定性研究(Qualitative Research)和定量研究(Quantitative Research)



設計階段:


· 腦力風暴(Brainstorming Ideation)


· 概念草圖(Concept Sketching)


· 思維導圖(Mind Mapping)· 交互流程(User Interaction Flow)


· 信息架構(Information Architecture):對功能內容進行高度概括的統籌規劃、設計安排。


· 情景與故事版設計(Scenario & Storyboard Design):情景是指特定用戶如何使用產品完成特定目標的簡短故事。故事板是連續的一系列草圖,用視覺的方式表現用戶如何使用產品,形式上類似漫畫分鏡。


· 線框圖(Wireframing)


· 低保真原型與高保真原型(Lo-fi & Hi-fi Prototyping)


· 紙質原型(Paper Prototype)


· 視頻原型(Video Prototype):通過視頻來演示用戶如何與產品系統進行交互。


· 綠野仙蹤原型(Wizard of oz Prototype):使用角色扮演來模擬用戶如何與產品系統進行交互。


· 可交互原型(Interactive Prototype)


· 視覺設計(Visual Design)


· 設計模式(Design Patterns)、設計語言(Design Language)、設計規范(Design Guidelines)與設計體系(Design System)


· 標注文檔(Design Spec)


· 動效設計(Animation Design)


· 參與式設計(Participatory Design):將終端使用者或利益相關者帶入設計流程中。


· 共情/移情/同理心設計(Empathic Design):將設計師帶入使用者情境中進行觀察設計。


· 平行設計(Parallel Design):對同一個產品進行分開的設計,從而比較選擇一個最佳方案。



評估驗證:


· 啟發式評估(Heuristic Evaluation):由一組行內專家依據尼爾森十大原則對產品進行可用性檢查。


· 專家評審(Expert Inspection)


· 可用性測試(Usability Testing):邀請用戶來試用你的產品,有任務性的完成測試,從而達到評估的目的。分為Moderated和Unmoderated,In-person或Remote。


· 組內測試(Within-Subject Testing)與組間測試(Between-Subject Testing)


· 游擊式調研(Guerrilla Research):便宜、快速地得到大致的用戶反饋。


· 問卷調查(Surveys):利用網上或紙張的問題list對用戶進行發放填寫,從而收集用戶對產品的反饋意見。


· CSAT(Customer Satisfaction Score)與NPS(Net Promoter Score)


· 眼動追蹤(Eye Tracking)和熱力圖(Heat Map)


· 點擊流分析(Clickstream Analysis)


· 產品漏斗(Product Funnel)和使用情況分析(Usage Analytics)


· 統計學分析(Statistical Analysis)


· A/B測試:在同一時間維度,分別讓相似的目標人群隨機的訪問產品的不同版本,收集各群組的用戶體驗數據和業務數據,最后分析、評估出最好版本,正式采用。




藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

B端-詳情頁設計指南

博博

詳情頁向用戶展示一個對象的完整信息,主要用于信息瀏覽,允許對該對象發起編輯等操作。

看完本篇文章,你會學到以下內容:
1、什么是詳情頁
2、詳情頁設計原則

3、詳情頁的構成
4、詳情頁設計要點拆解


一、什么是詳情頁?

詳情頁向用戶展示一個對象的完整信息,主要用于信息瀏覽,允許對該對象發起編輯等操作。如電商的訂單詳情,OA的審批詳情等等。


二、詳情頁設計原則?

1、直接了當

信息盡量平鋪展示,如沒有必要不要做隱藏折疊。 

2、層次分明

按照接近原則,對信息分層分組展示,降低單個頁面內信息復雜度。

3、化繁為簡

減少復雜結構的使用,盡量使用相似的結構和模塊,降低結構差異對用戶進行干擾,讓用戶聚焦信息本身。

三、詳情頁構成

詳情頁由標題、標簽頁、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數據統計、進度軸、標簽構成

詳情頁的特點:1、內容雜,什么元素/模塊都可能出現。2、布局多,布局沒有套路,核心是做好內容分塊和視覺引導。3、差異大,頁面與頁面巨大差異

四、詳情頁設計要點拆解

1.容器

由內容由少到多劃分為原位展開、氣泡卡片、彈窗、抽屜、頁面。能優先滿足內容收納的同時,容易盡可能輕量。













2.布局

根據內容從簡單到復雜可分為基礎樣式、標題分組、色塊/分割線/卡片分組、錨點定位/標簽頁、自由布局。核心是做好內容分區、視覺引導符合用戶操作習慣。

布局注意事項:把用戶最關心的內容放在最顯眼的地方







3.交互操作

交互操作可分為編輯(原位/氣泡/彈窗/頁面),查看詳情(內容不多的話可以少用頁面容器,減少套娃),業務操作(層級清晰,符合用戶操作習慣)。



作者:鯤sky   來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

探索企業B端設計規范:如何打造無與倫比的用戶體驗

鶴鶴

今天和大家分享企業內部建設計系統的方法和實踐,也期待大家指正與交流~

企業級B端產品具有行業壁壘高、業務復雜、服務角色多等特點,在大型迭代項目中,如何做好設計協同,把握設計一致性和還原度常常讓很多設計團隊感覺無從下手,找不到切入點。在長期的項目實踐中我們發現,做好設計規范能規范可以幫助個人、團隊以及整個企業提高效率和產出質量,保障用戶體驗統一。

那么,我們該如何做好體驗標準化,保障基礎體驗一致性?下面將和大家分享我們公司在構建設計規范的實踐案例。

一、為什么要做設計規范?

以我們設計團隊為例,隨著業務不斷擴大,定制化需求不斷增加,大型迭代項目做不好設計和開發協同,導致出現“體驗一致性差”“設計效率低”“還原度不可控”等問題。如何有效解決這些問題呢?可以通過構建設計規范,以保證一致性,實現工作提效。


從不同角度出發,構建設計規范都能發揮積極的作用。

對企業來說:有利于實現產品經理、設計和研發的輸出一致。設計側主動建立產品設計規范,很大程度上是為了做好設計管控,實現原型、設計稿到線上頁面統一的設計語言,從根本上提升設計質量和還原度,提高用戶滿意度。

對個人來說:當多個設計師共同協作同一項目時,由于設計理解不一致等原因,容易出現設計控件使用混亂等問題。若有詳細的設計規范作為引導,有利于實現產品各個模塊間的一致性。組件化的工具也能減少機械重復性的工作,讓設計師將更多精力投入到用戶研究和提升用戶體驗上。

二、建立設計規范的時機?

產品有不同發展階段,設計規范同樣也有,不同階段下的產品目標和規范需要覆蓋的內容都不盡相同。我們要既要避免做多,保證投入產出比最大化;同時也要構建一個合理的規范迭代思路。

產品探索初期:

該階段的產品核心目標是「驗證產品或商業模型」,業務需求都是小步快跑、頻繁迭代。產品處于從0到1的野蠻生長狀態,存在著“先滿足功能,再優化體驗”的情況,導致該階段的產品體驗往往不太過關。

搭建目的:通過定義原則,梳理關鍵頁面和流程,搭建基本的規范框架。既讓團隊對產品有統一的設計價值觀和認知判斷;從頁面到流程,又能對應設計參照標準;同時業務可以在規定的框架下發展,不僅讓產品體驗的根基牢固,而且不會限制功能設計自由。

搭建范圍:「全局說明」「頁面布局」「通用流程」

產品穩定發展期:

該階段的產品基本形態已穩定,也形成了初步的模型結構。后續迭代是在現有結構的基礎上,進行增加或優化功能。雖然探索期定義了產品原則、布局和流程,但探索期產品的自由生長,會導致不少設計細節不一致,從而影響了產品整體的體驗和效率。

搭建目的:通過回溯整理過往設計,沉淀優化成完整的交互規范。再根據規范統一產品體驗,進一步優化流程和效率, 讓整個產品體驗達到相對穩定的狀態。

搭建范圍:「全局說明」「頁面布局」「通用流程」「基礎組件」「業務組件」

三、一個好的設計規范是什么樣的?

好的設計規范有很多優秀的例子,例如Google、Apple、Microsoft這些引領全球設計風尚的公司,設計規范已經上升為設計語言,指導旗下所有產品的設計。國內做的優秀的案例,比如Ant Design,Element,arco.design等,像這類的產品已經實現了端到端的體驗一致,把交互、前端和視覺的事情一并解決了,是值得學習的典范。這些優秀的設計規范都包含以下幾個特點:靈活性,可擴展性,系統性和標準性。

一般團隊內部構建的設計規范都源于某一產品或者業務,因為主要是團隊內部成員使用,追求的是投入產出比最大化。所以可在行業通用設計規范的基礎上,適度參考行業設計規范,能復用的直接參考,同時專注于業務本身,具有業務特性的再集合業務綜合考慮,使整個規范制定效率更高,科學性、指導性更強。


四、如何制定設計規范?

設計規范的執行和推動主要分為四大步驟:

類型梳理:分析業務場景,整理和歸類組件,評估具體組件優先級和迭代計劃;

全局說明:統一布局,色板,字體,常用樣式,規范設計語言;

抽象設計:將設計共性抽象出來,構建組件通用方案;

效果驗證:通過定性/定量數據追蹤效果,分析原因,迭代改進;


第一步:類目梳理

收集現有設計頁面,分析業務場景,再參考行業通用規范的定義,整理和歸類組件,可以先羅列完整,再根據產品實際業務需要進行增刪改。

全局說明:明確影響整站各個模塊、各個頁面設計的原則和規范,指導我們后續各種規范的定義和設計。包括統一布局,色板,字體,樣式等設計規則。

基礎組件:可參考行業通用規范中的基礎組件分類和組成,因為大部分基礎組件都具有一定的通用性,站在巨人的肩膀上更高效。這里我們根據實際情況,將基礎組件分為導航,通用,數據展示,數據錄入,反饋5個大模塊,每個模塊下再細分各小類,構成基礎組件的類目。

業務組件:根據業務需求,可以定義屬于自己的業務組件,這也是區別于其他通用行業組件庫的一個核心部分。


第二步:全局說明

因為在大體量產品設計中,每個模塊都由不同的同學負責,這樣全局產品的把握就會降低,需要去補充全局規范說明去維持產品全局通用部分的一致性。包括布局,色彩規范,字體,樣式等;


第三步:抽象設計

抽象設計是設計規范中最核心,工作量最大,難度最高的一個環節。我們可以將它拆解成幾個部分,先做出基礎組件,再基于基礎組件和業務需求抽象設計業務組件,最后抽象成頁面模板。

基礎組件

組件庫的搭建,就一定要提到原子思維。道爾頓原子論認為,物質世界的最小單位是原子,原子是單一的,獨立的,不可被分割的,在化學變化中保持著穩定的狀態。這個原子理論同樣適用于設計系統中。

其中,最小單位設計元素就是基礎組件。我們在做設計系統的時候希望當你改動任何一個原子,你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點,設計系統設想中的效率、解放生產力才會真正實現。例如,在sketch中,分享樣式和嵌套符號的使用。


業務組件

在構建完基礎組件后,可以根據業務需求,將使用頻率較高的組件進行評估,抽象成業務組件。

一般業務組件可分成兩大類:

一類是由多個基礎組件組成的帶有業務需求復合組件,如:復合標簽,快捷時間選擇器等;

另一類是針對特定業務場景的業務組件:如地圖,站點等;


頁面模版

在完成基礎組件和業務組件的構建后,我們可以根據全局說明,利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率,也能提供很好的組件使用示范效應,加強設計說明和組件之間的結合。



第四步:效果驗證

組件質量評估:從物理到行為層,包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

系統應用層面的評價:

系統是否幫助業務提效;

當業務不能直接應用系統,能否靈活改動;

系統是否幫助業務變得更有競爭力、更創新;

五、迭代方案和機制提效

迭代機制

當我們完成設計規范的整體構建后,對于新需求,通過評估復用性、通用性和優先級,低級別的走定制設計完成交付。高級別的通過抽象設計、內審、沉淀到組件庫中。

機制提效

在完成設計規范的構建后,我們可以聯合產品經理和前端工程師,幫助每個環節的人員快速搭建產出物,推動上下游機制提效。

例如,我們會基于設計規范,為產品經理提供符合設計規范的Axure元件庫,產品經理使用元件庫,可以快速搭建原型,產出prd,與設計師、開發的溝通也更加順暢。簡單的修改可以跳過設計師出圖這一步驟,直接和開發溝通,極大加快前期的節奏。甚至通過借助元件庫,產品經理可以搭建出高保真原型,用于直接和用戶確認或者給客戶進行demo的演示。

基于設計規范,推動研發實現組件代碼化,通過設計標準化可以達到研發工業化。通過定義標準規范,提高流程、組件的復用率,開發側就可以制定相應組件,形成前端腳手架,方便后期迭代的組件化使用,有效地避免不必要的分歧點和重復造輪子,同時減少上線前設計走查、測試的工作量,保證落地效果,提升生產力。

以上就是我們在構建自己的企業設計規范的流程,最后,給大家展示一下,我們目前的企業設計規范和部分應用情況。


作者:北斗BDD
鏈接:https://www.zcool.com.cn/article/ZMTUyNTQyOA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

閱讀可視化——交互設計沉思錄-1.2管理復雜性

博博

本次圖示化的信息來源是:
交互設計沉思錄-頂尖設計專家Jon Kolko的經驗與心得(第2版)_[美]Jon Kolko著,方舟譯

今天帶來的是《交互設計沉思錄》第一部分的第二章「管理復雜性」。

主要講述的是交互設計師是如何理解&組織所獲取到的數字、文字數據。

通過這些步驟&方法能夠幫助交互設計師更加清楚信息間的關系,建立很強的心智圖景。

其間也穿插了很多職能相關部分的對比,如「交互設計師與信息架構師」「交互設計師與界面設計師」「交互設計師與電子工程師」。



作者:Viola_1241      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

閱讀可視化——交互設計沉思錄-1.2管理復雜性

鶴鶴

本次圖示化的信息來源是:
交互設計沉思錄-頂尖設計專家Jon Kolko的經驗與心得(第2版)_[美]Jon Kolko著,方舟譯

今天帶來的是《交互設計沉思錄》第一部分的第二章「管理復雜性」。

主要講述的是交互設計師是如何理解&組織所獲取到的數字、文字數據。

通過這些步驟&方法能夠幫助交互設計師更加清楚信息間的關系,建立很強的心智圖景。

其間也穿插了很多職能相關部分的對比,如「交互設計師與信息架構師」「交互設計師與界面設計師」「交互設計師與電子工程師」。


作者:Viola_1241
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

阿里設計周-智能感知交互

鶴鶴

智能感知交互

注:閱讀此文章大約需要30分鐘



先給大家看兩個案例:大家都很熟悉的,自動感應測溫,不需要人為操控



第二個案例則是nest智能恒溫器,比起傳統的需要人為的去手動觸發調節溫度,他能夠實時感知家里的溫度,基于不同的場景與客戶習慣去調節溫度,比起傳統模式便捷了不少



那么從這兩個案例中,大家可以發現,傳統人機交互與下一代人機交互是有著本質區別的,傳統人機交互一直以來都是輸入輸出的被動交互邏輯,什么是被動交互呢,就是必須有用戶向機器發送指令,機器接收指令,執行后將結果反饋給用戶。而新的交互模式,則是用戶不需要做任何指令輸入,機器自動感知當前的場景,來理解你的意圖是什么,來去主動幫你完成任務。那么這是如何實現的呢,主要是依靠傳感器,算法等實現的。這也說明了我們的生活開始下一代人機交互的新時代。

這也就是今天的主題,那么今天,我會詳細講解,把這個課題講透。包括什么是智能感知交互,他的底層框架模型是怎樣的,以及結合案例是講解他是如何落地使用的,

01 智能感知交互背景及定義



回顧整個人機交互的發展史,經過了不同的階段,從命令行界面,也就是通過手柄,遙控等進行交互,再然后是圖形用戶界面,也就是觸摸屏等交互,再到語音交互,圖像識別等等



人們對于人機交互也從依賴于人去手動觸發,再到趨于自然和本能,隨著技術的發展,我們也迎來的技能感知交互的新時代



在這里也對智能感知交互做了初步定義:是以人為中心,基于傳感器、大數據及AI技術,自動感知用戶情景,理解用戶意圖,主動響應用戶需求,真正提升人機交互效率



那么智能感知交互也有幾個特征,更加的趨于自然,輸入輸出方式更加無感知,智能

02 智能感知交互模型

接下來是最核心的重點,智能感知交互的框架是怎么樣的,他的底層邏輯是怎樣運行的,這也是整套理論知識的基石和核心。



智能感知交互模型主要分為三層:

① 感知層,也就是對當前用戶的情景,進行一個全方位的識別;

② 決策層,也就是我感知后,怎么去做決策,就像人的大腦一樣;

③ 表達層,也就是具體的交互執行,例如界面,音效,光效等等。



那么以剛開頭的無接觸測溫門為例,在感知層主要通過紅外傳感器去感知人的體溫,在決策層則是當遇到發燒的顧客則需要進行干預,在表達層,則會通過音效、光效做出主動的預警的設計表達。



那么我們接下來詳細的看下整個框架模型,那么,感知層又細分為三大模塊:

第一塊為【用戶感知】,第二塊為【場景感知】,第三塊為【行為感知】。 那我這里給他串聯起來,簡單來說就是感知用戶是誰,在什么楊的場景下,做了什么樣的行為。那么決策層則細分為兩大塊,也就是無感知之后怎么做決策,理解用戶的意圖是什么,。那么第二則是做出決策后怎么去做設計表達和輸出呢,受到那些變量因素的影響,這是由設計表達影響因子模型決定的。那么最后一層則是正式做出設計表達,目前表達的介質主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架,接下來我會詳細的剖析每一層



先講第一層,感知層,就是感知技術,這里在進一步細分為三個板塊,用戶感知,場景感知,行為感知,用戶感知為,用戶性別、地域、年齡等等特征,場景感知則是什么時間、什么地點,當前環境、溫度等等,行為感知則是去感知,你用了什么工具,對什么對象,做了什么操作行為等等。針對不同的業務會有不同的針對感知,例如開頭案例中的體溫測量,他對溫度這一屬性重點感知。大家這里也能想到,世間萬物都可感知,為了方便后續的統計和分析,需要進行加工處理,需要將當前的感知線上化和數據化,同時會將這些數據進行標簽化的處理,那么如何去處理這些數據呢,這里主要分成三類:



1.1 統計類數據

簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數據。舉個例子,比如說登錄網站,那么我們可以獲取用戶ID,從溫度傳感器,我們可以直接獲得溫度。這些都是統計類數據



1.2 規則類數據

簡單來說就是基于一定的規則產生,舉個例子,比如我們規定用戶與設備之間的距離為0~40cm為近距離,,工人每小時生產產品80件定義為熟練工,這些都定義為規則類數據



1.3 機器學習類數據

他是通過機器學習挖掘產生,根據相關屬性進行預測和判斷。比如淘寶上對男女的劃分,他通過你買的商品去判斷你是男生還是女生,你的興趣愛好是什么



那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型,決策層主要有兩部分,現在講述第一部分,也就是整體框架中紅色圈住部分,針對【意圖識別決策模型】進行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么,這里也抽象為四大類決策方向:行為干預、推送建議、意圖預判、自動決策



2.1 行為干預

簡單來說就是我感知到當前的行為是異常、錯誤的,會做出主動預警進行干預。舉個例子,比如圖中的場景,通過攝像頭的圖像識別檢測到工人的操作不規范,會通過光效和音效的預警來進行行為干預



2.2 推送建議

是基于你的愛好去推送不同的內容



2.3 意圖預判

感知之后去預判,你接下來會做什么。比如上圖,當系統之前感知到用戶粘貼了地址和電話信息,那么系統就預判你是不是要寄快遞



2.4 自動決策

比如陀螺儀識別用戶將設備傾斜了多少度,將屏幕做自動關屏



那么前面講述的是決策層的第一大板塊,那么現在講第二板塊,也就是設計表達影響因子模型。簡單來說,就是我已經決策完成,那么我怎么去做決策和輸出,受那些變量因子影響呢



那么這里也抽象為三大類變量因子,用戶感官因子,環境因子,設備因子。

比如在【用戶感官因子】上,會去分析,用戶當前的認知負荷是什么樣的,如果當前是在黑暗的情況下,用戶的視覺負荷比較大的話,那么設計表達是不是就應該以聽覺和觸覺為主。同時我們還會去分析用戶是運動狀態還是靜止狀態,如果是運動狀態那么在設計的時候是不是需要考慮,字體是不是需要更大,方便用戶獲取信息等等案例。

【環境因子】就是環境光線的強弱,噪聲的大小等等,比如設計的時候,是在室外,光線比較強的環境,那么設計的界面對比度是不是就得更強。

【設備因子】就是傳統設計當中,他的輸入通道是物理按鍵,還是觸屏,還是語音,手勢這些,以及輸出通道,有沒有喇叭,指示燈等等。這些都會影響我們采用怎樣的方式去進行設計表達。



那么第三層就是我們最熟悉的表達層,也就是具體的交互執行。常用的表達方式主要有界面,音效,光效,觸覺,動作這幾類,這些大家都很熟悉,這里就不做詳細的講解。



那智能感知交互依賴的技術和條件也是比較多的,所以他是分企業分階段發展的。那么這里主要分為5個等級。從無智能到完全智能,那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機器自動感知部分情景,再加上人的輔助輸入,讓系統完成任務。



03 智能感知設計應用

那么前面說這些都是偏理論偏框架類的,那么下面我會結合案例具體講解智能感知交互是怎樣去落地使用的



那么當有了模型框架后怎樣應用呢,首先,離不開設計流程,和傳統設計流程類似,智能感知交互的設計流程也為:【發現一個機會點,制定對應的設計策略,然后定義具體的設計表達,持續監測進行迭代和優化?!窟@樣構成,那么大家就會想了,那我們的不同之處在哪呢?這其實離不開設計對于技術的洞察力,我們設計對于技術的了解和應用其實貫穿在全流程中。

比如說,在我們在做UED設計中,發現痛點時,我們可以通過問卷調研,訪談調研獲得用戶的主觀數據,也可以通過埋點檢測獲得用戶的行為數據,而我們在優化的時候,除了從設計側出發的體驗優化,那是不是可以不給自己設立邊界,比如從技術出發,讓算法自身不斷學習,讓準確率有所提升。帶著這樣的不同,我來舉一個案例。



案例介紹:一塊沙琪瑪的一生



這塊沙琪瑪出生在一個非常傳統的食品供應鏈公司,她從出生出來到被運送到客戶手中,會經過4個空間,12個節點。而在這層層的校驗中,當我們想知道沙琪瑪的質量,生產日期,和他的位置,需要的是員工的手動介入和對于條形碼的掃描,



但我想更精細化的知道沙琪瑪具體的信息來進行更好的數字化管理,那就變得非常困難。所以我們在想,怎么可以讓對沙琪瑪的管理,變得更聰明一些呢,那改變這傳統模式的機會,就來自于識別技術的發展。



那么現在已經運用起來這樣的技術了,一些商場的衣服和商品上都會有RFID標簽,比如優衣庫,在進行結賬時只要將多件商品投送到結賬框中,就可以一次性識別多個商品完成結賬,這就是RFID的優勢,他可以完成一對多的批量識別,并且具有更大的識別范圍,識別過程中不需要設備和條碼直接對視。



那我們就要想了,如果每個沙琪瑪都有一個RFID碼,那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術優勢,我們來回顧整個操作流程,我們發現,在圍繞沙琪瑪的一層一層校驗中,已我剛剛提到的【行為干預、意圖預測、自動決策和推送建議】四個角度來找到更智能的優化點,比如說,當沙琪瑪從車間生產出來,即將被打包的時候,我們如果發現了一個異常,可以怎么處理呢,大家覺得~~~~我們是不是可以進行一個行為干預,來將這個異常及時的告知給用戶,又或者,我們可以進行一個自動決策 ,我們通過自動化設備,來吧出現異常的商品進行自動剔除。



那由于整個鏈路太長,所以我現在呢,以沙琪瑪離開倉庫的最后一個校驗環節為例,來做展開



這個時候,用戶拖著托盤,來到月臺,準備將沙琪瑪裝上卡車,這個時候,如果沙琪瑪上錯了車,那我們就非常難以將他追溯回來了。所以這個時候,用戶的意圖是非常清晰的,那就是及時的阻止這個異常的商品流出倉庫。但我們知道了,那下一步呢,就是讓機器也知道這一個意圖,其實在這個場景下非常簡單,無非是,某人在某場景下做出了某個行為,而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份,



我們也可以通過設備上在運行的秘鑰來獲得當前的實操場景是什么,

還能通過RFID的天線,他所識別到的信號逐漸增強,來發現,啊確實有一個用戶,在拖著商品逐漸靠近,那以上這三個條件,就可以觸發我們對于托盤上的貨物的識別來判斷,他上的車是不是對的呢,數量是不是準確呢,一旦發現異常,我們就需要將信號及時的傳給用戶



那下面問題就來了,我們該怎么表現這個異常,剛才也提到,我們設計的表達是多種多樣的,有界面內的,界面外的,環境空間的。而用戶接收的渠道卻非常的單一,無非是,視覺、聽覺、觸覺、甚至以后可能會有嗅覺。



怎樣選擇合適的感官通道

所以我們在定義一個合適的表達方案的時候,就需要考慮到當下用戶、環境、設備的影響因素,那在我們的場景中,我們應該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢



這就需要我們清晰的了解,在這個場景下,每一個感官通道被占用的情況,這樣我們才能選擇其中占據優勢的那些來做出我們的設計表達



為此,我們總結過往一些學術研究,來將用戶、環境、設備他具體的影響程度進行數值化。比如對于用戶的限制,我們采用VACP的工作負荷模型來量化用戶的各個通道上認知資源被占用的程度。而對于用戶自身的能力限制,我們通過劍橋大學提出的一個無障礙公式,來計算用戶自身能力限制的程度,同樣,我們綜合國內一些常見的標準,來將環境因素,例如,亮度、噪聲、和設備自身的表達能力進行等級的劃分。那大家就要好奇了,那要數值化,那數值化靠譜嗎,我們怎么做這個數值化呢?



那我以VACP工作負荷模型來做一個簡單的展開,他起源與1984年,對于飛行員在駕駛飛機的一個觀察和研究。研究者將他劃分為視覺、聽覺、認知、運動四個維度。同時呢,對于不同難度系數的任務,劃分了不同對資源程度占用不同的等級,這樣,我們就可以像查閱字典一樣,來根據我們需要的任務表現,找到這個通道上對應具體的占用程度



回到我們剛才的場景,當用戶拖著托盤靠近的時候,他需要時刻注意眼前的道路,避免和其他物品碰撞,這個時候,視覺上他對物體的追蹤和跟隨,這個時候呢,在視覺上通道上他會有77%的占用情況



而聽覺上,雖然他不需要聲音來辨別道路,但在這個過程中,有可能有小組長會叫他說,唉,你過來以下,那這樣我們就需要做一個聲音的辨認,那在聽覺通道上,可能會有14%的占用程度



而在月臺上,時刻會有運輸與發動機的聲音,這個大約在70分貝的噪聲,會給用戶在聽覺上有個二級的干擾作用



綜合來看,首先,我們對用戶在觸覺上的反饋通道就被阻斷了,因為設備端離用戶實在太遠了,無法進行一個觸覺上的反饋,



而剩下的視覺通道已經被高度占用了,他的有效性是較為有限的。而在聽覺上,雖然他的占用程度沒這么高,但他收到了環境噪聲的二級干擾,所以我們單一的通過視覺或者聽覺都不足以達到一個有效的反饋作用。



好在現在用戶的認知還是比較充沛的,所以呢,我們可以通過視覺、聽覺、認知三個通道上的整合,來做一個比較有效的反饋。



也就是,當用戶靠近時,首先,她會在聽覺上聽到蜂鳴器的報警,



然后呢,他的注意力就被抓到了燈光的閃爍模式上。,他從他的記憶中記得的燈光的三種閃爍模式上,辨識到了這個閃爍意味著說:這個閃爍,標識著我現在拉得沙琪瑪品類有問題,那我要好好的檢查一下。那我們的反饋呢,就成功的達成了



清晰的視覺表達

那除了剛剛提到的,多感官的反饋,我們在對于界面的設計上,也考慮到了多因素的影響



那第一個就是大家相當熟悉的視覺距離,在我們的生活場景中,,有手持設備的近視距,也有推動設備的中視距,還有推動大型設備上走向通道門的,遠達130厘米的遠視距



那面對這樣不同的視覺距離,和用戶靜態或者動態的移動狀態,我們推導了計算文字高度和文字字號的公式,



然后計算這樣的視覺距離和運動速度的不同,來對關鍵信息做突出化的展示,保證用戶在看到關鍵信息時他的清晰度。那大家可以想想,除了視覺的距離以外,還有什么因素會影響到視覺的表達呢,



那就是環境的亮度。在我們的場景內,盡管有部分都是在室內發生,但也有部分是在室外發生,就比如我們舉的沙琪瑪的例子,他是在月臺發生的場景,那這個時候,就需要我們在色彩的設計上,去考慮到環境亮度的影響,



我們基于 W3C,對于色彩對比度的分析,然后定義了我們的配色方案,在對于室外的環境,我們會采用色彩對比度較高的配色方案,而到了室內呢,我們會動態的將色彩對比度降低,避免用戶長時間注視對比度高的界面,造成視覺疲勞



那既然有設計方案,那自然就有效果評估,



我們將智能感知設計的評估,分為主觀和客觀兩個部分,主觀就是大家比較熟悉的,比如我們感知的這個情景是否準確,能不能夠幫助用戶提高效率呢,整個感受是不是愉悅的,是不是有效的,那么這一塊我們是通過李克特5點量表問卷,和SAM問卷來進行度量,另外一部分則是客觀部分,這一部分我們通過對于算法模型的評估指標來進行度量,比如他的準確率,召回率,精準率來評估他的算法是否可以不斷學習和進步。


思考:如何將智能感知更多的應用到產品設計中?

那智能感知交互的分享就到這里,這里我衍生一下,從剛才的案例中,主要都是實操類的,那么我們是不是可以做個衍生,將智能感知設計的思路方法也延用到產品設計中呢,比如現在的抖音,頭條,他們去分析我們的喜好,主動的替我們進行篩選,于是在使用產品的時候,我們可以說是被動的看內容,被動的看到商品被吸引然后下單。那么B端產品也可以以此類推,傳統模式下,是人登錄后臺,主動去找任務,那么在這里,我們是否可以換個思路,任務主動來找人,通過感知到用戶的身份,我們來主動檢測,他所關注的任務的進度,并且在這個任務落后的時候,主動發出預警和提示,真正的提升用戶的管理效率。


作者:咖喱先森
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

閱讀可視化1:《交互設計沉思錄》第一篇

鶴鶴

不太愛看書,看了老忘,就很容易失去信心,垂頭喪氣、一蹶不振。

比較喜歡做圖,把信息間的邏輯以圖示化的方式表現出來,能加強理解,后期回顧也會比較舒心。

所以就有了這個系列——閱讀圖示化。

可能會出得很慢,畫圖比較費時間,想著怎么展示信息間的邏輯也很費時間。

基本是按著小節一塊內容對應單圖/多圖。

基本一張圖是一個完整的知識點。





























作者:Viola_1241
鏈接:https://www.zcool.com.cn/article/ZMTUxNDE4MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

作者:Viola_1241     來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

設計師需要懂得用戶體驗

鶴鶴

設計師需要懂得用戶體驗知識











作者:董康
來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

超全面的B端設計規范指南(一):設計原則

博博

前言

B 端設計離不開設計規范這個話題,而做好設計規范是一個龐大復雜工程,很多人對這些處于一知半解狀態,在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規范的一些理解,希望可以帶來一些啟發。

本篇先談談設計規范制作的指導思想--設計原則,后續文章再展開講一下常見各種組件的設計規范。

一、設計規范作用

設計規范作為 B 端設計中非常重要的一環,它的作用主要體現在以下三個方面:

超全面的B端設計規范指南(一):設計原則

在日常工作中,當項目組收到一個新的需求時,如果已經具備了成熟的設計規范體系,其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程:

超全面的B端設計規范指南(一):設計原則

二、設計原則

通過前面內容我們知道了設計規范對于產品設計意義重大,那么制定設計規范制定依據又是什么呢?這里就要引出設計原則這個話題,設計原則是設計規范的總的綱領,所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容:

超全面的B端設計規范指南(一):設計原則

接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。

1. 清晰

清晰原則主要從視覺角度讓界面信息傳達合理,提高用戶信息獲取效率。主要包含對比,親密,對齊,重復四個方面。

① 對比:

對比是指界面中為了區分信息層級,強化元素對比度,使用的很常見的一種手段,例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕;又比如通過對文字字號加大,字體加粗,顏色加深來與弱文案形成對比,凸顯關鍵文字信息。

超全面的B端設計規范指南(一):設計原則

② 親密:

如果信息之間關聯性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,則它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層次一目了然。

超全面的B端設計規范指南(一):設計原則

③ 對齊:

在界面設計中,將元素進行對齊,既符合了用戶的認知特點(我們往往傾向使知覺對象的直線延續還是直線,曲線延續還是曲線),也能引導視用戶視覺流,讓用戶更流暢地接收信息。

超全面的B端設計規范指南(一):設計原則

④ 重復:

重復是指相同的元素在項目中重復引用,作用是可以有效降低用戶的學習成本,同時提高這些元素之間的關聯性。

超全面的B端設計規范指南(一):設計原則

2. 高效

高效原則體現在便捷、輕量、簡化、一致幾個方面,目的是通過合理的方式讓產品操作更加便捷;交互體驗與內容更加輕量和簡化;以及產品風格保持一致。下面結合幾個常見案例說明如何應用這一原則。

① 合理利用拖拽--便捷、輕量:

在涉及到諸如上傳文件,排序,滑動輸入,搭建等需求時,合理采用拖拽交互往往可以打造更加便捷用戶體驗。

超全面的B端設計規范指南(一):設計原則

② 盡量減少不必要的跳轉--便捷、輕量:

用戶操作過程盡量減少跳轉,以實現交互減步長,從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起;能用展開收起就不用氣泡...依次類推(優先級從高到低:原位 > 展開收起 > 氣泡 > 彈窗 > 抽屜 > 新頁面)

超全面的B端設計規范指南(一):設計原則

③ 放大點擊熱區--便捷:

放大可點擊按鈕熱區,相對于較小點擊熱區,具備更絲滑操作體驗。

超全面的B端設計規范指南(一):設計原則

④ 懸停即現--輕量:

利用懸停即現,避免信息過于重復啰嗦,簡化頁面提高閱讀體驗。

超全面的B端設計規范指南(一):設計原則

⑤ 折疊次要功能--簡化:

頁面功能按鈕過多時,可將次要按鈕收納到一起,點擊時再展開,外面只展示高頻操作或重要按鈕,保證頁面內容簡潔。

超全面的B端設計規范指南(一):設計原則

⑥ 統一樣式--一致:

一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式,可有降低用戶學習成本與企業開發成本。

超全面的B端設計規范指南(一):設計原則

3. 友好

友好原則應貫穿用戶操作前,操作中以及操作后三個階段,給予用戶及時反饋與幫助。

① 操作前:

在用戶操作前給到合適的引導與幫助,有效減少用戶迷茫感。

超全面的B端設計規范指南(一):設計原則

② 操作中:

通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。

超全面的B端設計規范指南(一):設計原則

③ 操作后:

利用界面中元素變化清晰直觀展示當前的狀態

超全面的B端設計規范指南(一):設計原則

4. 可控

可控主要體現在自由和導航兩個方面。

① 自由:

自由即指用戶可以自由完成一些操作,例如回退,撤銷,終止等。

超全面的B端設計規范指南(一):設計原則

② 導航:

導航是指用戶隨時知曉當前所在位置,而且可以利用導航隨意到達目標頁面。

超全面的B端設計規范指南(一):設計原則

通過本篇內容我們大概知道了制作設計規范主要方向,那么具體到每個組件上,我們該如何去設計呢?后續篇章將細分聊聊如何去設計 B 端常見組件的一些內容。

部分參考資料:

  1. 《B 端產品設計-Mia》
  2. 《Ant Design》



作者:huang。亮      來源:優設網



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

日歷

鏈接

個人資料

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

存檔

亚欧乱色一区二区三区| 成人高清视频免费观看| 中文字幕97| 午夜激情视频在线播放| 欧美激情在线精品video| 精品在线视频播放| 黄视频网站免费看| 你懂的福利视频| 国产伦精品一区二区三区无广告 | 美女免费精品高清毛片在线视| 尤物视频网站在线| 欧美一区二区三区在线观看| 韩国三级视频网站| 亚洲wwwwww| 国产网站在线| 国产伦精品一区二区三区在线观看 | 麻豆污视频| 亚洲精品中文字幕久久久久久| 九九九国产| 久久国产一区二区| 亚洲www美色| 国产伦久视频免费观看 视频| 国产视频久久久久| 国产网站免费视频| 99色视频在线| 国产不卡高清| 日本在线不卡视频| 国产视频一区二区三区四区| 成人av在线播放| 美女免费毛片| 99久久精品费精品国产一区二区| 成人a大片在线观看| 色综合久久天天综合| 国产激情一区二区三区| 四虎影视久久久| 台湾美女古装一级毛片| 成人影院久久久久久影院| 好男人天堂网 久久精品国产这里是免费 国产精品成人一区二区 男人天堂网2021 男人的天堂在线观看 丁香六月综合激情 | 成人免费网站视频ww| 久久99爰这里有精品国产| 一级女性全黄生活片免费| 青青久热| 欧美爱色| 日韩一级黄色| 在线观看导航| 精品视频在线观看免费 | 欧美一级视频免费观看| 欧美α片无限看在线观看免费| 精品久久久久久中文| 黄色福利片| 欧美激情伊人| 国产不卡在线看| 国产麻豆精品视频| 国产一级生活片| 日韩女人做爰大片| 日韩在线观看网站| 亚洲第一页色| 午夜欧美成人久久久久久| 久久精品免视看国产明星 | 日韩av东京社区男人的天堂| 久草免费在线视频| 欧美激情一区二区三区视频 | 国产不卡在线播放| 欧美激情中文字幕一区二区| 欧美激情一区二区三区在线播放| 日韩一级黄色大片| 欧美激情一区二区三区视频高清| 午夜在线亚洲男人午在线| 国产一级生活片| 欧美激情一区二区三区中文字幕| 99久久精品国产片| 精品视频在线观看一区二区| 日韩专区一区| 久久精品欧美一区二区| 999精品影视在线观看| 色综合久久天天综线观看| 精品毛片视频| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 91麻豆精品国产综合久久久| 欧美一区二区三区性| 欧美激情一区二区三区视频 | 精品国产亚洲人成在线| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 美女免费精品视频在线观看| 夜夜操网| 天天色色网| 亚洲精品永久一区| 二级片在线观看| 欧美激情一区二区三区在线播放| 99热精品在线| 日韩综合| 国产成人女人在线视频观看| 国产一区二区精品久久91| 国产精品12| 久久精品店| 成人av在线播放| 亚洲www美色| 欧美激情影院| 亚洲 激情| 久久精品欧美一区二区| 欧美夜夜骑 青草视频在线观看完整版 久久精品99无色码中文字幕 欧美日韩一区二区在线观看视频 欧美中文字幕在线视频 www.99精品 香蕉视频久久 | 天天做人人爱夜夜爽2020| 成人免费观看网欧美片| 亚洲精品影院一区二区| 精品在线免费播放| 精品视频在线观看免费| 亚飞与亚基在线观看| 国产麻豆精品高清在线播放| 国产a视频| 成人免费福利片在线观看| 免费的黄色小视频| 午夜家庭影院| 日韩免费片| 国产成人精品综合在线| 日韩免费片| 国产91丝袜在线播放0| 999久久久免费精品国产牛牛| 日本伦理片网站| 国产视频一区二区在线播放| 欧美a级成人淫片免费看| 天天做日日爱| 国产不卡高清| 久草免费资源| 国产麻豆精品视频| 国产高清在线精品一区a| 日韩一级黄色大片| 四虎影视久久久免费| 天堂网中文在线| 欧美1卡一卡二卡三新区| 成人影院一区二区三区| 精品国产一区二区三区久久久蜜臀| 色综合久久手机在线| 日韩中文字幕在线观看视频| 免费国产在线观看不卡| 午夜在线观看视频免费 成人| 青青青草视频在线观看| 国产成人啪精品| 欧美激情一区二区三区视频高清| 台湾美女古装一级毛片| 午夜在线亚洲| 二级特黄绝大片免费视频大片| 国产成人啪精品视频免费软件| 黄视频网站在线观看| 好男人天堂网 久久精品国产这里是免费 国产精品成人一区二区 男人天堂网2021 男人的天堂在线观看 丁香六月综合激情 | 日韩中文字幕在线观看视频| 天天做人人爱夜夜爽2020| 久久国产影院| 韩国三级香港三级日本三级| 成人av在线播放| 午夜欧美福利| 九九干| 精品久久久久久中文字幕一区| 久草免费资源| 一级毛片视频在线观看| 精品在线观看一区| 999久久久免费精品国产牛牛| 九九热国产视频| 欧美a级片视频| 一级女性全黄生活片免费| 国产国语在线播放视频| 日韩在线观看免费完整版视频| 日本在线www| 精品视频在线观看视频免费视频 | 国产麻豆精品| 香蕉视频一级| 日韩avdvd| 日韩免费在线| 久草免费资源| 日韩女人做爰大片| 久久99中文字幕| 日本伦理黄色大片在线观看网站| 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 亚洲爆爽| 国产不卡精品一区二区三区| 亚欧视频在线| 欧美激情一区二区三区在线| 久久国产一久久高清| 色综合久久天天综合绕观看| 精品视频在线观看免费 | 国产伦精品一区二区三区无广告 | 美女免费精品高清毛片在线视| 午夜欧美成人久久久久久| 国产成人啪精品视频免费软件| 青草国产在线观看| 99热精品在线| 一级女性全黄生活片免费| 精品国产一区二区三区国产馆| 一级片片| 青青久热| 四虎影视久久久| 国产a视频| 国产成人精品综合在线| 国产伦精品一区二区三区无广告 | 精品在线观看一区| a级毛片免费观看网站| 欧美激情一区二区三区视频 | 午夜在线影院| 沈樵在线观看福利| 日韩免费在线视频| 亚洲第一页色|