<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>

          首頁

          關于體驗管理的幾點思考

          seo達人


          圖片

          數據來源:《2021年中國互聯網行業體驗設計工具趨勢研究》

          但體驗是的一種主觀感受,是用戶在使用一個產品、系統或服務之前、使用期間和使用之后的全部感受。公司的品牌、網站、系統、產品、服務、營銷活動、線下門店等等各個環節的用戶觸點都會是用戶體驗的影響要素,面對如此復雜的情況,體驗管理的邊界是什么?內核又是什么?接下來我將結合自己開展體驗管理工作的相關經驗,談談我對于體驗管理幾方面的思考。

           

          一、如何理解體驗管理

          顧名思義,體驗管理即為對體驗的管理,既可以是用戶的體驗,也可以是商家的體驗、供應商的體驗、經銷商的體驗,合作伙伴的體驗,還可以是內部員工的體驗。但無論是哪類角色的體驗,都是一種主觀的情緒感受,都會受到多個環節、多種因素的影響。因此,對于一家公司來說,體驗的提升和優化也勢必涉及多個部門團隊的工作協同,需要從宏觀視角、從戰略視角對“整體”體驗進行管理,充分分析并把握用戶與公司產品或服務接觸的每一個觸點環節,聚合和分析全渠道、全流程的體驗數據,洞察用戶痛點、需求及偏好,并以全鏈路整體體驗提升為目標,通過各部門團隊的協同,不斷改善公司產品或服務的觸點體驗,從而為用戶提供系統性價值交付,為企業提供持續性增長動力。

           

          二、為什么要做體驗管理

          首先,從體驗提升的宏觀價值視角來說,提升用戶體驗是企業在流量紅利逐步消失、行業競爭日益加劇的宏觀背景下,繼降低成本、提升效率之后實現業務增長的共識性舉措。實施體驗管理有助于提升用戶滿意度、忠誠度;有助于提升品牌口碑、品牌影響力;有助于促進用戶增長、商業目標達成;有助于促進產品創新、營銷創新以及企業升級。

          其次,從體驗提升的工作開展痛點來看,現階段國內體驗管理仍處于刀耕火種期,雖然越來越多的公司紛紛入局,但多數只是停留在散點式、被動性的體驗需求研究、體驗問題收集及優化、用戶反饋及態度采集上,缺少對體驗的整體性管控能力,因此在開展體驗提升工作的過程中往往會遇到以下困境:

          1. 缺少統一的量化指標。各團隊對體驗的理解、當前的體驗水平、體驗影響的大小均不像轉化率、用戶量等業務指標那么清晰,所以團隊之間缺少統一的體驗語言,導致體驗提升工作的推進成本遠高于更明確的業務目標提升工作。

          2. 傳統體驗研究分析的周期長,時間跨度和體驗觸點的覆蓋范圍有限,導致體驗優化工作難以適應現有產品或服務的迭代更新節奏。

          3. 體驗分析與體驗優化有脫節現象,未形成完整的體驗提升進度跟蹤保障機制。

          4. 公司同事體驗意識參差不齊,缺少統一的體驗文化引導。導致先上線后優化的不良模式盛行,增加了用戶首試體驗受損的風險,增加了體驗挽回所需付出的成本。

          因此,開展體驗管理所能帶來的直觀可見的價值是能幫助我們解決以體驗提升為目標的各項工作的難點,提升各項工作的效率。同時,從體驗管理的長遠價值來看,開展體驗管理可以提升企業競爭力,促進整體商業目標達成。

           

          三、體驗管理的通用模型

          結合國內公司在體驗管理工作開展上的主要內容,大致可將體驗管理工作分為三大類:

          1. 數據采集為主的研究執行,即診斷用戶使用產品或服務全鏈路上的體驗現狀和問題,為體驗優化提供方向指引;

          2. 體驗優化為主的機制建設,在公司層面建立規范的流程或機制,保障體驗優化工作順利開展;

          3. 體驗管理工具或系統建設,結合公司體驗管理需求,依托現有體驗分析及優化的工作流程、機制,設計開發體驗管理工具或系統,提升體驗管理的系統化能力。

          圖片

          數據來源:《2021年中國互聯網行業體驗設計工具趨勢研究》

          綜合現有各公司所開展的體驗管理工作內容以及我們現有的工作實踐,我將體驗管理工作的具體內容按照覆蓋范圍分為三層結構:數據層、系統層和運營層。

          圖片

          圖1. 體驗監測管理體系

           

          每一層級上都有對應的工作目標和工作內容:

          數據層:建設體驗數據,量化體驗水平,追蹤體驗變化。

          圖片

          圖2. 體驗監測數據示例

          做體驗的監測管理,首先我們需要看到它,并且能及時的掌握它的現狀和變化情況,這樣我們才能針對現狀去分析判斷我們應該怎么提升它,改善它,才能針對變化情況來分析、判斷、衡量我們所做的提升和改善措施是否有效,才能不斷沉淀經驗方法,在體驗提升的臺階上逐級而上,而不是原地打轉。

          但正如前文所述,體驗是用戶的主觀情緒感受,無論是對單個用戶的情緒感受的測量方法,還是對整體用戶主觀情緒感受數據的收集技術都不是很成熟,所以,體驗數據不像運營數據或財務數據那么容易追蹤和衡量。

          在這樣的背景下,我們首先需要找到那些可以直接或間接反映用戶情緒感受的數據,構建收集渠道來收集可以反映用戶情緒感受的數據。

          那這類數據都有哪些呢?結合用戶體驗度量的數據維度來看,大概可以將其劃分為兩類:用戶自我報告式的主動反饋類數據和系統埋點收集的客觀行為類數據。

          自我報告式的主動反饋類數據主要有滿意度評價(CSAT)、推薦意愿(NPS)、客戶費力度(CES)等反映整體感受的數據,以及用戶通過客服或在線反饋等渠道針對特定問題的反饋數據。此類數據主要通過直接詢問用戶或用戶主動反饋的方式來采集。

          系統埋點收集的客觀行為類數據主要是用戶與產品或服務的交互過程數據,比如App的整體使用頻率,使用時長,App分享率等,以及重點功能或頁面的點擊率、轉化率、跳出率等。此類數據主要通過系統后臺自動記錄來采集。

          為了能更精細化的對體驗狀況進行分析,也可以增加一些體驗水平分析的輔助型數據,比如用戶的性別、年齡、會員等級等特征類數據。以便我們看到整體體驗水平有所變化時,能具體的分析出是哪個群體的變化導致。

          系統層:構建體驗管理系統,承載體驗數據,提效體驗運營。

          圖片

          圖3. 體驗監測管理系統界面截圖

          體驗監測管理體系的中間層重點在于系統的建設。這主要是因為:

          首先,體驗管理系統是體驗數據的承載系統。單獨一期的體驗數據采集因為缺少對比的基準,所以參考意義不大,我們需要長期的采集體驗數據,并進行不同時間的體驗水平對比,這樣才能及時有效的發現體驗水平的變化,找到需要重點提升體驗的用戶群體、產品模塊或服務環節。

          而長期的數據采集及分析需要耗費較大的人力成本,且工作重復性較高,數據的人工分析也容易出現失誤,因此,通過系統來完成數據的自動采集、數據的自動分析、數據的自動診斷,不僅能及時且長期的采集體驗數據,而且能有效的節省人力成本,減少人工計算的失誤。

          其次,體驗管理系統是體驗運營工作的主要輔助工具。體驗數據的監測分析診斷只是基礎,依據監測分析診斷的結果如何能有效的促進產品或服務體驗提升才是體驗管理的最終目的,圍繞用戶體驗提升所要做的運營工作還有很多,比如產品/服務體驗問題的優化跟蹤,團隊/公司體驗文化的建設等。為了能高效的完成各方面的體驗運營工作, 我們依然需要借助系統的能力。

          因此,體現管理系統的建設在體驗管理體系的構建工作中是非常重要的一部分內容。

          運營層:構建運營機制,分析體驗數據,管理體驗問題,維護體驗用戶,建設體驗文化

          圖片

          圖4. 體驗監測管理相關運營產出

          體驗運營主要是指圍繞用戶體驗所進行的人工干預工作的總稱。我們的日常運營工作主要包含體驗數據分析、體驗問題管理、體驗用戶維護和體驗文化建設四個方面。

          體驗數據分析主要是對體驗數據結果進行統計整理跟蹤以及綜合性的分析,比如結合主觀數據及客觀數據來綜合評估特定功能或服務的體驗情況;并及時將體驗數據分析結果同步給對應功能/服務的責任團隊,協助其分析體驗水平的變化。

          體驗問題管理主要是對體驗問題的分析和優化。體驗數據的監測可以讓我們更及時的發現體驗上的問題,但單純的發現問題僅僅是開始,我們需要聯合相應的責任團隊一起對問題進行分析優化,在這過程中經常需要我們通過快速的調研來驗證問題,評估問題的嚴重性,找到問題的解決方案,同時需要推動或協助責任團隊完成優化方案,跟進優化進度和效果。

          體驗用戶維護主要是對產品/服務典型用戶群體或社區的日常管理和活動組織。主要是為了能及時的獲取產品/服務方面的體驗情況,及時了解產品/服務創新方案的用戶態度評價,讓用戶更深入的參與到產品/服務的設計開發過程中,引導用戶為產品/服務的迭代創新貢獻優秀創意。

          體驗文化建設主要是通過體驗數據分析結果/體驗專項研究結果傳播,體驗問題協同機制構建,體驗活動組織,體驗考核機制創建等方式不斷培養各團隊及時關注體驗水平的意識,營造各團隊積極推動體驗優化的氛圍,激勵各團隊推行體驗優化/體驗創新的主動性。

           

          四、體驗管理的趨勢展望

          隨著越來越多的公司開始進入體驗管理的行列,勢必會促進體驗管理不斷的發展變化。結合對現有體驗管理工作現狀的觀察,我認為可以用三個關鍵詞來概括體驗管理將來可能的三個發展方向。

          精細。體驗涉及用戶與公司接觸的方方面面,時時刻刻,體驗管理也將圍繞用戶的全部場景,完整鏈路觸點,以及用戶的整個生命周期來進行更加精細化的數據采集、分析和優化,全方位的監測、診斷和管理。

          多元。從宏觀行業到微觀數據都將變得更多元。未來的體驗管理不僅僅只是用戶體驗部門的工作重點,也將作為抓手逐漸成為整個企業從上至下的重點工作方向。體驗管理不再只是互聯網企業的專屬,也將逐步滲透至各行業的企業公司。不同行業、不同企業的產品或服務類型多種多樣,用戶與產品或服務的交互觸點、場景也各不相同,為了滿足不同行業、不同企業的多樣化需求,體驗數據的采集渠道和場景也將結合多樣的觸點場景變得更多元,體驗數據的采集維度也將變得更豐富,分析數據的方式方法以及體驗管理工具的功能類型也將在不同行業/不同企業中呈現出個性化、多元化的趨勢。

          智能。技術的進步和發展也勢必會帶來體驗管理能力的不斷提升,體驗數據的采集、體驗水平的分析診斷、體驗問題的優化管理將借助新技術而變得更智能、更高效。體驗數據的采集將在用戶無意識中完成,且能兼顧體驗數據的多種維度,使體驗場景的還原更便捷,更真實;體驗水平的分析診斷將結合更多維的數據來進行綜合性的自動化診斷,并提供切實可行的優化方案,使體驗問題的暴露更準確,更人性;體驗問題的分發、進度跟蹤、效果評估等管理工作的自動化程度更高,使體驗優化的效率更高。

           

           

          轉載請注明:學UI網》關于體驗管理的幾點思考

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          B端后臺產品的設計細節-設計說明指南篇

          seo達人


          一、建立原子化組件思維

          1、什么是原子化組件思維?

          原子思維:原子最早是由英國化學家/物理學家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論。化學元素由不可分的微粒(原子)構成的,它在一切化學變化中是不可再分的最小單位。

          原子理論同理適用于我們的設計系統中:

          頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業務定制組件)、頁面構成。

          原子:原子是最基本和最小顆粒度的單位,無法進一步細分的UI元素,在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線等。

          分子:原子排列組合構成了分子,在界面中多以「設計控件」的形式存在,形成相對簡單的UI組件的原子的集合。例如:導航欄、標簽欄、搜索框、按鈕、彈窗等。

          組織:原子、分子排列組合形成界面離散部分的相對復雜的組件,在界面中多以「基礎組件」的形式存在,例如:內容卡片、表單頁面。

          模版:原子、分子、組織按照業務需求排列組合構成了模板,在界面中也稱為「業務組件」,例如:篩選列表。

          頁面:按照一定規則后排列組合而成的滿足業務需求且包含品牌屬性的一個完整「頁面」。

          圖片

          2、組件化的內核

          設計組件不是把UI元素堆積到一個地方,然后各處集中引用這么簡單。組件化的工作方式信奉獨立、完整、自由組合。

          目標就是盡可能把設計與開發中的元素獨立化,使它具備完整的局部功能,通過特定規則自由組合來構成整個產品。

          獨立:一個組件就是一個獨立的產品:在制定組件的過程中要考慮到組件應用中的各個場景,降低、拆解組件中的耦合度,同時把一個組件當作一個獨立產品來設計 考慮空狀態、極端情況、尺寸變化 盡可能靈活適應各種使用場景

          完整:一個完整組件構成包含三種屬性:

          A.響應狀態-包含組件庫中原子的大小類型、分子的響應和組合方式、多狀態的交互;

          B.行為狀態-組件中元素的與背景的組合方式、組件中不同組件拼合的層級關系、組件與用戶行為的交互;

          C .數據狀態-包含組件不同的狀態枚舉:如提交中、審核中、已結束狀態。

          自由:每個組件都是相互獨立的,組件間的組合方式靈活且多樣的。靈活多變的同時也要遵循統一的柵格尺寸與表達約束,最大程度上保證頁面呈現出一種有秩序的美。

           

          二、建立設計說明指南

          1、什么是設計說明指南?

          針對企業級產品反復出現的設計問題,設計模式給出一般性的解決方案,實現跨應用交互一致性的有效融合。減少了不必要的認知成本,提升交互確定性和設計的效率。

          考慮到需要適應各種獨特的業務場景,模式的規則具有一定的靈活性,萬變不離其宗,通過了解設計模式的構建邏輯,可以衍生出更具場景特性的解決方案。

          設計模式包含以下內容:

          原則:基于價值觀衍生出的一般設計技巧,包括如何高效組織信息、幫助建立用戶與界面的互動等原則性要求。

          全局規則:通過規范常見的互動行為,包括導航、數據錄入、數據展示、反饋、操作、幫助等,呈現組件元素的標準用法和彈性空間,并了解如何將他們組織在一起來創建良好的體驗。

          構圖模版:我們總結了表單、列表、數據可視化、詳情頁、工作臺、異常、結果、編輯器幾類頁面的典型解決方案,介紹每類頁面的設計目標、設計技巧以及典型頁面內容等,幫助設計師和產品經理可以快速開始構建界面。

          2、服務于誰

          A.設計師:交互設計時,整體流程框架或分支流程可快速復用。

          B.產品經理:原型設計時,可復制并套用現有交互模式進行原型繪制,或直接引用進行開發。

          C.研發人員:可作為標準交互流程的參照,統一相似流程的代碼設計方式。

          3、有什么內容

          前言:對這次建立設計說明指南的目的性說明;

          設計概覽:描述這次調整的范圍的維度;

          設計原則:基于哪些設計原則輸出設計內容;

          構圖模版:頁面的構圖模版、組合控件和組合范圍;

          全局規則:全局范圍出發,除了頁面構圖以外,涉及到共用組件,制定的規范;

          組件:基礎控件和組織控件,甚至涉及到業務定制控件(模版)。

          4、設計說明指南的輸出

          《GM Design》交互設計說明指南,涉及幾十個產品線的成百上千個的功能,業務體量和復雜度極大,為了讓整體SaaS產品具備簡潔高效的一致性交互體驗,設計說明指南是設計過程中問題解決的核心方法,也是構建整個平臺或框架所要遵循的基礎和標準。

          設計模式輔助設計者將業務引向實踐,并使設計更具有一般性、簡單性、一致性及穩定性。同時,設計者也可結合不同業務情境,實現模式在一般性和特殊性的銜接并作要素與結構的調整。

           

          最后

          最后,為大家提供一份詳細的GM Design交互設計文檔,里面包含設計概覽、設計原則、構圖模版、全局規則、組件等多類B端后臺交互設計內容。

          完整版交互設計說明文檔-體驗鏈接:https://lanhuapp.com/url/947cJ

          大家可以在公眾號后臺回復文檔,獲取訪問密碼。

          慢慢來比較快,希望對你有幫助!

          圖片


           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》B端后臺產品的設計細節-設計說明指南篇

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          想要優化好UI作品,這14個設計細節一定要檢查到位!

          seo達人


          圖片

           

          今天會跟大家分享一些被廣泛運用的界面設計規則,它們能快速使得你的界面設計更干凈、高效。

           

          1. 文案要易于理解

          用更容易讓用戶理解(說人話)的引導文案,提升使用體驗。

          (彩云注:下面2個案例中,左側的“購物車”和“庫存2”太過于術語化,右側的“僅剩2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候,也一定要注意界面中的文案,尤其是說明文字,控件文字等等,這個點經常容易被忽略。)

          圖片

           

          2. 垂直對齊易于掃視

          良好的對齊方式,可以增強內容的可讀性,讓用戶的視線更容易掃描。

          (彩云注:左側的“之”字形視動線比較難閱讀,且不夠專業;右側的垂直對齊增強了可讀性,也讓設計看起來更加統一,能夠快速的提升設計細節。)

          圖片

          3.給選項加圖標

          使用圖標、動畫作為標簽,有助于更輕松地理解內容,它使界面看起來更加理性和豐富,能瞬間抓住用戶的眼球。

          (彩云注:左側的導航相較于右邊,很難第一時間準確識別它的意思,增加圖標后不僅更快看清,視覺上也更加美觀。)

          圖片

           

          4. 大段內容要拆分

          大段的長句會讓內容變得難以閱讀。為了獲得好的體驗和UI,應該注意拆分內容,并使用項目符號突出關鍵點,利用拆分好的內容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時,提煉要點有助于提升用戶體驗,這樣也不至于讓用戶直接忽略。

          (彩云注:左側的大段文字我想應該沒多少人會去閱讀,右邊的至少還能在短時間內快速看看幾個關鍵詞。)

          圖片

           

          5. 流程增加進度條

          進度條幫助用戶追蹤流程,它也能使查看上下步驟更加容易。線上購物,表單填寫,申請流程等場景使用這種格式能很好的簡化流程。

          (彩云注:左邊的表單UI不方便跟蹤進度和流程,右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。)

          圖片

           

          6.錯誤提示要明確

          錯誤提示一定要明確,易于理解,方便用戶進行下一步的操作。如果用戶不理解界面上出現的錯誤,用戶就會感到很失望,可能會放棄接下來的流程。在UI設計時,在正確的地方用通俗的語言說明問題,以避免歧義,這一點非常重要。

          (彩云注:我常常遇到各種出錯,但出現的提示太過于術語化,也沒有提示在正確的地方讓我非常苦惱。)

          圖片

           

          7.按鈕要正確合理

          從菲茨定律(Fitt’s Law)中我們應該知道,目標區域的距離和外觀與所采取的行動成正比。因此,為了將注意力集中在轉化按鈕上,按鈕應該準確放置在合理位置上。此外,按鈕的大小應該易于點擊,避免用戶因嘗試點擊時不方便而流失。

          (彩云注:左側的按鈕不在正確的決策位置以及按鈕太小,右側的按鈕簡潔明了并且符合用戶的心理預期,能夠讓用戶更快決策并點擊。)

          圖片

           

          8. 用好色彩心理學

          顏色是UI中不可缺少的部分,它能影響用戶使用應用時的情緒。正確地使用顏色將使UI看起來更加豐富合理。

          (彩云注:左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期,右側的紅色按鈕對用戶的心理預期有危險和警告,用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。)

          圖片

           

          9. 單列更易保持關注度

          用單列展示內容,能更好地幫助用戶掃描。當你的應用和網站上要展示大量信息時,將所有信息垂直對齊時,能更好的保持用戶關注度。

          圖片

           

          10. 優先社交媒體賬號登錄

          當用戶準備登錄或注冊你平臺的時候,把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號,能很好地增加點擊率。

          圖片

           

          11. 選擇狀態要清晰

          在用戶做選擇的時候,需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態能讓用戶獲得更好的體驗。

          (彩云注:左側的問題在于選中狀態不清晰且選項的顏色過于豐富,右側的選中狀態清晰且選項顏色只有2種,選中和非選中,體驗會更好。)

          圖片

           

          12. 用留白分組

          如果想給信息分組,使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素,空白能讓UI看起來更加干凈和優雅。用線分組的情況適用于類似Twitter、Medium之類的重內容平臺等場景。

          圖片

           

          13. 控件樣式保持一致

          保持設計的一致性,能夠降低功能復雜度并讓用戶更快決策,一致性設計讓用戶更快熟悉操作而不需要太多思考。(彩云注:左側的選項圓角不一致,會讓用戶思考為什么這里會有不同,而右側的一致性選項設計,能讓用戶忽略內容外的干擾。)

          圖片

           

          14. 搜索中的占位符要用好

          在搜索輸入欄添加適當的占位符,提示用戶可以在平臺上搜索和找到的內容,這樣可以提供用戶參考并帶來更好的用戶體驗。

          圖片

           

          總結

          以上這些就是在設計數字產品體驗時應該遵循的14個基本規則,這些點雖然基礎,但卻經常被人忽略,我在星球中幫大家看作品集時發現上面提到的這些點出現的是最多的,希望大家可以把這些知識運用到自己的設計中,提升UI產品體驗。

          原文:https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
          作者:Ayushi Verma
          譯者:彩云Sky
          本文翻譯已獲得作者的正式授權(授權截圖如下)

          圖片

          希望對大家有幫助,歡迎轉發分享~

          原文地址:彩云譯設計(公眾號)
          作者:彩云Sky
          轉載請注明:學UI網》想要優化好UI作品,這14個設計細節一定要檢查到位!

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          超全干貨!五個方面幫你掌握標簽欄設計

          博博

          快速迭代的產品存在著同質化趨向,如何做出差異性?如何將品牌精神向外傳達?如何在有限的時間內,滿足產品需求的同時帶給用戶更好的

          體驗感,進而體現設計的價值呢?靜態畫面動起來或許是個不錯的選擇!

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計

          超全干貨!五個方面幫你掌握標簽欄設計


          作者:多點MP

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          想優化 UI 作品,這14個設計細節一定要檢查到位!

          博博


          Hi,我是彩云。界面是用戶在與任何產品、APP 或平臺交互時看到的內容,用戶體驗就是建立在堅實的界面設計基礎之上的。所以,如果你想要在 UI 設計上提升能力,應該多去思考界面設計背后的原因。

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          今天會跟大家分享一些被廣泛運用的界面設計規則,它們能快速使得你的界面設計更干凈、高效。


          文案要易于理解


          用更容易讓用戶理解(說人話)的引導文案,提升使用體驗。

          (彩云注:下面 2 個案例中,左側的“購物車”和“庫存 2”太過于術語化,右側的“僅剩 2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候,也一定要注意界面中的文案,尤其是說明文字,控件文字等等,這個點經常容易被忽略。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          垂直對齊易于掃視


          良好的對齊方式,可以增強內容的可讀性,讓用戶的視線更容易掃描。

          (彩云注:左側的“之”字形視動線比較難閱讀,且不夠專業;右側的垂直對齊增強了可讀性,也讓設計看起來更加統一,能夠快速的提升設計細節。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          給選項加圖標


          使用圖標、動畫作為標簽,有助于更輕松地理解內容,它使界面看起來更加理性和豐富,能瞬間抓住用戶的眼球。

          (彩云注:左側的導航相較于右邊,很難第一時間準確識別它的意思,增加圖標后不僅更快看清,視覺上也更加美觀。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          大段內容要拆分


          大段的長句會讓內容變得難以閱讀。為了獲得好的體驗和 UI,應該注意拆分內容,并使用項目符號突出關鍵點,利用拆分好的內容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時,提煉要點有助于提升用戶體驗,這樣也不至于讓用戶直接忽略。

          (彩云注:左側的大段文字我想應該沒多少人會去閱讀,右邊的至少還能在短時間內快速看看幾個關鍵詞。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          流程增加進度條


          進度條幫助用戶追蹤流程,它也能使查看上下步驟更加容易。線上購物,表單填寫,申請流程等場景使用這種格式能很好的簡化流程。

          (彩云注:左邊的表單 UI 不方便跟蹤進度和流程,右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          錯誤提示要明確


          錯誤提示一定要明確,易于理解,方便用戶進行下一步的操作。如果用戶不理解界面上出現的錯誤,用戶就會感到很失望,可能會放棄接下來的流程。在 UI 設計時,在正確的地方用通俗的語言說明問題,以避免歧義,這一點非常重要。

          (彩云注:我常常遇到各種出錯,但出現的提示太過于術語化,也沒有提示在正確的地方讓我非??鄲?。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          按鈕要正確合理


          從菲茨定律(Fitt’s Law)中我們應該知道,目標區域的距離和外觀與所采取的行動成正比。因此,為了將注意力集中在轉化按鈕上,按鈕應該準確放置在合理位置上。此外,按鈕的大小應該易于點擊,避免用戶因嘗試點擊時不方便而流失。

          (彩云注:左側的按鈕不在正確的決策位置以及按鈕太小,右側的按鈕簡潔明了并且符合用戶的心理預期,能夠讓用戶更快決策并點擊。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          用好色彩心理學


          顏色是 UI 中不可缺少的部分,它能影響用戶使用應用時的情緒。正確地使用顏色將使 UI 看起來更加豐富合理。

          (彩云注:左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期,右側的紅色按鈕對用戶的心理預期有危險和警告,用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          單列更易保持關注度


          用單列展示內容,能更好地幫助用戶掃描。當你的應用和網站上要展示大量信息時,將所有信息垂直對齊時,能更好的保持用戶關注度。

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          優先社交媒體賬號登錄


          當用戶準備登錄或注冊你平臺的時候,把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號,能很好地增加點擊率。

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          選擇狀態要清晰


          在用戶做選擇的時候,需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態能讓用戶獲得更好的體驗。

          (彩云注:左側的問題在于選中狀態不清晰且選項的顏色過于豐富,右側的選中狀態清晰且選項顏色只有 2 種,選中和非選中,體驗會更好。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          用留白分組


          如果想給信息分組,使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素,空白能讓 UI 看起來更加干凈和優雅。用線分組的情況適用于類似 Twitter、Medium 之類的重內容平臺等場景。

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          控件樣式保持一致


          保持設計的一致性,能夠降低功能復雜度并讓用戶更快決策,一致性設計讓用戶更快熟悉操作而不需要太多思考。(彩云注:左側的選項圓角不一致,會讓用戶思考為什么這里會有不同,而右側的一致性選項設計,能讓用戶忽略內容外的干擾。)

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          搜索中的占位符要用好


          在搜索輸入欄添加適當的占位符,提示用戶可以在平臺上搜索和找到的內容,這樣可以提供用戶參考并帶來更好的用戶體驗。

          想優化 UI 作品,這14個設計細節一定要檢查到位!

          總結


          以上這些就是在設計數字產品體驗時應該遵循的 14 個基本規則,這些點雖然基礎,但卻經常被人忽略。


          作者:彩云Sky1

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          那些高效的界面設計工具

          純純

          近年來界面設計工具不斷推陳出新,一些新興的實用界面設計工具漸漸走進設計師們的視野,逐步改變著設計師的工作模式。作為互聯網設計師,效率至上的工作原則敦促我們不斷嘗試新工具,建立新的工作模式。本文將回顧界面設計工具的發展歷程,并著眼界面設計工具的發展趨勢,為大家推薦一些新興、高效的界面設計工具,涉及UI、動效設計領域,希望對大家有所幫助。




          Part1

          ——————————

          界面設計工具的發展歷程


          隨著互聯網行業的日益繁榮,界面設計領域逐漸走向成熟,界面設計工具也一直在以驚人的速度發展。界面設計工具的發展歷經了三個階段:


          1. 第一階段是最早期界面設計領域剛剛起步,設計師普遍使用PS來制作界面。但PS是一個全面的而非專門針對界面設計的工具,因此界面設計師在界面的繪制、文件的交付上都存在一定不便。


          2. 第二階段是Sketch的出現。雖然Sketch是一款Mac端軟件,但其作為一款專門針對界面設計的工具,以其高效、小巧的優勢迅速占領界面設計市場,逐步取代PS成為各大設計團隊的首選。由于Sketch在動效制作方面的欠缺,出現了Principle、Flinto、Protopie等專門設計界面動效的工具,一般設計師都會將其搭配使用。


          3. 當前階段各種新興設計工具如XD、Figma、Framer Web逐漸走進設計師們的視野,它們專注于界面設計領域,不斷挖掘和突破Sketch的短板,為設計師們打造更良好的使用體驗。




          Part2

          ——————————

          界面設計工具的未來發展趨勢

          界面設計工具的發展改變著設計師們的工作方式。界面設計工具也漸漸從單一專注設計本身向云端性、協作性、通用性發展,旨在實現更高效的設計生產活動。



          云端性


          隨著云計算的發展,界面設計工具也在逐步走向云端化。設計從本地轉向云端,不再依賴于本地硬件的性能,云端的計算能力讓使用性能得以提高。設計也不再受時間和空間的限制,只要有網絡,設計師可以隨時隨地的工作,臨時使用其他電腦工作時省去了安裝軟件、同步設計文件的麻煩。 設計文件的共享從傳送本地文件給對方,變成發送鏈接給對方。前者耗費本地內存與下載時間,后者有網即可打開。設計工具的云端性使得設計的靈活度增強,設計效率大大提高。


          協作性

          注重不同工種之間的高效協作也是設計工具的一個發展趨勢。新興的設計工具(如Figma、Framer Web)試圖將產品、設計、開發、測試融為一個整體,讓不同工種之間可以高效討論、同步設計方案。實現整個團隊效率的最大化。利用技術降低反復溝通的成本、減少同步不一致情況的發生,掃除各工種之間的協作障礙。


          通用性

          今年9月Figma舉辦的第二屆Config Europe大會,其主題是讓設計和代碼連接更緊密??梢钥闯鲈O計工具越來越注重其通用性,設計工具不僅可以幫助設計師輸出設計稿本身,而且致力于打破設計與代碼之間的壁壘,降低交接成本。讓設計實現變得更加輕松高效。




          Part3

          ——————————

          界面設計工具推薦


          1 UI工具篇

          1.1 Figma

          Figma是一款全平臺通用的在線界面設計軟件。2019年UXTOOLS設計工具使用報告中顯示,Figma的使用率從12%增長至26%,在今年的Config Europe大會上Figma也預告了一些即將推出的功能迭代,其便捷高效的特性使其受到眾多設計師的追捧,正在逐步搶占sketch的用戶市場。


          Figma與Sketch相比,亮點功能有哪些?


          (1)Windows用戶也可隨心使用

          與sketch只支持蘋果生態系統相比,Figma最大的好處是windows用戶也可以使用。他支持在Mac、windowsPC機甚至ipad上使用,理論上只要你能打開瀏覽器,就可以使用Figma愉快地設計。



          (2)云端文件使用不卡頓,支持離線編輯


          Figma創建的文件全部存儲在用戶的云端賬戶中,不占用本地內存。當文件過大時,sketch會出現卡頓現象,拖拽一個圖層都會變得很困難。而Figma對本地資源的消耗很小,大文件也幾乎不存在卡頓的情況。設計師們最關心的無網或若網情況下Figma的使用問題,Figma也給出了相應的解決方案。其支持離線編輯,離線時會自動把內容保存在本地,當網絡恢復后自動同步到云端。



          (3)一鍵導入sketch文件


          Figma可導入Sketch文件,大大降低了文件遷移成本。如果你想遷移全部工作到Figma是十分便捷快速的。





          (4)更強大的組件功能


          Figma和Sketch都擁有組件功能。當原始組件更改時,復制組件就會同步變化,在這點上二者是相同的。但Figma在組件邏輯上比Sketch更進一步,復制組件可以靈活處理與原始組件的同步關系。當設計師修改復制組件的樣式時,原始組件不受影響。此時二者的關聯邏輯仍然存在,當再次修改原始組件,復制組件仍然會同步變化。相比于Sketch,Figma把組件做的更加靈活限制更少。


          同時Figma也在不斷優化其組件功能,在Config Europe大會上,Figma預告在今年11月會正式上線組件Variants功能。該功能是將一系列有關聯的內容生成一個Variants組件,在使用時可以直接通過識別出來的組件屬性改變組件樣式。其優勢在于使用組件時可以更輕松的切換所需組件的不同狀態,再也不需要像在sketch中一樣逐級尋找了。


          如下圖中的按鈕組件,設計師可以將所有的按鈕狀態都列舉出來并按層級、顏色、狀態、大小命名。然后選中所有按鈕將其組成一個Variants組件。




          (5)與代碼緊密結合


          在使用sketch輸出設計稿時,設計師往往需要借助藍湖或zeplin輸出標注文件。Figma則與代碼緊密結合,本身自帶交付功能。 其文件中的每個模塊都有代碼模式,只需要將開發同學的賬號開通查看權限并發送鏈接,就可以直接在設計文件上獲取標注,也可自行導出所需的CSS、ios、Android樣式。





          (6)一鍵恢復歷史版本


          Figma會將設計師的每一次修改存成對應的歷史版本,當老板說想要某一版時,設計師只要恢復至老板想要的版本就ok啦。如果其他設計師誤刪除或錯誤修改文件,也有機會一鍵搶救。



          (7)團隊協作


          團隊協作功能可謂是Figma最大的核心競爭力。當幾位設計師需要維護同一份設計文件時,Figma可以支持幾位設計師同時在線修改,只要將文件鏈接分享給對方并給到相應權限(查看、編輯權限)即可。如果使用sketch,設計師一般會發送源文件給對方修改來達到協作效果。來回傳輸源文件不僅容易造成文件同步出錯,而且有一定的下載時間成本和存儲成本,相比之下Figma的優勢顯而易見。


          除了設計師之間的協作,Figma也有效提高了設計評審的效率。與在工作群截設計圖標紅再描述相比,Figma的評論功能使得同事可以在設計文件中實時標注討論方案,提高了線上評審效率。




          小結

          設計師受文件本地存儲的限制,在工作中把源文件給同事、設計稿給產品、切圖給開發、一項簡單的輸出對接任務變得瑣碎起來。Figma的出現打破了設計師長久以來的孤島工作狀態,設計師只需分享一個鏈接,同事可以修改設計稿、產品可以評審、開發可以查看界面模塊的屬性甚至查看代碼,大大提升了設計師的工作效率。如果您的團隊正在考慮更換設計工具,Figma是一個不錯的選擇。




          2 動效工具篇

          2.1 Framer Web

          Framer Web是一款在線動效設計軟件,于今年5月上線正式版,相比于Framer家族的前兩款產品Framer classic、Framer X, Framer Web突破了其以代碼為操作核心的理念,上線的新版本對設計師來說更加易用友好。


          Framer Web的核心亮點是什么?


          (1)網頁端全平臺可用


          相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦,Framer Web是一款基于瀏覽器的在線設計工具,因此windows用戶也可以安心使用。同時個人版本免費,大大降低了設計師的使用成本。



          (2)文件導入

          Framer Web可通過import選項導入Sketch甚至Figma文件,可搭配Sketch和Figma快速制作高保真動效。




          (3)輕松實現復雜動效


          Framer一直主打利用代碼實現復雜可控的交互動效,。雖然可以保證輸出高質量的動效,但對于設計師們來講十分不友好,學習成本過高。此次發布的Framer Web為了解決這一問題,增加了適合設計師使用的可視化界面控制動效,設計師可以通過Magic Motion輕松實現復雜動效。


          Magic Motion與principle、keynote的動畫實現原理類似。當你選擇目標元素添加了交互行為后,可以在Magic Motion中選擇一個過渡方式。只要兩個畫板中的元素名稱一致且在不同面板中擁有不同的形態,那么在畫板切換時該元素就會生成補間動畫發生相應變化。



          同時Framer也新增了一些特別的交互控制實現一些特殊動效。比如自帶控件中的video,本身會有一些獨特的交互行為如End、Pause、Play(播放、停止、暫停),當進行這些操作時,會觸發相應的頁面變化。




          (4)從設計到代碼


          代碼一直是Framer的核心功能。Framer Web默認隱藏了代碼面板,設計師還是可以在設定了動效后,通過點擊頂部的handoff調出相應代碼。如果你是一個需要使用代碼的設計師,你仍然可以通過編輯代碼實現更復雜的動效。對于設計師來說,Framer提供的豐富動效已經可以滿足絕大部分訴求。絕大部分設計師已經無需再關注代碼部分,通過可視化界面完全可以做出很豐富的交互效果。而Framer Web最終的野心是希望設計師通過可視化界面設計出參數化的動效,可以直接導出相應的能交付生產端的代碼。目前Framer Web 已經可以實現導出相應動效代碼,但導出的效果仍有待完善,只是可以導出Transiton的參數而已。




          (5)高效協作


          Framer Web和Figma一樣,也非常注重團隊協作。設計師可以將鏈接分享對方進行查看、編輯,方便幾位設計師合作一個項目的情況。與需要反復傳輸文件相比,Framer Web省時省力,大大提高了設計師的工作效率。


          小結


          Framer Web放棄了攻占界面設計領域的策略,轉而和Figma官方達成積極的戰略合作,專注于做專業的動效設計軟件。因此Framer Web非常適合和Figma搭配使用。隨著產品策略的調整,相信在不久的將來Framer Web還會為設計師們提供更豐富、高效的動效設計功能,非常值得期待。




          3 插件篇


          雖然云端化的設計工具正逐漸興起,但sketch仍然是目前較為主流的界面設計工具。因此接下來除了為大家介紹一些可以提升工作效率的Figma插件外,也會介紹一些好用的sketch插件,大家可以根據自己的需求自行嘗試體驗。


          3.1 Design Lint(Figma)

          設計師在做較大項目時可能會繪制幾十個頁面,難免會存在界面丟失元素的情況。Design Lint就能幫助你解決這一問題。它可以在你工作的時候進行實時更正,檢查不同界面直接的差異,包括顏色、字體、填充、半徑值等樣式差異并糾正錯誤。如果你做了一些修改,Desgn Lint也會根據你的修改實時更新。這款插件可以讓你更專注于設計本身,而不用浪費時間檢查不同頁面的元素是否使用正確,大大提高了設計師的工作效率。

          https://www.figma.com/community/plugin/801195587640428208/Design-Lint



          3.2 TinyImage Compressor(Figma)


          設計師在做較大項目時導出的設計稿過大,存儲和傳播的成本高。用這款插件最多可以比Figma默認導出的文件小90%。同時支持導出多格式文件,導出多個圖片時還會自動生成一個zip壓縮包。

          https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl




          3.3 Design System Organizer(Figma)


          這款插件幫助設計師在設計組件系統時管理組件系統。在設計組件系統時,會遇到如圖所示的:“Buttons-Small-Default...”的組織形式。該插件可以對組件進行管理、如分組、取消分組、移動、重命名。當重命名組后,該組中所有組件的名稱都會隨之改變,十分方便。

          https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer




          3.4 Juuust Handoff(Figma)


          Figma本身自帶交付功能,但該插件的好處是生成的是離線文件,導出的文件可直接交付開發。開發同學可以不受網絡影響隨時查看間距、色值等信息。

          https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff




          3.5 Image Optim (Sketch)


          設計師在導出設計稿時有時圖片過大,Image Optim可以在導出圖片時壓縮圖片,但不會影響圖片的質量。使用時需先安裝app再安裝Sketch插件。

          https://oursketch.com/plugin/imageoptim



          3.6 FontFinder(Sketch)


          設計師在做較大項目時可能會繪制幾十個頁面,難免會存在字體使用錯誤的情況,Font FInder就能幫助你解決這一問題。它可以檢測出文件中存在的所有字體,你可以勾選想要更改的字體就可以一鍵將其改成目標字體。再也不需要在幾十個頁面中逐個尋找更改,大大提升了工作效率。

          https://oursketch.com/plugin/font-finder





          3.7 Craft(Sketch)


          Craft插件十分強大,其中填充功能可以大大提升設計師的效率。在設計如列表頁時,設計師為了效果需要編輯不同的標題、圖片,都要冥思苦想編內容。Craft可以一鍵填充文字,如姓名、文章、日期、郵箱、地址、國家等。不同類別下面也設置了一些分類,方便設計師選擇。除此之外,Craft還可以一鍵填充真實不重復的照片,為設計師節省了很多時間。

          https://www.invisionapp.com/craft



          3.8 BaseAlign(Sketch)


          Sketch自帶的對齊工具對形狀來說很好用,但對于文字來講一般是文字的文本框對齊,并不是文字本身對齊。BaseAlign插件使用的是文字自身的基線對齊,這樣就以保證不同大小的文字都可以對齊,設計效果更完美。

          https://oursketch.com/plugin/basealign



          4 協作工具篇

          4.1 XSHOW


          XSHOW是一款由ISUX研發的高效設計協作平臺。XSHOW連接了產品經理、開發等各個不同工種,提高了設計資源輸出和分發效率。設計師將設計文件上傳到XSHOW,就可以將文件鏈接分享給產品經理、開發等同學。產品經理在手機小程序上就可以預覽方案,設計師每次更新的方案也可以直接預覽。開發同學可以直接查看標注和切片。同組設計師也可以直接下載源文件、甚至查看歷史迭代版本。

          網址:https://xshow.tencent.com





          XSHOW是如何實現高效協作的?

          對于設計師

          (1)可視化上傳文件

          設計師先在Sketch中安裝XSHOW插件,可使用快捷鍵或直接點選需要上傳的文件畫板,接著直接選擇XSHOW中的“導出”,就可直觀快速的將文件上傳到XSHOW。




          (2)記錄所有版本迭代,輕松找回第一稿


          設計師每一次上傳的文件都會有云端記錄,設計師可以通過時間軸便捷找回歷史文件,輕松找回第一稿。



          (3)靈活豐富的分享權限


          對于項目分享的權限,XSHOW的設置更為靈活,除了支持私密、公開、指定人或團隊可見外,也可以控制權限的時效。




          對于項目管理者

          (1) 直觀了解團隊輸出,組建團隊展示能力空間

          XSHOW除了個人使用外還可以組建團隊。項目管理者可以通過XSHOW直觀查看整個團隊的設計稿件輸出修改情況,同時可以組件團隊展示能力空間。



          (2)方案變更及時知道


          XSHOW有記錄所有版本迭代的能力,因此作為項目管理者可以及時知道團隊成員對方案的修改變更,解決了團隊內部有時同步不及時的問題。


          (3)便捷組建項目和管理團隊成員

          項目管理者可以在XSHOW便捷組建項目和管理團隊成員,大大提高了項目管理者的管理效率。





          對于合作產品經理或甲方

          (1)多端查看更方便

          XSHOW支持web和小程序兩種沉浸式查看方案的方式。在小程序上查看方案方便合作方直觀感受方案在手機上的真實效果,如果合作方身邊沒有電腦也可以及時查看稿件。




          2. 查看歷史變更


          XSHOW的歷史變更功能可以使合作方也及時了解方案的變更情況,大大提升了信息同步效率。



          對于開發工程師

          (1)便捷查看標注與管理切片

          設計師將文件上傳到XSHOW后,只要將鏈接分享給開發,開發就可以直接在線查看文件標注、下載切片。


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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司






          設計工具的后起之秀——AffinityDesigner功能提煉

          純純

          一、基礎操作


          1.焦點顯示

          按住option單擊圖層縮略圖,視圖上會只顯示該圖層內容(暫時性隱藏其他圖層,進行其他操作依然會顯現出來)

          2.蒙版(同PS剪切蒙版)

          在AD中同樣也是有蒙版功能的。例如下圖,這三個字實在是太霸氣了,我們想變慫一點,那該怎么辦呢?在右側圖層面板中,按住矩形層縮略圖,拖入文字層的縮略圖與圖層名稱之間(也可以看作是縮略圖層),即可完成蒙版操作。

          但是要想調整文字大小,但是依然只顯示矩形所在區域范圍的內容呢?那么我們需要勾選上方工具欄中的【鎖定子項(lock children)】按鈕,在進行調整就OK了。


          3.歷史記錄(history)※

          1)定位滑塊

          歷史記錄工具包含一個定位滑塊(position),拖動滑塊,可快速撤銷與復原,效率很高。同時也可以點擊列表的特定步驟,點擊后就會回到該步驟操作。

          2)歷史分支

          在文件菜單欄中有個【隨文檔保存歷史記錄(save history with document)】,勾選后,保存的文件將保留歷史記錄。當你在歷史記錄中選中曾經的特定操作的情況下,進行一步新操作,則歷史記錄會產生一個小分支符號,分支符號代表不同的未來。例如我新建一個黃色矩形,然后將顏色調整為藍綠色漸變。然后通過點擊歷史記錄,回到新建黃色矩形的步驟,然后把顏色改成藍紫色漸變,這樣在填充步驟就會出現分支符號,通過點擊分支可快速切換至藍綠色漸變,可用于嘗試性創作,并通過同時存在的兩種結局來進行對比。


          4.快速副本(power duplicate)

          復制粘貼和復制圖層操作與PS完全一致,不同的是power duplicate部分。首先,我們在畫布上繪制一個矩形,然后按command J復制出一個矩形副本,將矩形副本移動到矩形的左邊,然后縮放它,操作完成后按command J,在矩形副本的左邊就會出現一個比矩形副本更小的矩形副本2,副本2矩形副本的距離與矩形副本矩形的距離相同。好,我們回到第一步,繪制一個矩形。然后按住command 拖動矩形,則會出現矩形副本,然后移動矩形副本后,按command J,同樣可以達到上面的效果,我們把這個操作叫做power duplicate,也就是快速副本。PS也有同樣的功能,但是操作邏輯有些許不同,AD的更為清晰一點。


          5.圖層與像素圖層

          1)圖層概念

          在AD中,有兩個圖層的概念,一個叫做圖層(就是普通圖層,可以包括像素圖層和矢量圖形圖層),另一個叫做像素圖層。如果選中圖層的狀態下添加像素圖層,則該像素圖層會默認放置在該圖層下,普通圖層與組的概念類似。如果選中畫板層的情況下添加像素圖層,則像素圖層自動創建在畫板層,與其他圖層同級。

          2)三大角色模塊(personas)

          在AD中有矢量部分、像素部分、導出部分的區別。不同部分的工具區是不一樣的。在矢量部分下,包括拖動矩形與鋼筆繪制形狀,所創建的都是矢量圖層;像素部分創建出來的都是像素圖層,這兩者是不一樣的,同時也是AD與AI的重要區別之一。


          二、高級操作


          1.等距視圖※

          1)內置網格

          與AI需要自己手動繪制等距視圖網格線不同,在AD中內置了一套優秀的網格系統,可以幫助我們快速的搭建出2.5D插畫需要的網格線,并且支持角度變換。在調節角度時可以預覽網格線的具體效果,就這一點就足以讓2.5D插畫作者扔掉AI轉投AD。

          2)等軸測工具(isometric)

          isometric工具可以幫助我們快速繪制等距視圖插畫。我們可以想象一下在AI中,好不容易利用旋轉復制人肉做出了參考線,還需要用鋼筆工具去點擊參考線的交點來繪制插畫的一個個立體塊面。在AD中這項繁復的工作將不復存在。通過等軸測工具,我們將告別手動對齊這種令人頭大的工作。

          等軸測工具功能由兩部分構成,上方的三個立方體表示參考線當前描述的是哪個平面,并且可以通過這三個立方體來快速切換當前平面(current plane)。

          在下方平面編輯選項部分,有這樣幾個功能項。

          • 在平面中編輯(重點):在該選項選中的狀態下,我們通過圖形繪制工具在畫布上直接就能拖動出符合參考線角度的圖形,特別是在繪制圓形時簡直不要太方便。

          • 適應平面(重點):在畫布中我們通過矩形工具繪制了一個正常的矩形,橫平豎直那種,然后點擊【適應平面(Fit to plane)】,只聽得啪的一聲,矩形就被啪到參考線上了,變成等軸視圖的一個部分。

          • 在平面中翻轉/旋轉:這個沒什么說的,就是普通的翻轉旋轉操作,變成了等距視圖的翻轉旋轉操作。


          2.資產(assets)

          相當于UI組件庫,Sketch與XD都有同樣的功能。


          3.符號(symbols)

          視圖(view)-studio-符號(symbols),將圖形拖進去,就形成了symbols。

          如果想要單獨修改某一個符號,則需要點擊符號面板右上方的【同步(sync)】來取消全局修改,然后單獨修改某一個符號。修改后,該符號將脫離符號控制,不受符號修改影響


          三、設計幫助


          1.曲線吸附(curve snapping)

          選擇節點工具[A],去調整一條曲線的錨點,可以通過上方面板中的吸附(snapping)來選擇各種吸附方式。


          2.參考線管理器(guides)

          視圖-參考線管理器,可打開參考線面板,已存在的參考線都會在上面顯示,同時可以點擊參考線的數值來修改參考線的具體位置。

          因為需要時間消化的原因,我會將文章分為幾部分整理,在此階段如果有朋友感興趣可以去Affinity官網下載試用,同時結合本文上方的鏈接(官網的教學視頻被異次元封印了)可以更好地了解AD。再次提一下,一定要看官方教學視頻,不要想憑借著自己PS、AI的基礎去直接上手,AD真的不一樣。

          AffinityDesigner(下文都用AD表示)是Affinity系列中偏向于矢量繪制與界面設計功能的工具,其并沒有能夠準確對標的競品,如果非要對標的話,可能就是Adobe Illustrator和Sketch了。Affinity系列中的另外兩款作品Affinity Photo(偏向圖像處理,對標Adobe Photoshop)與Affinity Publisher(印刷排版,對標Adobe InDesign)也是非常有潛力的作品,不過目前這兩款還沒有辦法完全替代掉Adobe家族的作品。

          但是AD,我覺得是可以完全有實力跟Adobe Illustrator一較高下。在用過Sketch之前,我從未感覺用PS做UI有多低效,同樣,在了解AD之前,我也從來沒感覺Ai有多難以忍受,頂多有些地方感覺反人類罷了。但是經過兩三天的了解與試用,我立即就在App Store下單入正并拋棄了AI。

          因為AD,真的有點東西。

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          設計的“整理術” —組件化設計思維沉淀

          純純

          『 寫在之前 』


          最近在閱讀《佐藤可士和的超整理術》,書里講述的是作者通過對空間、信息和思考的整理,來解決復雜問題,讓工作變得高效。生活和工作離不開“整理”,好的設計也要從“整理”開始,組件化設計思維,也可以看做一種“整理術”。本篇文章將與大家探討如何運用組件化設計思維去“整理”項目,并發揮更高的價值。

          文章分為兩個部分:

          1. 組件化設計思維

          2. 滴滴表單優化項目的沉淀總結:組件化思維的推動和執行



          『 組件化設計思維 』


          1. 什么是組件化設計思維

          我們知道“分子是由原子組成的,分子分成原子,原子也可以重新組合成新的分子”。一個界面是由獨立的分子組件搭建而成,分子組件由原子元件構成,這些原子可通過不同的組合方式,組成新分子組件,繼而重組構成新的界面。

          組件化設計思維是通過對功能及視覺表達中元素的拆解、歸納、重組,并基于可被復用的目的,形成規范化的組件,通過多維度組合來構建整個設計方案,從而提升設計效能。


          2. 滴滴運用組件化帶來的收益

          隨著滴滴業務的飛速增長,組件化為滴滴帶來了一致的設計語言和工作效率上的提升,因此滴滴在組件化道路上的決心愈發堅定。選擇以組件化展開設計實踐,帶來的變化與收益主要體現在公司、項目和個人三個維度:


          2.1 公司維度

          一款產品的更新迭代是依附于產品、設計、開發、測試等多個團隊協作進行的,隨著產品功能的完善,背后支撐的團隊也在不斷壯大。以運用組件化推動的產品設計與迭代,可以使團隊增效,降低成本。設計師可以只用幾個小時設計出幾十個頁面,開發人員也可以通過查看prd文檔,直接調取組件代碼完成需求,使得我們的生產力產生質的飛躍。在保證數量和質量的前提下,原本200人的團隊,可以縮減為100人,為公司節省了人力成本。組件化能讓公司以更快的速度和更低的成本開發產品,也能對產品想法快速驗證。


          2.2 項目維度

          ● 從設計方案上

          對于一些適用組件化的產品形態,我們可以運用組件化思維將其“化整為零”,對需求有更規范的統籌,理清框架,建立一個可復用的組件結構并持續優化,以保證交互和視覺的一致性。


          ● 從工作流程上

          傳統的設計流程大多是同屬性多角色并行的,從需求到設計,從設計到前端的工作流程會涉及到不同的設計師及不同的前端工程師。相同角色間無交集、缺乏溝通會導致大量重復性工作,增加項目周期和管理難度。


          而將組件化思維貫穿其中的設計流程,帶來了工作流程上的創新。我們建立了一套設計組件庫來提高協同效率,大量需求均通過需求評估來判斷是否需要新增或復用組件,對于組件庫里已有的組件,設計師可直接調取,組合構建出新頁面。對于新增組件則經過常規設計流程后,歸納沉淀并由組件委員會審核通過后方可入庫,以提升后續組件擴展能力,助力產品快速更新迭代。 


          2.3 個人維度

          利用組件化,設計師可以從低價值的機械式工作中解放出來,參與到設計創新中去,發揮更高的設計價值。

          另外,在工作中運用組件化設計思維有助于設計師更完整的思考,培養全局思維的能力;也有助于我們專注于細節,提供個性化的創新方法,產出適應不同場景的最優方案。


          下面用一款優秀案例來解析組件化設計思維


          『 滴滴表單優化項目沉淀 』


          1. 項目背景


          1.1 為什么要優化表單

          滴滴出行5.0版本從2016年11月上線至今,隨著用戶體驗痛點不斷增加,業務的需求逐漸多元化,我們希望對表單進行一次統一的整合梳理和升級。為未來更多業務發展提供快速支撐和拓展,同時也注重用戶體驗的提升。

          滴滴出行作為出行服務類應用,精準的發單表達是觸達用戶進入服務流程的關鍵。每個業務在確認呼叫的節點上擁有獨立的入口并滿足不同的需求(如下圖),確認呼叫頁表單(以下簡稱表單)作為最重要的多功能、多信息載體,需要高效、精準的表達和流暢的體驗。


          1.2 跨業務共建

          滴滴出行是涵蓋出租車、專車、快車等多項業務在內的一站式出行平臺,我們希望在保證全平臺統一化的基礎上,與業務尋求一種相輔相成的關系,并且在保證規范化輸出的同時,展現出業務特色。在需求階段,確定各業務接口人,收集需求,溝通評審促成各方達成一致目標。在方案執行階段,平臺設計師產出方案,與各業務線溝通并優化,1~2次循環后方案評審到最終確立。開發和測試階段,各方驗收通過后發版上線,上線后平臺沉淀設計規范,完善組件庫,跟蹤反饋,推動體驗優化形成工作流程閉環。 



          2. 確立設計目標


          項目初始,平臺設計師需從業務訴求及用戶訴求兩方面著手,在收集到兩方需求后,對其進行歸類整理并定義優先級,從而確立設計目標,制定出具體的設計策略,提煉交互框架,再深入到細節的設計。 


          在表單項目中,基于滿足業務未來多元化及提升用戶體驗的需求,輸出目標為:

          1)兼容各業務需求,建立具有可承載多種業務共性及特性的組件能力框架;

          2)主要信息及次要信息的合理化分布;

          3)傳遞真實感及專業感,拉近用戶體驗共鳴。



          3. 以組件化設計思維展開設計探索


          有了明確的目標后,根據目標制定相應的方向策略,也便于我們在后續的設計工作中尋找發力點。和業務溝通后,明確整體方案的設計基調聚焦在“擴展性”“統一性”“邏輯性”“個性”四個方向上:

          擴展性——組件化視覺表達,能夠隨著滴滴多場景、多業務需求的變化進行延展和擴充;

          統一性——各業務信息歸類統一、簡化;

          邏輯性——信息層級清晰,增強主焦點認知,次要信息弱化;

          個性——設計個性化表達



          3.1 以組件化思維進行框架探索

          在方案構思階段,我們是以組件化設計的思維方式先去全面的思考并分析問題,再進行拆解分類,最后歸納重組。


          ● 全面多維度分析問題

          框架層:針對快、專、豪的確認呼叫表單的關鍵場景進行框架分析


          因為業務不同,場景不同,確認呼叫這個流程觸點在各業務中是具有共性和差異性的。我們重新梳理了確認呼叫頁表單各業務的功能點(如下圖),可見各業務表單雖有一致模塊,但信息內容十分繁雜,層級區分無規律可循;操作區位置不統一,樣式各異;框架的兼容性及擴展性不高。


          表現層:在視覺表現層面上,也暴露了很多問題,如:不同業務的車型選擇分別有各自的展示方式;價格區選中項的感知較弱且各業務的樣式不統一;價格小數點展示位數不一致等等。


          新增業務特性訴求:新的框架還需滿足業務特性的訴求(如下圖)。


          ● 拆解并簡化

          如何讓新的框架既能滿足越來越多的業務類型,保證體驗的統一,又能體現出業務特性,平衡取舍促進產品更新迭代呢?

          我們回歸到本質,從以下四個方面對框架進行重新構思:

          刪除——去掉無用的功能點

          組織——根據類別將這些功能點分解后重新劃分成組

          隱藏——突出主焦點的認知并隱藏次要信息

          抽取——抽取共性,對比差異性

          綜上,即對框架進行簡化,保證框架可靈活適配具有業務共性與特性的組件。 



          ● 重組

          簡化后的框架幾乎可以覆蓋所有必要功能點,有很強的適應能力和擴充能力,可以輕松應對未來多元化的出行服務及場景。


          在共性中尋找差異性:全局操作、車型與價格、發單按鈕是業務共性部分,除車型/價格區和發單按鈕外,其余均可顯示或隱藏,可根據業務特點靈活配置。 

          在差異中尋找共性:車型與價格區所包含的服務選擇與附屬操作是業務差異部分,快車需要在一個卡片中呈現三個車型比價、需要有附屬操作,專豪則需要強調車型圖片的露出和服務配置。我們要找一個平衡去把這些差異點串聯起來,確保用戶擁有同樣的感受,不僅是交互方式、動效流轉,也需要關注同一層級信息的視覺表達。



          3.2從框架層到表現層——從整體到細節的設計

          ● 視覺嘗試探索

          在交互框架明確后,便進入視覺設計階段。平臺設計師基于統一的的框架進行視覺風格探索,兼顧擴展性和邏輯性,同時不能忽視業務特性,從而迸發更加出彩的設計想法。設計師是界面的規劃師,也是品質的把控者,大到頁面布局、組件的組合方式、顏色定義,小到按鈕在空間布局上的占比是否合理都要面面俱到。在這個過程中,不斷打磨微調,進一步細化并且有針對性的進行動效設計,以呈現更完美的方案。


           組件化設計的細節打磨

          在方案確定的同時,將模塊再次拆分成組件,組件包含不同類型、不同狀態的基本元件,進行深入打磨,從而實現與設計目標的高度吻合。


          ● 根據組件構建頁面

          表單運用了組件化設計方法,建立了可承載業務共性與特性的框架。通過設計評審敲定最終方案后,提煉規范,設定組件標準,提取組合用法以覆蓋各業務場景。由于業務線設計師更了解業務的需求根源及業務流程,所以由其枚舉場景并輸出業務遍歷圖。

          平臺與業務共建的過程,可以更好的調動業務線設計師的積極性和參與度,也能從業務的角度驗證組件的擴展能力;“共建”也能更快速的將組件規范推動落地,實現組件的復用、協調與升級,是快速搭建頁面、促進產品快速迭代的重要因素。



          4. 項目反思

          表單在 2017年10月19日 隨乘客端 V5.1.16 發布,我們通過數據分析來驗證表單優化的合理性。(以ios為例,分析上線一周后10月25日-10月31日的發單率和發單時長數據) 



          4.1 體驗量化

          - 新表單較老表單,發單量增加,發單率提升14.83%;

          - 新表單較老表單的平均發單時間降低了2%

          數據分析表明,表單的設計優化是成功的,是設計師運用組件化思維在自驅項目中的每一個環節發揮高價值的體現。


          4.2 快速落地

          “共建”和“組件化”是促成表單項目在短時間內達成落地目標的關鍵因素,平臺與業務共建的工作方法也擴展運用到了更多項目中,是平臺與業務之間迅速確立方案、搭建設計規范、推動體驗優化和迭代的最高效路徑。


          4.3 設計研發一體化

          不僅如此,表單優化項目取得成功,離不開“組件化設計思維”在設計全流程上的應用。我們堅信,滴滴將在組件化道路上繼續前行,然而這條路任重而道遠。就現狀而言,我們的兩個組件庫——設計庫和開發庫仍需要分別維護,且設計和開發在溝通時成本較高。這使得我們需要創建一個能夠同時面向設計師和開發人員的共享組件庫,實現設計和研發一體化,讓設計師面向開發,讓開發貼近設計,減少設計及開發人員的額外工作量。我們設想,在設計和研發一體化的生態系統下,不論設計師或開發人員,通過搜索名稱就可以從共享組件庫中調取相應的組件進行設計,這些組件都有一對一的設計和開發數據,這會讓工作變得十分高效。

          在滴滴的未來,設計研發一體化是可以將代碼實時渲染到設計軟件中審閱設計的生態系統,且并不遙遠。


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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          如何輸出清晰有效的設計方案

          純純

          本文從What/How兩個部分循序漸進地闡述如何輸出清晰有效的設計方案,希望給大家一些建立系統性設計思路的啟發,幫助大家更好地輸出設計方案,為決策設計方案提供更有力的參考。





           WHAT: 什么是清晰有效的設計方案


          首先我們需要對清晰有效有一個整體的認知。所謂清晰,從字面上理解是指看得很清楚、明朗,設計層面來說就是方案能做到方向明確,方案明了。而有效字面上指的是有效果,有效力,從設計層面來說就是輸出的方案可以解決存在的問題,能達到設定的目標以及可以切實落地。


          清晰和有效的考量維度是不一樣的:清晰更多是針對設計這一環節,在于不同方向/方案的差異度和側重點;而有效則更多需要聯合設計上下游(用戶/產品/開發)。對于優秀的設計方案來說兩者相輔相成,缺一不可。


          接下來我們來詳細拆解什么是清晰和有效。




          1.清晰 - 方向明確,方案明了

          ——————————


          很多設計師對方案輸出的數量有個認知誤區,認為設計方案越多越好,可以給老板、合作方更多選擇,往往不假思索地用大量的時間輸出所有可能的方案,并拿出來讓別人評審,認為把所有的可能性列出來就不會錯,這正是對方案清晰性缺乏認知的表現。


          在設計最初期,不要著急動手輸出界面,先結合目標(近期目標和遠期目標)綜合考量,系統性地思考有哪些途徑達到目標,確保所有實現手段的方式都有考慮到,并且可以整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸,才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。前期規劃思考的深度決定了方案的廣度,只有清晰的思考方案才會創造無限的可能。



           用案例來讓大家對清晰這個定義有更具象的認知:


          相冊小程序Logo這個需求的目標是需要突出相冊元素,并強化品牌識別度。


          這是設計師輸出的Logo提案初稿,雖然輸出了28個方案之多,但沒有設計思路的規劃,想到哪就畫到哪,很多方案是重復的,還有一些方案在設計初期就應該Pass,設計的整個細致度也不夠充分。



          于是設計師對設計方向重新進行規劃整合,按照輸出形式重新規劃了分類。



          按照分類篩選出四個可以繼續優化的方案。并且拿著四個不同方向的方案去匯報。最終確定D方案。



          我們重新回顧一下這個需求,28個方案 VS 4個方案,設計師需要的不是盡可能輸出多方案的能力,方案越多可能表示你在錯誤的道路上越走越遠,需要的是通過前期系統的思考能一次把方案做對的能力。



          2. 有效 - 解決存在的問題、能達到設定的目標、可以落地的方案

          ——————————


          很多設計師拿到產品需求會立即動手,認為滿足了產品這個角色提的需求便是好的設計輸出,或者把方案出的天花亂墜,當產品或者其他角色提出不同意見就會覺得他們不懂什么是好的設計。這些現象大多是因為設計師在項目前期沒有正確思考和評估這個需求本身需要解決什么問題、方案能否達到團隊共同設定的目標,以及方案是否能平穩落地這三個維度。




          解決存在的問題—從問題出發


          我們在實際輸出方案的時候,不能從產品經理的需求文檔開始,而是要把考量維度更前置,從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋,內部團隊的聲音,但需要注意的是用戶的反饋不一定是真正的問題,需要做到篩選和甄別。比如新發布一個版本可能會碰到的一個情況是很多用戶打一星反饋說界面太難看太丑,這種屬于用戶感受,我們可以再深挖一下用戶覺得丑的原因,是不是改變了太多用戶習慣,但又沒有給用戶真的帶來更好的體驗和更多的收益。



          能達到設定的目標—從目標啟動


          問題還需要結合目標一起考慮,解決問題的思路并不完全等同于目標,目標是大家一起制定的未來產品的發展方向。比如我們新發布的版本里面新加了一個Tab改變了用戶習慣,大批用戶投訴,但如果這個新Tab是符合我們目標的,我們不能為了短期解決用戶投訴把這個Tab下掉,應該繼續觀察用戶在這個使用過程中碰到了什么問題,解決實際操作中碰到的問題。


          用案例來讓大家對問題和目標有更具象的認知:


          我們需要優化QQ空間的為空界面,首先我們梳理下現網存在的問題,風格整體比較老舊,很多圖形表意不明確,新出模塊就會有新風格,所以存在很多不統一的地方,空間整個業務有一百多個為空界面,導致開發也不清楚到底應該怎么用,用什么,所以很長一段時間是處于亂用的狀態。




          接著我們梳理了這次優化的目標:


          1 界面統一,用戶能對表意感知明確(解決現網問題)

          2 強化QQ的品牌

          3 做成基礎組件,保證復用性

          4 低成本開發


          確定了優化目標以后我們沒有馬上急于嘗試風格,而是先遍歷了所有為空異常頁,整合了所有場景最后梳理出八種情況,這八種情況可以覆蓋所有的為空場景,梳理整合場景是目標1、3、4能實現的前提。



          然后我們基于這八個場景來輸出設計風格,要低成本開發,所以這里沒有考慮加動畫,用企鵝剪影結合具體的場景來表意,不僅強化了品牌,也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規范,Push給對接的開發同學方便調用。



          在輸出方案過程中,始終都要緊緊貼合問題和目標,避免無效設計。



          能落地的方案—技術可以實現


          在輸出設計方案的時候,設計師需要考慮到開發成本是什么,需要消耗多少資源去實現這個需求,最低成本達到目標的路徑是什么。如果有些方案開發成本很大卻收益價值卻很小,我們就需要斟酌它是否仍有執行的必要。避免一味的追求設計效果不去對齊成本、人力,最后也只會是設計的自嗨。


          用案例來讓大家對清晰這個定義有更具象的認知:


          產品提了好友生日推送禮物的需求,目標是想用生日這一比較溫情的場景去設計專門的祝福頁,用來提升寫操作和大盤活躍。我們需要設計送給用戶的禮物卡片,從實現手段的難易規劃了三個方向:


          A 手勢交互但開發難度大: 3D手勢交互動畫

          B 趣味動圖且開發成本適中:局部小動畫

          C 靜態但開發成本低:全靜態視覺,復用已有開發流程



          最后團隊對齊了人力成本,決定采用方案C,把設計精力放在本身卡片的表現上。



          HOW: 如何輸出清晰有效的設計方案


          那如何才能輸出清晰有效的設計方案呢?設計方案歸根結底是思維方式的具體體現,輸出清晰有效的設計方案最核心的點在于體系化的思考方式,我總結了一下幾點:




          1 拓寬邊界

          ——————————

          拓寬邊界需要設計師站在更高的視角和有更廣的視野,把設計從表現和執行抽離往前后延展,在整個設計過程中往前去挖掘需求和規劃產品結構,往后做到把控和沉淀,能站在上下游各維度去Review整個項目,只有站在更全局的視角審視,才能跳出片面設計的維度。




          2 轉換視角

          ——————————

          從不同的視角看待問題,學會拆解問題和解決問題,從產品/開發不同的角度來全盤看整個產品,分析這個需求的投入產出比是不是足夠,是不是能達到目標(包括設計目標和產品目標)。設計、產品、開發從來都不是對立的,都是不同角色為了整個產品發力。


          舉個例子,產品同學覺得輸出的方案不好看,是在用感性表達,我們可以嘗試繼續拆解不好看背后的原因,比如是不是核心內容不夠突出、擔心按鈕轉化率等,一開始就抱著產品不懂設計這種想法是沒有辦法解決問題的。


          還有一個就是用戶同理心,很多時候我們不能只站在設計師和產品的角度看待用戶反饋的問題,比如新功能內部團隊覺得很厲害,但實際門檻太高,用戶根本不知道怎么操作,而我們長期體驗這個產品反而忽略了產品的易用性。



          3 結構思維

          ——————————

          我們在啟動項目的時候,不要單點去看要在某個頁面要做什么改動,而是從問題入手,和產品同學對齊好目標,結合設計理念,最后找到發力點在哪里,循序漸進,這樣很大程度上能避免項目的反復,對設計流程的準確把控也是輸出優秀設計方案的基礎。


          舉一個日常生活的例子幫助大家理解,比如我的問題是長得丑,我的目標是要變得更年輕漂亮,我的理念就是改善體型和優化五官,最后找到具體的發力點比如晚上不吃晚飯,去美容院打美容針、學會怎么化妝等。




          4 認知創新

          ——————————

          有些新設計師對設計創新的認知還停留在是去做一些創造世界、改變世界的事情,認為創新就是把原項目進行翻天覆地的改變,初入職場會覺得負責的業務和項目都很小,沒有什么意思,其實創新的維度有很多,包括設計工作流程的優化、還有從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細節給用戶創造驚喜。擺正心態才能做對事做好事。



          5 及時復盤

          ——————————

          完成項目以后需要不斷的總結方法,遇到的問題,除了技法層面的提升,更重要的還包括思考層面的提升。學會去總結之前踩過的坑,避免重復性的問題,比如你的輸出一直存在層級不清晰的問題,那么你需要關注后續輸出的界面里大模塊之間以及元素之間的層次是否還存在這個問題。可以犯錯誤,但是盡量避免總是犯同樣的錯誤,這樣才能加速成長的腳步。



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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          讓動畫生動的技巧

          純純

          前言

          前人早已總結了讓動畫生動的技巧,早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則,該法則也是受用至今。法則雖是針對傳統動畫而制定,但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。


          目錄

          1)動畫原則介紹

          2)結合案例應用原則

          3)流程方法論沉淀

          4)結語








          01: 擠壓與伸展

          擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調物體的質感、重量、速度。擠壓和拉伸會給予物體運動時具備質量感和體積感的錯覺。例如當一個皮球正在進行下落運動,在運動過程中讓皮球體積產生一定拉伸來表現它的速度感,皮球落地后則因力的作用產生擠壓變形。






          技巧建議

          擠壓與伸展的幅度影響著物體的質感、重量。設計師們可根據物體的質感去決定擠壓伸展的幅度。動畫雖存在夸張性,但對于物體擠壓拉伸的體積盡可能保持視覺統一,避免較大的體積誤差導致運動的突兀。











          02: 預期動作

          預期動作可告知觀者物體運動即將發生,增強觀者的場景代入感,使運動更加生動真實。如果我們去除前期的預備過程物體所呈現的運動感知像是突然被前方磁鐵所吸引。






          技巧建議

          預期動作可對觀者視線進行引導,設計師可以根據預期動作所引導的方向來銜接鏡頭/場景的轉場。反之預期動作也可以用來欺騙觀眾,當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。








          03: 演出方式

          每個角色/運動元素在運動過程中都會流露出獨特的態度和氣質。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節奏以及舞臺的編排技巧,傳遞貼合角色/元素氣質的動態感知。








          04: 持續動作與關鍵動作

          在現今動畫工作流程中,考慮到流程效率及技巧利弊,我們可以使用兩者相互結合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式(類似AE)。在動畫設計前進行基本運動的關鍵動作提煉,再進行細化,一層層的遞進。底層的關鍵運動越完善,在后續添加細節時才不會耗費大量時間調整。而對于持續動作(逐幀動畫)的技巧,我們可以利用它處理一些復雜效果例如(涉及到運動空間的變化、形狀上的靈動變化等)。






          1)持續動作(Frame by Frame)

          逐幀動畫。

          優點:自由且流暢的動態。

          缺點:難以把控時間長短、體積大小。


          2)關鍵動作(Key Frame)

          關鍵幀動畫。

          優點:清晰、可靠、規范。

          缺點:修改成本略高。









          05: 跟隨與重疊動作

          跟隨動作指的是元素運動結束后不會立刻停止,會因為質量、慣性等因素,元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發生,主體與附屬部分的運動會因質感、外力等因素產生不同的速率。






          技巧建議

          1)表達運動的力量、速度感

          當一個人跳躍的時候,自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感,利用好跟隨與重疊動作,可以更好地表現角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候,跟隨與重疊的物體運動幅度大,反之則運動幅度小。









          06: 緩動

          真實世界的運動遵循著緩動運動的規律,而并非勻速運動。根據物體運動情況、動態質感去編排元素合適的運動速率。關于運動的速率編排相關內容,可以看看過往的文章-《動效的質感》。








          07: 弧形運動

          仔細觀察可發現自然界中的運動多為弧形運動的組合,而勻速運動只存在于機械運動中。






          技巧建議

          1) 弧形運動路徑

          角色動畫:

          在人物運動過程中使用弧形運動增添角色動畫表現力。比如當人物抬頭或轉頭時,通過弧度的變化映射人物的情感,是充滿好奇心的還是沮喪的。


          交互動效:

          在交互動效中,弧形運動路徑會給予觀者運動表現力較年輕活潑的感知隱喻。設計師可根據品牌調性及產品屬性去選擇運動路徑類型。









          08: 附屬動作

          當主體在運動時,設計師可通過附屬物運動來輔助表達主體運動氣質。比如人物敲門時,捏緊拳頭的敲(代表生氣)與翹起蘭花指敲的(代表精致)區別。








          09: 時間控制

          在上篇文章其實我們有提到影響動效質感的原因之一就是時間,控制好物體的運動時間也是表現良好動畫節奏感的關鍵。








          技巧建議

          1) 時間偏差(角色動畫側)

          使用「時間偏差」的技巧,可以讓你的動畫更加生動。因為受力、質感等因素影響,主體運動時附屬部分的運動不會同時發生。比如當人物正在打哈欠時,首先是從嘴巴發力,再擴散至五官眉毛。






          2) 時間偏差(體驗動效側)

          為保持動效的連續性以及營造自然流暢的交互體驗,適當的使用時間偏差,可避免動效元素變化過程出現空檔期,提升信息傳遞效率減少認知負荷。








          10: 夸張

          通過夸張手法增添動畫表現張力,加強運動元素的吸引力令動畫更有代入感和戲劇性。








          11: 多維表現

          動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果,提升畫面表現力。








          12: 吸引力

          一部好的動畫作品一定會有令人吸引的人事物,比如動態氣質或視覺風格等它們都能很好的吸引觀眾。除此之外,如何講好一個故事,通過趣味幽默的故事表達手法也可以增添動畫的吸引力。








          原則歸類

          通過對十二大基本原則的學習,我將技巧分為以下兩大類:設計技巧和表演技巧。

          設計技巧:動畫設計的技法,增添動畫細節令動畫表現更生動自然。

          表演技巧:舞臺表演的技巧,提升動畫舞臺全局的表現力。












          結合案例

          接下來我們結合上述所提及的動畫原則,根據實際案例進行結合應用。一起來探討下當接到動效設計需求時,我們需要思考哪些點?才能使我們的動效表現力更上一層樓。








          腳本背景

          假設在項目中我們需要對設計元素(豬豬存錢罐)添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態/動作表現會更貼合元素性格。考慮到豬豬的可愛屬性,采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。








          動態分析

          將腳本確定后,我們在腦海里已經有大概的運動畫面。但在進入動效設計前,還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。








          應用技巧

          在添加動畫細節前,我分享下在項目中經常用到的兩個技巧。


          1) 實現擠壓與伸展的多種形式

          實現擠壓與伸展的方式有很多種,最常見的是直接改變物體的縮放比例或形狀路徑來實現。但在設計項目中我們往往會遇到非矢量的設計元素,利用xxx可實現圖層的彎曲扭曲等變形效果。






          2) 考慮運動物體質感

          質地堅硬的物體受外力的影響較小,質地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作(抖動)。在處理這類抖動的效果除了使用常規的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節令物體運動更為生動自然。








          差異對比

          當我們去除這些動畫原則后,再去作對比明顯的感知差異就出來了。








          經驗沉淀

          根據過往項目經驗,我總結了動效/動畫設計的流程思路。從業務目標的分析到動畫腳本的確定,層層遞進。前期的目標和框架確定后,之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧,將自身動畫的表現力提升一個檔次。








          結語

          隨著動畫/動效的落地方式愈來愈完善,像Lottie、svga等新型的動畫落地形式所帶來的高品質畫面呈現。設計師們不能滿足于動畫僅僅只是動那么簡單,如何去塑造生動的動畫形象還有不少我們需要考慮的細節。恰好前人總結了相應的原則技巧,幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外,近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節。其中部分技巧并不局限于角色動畫的設計中,下期文章我將分享關于角色動畫的知識沉淀內容。



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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司









          日歷

          鏈接

          個人資料

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

          存檔

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