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

          首頁

          智慧社區平臺訂單支付及退款結算規則設計

          資深UI設計者

          編輯導語:如今隨著科技的不斷發展,人們日常的生活也開始變得智能化,智慧生態逐漸進入到各種領域,從買菜到小區物業等等,如今很多都變得更加智能方便;本文作者分享了關于智慧社區平臺訂單支付及退款結算規則設計,我們一起來了解一下。


          筆者現就職于一家房產集團旗下科技公司,整體負責公司各產品線;公司主營智慧社區項目,在當地小有規模,智慧社區平臺包括物業管理系統、社區電商平臺、社區IOT系統、居家養老系統、社區政務系統、二手房交易平臺等6大系統。

          各系統后臺獨立,為了方便小區業主,讓用戶在同一個APP上能享受物業服務繳費、線上購物、掃碼充電、會員繳費等等功能,需在用戶端設計不同的支付結算方式。

          本文主要分享社區電商系統、物業管理系統、社區IOT系統的訂單支付及退款結算規則設計。

          一、平臺支付及結算業務需求分析

          1. 物業管理系統支付結算需求

          物業系統為SaaS模式,B/S架構,使用平臺公有云服務器,單獨數據庫分區,使用角色為平臺合作的付費物業企業,支付結算需求包括:

          • 物業費、車位管理費、電梯費等費項需根據后臺賬單生成支付訂單,且用戶支付后直接結算至物業企業帳戶,不做分成;
          • 代收水電費需對接遠程水電表設備,用戶可在線預充費用,并隨時查看余額,用戶充值金額結算至物業企業帳戶,并定期結算給當地水、電主管部門;
          • 業主報修工單支付費用需按照材料費、工時費區分賬單,直接結算至物業企業帳戶,且平臺收取3%的服務費;
          • 物業結算金額需滿足“T+1”到賬,即次日(工作日)到賬;
          • 所有訂單支持后臺手動操作退款。

          2. 社區電商平臺支付結算需求

          社區電商模式以整合社區周邊商家為社區居民提供便捷的O2O服務為主,入駐商家包括社區周邊零售商和服務商。

          零售服務場景主要是方便社區居民在線選購社區周邊商品,提供線上下單,線下送貨上門服務,基于之前的業務拓展,支持平臺配送、快遞物流、到店自提、商家送貨上門4種配送方式,其中平臺配送是整合物業服務人員進行社區周邊的送貨上門服務。

          綜合各種配送方式及業務場景,支付結算需滿足以下需求:

          • 訂單支付金額需”T+7″直接結算至商家帳戶;
          • 支持單筆訂單直接分潤,分潤結算方包括平臺分潤、代理商分潤、物業分潤、商家結算;
          • 部分商品支持7天無理由退貨;
          • 已完成訂單支持單個商品退貨退款;
          • 平臺配送費支付到平臺帳戶,并按月結算給配送人員;
          • 快遞物流、商家送貨上門的訂單配送費直接結算到商家;
          • 到店自提不收取配送費;

          預約服務場景主要滿足社區居民在線預購社區周邊服務,支付結算需滿足以下需求:

          • 訂單支付金額需在服務完成后“T+1”直接結算至商家帳戶;
          • 支持單筆訂單直接分潤,分潤結算方包括平臺分潤、代理商分潤、物業分潤、商家結算;
          • 用戶在服務未開始前申請退款,可全額退款,上門后退款需扣除上門服務費;
          • 服務完成后不支持退款;
          • 服務單到期未預約服務時,自動全額退款給用戶;

          3. 社區IOT系統支付結算需求

          社區IOT系統對接設備包括:社區一卡通、門禁、樓宇對講、停車道閘、電動車充電樁等等;涉及到支付業務的有社區一卡通、電動車充電樁。

          社區一卡通支付及結算需滿足以下需求:

          • 一卡通需同時滿足門禁卡、儲值卡功能;
          • 可應用的支付場景包括:繳物業費、水電費、維修費等,社區內及周邊購物消費刷卡,線上支付扣款;

          電動車充電樁支付及結算需求:

          • 按照充電時間預付費,付費金額結算至平臺;
          • 不滿預訂時間結束充電時,自動計算退款金額,原路退回;
          • 安裝獨立電表,電費由平臺定時結算給物業;

          4. 積分、優惠券、付費會員支付及結算需求

          包括以下需求:

          • 以上各個支付場景,用戶都可使用積分抵現,抵現金額由平臺讓利給商家及用戶,隨訂單支付金額一同由平臺結算給商家,實時核銷;
          • 優惠券分為平臺優惠券及店鋪優惠券,統一由平臺審核發放,可用于支付抵現;
          • 平臺優惠券抵現金額由平臺補貼,隨訂單支付金額一同結算給商家,實時核銷;
          • 店鋪優惠券抵現金額,直接由店鋪讓利優惠給用戶,實時核銷;
          • 用戶可購買付費會員,享受會員特權;

          二、結算規則設計及注意事項

          由以上需求內容可以看出,各系統的結算場景、結算流程,包括結算對象都存在不一致,但C端支付入口在同一應用端,這就需要在后臺針對不同的業務流程設置不同的結算規則。

          筆者對標了國內多個提供聚合支付及分賬服務的平臺,綜合考慮對接成本及費率,最終選擇了某平臺作為對接方。

          結算規則設計及注意事項如下:

          1. 物業繳費

          • 支付方式:線上-支付寶、線上-微信、線下-支付寶、線下-微信、現金、銀行卡刷卡、一卡通;
          • 分賬對象:物業企業(第三方支付平臺扣除支付費率);
          • 分賬方式:直接分賬;
          • 賬單生成:根據費項設置的規則在物業管理系統后臺生成賬單后,同步到業主APP;

          • 到賬周期:T+1;
          • 退款方式:由物業系統后臺手動操作單賬單退款;

          注意事項:為了保證客戶資金安全及平臺免責,由第三方支付機構與企業直接簽約,且提供單獨的對賬后臺,便于企業查賬,線下支付則直接結算至企業銀行卡賬號,系統只做賬單記錄。

          2. 電商購物(包括使用積分、優惠券結算)

          • 支付方式:線上-支付寶、線上-微信;
          • 分賬對象:平臺、代理商、物業、商家共4方分賬;
          • 分賬方式:資管平臺分賬;
          • 到賬周期:訂單完成日起T+7;
          • 賬單結算及退款規則:平臺配送方式包括快遞物流、平臺快送(類似美團騎士)、到店自提、商家送貨上門,每種方式用戶需支付的配送費不等,需分別計算,且需考慮用戶使用積分、優惠券抵現及退款時是否選擇全部商品退款等結算情景,總結分析訂單狀態及配送方式不同,共包含以下6種用例;

          Case1:訂單狀態=待發貨,配送方式=快遞物流/商家送貨上門

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為快遞物流,物流費5元,使用平臺優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為33.25元(33.25=(30+5)*(1-0.05));平臺結算金額為-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),負值,平臺需結算給商家。發生退款后,用戶可收到的退款總額為24元,+積分+優惠券;商家退款總額為33.25元;平臺退款總額為-9.25元,負值,商家需退款給平臺。

          Case2:訂單狀態=待發貨,配送方式=平臺快送

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為小慧快送,物流費5元,使用店鋪優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為19元(19=(30-10)*(1-0.05));平臺收到的結算金額為5元(5=5-1+(20*0.05))元,正數,用戶結算給平臺。發生退款后,用戶可收到的退款總額為24元,+積分+優惠券;商家退款總額為19元;平臺退款總額為5元,正數,平臺退款給用戶。

          Case3:訂單狀態=已完成,配送方式=快遞物流/商家送貨上門,退款商品=全部訂單商品

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為快遞物流,物流費5元,使用平臺優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為33.25元(33.25=(30+5)*(1-0.05));平臺結算金額為-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),負值,平臺需結算給商家。發生退款后,用戶可收到的退款總額為19元(19=24-5),+積分+優惠券;商家退款總額為28.5元(28.5=33.25-5*0.95);平臺退款總額為-9.5元(-9.5=-9.25-5*0.05),負值,商家需退款給平臺。

          Case4:訂單狀態=已完成,配送方式=平臺快送,退款商品=全部訂單商品

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為小慧快送,物流費5元,使用店鋪優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為19元(19=(30-10)*(1-0.05));平臺收到的結算金額為5元(5=5-1+(20*0.05)),正數,用戶結算給平臺。發生退款后,用戶可收到的退款總額為19元(19=24-5),+積分+優惠券;商家退款總額為19元;平臺需退款總額為0元(0=5-5)元,為零,平臺無需退款。

          Case5:訂單狀態=已完成,配送方式=快遞物流/商家送貨上門,退款商品=部分商品,部分商品總額/訂單商品總額=α(保留三位小數)

          計算規則:

          示例:

          設置店鋪抽成比例5%;
          用戶甲下單商品總額為30元,配送方式為快遞物流,物流費5元,使用平臺優惠券抵扣10元,積分抵扣1元,則下單后,用戶需支付24元(24=30+5-10-1);商家收到結算總額為33.25元(33.25=(30+5)*(1-0.05));平臺結算金額為-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),負值,平臺需結算給商家。用戶申請退款商品總額為20元,α=20/30=0.667,則用戶可收到的退款總額為12.66元(12.66=20-1*0.667-10*0.667),退回積分667;商家退款總額為19元(19=20*0.95);平臺退款總額為-6.34元(-10*0.667-1*0.667+20*0.05),負值,商家需退款給平臺。

          Case6:條件:訂單狀態=已完成,配送方式=平臺快送,退款商品=部分商品,部分商品總額/訂單商品總額=α(保留三位小數)

          計算規則:

          示例:

          設置店鋪抽成比例5%;用戶甲下單商品總額為30元,配送方式為小慧快送,物流費5元,使用店鋪優惠券抵扣10元,積分抵扣1元,則下單后:用戶需支付24元(24=30+5-10-1);商家收到結算總額為19元(19=(30-10)*(1-0.05));平臺收到的結算金額為5元(5=5-1+(20*0.05)),正數,用戶結算給平臺。用戶申請退款商品總額為20元,α=20/30=0.667,則用戶可收到的退款總額為12.66元(12.66=20-1*0.667-10*0.667),退回積分667;商家退款總額為12.66元(12.66=(20-10*0.667)*0.95);平臺需退款總額為0元(0=-1*0.667+(20-10*0.667)*0.05),為零,平臺無需退款。

          3. 購買服務

          • 支付方式:線上-支付寶、線上-微信;
          • 分賬對象:平臺、代理商、物業、商家共4方分賬;
          • 分賬方式:資管平臺分賬;
          • 到賬周期:服務完成日起T+1;
          • 賬單結算及退款規則:用戶下單成功后,支付金額預存在第三方支付機構的資管平臺,服務商家按照訂單完成服務后,資金由資管平臺T+1結算至商家帳戶。服務訂單完成前可申請退款,完成后不支持退款。

          4. 一卡通支付

          • 支付方式:線下刷卡支付;
          • 分賬對像:物業或商家;
          • 分賬方式:線下定期結算;
          • 注意事項:一卡通需在商務局完成備案,并且是定向使用金額,接受商務局監管。


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

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


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

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

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



          包容格式:如何應對用戶的多元輸入需求?

          資深UI設計者

          What 是什么

          簡介 :包容格式是一種用于文本輸入的模式,使用這種模式后,可以讓用戶輸入文本內容時不用關心格式或語法,從而輕松達到預期目標。


          例子 :Google 搜索輸入框



          Why 為什么

          用戶操作界面時只是想完成某件事或某個操作,而不是考慮「正確」的格式或復雜的UI。計算機擅長弄清楚如何處理不同類型的輸入。如果計算機無法正確處理多種類型或格式的文本內容,那么用戶在輸入內容時就會有明顯的受阻感。


          所以,讓用戶輸入所需的任何內容,然后讓計算機來處理結構或格式,才是一種比較理想的方法。這種模式可以極大地簡化界面,并使其更容易被用戶理解。

           相關資料:

          https://zhuanlan.zhihu.com/p/343497540



          When 什么時候使用

          用戶可能會輸入不同類型、格式的文本內容,而我們希望用戶可以不用太關心格式問題,同時希望界面保持簡潔。很多時候,用戶輸入的數據可能類型、格式不一(例如存在空格、連字符、縮寫或大寫等等),如果提供不同的輸入類型,那么界面就很可能不夠簡潔。這種模式可以很好地將數據類型有效處理。


          使用條件:

          • 輸入內容存在不同類型或格式;

          • 希望用戶輸入比較容易;

          • 希望界面簡潔;



          How 如何使用

          核心思想:將界面設計問題轉化為編程問題。


          我們需要考慮用戶可能輸入的文本類型:

          • 簡單的例子:只要求輸入一個只有格式不同日期或時間;

          • 復雜的例子:搜索某些關鍵詞,根據關鍵詞獲得不同的結果;


          由于業務場景不同,每個應用程序使用此模式的方式可能不同。只要確保軟件對各種輸入格式的響應與用戶期望的一致即可。因此建議與用戶進行真機測試。



          Example 案例

          案例 1:東方財富股票搜索框

          用戶需求:將特定股票添加到個人關注列表。


          東方財富的股票搜索框,用來幫助用戶快速找到目標股票。該搜索框就使用了「包容格式」這一模式。用戶既可以輸入股票代碼進行查詢,也可以輸入股票的名稱進行查詢。


          案例 2:Gumroad 信用卡輸入框

          用戶需求:輸入信用卡號


          很多產品都有輸入信用卡號的場景,用戶應該只要輸入16位數字,而不需要明確這 16 位數字的格式。輸入的內容中是否帶有空格對結果不應該有任何影響。

          gumroad 的信用卡號輸入框允許用戶隨意輸入他們的信用卡號。信用卡號字段接受空格作為分隔符(不包含空格也可以),然后這個輸入框會立即將輸入的卡號格式化。


          案例 3:macOS 日歷創建日程

          用戶需求:創建日程


          我們會有很多方式來表示日期,例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日歷中創建日程時,用戶可以輸入各種格式的日期,輸入框都會正常識別到該格式,并按照其日期創建日程。


          更多案例

          你可以在下方查看「包容格式」更多的案例:

          https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef


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

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



          文章來源:站酷   作者:Ant_Design

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

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



          掌握這20條用戶體驗設計原則,助力設計成長!

          seo達人


          用戶體驗設計需要考慮很多不同的因素,例如為用戶創造新體驗時需要考慮哪些內容?哪些規則能區分產品的好壞?文章整理了20條用戶體驗設計原則,希望通過這份簡潔易懂的合集能夠讓你對用戶體驗領域有一個初步的概覽和了解。

           

          1.以用戶為中心 

          這是最常被提及的用戶體驗設計基礎,當涉及到產品設計決策時,提醒我們要學會使用同理心,而不是僅憑個人的想法或意見。

          真正好的用戶體驗設計是為用戶量身打造的,用戶的意見、痛點、愿望、偏好和需求對產品來說至關重要,所以在項目初始階段需要投入大量的時間和精力去了解用戶。

          圖片

          用戶體驗研究重點是了解用戶,為接下來的產品設計做準備。以用戶為中心的設計理念是設計師迎合用戶的需求,區分了設計任何人都可以使用的產品和為目標用戶設計的產品。

          一款特定的產品需要面對不同的目標群體,前期研究中需要了解目標人群需要什么并在產品中反映出來,這是針對性很強的設計研究。

           

          2.了解信息架構

          可能很多人對信息架構的定義很模糊,這里舉個例子來具象說明一下信息架構的含義。

          例如在一款產品中,如果把所有內容都堆到一個列表或頁面中,可能我們將無法使用這款產品,所以我們看到大多數的App和網站都包含很多的導航和頁面結構,按照內容重要程度有序地來組織內容。

          信息體系結構的最終目標是幫助用戶理解他們在看什么,并幫助他們找到需要尋找的內容。

          圖片

          信息架構在制作線框圖或原型之前完成,因為它是產品的基礎,有助于設計師考慮什么功能是最重要的,哪些是用戶最需要的以及哪些次要內容可以隱藏起來等。

          這種結構與產品的導航設計密切相關,有助于將用戶引導到正確的位置。導航和信息架構都試圖讓用戶以最少的認知努力來完成操作。

          信息架構的設計不當會造成重大故障甚至可能危及整個產品。如果用戶在使用產品時找不到任何想要的內容,點擊任何元素都沒有反應,會給用戶帶來很糟糕的使用體驗。

           

          3.考慮使用場景

          沒有場景,任何設計都很難生效。設計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。

          圖片

          這條原則有助于設計師考慮還有哪些因素會影響用戶和產品,很多產品設計會為用戶提供一些有助于消除使用摩擦的操作提示。

          例如在設計表單時,會盡可能的添加輸入提示,最大程度地減少用戶出錯的機會。

           

          4.了解一致性及其重要性

          保持一致性是用戶體驗設計的關鍵原則。擁有一致設計的產品可以更快地被新用戶接受,因為用戶不需要再次學習如何操作,他們會回憶起之前的操作習慣并將其作為指導,這也解釋了為什么同類型的產品例如電商類App頁面設計的很相似。

          保持一致意味著在需要時可以重復使用某些UI組件,并在整個產品中保持一致的行為。例如當點擊或懸停在按鈕上面時,所以按鈕的狀態應該是一致的。

          圖片

          從邏輯上講,產品越大,這種一致性會變得越來越有挑戰性,這促使許多設計團隊創建自己的設計系統。一款產品的學習曲線越長越陡,放棄的用戶就會越多,在市場營銷中,這通常被稱為銷售漏斗中的漏洞。

           

          5.給予用戶適當的控制權

          這條原則意味著用戶希望能控制產品,無論是完成任務還是定制滿足他們需求的內容。

          在設計過程中一直試圖給用戶盡可能多的控制權,例如允許用戶撤消操作、更改設置、自定義UI外觀、創建快捷方式等。

          圖片

          需要注意的是,當提供太多選項或用戶太依賴于自己的選擇時,用戶可能會不知所措,造成所謂的選擇悖論。所以在設計時要了解用戶樂于掌控的余地,不能讓用戶感到使用壓力。

           

          6.把可用性放在首位

          在整體上看,建立高標準的可用性是為用戶做的最好的事情,有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作。

          圖片

          可用性的重要之處在于要理解可用性的靈活性和重要性。

           

          7.了解用戶測試

          結合可用性的概念,我們還要進行用戶測試,這是設計師對工作進行測試的方式,對新的產品來說至關重要。

          當設計思想和理念被轉化為有形的原型時,設計師要觀察真實的用戶是如何與之交互的,可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現。

          圖片

          測試通常分幾輪進行,團隊在向原型添加更多細節之前驗證每個步驟。隨著測試結果的出現,設計也隨之發生了變化。

          如果發生更改,將會進行新一輪的測試,通過這個過程,設計團隊可以改進他們的工作,直到達到可用性標準。

           

          8.少即是多

          在創造力和創造獨特事物的渴望中,很多設計師很容易無意中弄亂產品界面甚至產品本身。

          功能過多的產品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊,但也會給用戶帶來負面體驗,在設計時要學會克制并優先考慮真正關鍵的部分。

          另外手機端的屏幕空間非常小,創建一個有效的布局,想出巧妙的方法來隱藏次要元素并創建一個令人愉悅的界面需要付出很大的努力和創造力。

           

          9.視覺層次

          視覺層次是向用戶傳達產品中元素重要性的方式。良好的層次結構有助于用戶視線在界面上移動,并立即了解最重要的內容以及這些內容與其他部分的關系。

          視覺層次結構與布局設計緊密相連,幫助用戶消化所接觸到的信息。

          圖片

          創建層次結構從概念的草圖開始,一直持續到完成設計。例如發送按鈕通常會用綠色而是不紅色,而次要按鈕會顯示為灰色或與背景混合,并顯示“撤消”或“返回”。

           

          10.了解用戶的心智模型

          為用戶創建心智模型是嘗試使用同理心的一種方式,是幫助設計師從用戶的角度看待問題的工具。

          圖片

          做到準確就是直觀的產品,用戶不需要投入精力就可以使用它,而錯誤的思維模型會導致一些問題,例如界面混亂、高昂的交互成本。

          為了匹配用戶的心智模型,可以采用多種不同類型的研究方法,常見的方法包括卡片分類、決策樹、對用戶行為的密切觀察,或者使用大量的數據來建立關鍵用戶的心理模型。

           

          11.設計中的講故事

          講故事的方式更加直觀,利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設計中的視覺敘事是為了喚起用戶的情感,給用戶留下持久的印象。

          圖片

          想出一種可視化的方式來傳達復雜的內容具有挑戰性,但同時也是有益的,可以更好地接近用戶并將其作為提高產品可學習性的方法。

           

          12.不要直接跳到高保真原型上

          高保真原型是設計項目的最終目標,但是直接使用原型軟件不斷添加各種頁面細節是錯誤的操作。

          圖片

          避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下,一款產品無論具有多少的細節都有可能面臨不符合用戶使用的情況。

           

          13.可訪問性測試很重要

          不僅要檢查關鍵用戶是否可以流暢地使用產品,還應該檢查其他所有用戶例如少數群體等是否都能夠正常使用產品。

          圖片

          事實上,殘疾人和其他用戶一樣需要數字產品,但很多產品在設計時并沒有考慮到這些群體,但這也提供了一個機會,為所有用戶提供一個可以依賴的好產品。

           

          14.熟悉并在用戶體驗設計中使用

          我們知道為用戶提供一致的設計有助于克服學習曲線,同時為用戶提供熟悉的東西也有助于縮短學習曲線。

          例如,大多數用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕),這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

          圖片

          使用用戶已經熟悉的東西并不一定會讓產品的獨特性消失,有經驗的設計師會利用這種熟悉性來來創造一些獨特的設計,同時也是直觀的,不需要太多努力就可以使用。

          設計一個完全不依賴熟悉度的產品可能是具有風險的行為,因為它很容易讓那些不熟悉產品的用戶超負荷,形成巨大的學習曲線,增加用戶負擔。

           

          15.了解交付成果的力量

          可交付成果是可以在整個團隊中交付的內容,包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等,是一種有形和具體的表現。

          可交付成果是用戶體驗設計原則,可以幫助設計團隊和其他利益相關者理解和交流概念。

          圖片

          ▲ 用戶畫像可以捕捉理想用戶,并提供可以相關聯的真實面孔,是一種指導設計的工具。用戶旅程圖幫助設計師了解用戶完成任務需要的具體步驟,有助于確保這些步驟確實可以輕松執行,并且整個過程很流暢。

          這些交付成果服務于關鍵功能,設計師需要在整個項目中都依賴它們,不斷轉換為用戶可以與之交互的真實有形的設計。

           

          16.專業的原型設計工具

          用戶體驗設計的過程不是線性的,而是一個循環。無論創建什么樣的產品,都需要專業的原型工具,將基本框架放在一起,然后添加可能需要的所有細節。

          圖片

          從邏輯上講,設計團隊的具體需求會因團隊而異,但一些關鍵功能例如團隊協作、需求管理、交互設計和開發移交等,對于大多數團隊來說是必要的。

           

          17.精心管理產品需求

          一切都從收集需求開始,然后慢慢創建關鍵列表。雖然簡單地列出一個列表聽起來很容易,但隨著項目的進展,要保持列表的條理性確實是一個挑戰。

          圖片

          除了創建需求和檢查需求之外,還有一個問題就是調整需求,需要從設計、技術和業務各個方面來處理各種需求,還要確保這些需求之間沒有相互矛盾。

           

          18.了解移動和網頁產品之間的差異

          網頁端和移動端產品最明顯的區別是屏幕尺寸,這意味著所有的視覺層次結構和信息架構都將從Web到App發生變化。

          圖片

          移動端產品會有更多影響設計決策的因素,例如設備的操作系統、使用產品的環境等。了解移動端產品在導航設計、用戶流程等關鍵方面的差異是至關重要的用戶體驗設計原則。

           

          19.利用UX設計模式

          幾乎所有的產品都專注于設計模式,它們可靠、易于查找并通過減少設計時間來為項目增加實用性。

          圖片

          ▲ 當用戶在谷歌搜索中輸入的內容有問題時,谷歌會提供一個相關的搜索提示,輔助用戶進行精確地搜索,解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內容的問題。

           

          20.使用合適的工具才能有效

          擁有單一的內容來源可以為團隊帶來清晰性和高效性,如果線框和原型分散在多個渠道中,這種內容的集合就會變得很難達成。

          圖片

          通過合適高效的工具能夠避免產品在到達終點時遇到各種各樣的可用性問題,防止產品細節沒有表現出來或者被忽略。

           

          最后

          通過這份用戶體驗設計原則的合集希望能夠讓你對這個領域有一個大致的了解。

          沒有人知道用戶體驗設計在未來會引領我們走向哪里,不過我們可以確定,無論它帶給我們什么,肯定都會很有趣。

           

          內容參考:justinmind.com/ux-design/principles


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

          作者:Clippp

          轉載請注明:學UI網》掌握這20條用戶體驗設計原則,助力設計成長!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小

          助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

                                                                      微信圖片_20210513163802.png

           

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

           

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

          讓設計更有價值——設計流程指南

          seo達人


          隨著設計團隊規模擴大,人數快速增多,但每個人都帶著自己以往工作經驗和習慣,一些典型問題也相應顯現:上手就干、主觀設計、缺少方法、忽視跟進等等。所以我們撰寫了「UI標準設計流程」,希望能為UI設計師提供對于設計支撐思路的共識,讓設計更有價值。

           

          圖片

          從接到需求到上線后跟蹤,我們把流程拆分為五個節點:需求分析-交互設計-視覺設計-視覺規范-方案驗證。

          當然,在設計流程中我們只表達不同流程中的行為目的及標準,相關方法論我們會配套一份「設計師成長指南」,不久之后再與大家分享。

           

          1.需求分析

          我們在接到一個設計需求后,要做的第一步是進行分析并確定設計目標。

          我們需要:了解背景、用戶和競品,能準確理解產品定位和需求目標,評估需求的合理性和準確性,并提供相應策略;甚至洞見機會點,通過設計對業務產生正向價值。

          圖片

           

          背景分析

          目的:背景分析是為了讓我們在剛接觸產品的時候,去洞察表面背后的東西。通過背景分析,能幫助我們快速切入產品,并根據已有信息去制定準確并具有說服力的設計策略。

          行為:我們需要了解:產品的定位及價值是什么,它的現狀如何,是否有既往的數據沉淀或經驗總結。

           

          用戶分析

          目的:對UI設計師而言,用戶分析是為了讓我們更好地了解產品,并擁有對整個產品的宏觀思路。通過用戶分析,能為我們的視覺設計提供方向,并為我們做出決策提供實際落點。

          行為:我們通常需要了解:用戶畫像、用戶需求、用戶行為、用戶路徑等。

           

          競品分析

          目的:競品分析能夠讓我們獲得行業內的優秀經驗,減少我們的思維盲區,同時還為我們提供了一份可被量化的標準,使我們可以基于競品去反推現有產品。

          行為:UI設計師可以從競品定位、主要功能、迭代動向、產品結構、頁面布局、交互動效、視覺設計、優劣勢對比這幾個維度去進行競品分析。

           

          需求評估

          目的:在了解以上的通用信息后,我們要對需求進行評估,去決定采用哪種方式、制定什么樣的策略。

          行為:我們接到的需求,通??梢苑譃槿N:全新產品類、產品改版類、功能新增或優化類。

          對不同類型的需求,我們都可以用5個問題去評估:

          1. 是否可被證偽?
          2. 目標是否明確?
          3. 投產比如何?
          4. 是否有更優解法?
          5. 是否有可預見風險?

          基于以上問題,我們可以去協同交互、產品做相應調整和策略制定,甚至發現新的機會點并進行推動。

           

          目標對齊

          目的:設計為目標服務,所以我們要在設計開始前與需求方對齊目標,這也能為設計價值的佐證提供標準。

          行為:設計目標通常有3種,我們可以從中去對需求目標轉譯:提升數據型、解決問題型、體驗優化型、創新項目型。針對不同目標我們可以去制定不同的設計策略,并對策略的落地進行數據監測與分析,進行方案校正。

           

          2.交互設計

          在產品流程中,交互設計的作用在于,通過信息架構的組織去產出體驗流暢的界面原型。

          我們需要:充分理解整體流程與交互原型,基于設計原則去發現可優化的部分;同時能平衡產品、設計與開發的效益最大化,并驅動產品的體驗提升。

          圖片

           

          設計原則

          目的:設計原則能為我們提供一個行之有效的設計向導或提示。熟知各類設計原則,能使我們在設計支撐時,擁有更豐厚的專業度和更敏銳的洞察力。

          行為:我們需要去了解市面常見的Guildline如iOS、Material、UWP等,以及一些常用原則如菲茲定律、格式塔理論等等。

           

          流程梳理

          目的:流程的再梳理,可以幫助我們在視覺設計前,快速地理解和診斷流程邏輯。

          行為:在流程再梳理的過程中,我們需要注意以下4個問題:

          1. 功能是否完整?
          2. 鏈路是否流暢?
          3. 步驟是否冗余?
          4. 是否易于理解?

          基于以上問題,我們可以用自身的專業儲備去推動流程的優化。

           

          原型優化

          目的:交互原型是需求內容的外在表現,通過原型優化,可以最大程度地避免視覺評審后的設計返工。

          行為:在對交互原型優化的過程中,我們要重點注意以下4個問題:

          1. 架構是否符合目標
          2. 層級是否足夠精簡
          3. 信息是否傳達準確
          4. 狀態是否有所缺失

          在視覺設計時,我們基于以上四點可以去同步優化原型,并根據經驗去尋求體驗和成本的最佳平衡。

           

          3.視覺設計

          視覺設計是產品與用戶直接連接的媒介,優質而恰當的視覺設計,可以極大地提升產品吸引力。

          我們需要:基于分析確定視覺方向、定義設計語言,輸出完整且高質量的視覺頁面。

          圖片

           

          設計情緒板

          目的:設計情緒板可以為設計語言的構建提供可視化參考,也有助于我們前期快速與各方達成共識。

          行為:我們通?;诜治觯ゴ_定設計關鍵詞,并基于關鍵詞去衍生映射物、建立圖形情緒板,最終分析和確定設計方向。

           

          設計語言

          目的:設計語言是情緒板的具象表達,它將構建起用戶對產品的視覺感知。

          行為:在明確設計方向后,我們就要基于情緒版去定義設計語言,主要包括主視覺、色彩、字體、圖標、圖形、動效等。

           

          典型頁面

          目的:典型頁面是設計語言在場景中直觀體現,這有助于我們制定設計規范,并為其他頁面的設計提供參考。

          行為:我們通常需要設計首頁、頻道頁或其他具有示例作用的典型頁面,在設計的過程中我們還需要同步去規范間距、卡片、視覺變量、圖形應用等,以此為視覺規范夯實基礎。

           

          4.設計系統

          在設計典型頁面的同時,其背后其實已經對應了一套設計規范和組件,而我們基于此去整理并沉淀出設計系統,能極大地提升統一性和迭代效率。

          我們需要:制定完整、清晰的基礎規范,沉淀圖標庫、組件庫等,并持續優化和更新,形成可持續沿用的產品設計系統。

          圖片

           

          基礎規范

          目的:基礎規范是設計語言的沉淀,也是視覺變量的基本粒子。它可以保證頁面的基本統一,同時我們可以基于不同業務快速地拓展其他主題。

          行為:在我司,一份基礎規范的構成包括:色彩、字體、間距、布局、斷點、層級、圓角、透明度、陰影。

           

          圖標庫

          目的:圖標規范可以幫助其他成員快速、準確地進行圖標拓展,而沉淀的圖標庫也可以極大地提升產出效率。

          行為:基于具體需要,我們可以設定多套圖標風格,規范其柵格、筆畫、圓角等,并將已有的圖標資產進行沉淀。同時我們也會去規范一些常見圖形并沉淀,如空態插畫、懸浮入口、徽章、商品等。

           

          組件庫 

          目的:組件庫是對常用控件進行設計規范、開發、封裝的可被復用的集合,組件分而治之,可被自由組合,能保證設計品質、統一用戶體驗、提升產研效率。

          行為:在我司,一套組件庫通常包括:通用、布局、導航、數據錄入、數據展示、反饋、其它。除通用原子組件外,我們也會對常用模塊進行梳理,沉淀業務組件庫。

           

          5.落地跟蹤

          在設計完成之后,我們需要對設計方案進行評審、驗收及數據跟蹤,以保證設計方案的落地并跟進調整。

          我們需要:運用合理策略以保證設計方案的高質量落地,對方案上線后的用戶反饋進行有效跟進,運用多種方式驗證目標,迭代產品。

          圖片

           

          設計評審

          目的:設計評審通常包含了交互與視覺,其目的在于審查設計方案中的可用性問題。

          行為:在我司,視覺評審即終評,我們需要在視覺稿中標注出所有交互邏輯,并對潛在問題有預判,能與各方確認目標、分桶與數據埋點;同時我們要對開發實現有預判,能與研發確認實現細節。

           

          設計驗收

          目的:設計驗收是為了確保需求滿足、體驗流暢,并且設計細節能高質量落地。

          行為:視覺設計師主要驗收視覺細節的還原度,并且要在一定程度上對開發的適配、樣式解法有預知,減少二次驗收。同時需要保證驗收有沉淀,利于后續跟進。

           

          數據驗證 

          目的:數據驗證除了分析分桶之外,也可以分析產品上線后的一些問題、并在迭代中修改。同時我們也可以總結設計經驗、提升未來設計的準確率。

          行為:我們通?;谠O計策略,去對數據進行篩選與分析,以此衡量設計對于目標達成的增益度。對于有問題的,能反思并且修改;對于結果好的,能總結并且沉淀。

           

          設計復盤 

          目的:設計復盤以結果為導向,我們可以通過復盤對設計策略的價值進行總結驗證,并去發現、優化流程中的不足之處。

          行為:我們需要陳述設計目標和策略,對設計價值進行驗證,并能總結過程中的亮點與不足,制定后續計劃、沉淀相關經驗。

           

          以上是酷家樂UED「UI標準設計流程」的所有內容,雖然它主要針對UI設計師而設,但相信它也能幫助到交互、體驗設計師們去撥開亂麻,更好地為業務目標服務。

          后續我們會與大家繼續分享與之配套的「設計師成長指南」,它將基于Design Thinking為大家帶來更全面的專業知識幫助。

          同時我們也會沉淀基于該流程的幾個典型案例,包括C端、B端、以及工具端,會在未來陸續與大家分享。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)(公眾號)

          作者:不戳

          轉載請注明:學UI網》讓設計更有價值——設計流程指南

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小

          助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

                                                                      微信圖片_20210513163802.png

           

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

           

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

          深度解析螞蟻Ant Design的設計原則

          資深UI設計者



          『 Ant Design是什么 』


          眾所周知螞蟻集團的B端產品是一個龐大的系統,數量多且功能復雜,而且變動頻繁,常常需要設計師和開發人員能快速做出工作上的配合。同時這類產品中有存在很多類似的頁面以及組件,根據原子設計理論可以得到一些穩定且高復用性的內容。

          隨著這兩年B端產品的逐漸白熱化,越來越多的用戶對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標,螞蟻集團體經過大量項目實踐和總結,逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design。通過組件化設計規范,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。



          『 Ant Design設計原則是什么 』


          針對B端產品反復出現的一些設計體驗等問題, Ant Design 給出標準的設計原則,實現跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面,既減少了不必要的認知成本,又能夠提升設計的效率??紤]到需要適應各種定制化的業務場景,設計原則具有一定的靈活性,萬變不離其宗,通過了解設計原則的構建邏輯,高效組織信息、幫助建立用戶與界面的互動等原則性要求,可以衍生出更具場景特性的設計方案。


          ① Ant Design設計原則的由來

          可以說 Ant design的設計規范攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則,并做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充,我在看書的過程結合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明,這也是為什么國內的企業一直以來都很喜歡使用這套組件的原因。


          ② Ant Design設計原則的適用范圍

          1. 我們先說說『Ant Design 』的適用范圍:

          稍微了解 Ant Design 的小伙伴都知道,本系統是針對B端后臺系統,承載媒介是PC端的瀏覽器。使用的人員主要包括:用戶體驗設計師、交互設計師、UI設計師、前端程序員等。

          2. 再說說 『 Ant Design 設計原則 』的適用范圍:

          顧名思義『 設計原則 』主要是針對設計師在創作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統的一部分,但是前文已經提到,此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華,所以設計師可以把這些原則運用到任何的設計領域,并不要局限于企業后臺系統的PC端產品。

          為了方便大家理解,講一個小故事。故事來自于《寫給大家看的設計書》,作者有一年圣誕節收到一份禮物——一本關于植物的百科全書。作者翻閱之后,發現其中有一顆叫約書亞樹的樹,造型奇特,自己從未見過。于是決定出門轉轉,然而發現外面到處都是這種樹。故事到這里就完了。

          可能大家會想,這個故事要講一個什么道理呢?簡單來說就是,當你手中有個錘子,滿世界都是釘子。當你了解到下面要講的十個設計原則后,你會發現它們處處都適用。


          ③ Ant Design設計原則的內容

          十大原則如下:

          • 親密原則(Proximity)

          • 對齊原則 (Alignment)

          • 對比原則 (Contrast)

          • 重復原則 (Repetition)

          • 直截了當 (Make it Direct)

          • 簡化交互 (Keep it Lightweight)

          • 足不出戶 (Stay on the Page)

          • 提供邀請 (Provide Invitation)

          • 即時反應 (React Immediately)

          • 巧用過渡 (Use Transition)



          『 如何運用Ant Design的設計原則 』


          對于一個初級設計師而言,想要了解UI用戶體驗等知識,學習 Ant Design 的設計原則算是比較快能上道的,因為 Ant Design 是吸取了很多前輩的精華,提煉而成的系統。打個簡單的比喻,對于設計師而言 Ant Design 就是設計師學習『 視覺規范 』,掌握『 設計原則 』最好的字典。

          接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設計原則并運用到工作當中。

          Ant Design 定義了10條設計原則,根據『 席克定律 』選項太多不易記憶,于是我找到了這些設計原則的共通性,將其歸為4類,也就是大家只需記住四類設計原則,在工作中適當延展即可。


          ① 視覺層級清晰

          包含 Ant Design 的設計原則有:『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。

          「視覺層級清晰」的重要性體現在 交互前 用戶看到的內容結構是清晰明確的 。一個層級混亂的界面,任何信息的傳達都是無效的。所以保證清晰的排版布局是人機交互前的基礎。


          1. 親密

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


          1.1 縱向間距關系

          • 縱向間距:在 Ant Design 中,通過「小號間距」「中號間距」「大號間距」這三種規格來劃分信息層次結構。這三種規格分別為:8px(小號間距)、16px(中號間距)、24px(大號間距)。


          • 增加元素:通過增加「分割線」來拉開層次。在這三種規格不適用的情況下,可以通過加減「基礎間距」的倍數,或者增加元素來拉開信息層次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是縱向間距,8 是「基礎間距」。


          1.2 橫向間距關系

          • 組合排布:為了適用不同尺寸的屏幕,在橫向采用柵格布局來排布組件,從而保證布局的靈活性。(注:柵格是另外一個模塊的內容,這里不贅述。)


          • 復選框內:在一個組件內部,元素的橫向間距也應該有所不同。


          2. 對齊

          正如「格式塔學派」中的連續律(Law of Continuity)所描述的,人類的視覺系統往往傾向于將看到對象的直線繼續成為直線,曲線繼續成為曲線。在界面設計中,將元素進行對齊,既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。

          格式塔學派(德語:Gestalttheorie):是心理學重要流派之一,興起于 20 世紀初的德國,又稱為完形心理學;主張人腦的運作原理是整體的,「整體不同于其部件的總和」?!浴妇S基百科」


          2.1 文案類對齊

          如果頁面的字段或段落較短、較散時,需要確定一個統一的視覺起點。


          • 推薦使用:標題和正文左對齊,使用了一個視覺起點。

          • 不推薦使用:標題和正文使用了兩個視覺起點,不推薦該種對齊方式,除非刻意強調兩者區別。


          2.2 表單類對齊

          • 冒號對齊:冒號對齊(右對齊)能讓內容鎖定在一定范圍內,讓用戶眼球順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率。


          2.3 數字類對齊

          為了快速對比數值大小,建議所有數值取相同有效位數,并且右對齊。


          3. 對比

          對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。

          注:要實現有效的對比,對比就必須強烈,切不可畏畏縮縮。


          3.1 主次關系對比

          為了讓用戶能在操作上(類似表單、彈出框等場景)快速做出判斷, 來突出其中一項相對更重要或者更高頻的操作。

          注意:突出的方法,不局限于強化重點項,也可以是弱化其他項。


          • 需要區分主次場景:


          • 不需要區分主次的場景:「通過」和「駁回」都使用次按鈕,系統保持中立。在一些需要用戶慎重決策的場景中,系統應該保持中立,不能替用戶或者誘導用戶做出判斷。


          3.2 總分關系對比

          • 總分關系:通過調整排版、字體、大小等方式來突出層次感,區分總分關系,使得頁面更具張力和節奏感。


          3.3 狀態關系對比

          常見類型有「靜態對比」、「動態對比」。


          • 靜態對比示例:用不同顏色的點,來表明不同狀態。


          • 動態對比:鼠標懸停時,該項和其他項呈現出明顯不同的視覺效果,響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比,以便用戶更好的區分信息。


          4.重復

          相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。


          4.1 重復元素

          重復元素可以是一條粗線、一種線框,某種相同的顏色、設計要素、設計風格,某種格式、空間關系等。


          • 線框重復:


          • 設計要素重復:


          • 文案格式重復:


          ② 交互操作高效

          包含 Ant Design 的設計原則有:『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。

          「交互操作高效」的重要性體現在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題,卻忽略用戶能否理解流程如何操作,那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短,而是用戶的心理時間是否太長的問題,就像我們打游戲往往會覺得時間過的很快,但是在等待頁面加載時卻不耐煩。


          1. 減少打斷

          能在這個頁面解決的問題,就不要去其它頁面解決,因為任何頁面刷新和跳轉都會引起變化盲視(Change Blindness),導致用戶心流(Flow)被打斷。頻繁的頁面刷新和跳轉,就像在看戲時,演員說完一行臺詞就安排一次謝幕一樣。

          變化盲視(Change Blindness):指視覺場景中的某些變化并未被觀察者注意到的心理現象。產生這種現象的原因包括場景中的障礙物,眼球運動、地點的變化,或者是缺乏注意力等。——摘自《維基百科》

          心流(Flow):也有別名以化境 (Zone) 表示,亦有人翻譯為神馳狀態,定義是一種將個人精神力完全投注在某種活動上的感覺;心流產生時同時會有高度的興奮及充實感?!浴毒S基百科》


          • 氣泡提示:對于操作的反饋是必要的,下文會提到,但是為了減少打斷用戶,輕量級的反饋氣泡提示即可。


          • 輸入覆蓋層:鼠標「點擊」圖標觸發;鼠標「點擊」懸浮層以外的其他區塊后,直接保存輸入結果并退出。不用彈窗或跳轉的形式編輯,只需要在觸發圖標附近彈出浮層即可,這樣避免用戶視動線的混亂,減少打斷用戶操作的心流。

          2.縮短步驟

          正如 Alan Cooper 所言:「需要在哪里輸出,就要允許在哪里輸入」。這就是直接操作的原理。eg:不要為了編輯內容而打開另一個頁面,應該直接在上下文中實現編輯。


          常規的編輯模式,界面都會跳出一個彈窗或者是一個頁面跳轉,無形之中用戶走了更多的流程路徑,如果能在當前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設計原則。

          • 文字鏈/圖標編輯:

          狀態一:在可編輯行附近出現文字鏈/圖標;

          狀態二:鼠標點擊「編輯」后,出現「輸入框」、「確定」、「取消」表單元素,同時光標定位在「輸入框」中。


          • 多字段行內編輯:編輯模式在不破壞整體性的前提下,可擴大空間,以便放下「輸入框」等表單元素;其中,在 Table 中進行編輯模式切換時,需要保證每列的不跳動。


          • 拖放圖片/文件:在早前很多產品在上傳功能上,都是跳出彈窗再選擇文件上傳,現在基本都可以實現拖拽上傳了。這樣的設計大大提高了用戶使用上傳功能的效率。


          • 模糊搜索:系統根據用戶所查詢的關鍵詞,智能匹配可能的結果。


          • 定時自動更新:新增的列表項「高亮」,持續幾秒后恢復正常。不需要用戶手動刷新,減少不冗余的操作。


          3.避免回憶

          人們在思考的時候,是需要依靠大腦神經元之間相互傳遞信號,而回憶是需要調用更多的的神經元傳遞信號,簡單地說就是非常費腦子。


          • 搜索歷史:搜索歷史的功能,可以減少用戶的回憶,使得整個體驗更加輕松愉悅。


          4.信息降噪

          根據費茨法則(Fitts's Law)所描述的,如果用戶鼠標移動距離越少、對象相對目標越大,那么用戶越容易操作。通過運用上下文工具(即:放在內容中的操作工具),使內容和操作融合,從而簡化交互,起到信息降噪的作用。

          費茨法則 :到達目標的時間是到達目標的距離與目標大小的函數,具體:。其中:1.設備當前位置和目標位置的距離(D);2.目標的大?。╓)。距離越長,所用時間越長;目標越大,所用時間越短。


          • 列表嵌入層:將列表為多層級時,隱藏弱層級列表內容,可以讓用戶更加直觀地看到重要信息。當我在聚焦某一個列表模塊的內容,鼠標懸浮即可展開。


          • 標簽頁:標簽也換可以將信息內容進行分類,讓用戶更易理解。


          • 漸進式展現:用戶在填寫表單時,會根據當前錄入的數據,展現下一項需要填寫的內容,這樣的展現方式可以屏蔽掉無關緊要的內容。


          • 懸停即現工具:鼠標懸停時,出現操作項。這樣將不重要信息或者操作隱藏起來,不會干擾到用戶瀏覽其他重要內容。


          ③ 系統反饋即時


          包含 Ant Design 的設計原則有:『 簡化交互 』『 巧用過渡 』『 即時反應 』。

          「系統反饋及時」的重要性體現在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣,用戶進行了操作或者內部數據發生了變化,系統就應該立即有一個對應的反饋,同時輸入量級越大、重要性越高,那么反饋量級越大、重要性越高。


          1.實時反饋

          雖然反饋太多(準確的說,錯誤的反饋太多)是一個問題,但是反饋太少甚至沒有反饋的系統,則讓人感覺遲鈍和笨拙,用戶體驗更差。

          牛頓第三定律 :當兩個物體互相作用時,彼此施加于對方的力,其大小相等、方向相反?!浴毒S基百科》


          • 實時預覽:根據用戶的輸入,提供關于密碼強度和有效性的實時反饋提示。


          • 文字鏈熱區:當懸浮在 ID 所在的文字鏈單元格時,鼠標「指針」隨即變為「手型」,單擊即可跳轉。


          2.過渡反饋

          人腦灰質(Gray Matter)會對動態的事物(eg:移動、形變、色變等)保持敏感。在界面中,適當的加入一些過渡效果,能讓界面保持生動,同時也能增強用戶和界面的溝通。

          Adding: 新加入的信息元素應被告知如何使用,從頁面轉變的信息元素需被重新識別。

          Receding:  與當前頁無關的信息元素應采用適當方式移除。

          Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。


          • 表格加載:網絡不好或者表格數據過多,都有可能導致加載緩慢,這時有一個小動畫可以緩解用戶的焦慮感。


          • 富列表加載:用戶在打開列表時,頁面無法做到一次性加載所有的數據,同時有為了減少翻頁的繁瑣操作,就有了下拉自動加載的。


          • 頁面加載:當用戶訪問的頁面體量過大時,系統會通過給出倒計時或完成百分比,來緩解用戶焦慮,并且給用戶友好可控的感覺。


          • 滑入與滑出:可以有效構建虛擬空間。  


          • 折疊窗口:在視圖切換時,有助于保持上下文,同時也能拓展虛擬空間。


          • 對象增加:在列表/表格中,新增了一個對象。


          • 對象刪除:在列表/表格中,刪除了一個對象。


          • 對象更改:在列表/表格中,更改了一個對象。

            • 狀態一:用戶更改了「詳情」中的值;

            • 狀態二:用戶點擊「保存」后,詳情所在的網格出現「黃底」,表明該對象發生了更改;

            • 狀態三:底色持續幾秒后,恢復正常。


          • 對象呼出:點擊頁面中元素,呼出一個新對象。


          3.結果反饋

          用戶常常會疑惑自己的操作是否成功了,哪怕是失敗了也是需要系統反饋,這樣才能安心進行下一步的操作。


          • 頁面反饋結果:


          • 氣泡反饋結果:


          ④ 用戶自由可控


          包含 Ant Design 的設計原則有:『 提供邀請 』『 足不出戶 』『 即時反應 』。

          「用戶自由可控」的重要性體現在 交互前對下一步操作的預判;交互時 不論操作后的結果多嚴重都要允許用戶自主決策;以及交互后 能否對自己的操作結果反悔。


          1.未來預判

          很多富交互模式(eg:「拖放」、「行內編輯」、「上下文工具」)都有一個共同問題,就是缺少易發現性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示,以表明在下一個界面可以做什么。  這樣人機交互的過程往往更加自然、順暢。



          • 點擊刷新:對于設計師而言,最常見的例子要屬花瓣了,我們時長會沉浸在我們瀏覽的瀑布流卡片中,如果系統強行刷新當前頁面,用戶很有可能迷失。邀請用戶主動更新,既不會錯過新的消息,又不會導致我們的心流被打斷。


          • 未完成邀請:用戶在當前頁面無法完成登錄操作,為了減少用戶迷茫的焦慮感,系統告知用戶點擊“更改”鏈接,可以去向何處。


          • 懸停邀請:鼠標「懸?!箷r,出現「選擇此模板」的按鈕。


          2.自主決策

          雖然系統中缺少不了一些危險操作或者不可逆操作(eg:刪除、重置、重裝系統等),但是仍然要用戶自主決定是否繼續,我們能做的就是讓用戶再三確認。


          • 彈窗提示:雖然彈窗打斷用戶心流,但是對于重要的操作,這樣是最保險的方式。


          • 刪除知識庫提示:是釘釘中,刪除「知識庫」這一重要內容,是不可逆的,系統需要用戶謹慎操作。


          3.準許反悔

          如果說「自主決策」中提到的案例都是不可逆的,那「準許反悔」的后果嚴重性會弱一些,系統對用戶的操作沒有那么強的阻斷性,所以要準許用戶反悔的,


          • 刪除撤銷:用戶點擊「刪除」后,直接操作;出現 Message 告知用戶操作成功,并提供用戶「撤銷」的按鈕;用戶進行下一個操作或者 1 分鐘內不進行任何操作, Message 消失,用戶無法再「撤銷」。



          『 Ant Design的優點與缺點 』


          ① 優點


          1.助初創團隊快速產品快速上線

          Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業務產品能否成功,但是能幫助業務產品『正確的成功』或者『正確的失敗』。”

          如果團隊有一個產品idea,我們需要通過最少的資源開發此產品并投入到市場中,通過聽取用戶反饋,驗證idea是否可行,快速迭代最終做出更完善的產品。但理想是美好的,但現實是骨感的,在前期研發的過程中通常會出現兩個情況。創業團隊沒有足夠的設計資源和時間,前幾個版本的產品通常用戶體驗非常差,這種情況體驗差有可能讓用戶放棄這款產品。創業團隊沒有好的方法論和協作模式,需要磨合,設計和開發進度一延再延,結果錯過了風口,市場被競品搶占,還沒上線就倒閉了。

          Ant Design提供了一套完整的界面實現方案,即有代碼框架能直接拿來提高開發效率,每個界面組件都經過螞蟻金服多個項目的考驗,具備優秀的用戶體驗。用Ant Design來做0-1,能快速發布用戶體驗優秀的產品,聽取用戶反饋,快速迭代。


          當然,創業是九死一生,市場和用戶口味都充滿了不確定性,誰也沒有能力保證產品是否成功,但是只要你能高效的產出質量優秀的產品,不斷試錯,說不定以后就能成功。


          2.減少設計和開發的不確定性。

          用 Ant Design 就能高效的產出高質量的產品,減少設計和開發的不確定性。

          因為我們公司就使用了 Ant Design 的系統,所以時常會與前端小伙伴溝通,以下都是他們在使用過程的感想。

          Ant Design 提供的大量功能比較全面且UI風格統一的組件,能幫助開發者快速搭建通用場景下的應用界面。這大概是得益于螞蟻金服業務線上極為廣泛的應用場景,驅動了 Ant Design 團隊通過對使用情況的觀察匯總,整理出來了這么一個組件庫。他們的經驗積累如此之豐富,足以讓這個庫支持大部分其他前端開發者的需要。

          其設計團隊給出的設計規范相當詳細且經得起推敲,令許多其他團隊獲益匪淺。


          3.節省設計與開發的人力成本

          我見過太多宣稱自己在乎用戶體驗的公司,給用戶的產品質量確實比較高,但是自己員工內部使用的系統和管理一團糟。種種不便讓員工經常加班,情緒消極,這樣的團隊抄抄競品達到行業標準體驗還行。要想突破是不可能了,因為創新需要員工有充沛的精力和主動性,天天加班誰還有這精神。

          用 Ant Design 系統提供的設計工具和組件框架能給設計師和開發者減少負擔,能用更少的時間呈現給用戶體驗好的產品。這樣帶來的好處不僅僅是設計師和開發者覺得少加班成就感高而幸福,他們重新恢復活力和激情能做出更有創意和競爭力的產品,給公司帶來更大的收益,這是一個三贏的結局。


          ② 缺點


          1.無法根據業務場景定制組件,靈活度不夠

          一定有小伙伴會有這樣的疑問,目前市面上有這么多的第三方設計規范,例如 Ant Design ,Element UI,有必要自己造輪子做一遍嗎?

          這里要視情況而定,如果公司產品是初創期,而且研發人手不足,那確實沒有必要自己造輪子。反之在資源足夠的情況下,是有必要設計團隊重新做一套屬于自己產品的規范組件庫的,因為B端自身的業務性決定了市場上沒有萬能的設計規范,那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范,在此基礎上進行修改,效率很低,適配的復雜度和重新開發相差無幾。


          2.組件細節深入度不夠,只能“將就”使用

          對于比較普通的設計解決方案是可以的,但是 Ant Design 包含的組件細節仍有不足,畢竟 Ant Design 沒必要投入過多的精力在組件細節深入度上,規范定義的越是精細,對于產品組件而言可延展性就越差,限制也會越多。而 Ant Design 只需要解決80%企業,80%的通用問題即可。


          3.競品同質化嚴重,視覺上無法脫穎而出

          當市場大部分產品都在使用 Ant Design 設計系統時,產品的同質化就會很嚴重。為了避免這種情況發生,我們就有必要從設計語言、設計原則、設計組件三個部分開始,設計自己的規范。那些大廠的成熟的組件庫該如何用呢?我認為應該把它當成一個字典,有不會的地方,可以去參考人家的成熟的解決方案。



          『 總結 』


          這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設計原則是什么以及 Ant Design 的優缺點。當然也重點總結了一下,設計師如何運用 Ant Design 的設計原則,可以將這些原則分為四類:視覺層級清晰、交互操作高效、系統反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設計原則,并將其靈活運用到設計工作中。



          參考文獻:

          《Ant Design 官網》

          《設計心理學 1 》 [美] 唐納德·A·諾曼 

          《寫給大家看的設計書》 美國羅賓·威廉姆斯(RobinWilliams)

          《web界面設計》 Bill Scott    Theresa Neil

          《維基百科》

          《如何評價 Ant Design 這個項目(一個設計語言)?》 龍爪槐守望者



          文章來源:站酷   作者:菜菜不甜 

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

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


          JCD 驅動 - 復雜系統設計應對之道

          資深UI設計者

          摘要

          面對企業級產品,由于系統復雜度和業務領域的專業壁壘,用戶、產品、業務、技術的理解和分析難度都遠遠高于C 端。特別是進入業務深水區,技術術語層出不窮,角色鏈路錯綜交織,場景越來越復雜,在理解和分析業務上設計師需要耗費的精力越來越多,設計師如何高效且深入的分析業務,直接影響到設計解決問題的深入度?;谖浵伣鸱﨏TO 線的業務土壤,我們不斷嘗試打磨,探索出以JCD 為核心的企業級產品設計思維,助力設計師在深耕業務上有章可循,有方法可用。



          復雜系統的特點

          做企業級產品 3 年多,剛從 C 端業務轉過來時,最大感受是對業務理解起來很艱難。隨著經驗的增加,對 0 到 1 產品駕馭起來輕車熟路,可到業務深水區,還是感覺痛苦。技術術語層出不窮,用戶角色多,一個用戶身兼數個角色,系統之間的關聯關系也很復雜,隨著業務的深入設計師會感覺對產品逐漸失去掌控力。一個簡單的芝麻信用分,需要 20-30 個中后臺產品和各種角色一起協同支撐。然而復雜是守恒的,系統復雜性的總量是一個衡量,當前臺的呈現更簡單時,隱藏在幕后的復雜性就增加了。




          我們面臨系統的復雜性表現在三個方面:

          • 多角色,重協同。

          • 鏈路長、錯綜交雜。

          • 技術術語多,業務難理解。



          但企業級產品會有一個主線,是從「事情」的角度出發,關注一件又一件事情被完成。企業場景下我們再把事情描述的具體一些,就是一個又一個的 Job 。設計師要做的就是通過設計,包括參與的角色、使用的工具以及協作方式等,讓 Job 被高效完成。



          JCD 設計思維應對復雜系統

          我們先對比一下,從「用戶」視角和從「Job」視角出發,關注的維度有哪些差異呢?從用戶視角出發我們需要關注用戶的個人痛點、情緒、興趣、人種志(年齡、性別、收入)等信息,會更關注人,核心是為了滿足用戶的需求。在Job 視角下,需要關注 Job 的目的、參與角色、協作方式、工具等信息,而且 Job 對角色是有要求的,比如航空公司飛行員,按崗位要求,他需要不斷提升自己業務能力,每年要去復訓兩次,學習新的技能和知識來滿足崗位對飛行員這個角色的要求。



          基于我們的業務土壤,以及出發視角,我們探索出一套適合企業級產品的設計思維,JCD(Job - Centered Design )以 Job 為中心,設計完成 Job 所需要的一切,包括角色、工具、協作關系等。以 Job 被高效完成為決策依據的設計思維。它是一套適用于企業級產品設計的發現問題、解決問題的方法論。



          在 JCD 設計思維下,將設計流程分為四個階段,發現、構思、呈現、度量。每個階段下有不同的方法、產出、資產。Ant Design 在「呈現」階段幫設計師大大提升了效能,設計師才有更多的精力投入到「發現」階段去更深入去理解業務和角色。接下來重點分享一下在發現階段的兩個方法,角色分析和業務分析。





          JCD 方法 - 角色分析

          常用的 C 端的用戶畫像,如下圖,會關注用戶人口統計學的信息,如名字、性別、年齡、所在地、家庭情況、用戶的習慣、愛好等信息,這些信息在復雜的企業級產品中是不需要去關注的。




          企業級產品角色畫像

          在JCD 的視角下,我們企業級產品的角色畫像應該關注的三個維度:角色概覽、工作能力、工作內容。而工作內容是最核心需要關注的信息,包括了工作的描述、工作的痛點、需求和使用的工具。




          一個角色往往需要完成多個Job,描述一個Job 包含:

          • 四要素:情景、角色、活動、目標。

          • 一個句式:在什么情景下,角色需要完成什么樣的活動,來達成一個目的。

          舉個例子,在飛行前 1.5 小時(情景),角色(飛行員)需要去查看飛機情況(活動 A )、氣象情況(活動 B ),來判斷能否起飛(目標)。



          為了給設計提供具體的依據,我們需要進一步縱向解構Job,來構建 1 個完整 Job 場景,設計師可以階梯式對一個 Job 進行拆分,Job 下面有多個 Activity,Activity 下面有多個 Task 組成,Task 下面有不同的 Action,到這種顆粒度可影響到設計界面中的具體元素。




          看一個具體案例,如何拆解一個 Job,首先用我們的上面的四要素和句式描述。Job:飛行前 1.5 小時,飛行員需要查看飛機情況、查看氣象情況,來判斷能否起飛。在飛行員這個角色的 Job 里包含了兩個 Activity :1. 查看飛機情況;2. 查看氣象情況。查看氣象情況這個 Activity 下包含了三個 Task:1.查看起飛地天氣;2.查看降落地天氣;3.查看備降地天氣。


          每個 Task 下面會有不同的 Action。除了 Job 的縱向拆解,我們還需要關注每個 Job 場景下的需求、痛點、費力度、成就感。




          以 Job 場景為核心,串連角色協作關系

          做好一件復雜的事情,往往需要多個角色在多個工作場景中協同配合。我們會以Job 場景為核心,梳理角色之間的協作關系,建立全局視角。比如,在飛機起飛前,機組飛行員查看飛機和飛行信息、查看起降地天氣等;同時乘務組空姐們為此次飛行做相應準備工作。準備完畢,機長會通知機組和乘務組開始登機。上飛機后機組需要檢查駕駛艙情況,乘務組檢查客艙情況,檢查完畢,會一起協同機場地勤人員安排乘客登機。完成登機后,飛行員需要聯系機場管制申請起飛........ 設計師可以通過Job 場景去串聯角色之間的協作關系,如下圖。



          以上是「角色分析」的方法,是從 Job 出發洞察角色的工作需求以及協作模式,幫助設計師構建角色協同的全局觀。



          JCD 方法- 業務分析

          業務分析的方法是借鑒面向實體的思路幫助設計師去深入分析復雜業務。企業級產品中會有各種技術術語、復雜的數據流轉、業務邏輯等,我們需要一個系統的方法來分析和理解業務,為設計提供準確有深度的信息輸入。我們的用戶大部分是軟件工程師,這個思路可以讓設計師在理解和認知上對齊用戶的心理模型。我們業務分析的有三個維度:

          • 產品定義

          • 實體建模

          • 業務邏輯

          通過以上三個維度,從縱向和橫向去深入和全面的理解業務。




          首先,產品定義。

          通過溝通交流、桌面研究的方法,去了解產品和用戶相關信息,熟悉相關概念和技術背景、沉淀信息資料,來收集產品的信息,具體的產出有名詞庫、產品畫布、產品的關系圖、業務結構圖、產品形態圖等,這里不展開詳述。

          其次,實體建模。

          實體建模是本次分享的重點,實體建模按照面向實體的思想分析業務,圍繞實體進行問題和內容抽象和分析,聚焦于產品內實體和實體間的關系,以及實體的生命周期的分析。



          我們先看什么是實體,參考領域建模(此處感謝幻星給實體的定義)給實體一個定義:實體是產品中客觀存在,具有唯一標識的并可以相互區分的業務載體,通常包含屬性和行為。

          企業級產品系統的實體,很多情況下都是熟悉的字母,陌生的單詞,在設計之前設計師如何去準確、系統的去分析實體。



          舉個例子,現實世界中,「機票」是一個實體,在產品里,可以把「機票訂單」看成一個實體。圍繞著機票訂單,我們梳理出它的基本屬性信息,以及它具有的所有狀態和對應操作,設計師可以進一步把這些狀態和操作梳理出一個「機票訂單」這個實體從產生到消失整個生命周期經歷的過程。這些分析可以作為后續任務流程和設計細節的信息輸入。



          一個實體不能構成一個產品,一個系統會有很多實體存在,我們需要進一步去梳理「機票訂單」與系統中其他實體的聯系。在下圖的案例中,機票訂單與機票是聚合 n:1 關系, 一張機票訂單會包含多張機票,機票訂單與收支明細是關聯 1:n 的關系,一張機票訂單會關聯到多個收支明細,比如會有支付成功、退款等明細。




          最后,業務邏輯。

          以上是實體建模的過程,產品定義和實體建模都是對業務內容層進行理解和梳理。但是我們的業務除了內容外,還有很多復雜的業務規則、業務流程,我們也需要進行梳理和分析,這樣設計師才能對業務有全面的理解。




          所以我們需要把結合實體、業務規則、業務流程,進一步梳理業務邏輯。最終會得到一張業務邏輯圖,不僅能夠幫助設計師洞察到業務的本質,也能幫設計理解業務的全貌。




          第二個方法業務分析,是通過面向對象分析思路去深入的理解業務,為設計提供更精準,更有邏輯的依據。



          總結

          回顧以上三部分內容,JCD 是什么?Job - Centered Design 是以 Job 為中心的設計思維。JCD 的定義:以 Job 為中心,設計完成 Job 所需要的一切,包括角色、工具、協作關系等。以 Job 被高效完成為決策依據的設計思維。它包含了原則、流程、方法&工具、產出&資產,上面重點分享了其中兩個方法「角色分析」和「業務分析」。


          文章來源:站酷   作者:Ant_Design 

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

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

          AI 時代的設計

          資深UI設計者

          這是5月參加阿里設計周“智能與計算”分論壇后的感想小結,因為論壇大部分在講算法和實現方式,所以在這里我就其中的AI與設計相關部分做一些深入分享。undefined

          我的思路大概分為三個部分:AI時代的來臨;AI如何影響設計;未來的設計何去何從。

          undefined

          undefined

          第一部分:聊聊AI時代來臨,設計的世界發生了什么變化?

          undefined每個時代的設計都有不同的定義,農業和工業時代的設計更多是指設計師通過手工制作的方式闡釋自己對美感和藝術的理解。

          undefined到了信息時代,設計除了要考慮美感,還要考慮是否實用和好用。設計的對象開始從真實世界轉向數字世界,設計思想開始考慮以用戶為中心的設計;設計方向也增加了很多領域,包括都多媒體藝術、游戲設計、網頁設計、移動應用設計等。

          undefined在人工智能時代下,AR設計、智能硬件逐漸發展,設計的改革更多考慮的是如何將真實世界和數字世界進行融合,如何在自己產品上更好地闡釋藝術、美感和實用性。

          第二部分,AI如何影響設計,設計因為人工智能而產生了哪些改變呢?

          結合論壇的內容,我覺得從以上五個方面產生了較為深遠的影響。

          人工智能幫助設計師解決在創意過程中面臨的一系列問題,將重復勞動變得自動化 ,節省設計師大量的時間,減輕設計師的工作量。

          undefined數據驅動自動生成,取代人工建模,減少了設計的時間成本。通過組件標準化,來構建三維幾何,然后geometry格式入庫,最后由渲染引擎繪制。

          undefined再比如,雙11期間有1.7 億個BANNER,都來自阿里的“鹿班”AI設計系統。設計數據—機器學習、訓練模型—生成設計結果并評估。如果這些工作量由人工來完成,那么設計師真的就成了“沒有感情的作圖機器”了。

          當今社會,隨著產業智能的發展,在這個變革中,挑戰不單單來自技術,也來自客戶對智能數字體驗的極致追求。這給開發人員和設計師都提出了全新的難題,在可視化領域,通過技術和設計兩個角色更緊密的捆綁,產生了讓人欣喜的化學反應。

          從原始數據到圖表并不是直接的,它需要經過交互的分析,得到指標結果,最終以可視化圖表呈現,而呈現的視覺方式是多樣化的。

          這就是所謂的兩種數據,三層講述

          第一步是原始數據的準確轉譯,工具需要數據對接能力,即對現狀的講述。

          第二步是分析過程,從腳本模式跨入數據驅動,讓數據的分析變得可知可信。

          第三部是觀點數據的表達,也就是創作強化,將結論以可視化的多樣形式被表達。

          這是根據地圖的原始數據得到的多種可視化設計方案,同一份原始數據,卻得到了不同的形式表達。

          因為僅僅有準確的數據結論是不夠的,因為數據需要更好地被講述和表達,如果僅僅將數據呈現給用戶,那么理解難度將會大大提高,而設計是為了讓產品變得更加容易使被理解和使用。

          第二點,體現在建筑的三維可視。

          首先,在二維地圖選取建模范圍,通過智能化的處理,根據數據構建初始的三維地圖。

          然后通過數據聯動,將城市建筑虛擬還原。

          整個過程從數月—> 數周—> 數天,時間大大縮短,人力成本減少,釋放更多的精力去進行創意工作。

          建筑三維化的應用:比如車道級地圖。

          相比于傳統地圖,車道級地圖導航在信息精細度、定位準確性、動態信息豐富度上有大幅提升。

          undefined車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上,還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。

          當設計對象從單個產品轉變到用戶的經歷和當前環境時,設計師不能只考慮自己的產品體驗,需要從大局出發,思考每個產品之間的聯動,考慮不同場景下自己的產品如何服務用戶以及如何與其他產品聯動。產品設計從單體變成一塊需要考慮兼容上下左右外部環境的拼圖。

          智能化的場景的改變對設計有哪些影響呢,我們來看這張圖:設計的場景從有形—>無形、靜態—>動態、永恒—>瞬間的轉變。體驗設計的趨勢從GUI到TUI(實體交互),再到Radical Atoms,場景的改變對設計的影響維度不是單一的。

          undefined

          設計場景在AI時代不僅局限于手機,還涉及到實時場景的設計情況。

          比如谷歌的實時翻譯、語音翻譯。輸入與輸出是同步進行的,這就對設計提出了新的要求。

          此外,還有語音智能VUI,徹底打破了以往的交互體驗,改變了人和工具之間的互動關系,反向塑造著人類的認知方式和學習行為。下面來看一個小愛5.0案例:

          undefined

          對話是人與人之間交換信息的普遍方式,語音交互設計涉及系統學、語言學和心理學,因此它比 GUI的交互設計更加復雜。

          undefined體驗設計經歷了PC時代、Mobile時代,現在進入IoT體驗時代。設計的解決方案與技術的發展息息相關,設計和技術互相促進帶來新的體驗革命,設計師一直在探討和實踐在新技術環境下的新體驗設計,并基于出行、醫療、社區、政務等行業持續挖掘服務聚合模式與場景體驗的創新。

          在新零售的場景下,購買和支付流程發生了改變,這就需要設計師重新思考消費者的心理地圖。例如無人零售、Amazon Go、支付寶IOT支付等等。下面來看一下Amazon Go的案例:

          undefined

          如何讓用戶使用更便捷、體驗更順暢;要向用戶提供什么樣的服務,如何讓用戶注意到我們的產品,如何向他們傳遞企業的服務價值和特點,這是IOT新零售下需要設計深入研究的方面。

          在云端實現企業產品的全區域管控,監控的設計視覺和交互又是不一樣的,比如論壇上的案例:荷魯斯之眼、全區域覆蓋的云監控等等。

          通過對多個實體空間中的數字設計探索,重新塑造人與空間的交互界面,提升人們對于空間的使用體驗。下面舉個例子:

          AT&T discovery district是一個數字化的互動商業社區。

          它從重新審視建筑本體開始。通過虛實和光影的變幻,營造出了實體空間體驗,空間本體就是對話的那個界面。實體空間和數字內容的結合,構建出人與建筑之間新的交互界面。

          廣場的數字球體入口,人的位置和數量變動,球體內的燈光也會跟隨變動。

          undefined

          人工智能促使了交叉學科的工種產生:數字體驗設計師、創意工程師。這兩種職業是做什么呢?面對正在到來的智能時代,體驗設計師和創意工程師將共同面對“AI”這一全新的命題,在智慧工地、智慧教育、數字警務室、神經符號AI等應用中,提煉出智能感設計方法、利用圖形技術能力自研產品并賦能業務。

          數字世界中的設計師:橫跨了藝術、文化、科學、商業多個學科;從傳播學、心理學、應用科學和統計學進行用研,去解決用戶遇到的問題。

          它不僅涉及到需求分析和產品設計,還貫穿至產品運維、測試、發布、分析,從設計洞察中做出創新設計。

          未來的設計師將融合人工智能和創意編程技術,在世界數智化的大潮中找到新的定位和新的機遇。

          undefined

          第三部分,在人工智能時代下,未來的設計會走向哪里?新時代的設計師怎樣找準自己的定位呢?

          人工智能的成熟對部分設計師來說簡直是災難性的打擊,之前無論是通過技法還是數據分析才能完成的工作,人工智能一下子就可以完成,后續根本不需要這么多設計師來完成這些工作。那么設計師是否會被人工智能取代?我們先來看一張人類能力地圖:

          這張圖中,海拔高度代表這項任務被計算機執行的難度,不斷上漲的海平面代表計算機現在能做的事情。從圖中可以看出,目前人工智能水平預警線距離代表藝術的山峰還很遠。

          人工智能沒有人類的跨領域推理、抽象類比能力,也沒有人類的主觀能力如靈感、感覺和感受;更沒有人類特有的靈魂、愛、意識、理想、意圖、同理心、價值觀、人生觀等,這導致人工智能在未來很長一段時間內都無法很好理解人類的心理和行為是什么,在解決推理和情感問題時會不盡人意。

          undefined設計除了解決問題外,還涉及對美的理解和創作,美感是對美的體會和感受,它是復雜的,包含了歷史、文化、環境、情感等客觀因素和主觀因素,所以在不同的時代、階級、民族和環境中,有著不同文化文化修養和個性特征的人對美的定義也不同。

          人工智能依賴數據和經驗解決問題,它能解決大部分智力可解決的問題,但解決不了需要情感和美感才能解決的問題。而設計的擅長領域,是人工智能不擅長的:跨領域推理、抽象能力、常識、審美、自我意識與情感。那么AI與設計的關系怎樣的呢?

          設計是為了解決問題。人工智能使機器代替人類實現認知、識別、分析、決策等功能,其本質是為了讓機器幫助人類解決問題,也就是說,人工智能在一定程度上也是一種設計,它會創作出與人類思維模式類似的解決方案。所以AI與設計師是一種共生關系。因此設計師不用杞人憂天,擔心自己被人工智能取代。

          隨著AI 技術的成熟,設計必定會發生新一輪的變化,在未來,更多領域和行業需要用到界面設計、人機交互等技能,各行各業的設計師需要掌握以上技能才能更好地服務當前業務。那么未來的設計將走向哪里呢?

          undefined新一代的設計師是“與互聯網共同成長的一代”,相信在未來幾年里有更多的新晉設計師會掌握編程開發能力以及其他能力,綜合素質會比目前的設計師更強,所以我們要保持終身學習,懂得如何將自己的能力和經驗轉換為優勢,這樣才能在設計道路上不被超越。

          undefined那設計師可以從哪些方面來應對智能時代的機遇和挑戰呢?

          undefined每一代人都有被下一代人取代的風險,但有些很厲害的人就不容易被取代?因為他們在不斷創造價值。無論在社會、行業還是在企業里,當具備一定的影響力后,他們能更容易積累人脈和資源,然后反哺自己的價值,就跟滾雪球一樣,當雪球越大,他們越不容易被別人取代,設計師需要有這樣的意識。

          undefined設計師需要懂得更多領域的知識和技術才能拓寬自己的視野,這些領域包括但不局限于傳感技術、網絡技術、智能仿真技術、虛擬技術、生物技術、納米技術等。因此科學與藝術是可以并且很有必要相通與交融的,設計師一定要學會跨界思考。人工智能時代下,數字世界和物理世界會逐漸融合,大到城市建設、公共服務、衣食住行和醫療;小到智能家居、穿戴式設備,這些機會將會留給已準備好的挑戰者,所以設計師一定要拓寬自己的視野,不要把自己的目光局限在界面設計上。

          undefined如果不想被人工智能領先,人類的設計應該是創新的(未成熟、未被發現規律的),包含更多元素的(更多復雜參數如歷史、文化、環境、情感等),“設計”這個詞語就涵蓋了以上元素。人工智能在藝術設計上還遠遠達不到人類的水平,深耕藝術設計將會為設計師帶來更多機會。

          undefined在人工智能時代下,當產品基本都能滿足永不需求時,能為產品帶來活力和差異的除了自身的底層技術基礎,更多的是藝術型設計師的理念和風格,以及自身的品牌。就像時尚品牌優衣庫和Gucci,單件商品兩者的品牌和設計所帶來的的利潤差距巨大,相信未來的人工智能產品也會面臨類似的問題,設計師應該考慮如何為產品賦予更多價值,如何彰顯用戶的個性。

          undefined既然AI是一個強大的工具,那么我們要思考如何運用它來創造更多的價值。AI能夠快速便捷地獲取大量信息,幫助設計師拓展自己的視野,不斷更新自己的世界觀,從新的視角看待問題和解決問題。除了快速獲取信息外,設計師也應該考慮如何通過AI提高自己的工作效率,例如哪些純勞動力工作交給AI去做效率會更高;哪些工作可以和AI一起協同完成更能激發創意。

          undefined

          最后,用一本科普書改編的話來結尾:一想到,還有95%的問題留給開發同學,我就放心了。

          最后附上一張本文的腦圖:

          undefined


          參考資料:

          [1]阿里設計周.智能與計算.2021

          [2]薛志榮.AI改變設計.2019

          [3][美]詹姆斯·弗拉霍斯.智能語音時代.2019

          [4][美]梅瑞狄斯·布魯薩德.人工不智能.2018


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

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



          文章來源:站酷   作者:西子zhulijuan 

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

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


          7000+超詳細智能產品深度解析:智能面板篇

          資深UI設計者

          智能家居越來越普及,智能化的生活是由一個個智能設備組成,這次通過近距離體驗智能面板,來研究一下它們是如何提升產品體驗的。

          7000+超詳細智能產品深度解析:智能面板篇

          前言

          隨著互聯網的發展,生活智能化越來越普及,各類智能產品逐漸出現到人們面前,在體驗的過程中,其實里面有很多細節需要深挖和思考。很多產品細節的背后都是為了提升用戶操作效率、兼容用戶使用場景、滿足用戶情感表達,以最終達到對用戶體驗的提升。作為智能產品的設計師只有充分了解市面上的智能產品,才能設計出更好的產品。

          7000+超詳細智能產品深度解析:智能面板篇

          什么是智能面板

          開關對于每個人都不陌生,它用來控制設備的狀態,傳統開關的數量和要控制的設備數量有關,設備越多,開關越多,為了簡化人們的操作,智能面板孕育而出,它不僅可以操控家中單獨的設備,還可以對一系列設備進行聯動控制。

          1. 使用場景

          室內近場控制,滿足用戶家中近距離控制設備的場景。

          2. 產品選擇

          Gira、ORVIBO、綠米

          為什么選他們?

          • Gira 從事智能建筑系統技術有 100 多年的歷史,算是做智能開關的先驅;
          • ORVIBO、綠米國內做智能開關相對成熟的品牌。

          3. 研究方向

          本文將從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。

          7000+超詳細智能產品深度解析:智能面板篇

          設備基礎信息

          Gira g1

          TFT 屏、KNX 協議、定價 8000 元起

          KNX 屬于歐洲總線技術,穩定性最好,需要從設計階段介入,高門檻的技術要求讓 KNX 難以實現全民普及。

          ORVIBO 智能開關

          多點觸控電容屏、Wifi、藍牙、Zigbee、定價 899 元

          Wifi、藍牙、Zigbee 屬于無線通信技術,穩定性不如 KNX,但免布線,易擴展,利于全民普及。

          Aqara 智能開關 S1 觸摸屏

          IPS 屏、zigbee 協議、定價 899 左右

          通過以上分析,Gira 的人群定位是有全屋定制需求的高消費人群,其他兩個品牌的人群定位是面向嘗鮮體驗的廣大普通消費群體。

          7000+超詳細智能產品深度解析:智能面板篇

          1. 功能點對比

          通過功能列表中的對比發現,三個品牌的產品都通過場景聯動設備執行來提高人們的操控體驗,通過左右滑動來快速切換功能模塊類型;

          Gira 和 ORVIBO 支持快速返回首頁、面板內排序;

          ORVIBO 的個性化體驗最好,它具有語音控制、設備自動添加、設備自動歸類功能,這些差異點讓它比其他兩個產品更加智能。

          7000+超詳細智能產品深度解析:智能面板篇

          Gira G1

          以 Gira G1 為例,從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。

          7000+超詳細智能產品深度解析:智能面板篇

          1. 首屏

          界面整體用以黑白灰為主,搭配少量顏色,給人簡潔干凈的感覺;

          思考:智能面板除了具有功能屬性,還具有裝飾屬性,黑白灰為經典搭配,可以更好兼容各種家裝風格,還可以更好的展現內容;少量的顏色用來強調正在運行的設備狀態。

          7000+超詳細智能產品深度解析:智能面板篇

          2. 輔助顏色

          輔助色大方向上使用兩對互補色,在色環上形成了一個矩形,通過調節亮度飽和度達到統一和諧多彩的效果。

          7000+超詳細智能產品深度解析:智能面板篇

          3. 層級劃分

          主要分為 2 大層級:功能卡片列表、設置為第一層級,設備控制為第二層級;

          對于 gira 這種全屋定制的產品,家中一般會有很多設備,功能卡片放置在第一層級的好處是,便于用戶瀏覽鎖定目標功能卡片。

          7000+超詳細智能產品深度解析:智能面板篇

          4. 首頁布局

          區域 1 顯示 KNX 協議類型,室內外溫度,時間;這部分內容占比很小,說明這些內容用戶不常用,但用戶會偶爾還是會看一下;

          區域 2 為房屋名稱,返回上一級、返回首頁、設置、展示形式切換,這一區域全局置頂顯示,用戶在多級操作后,可以很快速的返回到首頁;

          區域 3 顯示設備、場景的數量,用戶可以清楚的掌握家中設備場景的數量;

          區域 4 為設備場景列表,用灰色背景來強調主操作區域。

          一屏最多 6 個設備,通過左右滑動來展示更多設備

          思考:為什么不是上下滑動,而是左右滑動

          有 2 點猜測:

          • 左右滑動下面的點相當于頁碼,用戶在找某個設備的時候可以方便記住某個設備在第幾個點的頁面里
          • 在設備控制界面中左右滑動快速切換其他設備,這樣可以統一用戶對于左右滑動切換的認知

          7000+超詳細智能產品深度解析:智能面板篇

          5. 卡片展示

          卡片內容從上到下依次為設備場景 icon、名稱、狀態及快捷操作;

          用戶可以通過 icon 快速鎖定設備類型,通過名稱確定目標設備,進行快速操作;

          各功能模塊獨立劃分,快捷操作區域可以很好的兼容不同設備的功能鍵。

          7000+超詳細智能產品深度解析:智能面板篇

          6. 設備控制區域布局

          操控界面劃分為 2 部分,一部分為信息展示區,內容為設備名稱、所屬區域;

          另一部分為控制區,這部分區域固定,可以讓不同的設備控制看起來更統一;

          大面積區域留給核心功能,輔助功能布局在四周,便于用戶準確操控。

          7000+超詳細智能產品深度解析:智能面板篇

          7. 手勢

          設備控制界面通過左右劃動快速切換其他設備,不需要返回菜單界面。

          7000+超詳細智能產品深度解析:智能面板篇

          8. 手勢

          手掌長按屏幕,可喚起提前設置好的開關功能,這時面板相當于簡單的開關,可以很快速的關閉開啟所在區域的燈。

          Gira 這樣做還原了開關的本質,當想要開啟或關閉該房間內的燈時,就不需要到菜單界面找這個設備了。

          7000+超詳細智能產品深度解析:智能面板篇

          9. 設備控制

          燈操控界面用刻度形式表現,每一度為一個刻度,并且還可以通過中間的加減號進行精確到 1 個百分比的亮度微調,品牌方想為用戶打造成清晰準確調控的形象;

          但在實際使用場景中,我們不大會對燈進行這么精確的調節。

          溫控器

          溫控界面同樣可以精確調節,每 0.5 攝氏度為一個刻度;

          溫控的精準調節,就比較貼近我們日常的使用習慣,溫控器控制界面是沒有開關的,因為目標人群家中多數是中央空調,隨便就可以關閉,對于大戶型的用戶來說是不友好的。

          右下角的定時按鈕可以讓設備在特定時間內以某一狀態運行。

          7000+超詳細智能產品深度解析:智能面板篇

          窗簾

          窗簾的狀態值與操控條左右排列,這樣的排布好處是可以讓操控條長度最大化,便于用戶控制;

          窗簾控制界面只分為有調角度的和沒有角度的;

          窗簾操控條豎直排列,向上滑到頂部為窗簾全開,滑到底部為全關;

          窗簾的行程和角度都用百分比的形式展現。

          7000+超詳細智能產品深度解析:智能面板篇

          設計設備控制界面的思考方向一般有 2 種:

          1. 界面控制方式要和設備的實際運行方式一致

          這種思考方向要考慮實際窗簾有左右運行和上下運行之分,上下劃動的操控方式來控制左右運行的窗簾會有認知上的偏差;

          百葉簾的角度有正向和反向轉動之分,如果只按最后的遮光百分比來做,會造成設備兼容問題。

          也就是說為了模擬真實的操控方式,需要設計出若干不同種類窗簾控制界面。

          2. 界面控制方式與設備運行結果關聯

          這種思考方式不需要考慮窗簾的種類及開合方向,將所有種類的窗簾行程及角度歸為開、關兩種結果狀態,

          就像 Gira 這樣,只需要做兩套界面就可以兼容幾乎全部的窗簾設備。

          Gira 豎排控制條的優勢

          如果橫向布局,那么左右滑動切換設備時,會觸發控制條左右手勢,造成誤操作。

          7000+超詳細智能產品深度解析:智能面板篇

          背景音樂

          設備列表中背景音樂卡片的快捷按鈕很特別,由靜音、播放、下一曲組成,我們設計的時候一般會做成對稱的:上一曲、播放、下一曲,Gira 并沒有這么做,因為在背景音樂的使用中,一般有幾種需要快速響應的場景:用戶在家中發起臨時談話,需要暫時安靜一下;不想聽了;這首歌的風格不喜歡;

          背景音樂操控界面功能和音樂應用差不多,唯一不一樣的是,底部可以快速切換歌單,可以很快速切換不同音樂風格。

          7000+超詳細智能產品深度解析:智能面板篇

          文件夾功能

          隨著設備、場景的增多,用戶可以根據自己的喜好將設備或場景歸類放置,便于快速定位功能卡片;

          點擊文件夾卡片,進入到顯示著眾多功能名稱的文件夾界面,點文件夾,才能進入功能卡片列表,為什么要多一個文件夾查看的界面。

          我們想象一下有這樣一種場景:面板中有幾十個功能卡片,用戶想開啟娛樂場景,這個場景好像在客廳文件夾或走廊文件夾里,于是去客廳文件夾快速翻看這里面有沒有,再點進去操作。

          Gira 這樣做符合用戶在功能卡片多的情況下快速選擇的習慣。

          7000+超詳細智能產品深度解析:智能面板篇

          排序功能

          可以通過拖動來調節設備卡片在菜單中的位置,省去了去后臺設置的步驟;

          定時功能

          定時列表用具象的時鐘來體現開始運行時間,還用黑白來區分夜晚和白天,對于用戶來說掃一眼圖片就可以知道運行時間,這種體驗很好。

          7000+超詳細智能產品深度解析:智能面板篇

          ORVIBO Mix Pad

          以 ORVIBO Mix Pad 為例,從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。

          7000+超詳細智能產品深度解析:智能面板篇

          1. 首屏

          整體運用深色色調,使用幾何圖案作為背景;

          用白色體現基礎信息,用色彩強調設備場景的狀態及天氣信息;

          運用圓角元素,更加生活化。

          7000+超詳細智能產品深度解析:智能面板篇

          2. 輔助顏色

          顏色運用比較豐富,以藍、橙兩互補色為主,其他顏色分別為它們的鄰近色;既能保持強對比,還能讓顏色變得柔和。

          7000+超詳細智能產品深度解析:智能面板篇

          3. 層級劃分

          主要分為 2 大層級:首屏、設備控制界面、場景列表、鬧鐘為第一層級;設備類型、設置為第二層級;

          智能面板一般裝在墻面,用戶站立操作,用戶不可能花太長時間來操控;

          歐瑞博的人群為廣大普通消費群體,家中的設備不會太多,設備控制界面層級前移,可以方便用戶直達控制區,用完即走。

          7000+超詳細智能產品深度解析:智能面板篇

          4. 首頁布局

          首頁主要分為 2 個區域:

          日期天氣區

          時間、日期、天氣狀況信息,可以滿足用戶日常出門關注的內容,并且在這個區域有多種表現形式供用戶選擇,既保持個性化還不失統一感。

          快捷控制區

          可以將常用的功能置頂在首頁展示,最多設置 2 個,用戶在首屏既能看到日期天氣還可以控制設備,大大提升了屏幕的利用率和用戶的操作效率。

          這樣做的好處:

          當用戶準備出門時,看了一眼面板上的天氣,點一下關玄關燈,就可以直接出門了,不需要滑到燈的菜單界面找到玄關燈然后再關閉它,真的很方便。

          底部有向上滑動提示,告訴用戶下面還有重要內容。

          7000+超詳細智能產品深度解析:智能面板篇

          5. 卡片展示

          卡片內容左右排布,從左到右依次為 icon、名稱及狀態、快捷控制,這種排布的好處是可以縮小每個卡片的高度,從而提高屏幕利用率;

          但有個問題就是,左右排布的方式,內容最多呈現 4 個文字,需要考慮這幾個字能否清楚的定義該卡片功能。

          7000+超詳細智能產品深度解析:智能面板篇

          6. 上滑手勢

          上滑可以查看全部功能卡片,給用戶在手機上瀏覽信息的熟悉感;

          在新的操控設備運用用戶熟悉的交互方式可以降低用戶的學習成本;

          移動端上常見的手勢對應結果有:左右滑——代表切換,向下滑——代表喚起相關功能設置,向上滑動——瀏覽更多信息。

          7000+超詳細智能產品深度解析:智能面板篇

          7. 左右滑手勢

          用戶在首屏左右滑動就可以切換不同功能模塊,不需要返回上一級,在設備類型少的情況下,這種盲操會比較方便。

          7000+超詳細智能產品深度解析:智能面板篇

          8. 下滑手勢

          下滑進入功能類型選擇、系統設置界面,這一區域相當于導航,可以實現功能模塊間的快速切換。

          7000+超詳細智能產品深度解析:智能面板篇

          9. 手勢問題

          多種手勢的組合可以在有限的屏幕內操作更加靈活,但手勢太多會帶來一些問題:

          • 誤操作問題,在空調界面,左右切換設備時,容易觸發空調溫度操作;
          • 認知上的負擔,在歐瑞博面板的邏輯定義里,首屏和控制界面屬于同一層級,然而上滑手勢只能在首屏操作,在設備控制界面上滑就無法使用,下滑手勢卻可以全局操作,這里面的邏輯會讓用戶混亂。

          針對以上問題解決的方法可以是:

          • 改變空調左右滑動設置溫度的操控方式;
          • 首屏和控制界面層級做區分,或簡化手勢。

          7000+超詳細智能產品深度解析:智能面板篇

          10. 場景運行效果

          場景卡片分為未激活、運行中、運行結束三種狀態;

          場景運行狀態變化在卡片 icon 區域體現,既傳達了運行的過程,又不會打擾到用戶。

          7000+超詳細智能產品深度解析:智能面板篇

          12. 卡片首頁置頂

          點擊卡片列表最底部的編輯按鈕,可以選擇將某一功能卡片置頂到首屏,方便用戶快捷操作。

          7000+超詳細智能產品深度解析:智能面板篇

          13. 設備控制區域布局

          將普通燈、場景、門窗等操控方式相近的設備進行了歸類顯示,并且和空調、色溫燈、背景音樂等設備放置在同一層級;

          從交互體驗層講:由于家里的普通燈、場景、門窗的操控方式簡單統一、數量多,按照類別整合在一起便于查找控制;

          從視覺層講:設備操控界面布局形式多,會給用戶造成整體視覺上的不統一,增加學習成本。

          7000+超詳細智能產品深度解析:智能面板篇

          14. 設備控制

          空調

          空調控制界面,只能通過左右滑動以整數的形式來調節溫度,開啟中的時候,背景會有對應模式的色彩氛圍效果,給用戶更直觀的感受;

          底部只保留用戶最常用的模式、風速、風向三個功能。

          色溫燈

          色溫燈界面默認為用戶推薦 6 種不同場景下使用的色溫選項,底部提供亮度調節功能,用戶只需要去選擇,大大縮短了用戶的操作路徑。

          個性推薦在電商類產品中很常見,推薦機制基于對用戶行為習慣的分析,需要強大的后臺數據支持,智能家居這一塊通過窮舉用戶生活中的設備使用場景、目的從而提煉出對應的功能選項可以大大提升產品使用體驗。

          7000+超詳細智能產品深度解析:智能面板篇

          窗簾

          窗簾控制界面采用半寫實風格,給用戶更加直觀感受,學習成本低,拖動窗簾區域就可以進行行程的控制,由于沒有微調按鈕和行程狀態百分比,所以無法做到窗簾精準控制;

          選擇這種寫實的設計風格,需要考慮設備控制界面布局、樣式對新增窗簾類型的兼容性。

          7000+超詳細智能產品深度解析:智能面板篇

          背景音樂

          背景音樂默認界面只保留了當前播放音樂封面元素,更多復雜操作被隱藏到了下一級界面,用戶在當前界面可以進行暫停、播放、收藏等簡單操作;

          在小屏幕中做設計時,有時候會在一個層級界面中堆砌許多功能按鈕,使界面變的臃腫,一來容易讓用戶誤操作,二來讓用戶找不到重點功能,操作效率低下;

          我們在處理這些信息時應該結合使用場景,按用戶的使用頻率進行權重劃分,將權重低的進行隱藏處理,突出核心功能,減輕用戶操作負擔。

          智能家居廠商大多都是靠賣硬件賺錢,歐瑞博巧妙的運用會員機制結合背景音樂功能來售賣音樂服務(49 元一年),更加具有互聯網商業思維。

          7000+超詳細智能產品深度解析:智能面板篇

          15. 語音控制

          在語音設置中,可以選擇是否開啟語音控制,系統默認 2 組喚醒詞激活語音控制;

          歐瑞博為用戶提供了更便捷的語音控制功能——快捷口令,說出指令就可以快速執行,由于沒有房間、設備名稱的限定,這個功能只能實現面板內所有同類型設備的開或關,適用于小戶型簡單的場景。

          7000+超詳細智能產品深度解析:智能面板篇

          16. 快速添加設備

          傳統上添加一臺新設備需要:選擇要添加的設備——選擇網關——輸入正確Wifi密碼——進入設備配網流程——配網成功——設備名稱設置,操作流程繁瑣,中間稍微有些環節沒有操作對,最后就無法成功添加設備,歐瑞博通過簡化中間過程,成功解決了這一痛點。

          7000+超詳細智能產品深度解析:智能面板篇

          17. 個性化設置

          用戶可以在面板中直接設置首屏的風格樣式,系統一共有 3 種風格外和一個隨機演示選項供用戶選擇,并且這三種風格的功能架構是一樣的,只是對背景圖、元素大小、布局做了設計區分。

          7000+超詳細智能產品深度解析:智能面板篇

          AQARA S1

          以 AQARA S1 為例,從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。

          7000+超詳細智能產品深度解析:智能面板篇

          1. 首屏

          整體使用黑色做背景,用白色體現基礎信息,底部的色塊元素貌似起裝飾作用,和天氣情況并沒有聯系;

          首屏主要分為日期時間和環境狀況 2 個區域,天氣、溫度、濕度、空氣質量信息并行排列,個人認為用戶對這 4 個信息的關注度是不一樣的,看看我們手機上的天氣 app 的信息排布就知道了,這樣并列排布會讓用戶分不清主次。

          7000+超詳細智能產品深度解析:智能面板篇

          2. 輔助顏色

          顏色以藍色及其鄰近色為主,搭配少量的對比色,整體色調統一。

          7000+超詳細智能產品深度解析:智能面板篇

          3. 層級劃分

          主要分為 2 大層級:首屏、設備控制界面、場景列表為第一層級;設置為第二層級;

          形式和歐瑞博一致,都是為了讓用戶更便捷的操控;

          但進入設置頁面,設置主題類型的步數比歐瑞博的多一步,用戶設置完成后還得一步步返回,這里可以將用戶常用的“顯示”內容上移一個層級,減少頁面跳轉次數;

          AI 手勢這種有特色的功能隱藏的太深,不便于用戶的使用。

          7000+超詳細智能產品深度解析:智能面板篇

          4. 左右滑手勢

          綠米同樣運用左右滑動進行首屏、場景列表、設備間的快速切換,對于相同類型的窗簾設備,并沒有整合成列表放置同一屏,而是另起一屏,設備多的時候就會存在操控效率低的問題。

          7000+超詳細智能產品深度解析:智能面板篇

          5. 下滑手勢

          下滑進入系統設置界面,這個區域只有一個設置功能,有點浪費空間,索性就把設置下一級的功能選項移到下拉頁面,還能提高用戶的操作效率。

          7000+超詳細智能產品深度解析:智能面板篇

          6. 場景運行效果

          場景運行過程以進度條的形式在卡片底部體現,對用戶的干擾小,并且只傳遞出開始到結束的過程,沒有成功提示,這種邏輯是正確的,因為面板只是傳達出了一個命令出去,具體什么時候傳出、接收設備是否正常運行,這些信息面板是獲取不到的。

          7000+超詳細智能產品深度解析:智能面板篇

          7. 設備控制區域布局

          場景列表與設備控制界面一個層級,溫控器、調光燈運用半圓的元素作為控制區域,新穎的設計風格是綠米智能面板的特色;

          仔細看,會發現設備控制界面不統一,相同功能的開關按鈕,在不同的設備中位置卻不一樣,還有就是普通燈是偏寫實的 3 路開關樣式,其他界面卻是抽象的圓環幾何樣式,不統一的界面會增加用戶的學習成本。

          7000+超詳細智能產品深度解析:智能面板篇

          8. 設備控制

          空調

          空調控制界面,通過上下滑動以整數的形式來調節溫度,新穎的操控方式讓用戶加深對品牌的印象;

          底部開關、模式、風速同級展示,這里存在幾個問題:1、用戶在設置空調時很容易誤點關閉按鈕;2、缺少常用的風向調節,功能缺失造成較差使用體驗。

          普通燈可以在 App 中設置 1、2、3 路開關樣式,這種形式同樣存在問題:一屏最多放三個開關,屏幕下方大片區域空置,利用率低。

          7000+超詳細智能產品深度解析:智能面板篇

          窗簾

          窗簾控制界面顯示窗簾的名稱及行程狀態;窗簾的開、合,綠米給了 2 種方式:滑動控制、全開全關按鈕;

          增加暫停功能可以提升使用體驗,因為用戶在操控窗簾設備時,會以窗簾實際的運動行程為依據來決定窗簾需要開合到什么程度,而不是看界面上窗簾的位移,當用戶覺著窗簾行程可以了,按暫停鍵就可以準確停留在用戶想要的位置上。

          7000+超詳細智能產品深度解析:智能面板篇

          調色燈

          調色燈用戶可以自定義或選擇系統推薦的顏色;

          為了涵蓋大多數的用戶偏好,調色燈的 4 個推薦色采用色環上差距大的顏色,并且根據用戶使用場景篩選出常用的幾種色調,排除了用戶不常用的綠色、紫色、粉色。

          7000+超詳細智能產品深度解析:智能面板篇

          9. 開機默認頁設置

          用戶可以根據自己的使用偏好,將最常用的功能模塊頁面放到第一屏,這個功能在一定程度上可以提升操作效率,當設備多,還是需要切換很多屏。

          用戶使用面板分為:緊急情況、常用情況,緊急情況不一定常用,就像出門需要關燈;常用情況不一定緊急,例如看時間

          綠米為了讓用戶便捷,給出默認頁自定義功能,存在的問題是:如果用戶把燈作為開機第一頁,那么日常中看時間要翻頁;日期時間作為第一頁,開關燈需要翻頁,都不是特別便捷。實際上可以做成像 Gira 那樣,通過增加手勢喚起快捷開關功能,首屏留給日期時間,既滿足了日常需要,又能滿足緊急需求。

          總結

          通過上述分析,我們得到了這些產品的共同點與差異點,以及背后的思考方式,了解共同點可以讓我們彌補自己產品的不足,不被市場淘汰;學習它們差異化的思考方式可以幫助提升我們產品的競爭力。

          作為一名合格的設計師,除了學習視覺技法和理論,還應該多玩、多看、多思考真實的線上產品,體驗其核心操作流程,推敲和思考產品設計背后的原理和邏輯,才能不斷提升體驗設計思維。



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

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



          文章來源:優設   作者:Aaron杜斌 

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

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


          超詳細智能產品深度解析:交互動效篇

          資深UI設計者

          智能產品的設計過程中,常常用到動效設計,那么動效設計用在哪些地方及對提升智能設備體驗帶來什么幫助,是這篇文章要講的。

          上期回顧:

          流暢的操控感

          通過大小、位置和透明度的變化,使得界面與界面之間、界面上元素的出現和消失都有關聯,讓用戶和產品的交互過程更流暢,給用戶更好的體驗。請看以下案例:

          1. Nest 溫控器控制界面

          超詳細智能產品深度解析:交互動效篇

          Nest 溫控器從時鐘轉變到溫控調節界面的過程中,時鐘的指針向圓心收縮,周圍的時間刻度生長并一起向中心收縮,指針收縮動效對應溫控調節界面溫度值的顯現,時間刻度的生長收縮動效對應溫度刻度的顯現,由于元素之間進行有關聯的變化,操控過程中會有絲滑流暢感。

          2. Gira 窗簾設備

          超詳細智能產品深度解析:交互動效篇

          當用戶調節行程時,中間的控制點跟隨手指實時運動,而進度條會有延時拖拽效果。為什么會是這樣呢?原因是:用戶在控制面板上的操作是需要由面板向窗簾設備發送指令的,也就是說面板上控制窗簾到窗簾設備運行中間會有一小段時間間隔,用戶會有延遲感,所以 Gira 在控制窗簾行程的過程中,進度條為了與窗簾設備運行同步,加入延時效果,讓用戶感覺操控響應快的錯覺。

          3. Nest 新款溫控器

          超詳細智能產品深度解析:交互動效篇

          用戶在滑動切換功能時,功能 icon 會按照先后順序由大到小變化,由于連續性運動,每個元素運動都有銜接,會有流暢操控感受。

          4. Nest 智能鎖

          超詳細智能產品深度解析:交互動效篇

          用戶輸入密碼后至鎖打開這段時間,數字依次向下消失,鎖 icon 逐漸出現并且打開,體現出柔緩的感覺;實際上動效有時候可以彌補設備執行緩慢的不足,當設備需要長時間才能執行時,這段時間加入動效,動效運行時間和設備實際執行時間一致,用戶就會覺得很順暢;也可以讓動效運行時間小于設備執行時間,這時用戶會覺得操控反應更快。

          直觀明確,降低用戶學習成本

          通過動效能夠幫助用戶使用功能,對功能的方向、位置、喚出操作、路徑等進行暗示和指導,方便用戶在最短的時間內來學會操作產品的一些功能。請看以下案例:

          1. Amazon Echo

          超詳細智能產品深度解析:交互動效篇

          用戶第一次設置好監控后,通過放射動效提示用戶雙擊屏幕,通過上下擴張的箭頭動效提示用戶可以通過手指來進行監控畫面的放大縮小。

          2. Lenovo Smart Clock

          超詳細智能產品深度解析:交互動效篇

          當設備第一次配好網重新開啟后,通過遮罩、圓點大小位置運動搭配文字告訴用戶長按屏幕可以控制什么功能。

          超詳細智能產品深度解析:交互動效篇

          頂部弧形的上下變化,告知用戶下拉可以控制什么功能。通過簡單的元素既能起到提升用戶的作用,還不打擾用戶。

          強調內容

          通過動效給用戶展示需要的內容及產品側想讓用戶了解的內容,讓用戶更樂意更易于理解,強化功能感知。請看以下案例:

          1. B&O 觸控音箱

          超詳細智能產品深度解析:交互動效篇

          雙擊音樂標題,進度條從左向右生長出現、操控點放大出現,既強調了進度條這個隱藏功能,還暗示用戶可以拖動操控點從左向右拖動操作。

          2. Google Nest Hub 調光燈界面

          超詳細智能產品深度解析:交互動效篇

          用戶從列表進入調光燈界面時,調光條灰底從左向右弧度生長,隨后當前亮度條生長出現、亮度值出現,先暗示了用戶可以從左向右弧度操作,后強調了當前設備狀態。

          3. Google Nest Hub 睡眠質量檢測界面

          超詳細智能產品深度解析:交互動效篇

          用戶查看睡眠質量數據時,睡眠質量標題信息漸隱漸現,睡眠數據條、數字生長,讓數據展示有主次之分,強調了用戶想要看的內容據,更人性。

          提升用戶掌控感,讓用戶心中有數

          產品設計里面有一個非常重要的原則:讓用戶有操縱感。這種操縱感不僅僅表現在對用戶的操作有了反應、有了顯示,還有一種方式是讓用戶知道當前產品運行的狀態,是正在等待還是正在加載,還是正在下載或變化,那這種狀態的告知也是增強用戶操縱感的方式之一。請看以下案例:

          1. LG 智能洗衣機

          超詳細智能產品深度解析:交互動效篇

          當用戶往洗衣機里加入衣物后,出現量杯倒入洗衣液的動畫,告知用戶當前洗衣機正在進行哪一個環節,我們分析一下這里加入動效的用意,首先,一般的洗衣機沒有屏幕,有的話也就顯示當前的功能選項,LG 的這款洗衣機是液晶屏,那么它的定位就是高端人群,通過融入動效,打造差異化,提升使用體驗,加深用戶對 LG 品牌的印象。

          2. Lenovo Smart Clock 起床鬧鐘功能

          超詳細智能產品深度解析:交互動效篇

          用戶設置好起床時間后,系統會根據時間段自動進行背景顏色的過度,來模擬天色的變化,直觀的告知用戶當前的時間是白天還是晚上或是黃昏。

          3. Orvibo 除濕界面

          超詳細智能產品深度解析:交互動效篇

          設備進行除濕的過程中,面板上圓形元素進行旋轉,伴隨粒子擴散效果,模擬水分子消失的過程,直觀形象的告訴用戶現在正在做什么。

          4. Lenovo Smart Clock 貓眼通話界面

          超詳細智能產品深度解析:交互動效篇

          用戶接通貓眼后,通話 icon 進行電播擴散動效,模擬聲波擴散效果,準確的向用戶告知當前通話中的狀態。

          5. Google Nest Hub 語音喚起

          超詳細智能產品深度解析:交互動效篇

          當用戶說話喚起語音控制時,原先的全屏畫面收縮,響應用戶的指令,四周留白,為通話內容提供展示空間,然后彩色點元素起伏變化,通話內容出現,告知用戶已接收到指令;隨后彩色點元素旋轉加載,體現正在執行中。在語音控制的每一個環節都加入動效反饋,會讓用戶覺得他不是在和一個冰冷的機器講話,富有人情味。

          6. Orvibo 窗簾控制界面

          超詳細智能產品深度解析:交互動效篇

          運用輕擬物效果和與實物一致的運動方式,用戶可以直觀的看到窗簾的行程位置與開合狀況,大大的提升了產品易用性。

          明確層級關系,提升用戶理解效率

          面對一款新的智能產品時,用戶可能不知道怎么操作它,通過動效向用戶交待頁面內容之間的關系,讓用戶清楚的知道從哪里來,到哪里去,更易于理解從而可以快速上手使用。請看以下案例:

          1. Nest 溫控器設置界面

          超詳細智能產品深度解析:交互動效篇

          溫控器的設置模塊通過左右滾動以便在有限的屏幕中展現,那么模塊的下一級頁面跳轉做成像 App 那樣左滑切入是無法明確層級內容的,此時需要一個與左右滑動不一樣的動效來區分模塊的切換,Nest 運用翻轉效果,強化了層級感,清楚交待了頁面翻轉后面的內容與頁面前的關系。

          2. Google Nest Hub 設備控制界面

          超詳細智能產品深度解析:交互動效篇

          用戶從頂部導航中進入設備列表過程中,設備列表頁面從右向左進入,暗示用戶“當你想返回上一級,可以左滑離開哦”,用戶上下滑動設備列表時,屏幕左邊滑動條出現,更加明確了“左滑返回上一頁”的功能;

          超詳細智能產品深度解析:交互動效篇

          超詳細智能產品深度解析:交互動效篇

          當用戶通過列表進入操控界面以及切換功能頁時使用淡入淡出的效果,弱化它們之間的跳出感,來強調它們是一個層級的內容,從細微處可見 Google 的設計師在動效的使用、選擇上非??酥?,值得我們學習。

          3. Google Nest Hub 日程提醒界面

          超詳細智能產品深度解析:交互動效篇

          用戶發出查看日程安排的命令時,日歷界面從左到右進入,告訴用戶這是一個新的頁面,接著日期數字 21 進行大小位移變化,月份不做變化,為了強調這是 21 號的日程,2 條日程信息按照時間先后從下向上運動,交代了日程處理的優先級。Google 設計師將信息展現的每一步都讓用戶看的清楚明白。

          品牌調性透傳

          在可用性良好的前提下,通過一致性、趣味性的動效設計和創新的交互方式為產品增加亮點,帶來更驚喜的體驗,傳達產品的氣質與態度。請看以下案例:

          1. Google 多端運行動效

          超詳細智能產品深度解析:交互動效篇

          超詳細智能產品深度解析:交互動效篇

          超詳細智能產品深度解析:交互動效篇

          在品牌塑造上,Google 已被證明做得極為成功,而且在視覺表現層面,Google 系產品具備著“一致性”和“連貫性”,這讓 Google 獲得了品牌識別上的利益。在不同設備的動效設計中,Google 都統一使用代表品牌的紅、黃、藍、綠顏色和幾何圖形,遵循化繁為簡的設計準則,通過簡潔貼近真實的運動方式,讓產品更有人情味,讓用戶更加專注于內容。

          2. 智能圓鏡

          超詳細智能產品深度解析:交互動效篇

          用戶在靠近圓鏡設備時,鏡面中心人臉識別 icon 縮放,周圍點元素波動擴散,吸引用戶的同時,傳達出科技感。

          3. Apple HomePod 命令反饋界面

          超詳細智能產品深度解析:交互動效篇

          當 HomePod 在執行一項指令時,頂部的屏幕會出現彩球融合翻轉動畫,多變朦朧的色彩可以喚起用戶情緒,球體間的融合過程讓產品生動有趣,讓用戶感受到品牌的人情味。

          4. Apple Watch 洗手提示界面

          超詳細智能產品深度解析:交互動效篇

          Apple Watch 洗手功能開啟后,會有一個 20 秒的倒計時,倒計時以肥皂泡沫消失擴散的形式展現,很貼合當前洗手的情景,讓原本一個普通的倒計時變得生動且有趣味性,用戶更加樂意使用,強化了用戶對品牌的感知。

          5. 智能溫控器

          超詳細智能產品深度解析:交互動效篇

          這款溫控器已經有一定年代了,當時那個年代,能用到溫控器,那就很有科技感了,智能溫控器還將流動的線條動效運用至透明背景上,向用戶傳達了超前的科技感,只要見了就會記住這款產品。

          下面為大家整理了一份動效在產品中的應用場景以及設計思路:

          超詳細智能產品深度解析:交互動效篇

          總結

          實際上智能產品中的動效設計,并不是要向用戶炫技,也不是做的越炫酷越好。動效是以解決問題為目的的一種手段。我們要去觀察現有好產品的動效設計落地點及分析他們的小心思,從而運用至自己產品中,提升產品使用體驗。


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

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



          文章來源:優設   作者:Aaron杜斌 

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

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


          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          資深UI設計者

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          相比于去年發布的 macOS 11 和 iOS 14 的 WWCD 2020,今年的 WWDC 確實是顯得變化沒有那么大,在系統視覺層面上,macOS 12,iOS 15,iPadOS 15,watchOS 8 似乎并沒有那么多「革命性」的改變。老實說視作為一次日常的產品功能迭代就好了。

          不過,iOS 15 當中有不少頗為不錯的新功能,比如實況文本(Live Text),功能更強的 Spotlight,全新的 Safari 瀏覽器,全新的安全機制,等等等等,這些功能足以為用戶提供更好更安全的使用體驗,但是另外一方面,有很多功能對于設計師和開發者這邊有著巨大的影響。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          目前來看,Facetime 的多人通話的升級,共享當前界面和屏幕給他人的 Shareplay 很大程度是為了應對全球疫情之下,用戶被封閉和隔離的使用場景,這些功能需要系統級的支持。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          而從照片中獲取文本信息的實況文本功能、超強的聚焦搜索功能,還有新的相冊自動生成回憶視頻的功能,則和蘋果自身在機器學習領域的挖掘息息相關,對于想要在這一領域有所建樹的團隊,可以參考這些內置的功能,如何用好神經網絡的軟硬件,可以參考相關的開發文檔。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          關于 iOS 15 在我看來最值得聊且對于設計和運營有較大影響的部分,其實是全新的通知推送系統,以及 「專注模式」這一功能。在整個發布會結束之后,蘋果的 HIG 頁面當中,只有一小部分的內容隨著新系統的發布而隨之更新了,而這其中就包含信息推送和 「專注模式」的部分。

          信息推送和當下用戶日常內容和信息消費習慣緊密關聯。越來越多的 APP 和越發頻繁的信息推送給用戶帶來的信息壓力已經成為一個廣泛存在的問題,一直到今天,這個問題都沒有一個足夠完美的解決方案。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          針對注意力管理的問題,iOS 15 所給出的解決方案算是一個比較折衷且比較合理的處理機制。

          1、視覺優化

          在基礎的信息推送內容的視覺設計上,iOS 15 針對通知欄的小卡片的排版視覺進行了優化,放大了 APP 圖標并置于卡片的左側,對于通訊類 APP 當中用戶發送的信息,則采用了用戶大頭像 + APP 小圖標 的組合形態,增加信息來源的辨識度,并以這種形式更清晰地告知用戶,所收到的信息的來源,以及它的屬性。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          iOS 15 還可以根據用戶設置的時間表或者所處的模式,快速收集每天收到的的通知,構建成為一個較大的通知摘要大卡片,而摘要的內容呈現將會按優先級進行智能排序,位于頂部的卡片相關度最高。(所以 APP 通知推送會因為這種機制開始一輪新的內卷么?)

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          值得注意的是,新的推送摘要因為是按照優先級排列,所以各種 APP 當中優先級最高的通知將會被匯總到一起。

          摘要信息的組織并不是借助單一算法來實現的,同樣的,其中用到了機器學習的功能,借助神經網絡芯片來更好地對信息進行針對性的篩選,并推送給用戶,以圖更好的體驗。

          2、通知管理層級的提升

          在原本的 iOS 14 當中,對于單個 APP 的推送管理方式比較簡單,除了「關閉」,就只能選擇「隱式推送」,

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          在 iOS 15 當中,用戶可以針對單個 APP 的推送進行更細致的選擇和處理:

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          更多選項當中,可以選擇讓 APP 「靜音一小時」或者「今天不再推送」以避免干擾。

          整個 iOS 15 的通知處理的機制都是圍繞著降低用戶信息載荷的目標來進行的,除了管理層級的細化,專注模式更是之前 iOS 14 中「勿擾模式」的全面升級。

          其中,為了對推送通知進行更加細致的處理,通知功能的類型也有了更為詳細的分類,并且在 HIG 設計規范進行了更為詳細的說明。相關詳細內容在第四節。

          3、圍繞場景構建的專注模式

          「專注模式」是為了應對信息過載的問題,并且試圖改善推送通知影響用戶注意力的情況,希望借此來幫助用戶更加專注于進行中的任務。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          系統基于常見的幾個使用場景,提供了「個人」「工作」「睡眠」三個場景,并且保留了之前的「勿擾」模式,單擊底部「+」號還能添加更多模式,其中還包括「駕駛」和「游戲」等不同的預設場景模式。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          除了「勿擾」模式之外,其他模式下,用戶可能會收到與這些場景相關的應用,而用戶可以在 iOS 15 的系統智能推薦之下,快速增刪當前模式下可以推送通知的 APP。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          在指定模式下,用戶收到的推送通知的內容、類別都會高度相關,降低干擾性。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          同樣的,為了搭配不同的專注模式,還可以基于模式設置特定的主屏和桌面小插件,成為當前模式下的信息和管理中心,更加方便地管理當下的任務,達到「專注」的目標。

          而「專注模式」更為智能的一點,是系統會根據地理位置信息,有意識地提醒用戶是否要切換模式:

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          同時,當用戶將手機設為特定模式之后,綁定同一帳號的其他設備也會自動切換到同一專注模式之下,達到統一管理的目的:

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          當然,除了基于位置進行「專注模式」的切換之外,用戶可以通過右上角下拉的「控制中心」對「專注模式」進行手工的切換管理。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          4、通知系統規范

          而無論是新的通知系統還是「專注模式」,在信息管理的顆粒度上都比以往更加細致,這很大程度上是基于新的推送通知的類別管理,這一部分內容在 HIG 設計規范上已經得到更新,并且有著非常詳細的說明。

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          下面是關于推送通知章節更新的主要部分(考慮到篇幅,對部分非關鍵內容進行了精簡)。

          https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications

          4.1、通知的管理

          用戶希望收到他們關心的事情的通知提醒,但并不總是喜歡被打擾。為了幫助用戶管理整體體驗,需要在發送任何通知提醒之前獲得用戶的許可;系統允許用戶在「設置」>「通知」中更改,并調整推送提醒樣式,可以預覽,并且可以和 Siri 交互。用戶還可以在「設置」>「專注」中讓所有通知都靜音(某些地區的政府警報除外)。

          相關開發人員說明,請參閱 UserNotifications。

          4.2、幫助用戶管理通知

          在 iOS 15 及更高版本中,用戶可以通過指定專注模式時間,設置專注模式下通知推送的具體行為,而進行細粒度的管理。專注模式可幫助用戶在他們為睡眠、工作、閱讀或駕駛等不同狀態下,定義這一時間段內通知推送的具體行為。

          用戶可以篩選出哪些通知或者 APP 可以在特定專注模式下,被推送給用戶。比如在工作專注模式下,用戶可能希望收到來自同事、家人以及工作相關的 APP 推送的信息,用戶可能還希望收到時效性較強的通知。

          盡管專注模式下,可能會有一些通知被延遲推送給用戶,但是通知信息在收到的時候即立刻發揮作用。

          4.3、通知的類型

          想要定制化地推送信息,那么你需要確保你的 APP 能夠支持信息直接推送,就像電話或者短信樣的通訊通知(communication notifications),而其他類型的弱時效性的推送則使用非通訊通知(noncommunication notifications) ,而想要支持通訊通知,你需要引入 SiriKit ,這也意味著用戶可以使用 Siri 來進行自定義通知推送行為。具體的參閱INSendMessageIntentUNNotificationContentProviding。

          為了更好的方便用戶針對推送通知進行管理,你需要對你的 APP 的推送通知的中斷級別進行定義,不同級別的定義決定了通知何時推送,系統在不同狀態下是否要推送,以及如何處理。目前,將推送通知的中斷級別劃分為4個等級:

          • 被動型通知。用戶可以在閑暇時候查看的推送通知,比如周邊餐廳推薦。
          • 活動型通知(默認狀態)。用戶可能希望了解這個信息何時能夠推送,比如最喜歡的球隊的最新比分。
          • 時間敏感型通知。需要用戶立刻關注到的通知,比如賬戶安全相關的通知和快遞通知。
          • 關鍵通知。直接影響到用戶聲明安全和需要立刻得知且優先級超高的公共通知,比如來自政府機構的安全通知,或者醫療保健類應用的推送。

          具體的屬性還可以參考下面的表單:

          這份 iOS 15 推送通知設計指南,值得設計師們仔細閱讀!

          值得注意的是,這4個層級是逐漸遞進的,因為后兩種推送通知需要的優先級較高,所以最好獲得用戶的許可。

          此外,在設計通知推送系統的時候,還有3個關鍵的注意事項:

          • 需要對每個通知的優先級和中斷級別進行準確的判斷,不要讓非關鍵性的通知占用專注模式下的用戶注意力,這樣才能獲得用戶的信任。錯誤的優先級設置會導致用戶對你的 APP 產生不信任感。
          • 僅將與此刻緊密相關的事件信息設置為被時間敏感型通知,這樣的時效性才能對應得上它的優先級。具體可參閱 UNNotificationInterruptionLevel。
          • 不要將營銷類信息推送設置為時間敏感型通知。

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

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



          文章來源:優設   作者:陳子木

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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