<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設計者

          做設計、做交互、做產品前都離不開一個目的就是——拆解問題,達到XX預期,從而能提升自己的專業性,讓方案更加具有說服力。那么,設計師應該如何找到符合自己的設計方向和優化方向呢?

          為什么要去拆解問題?

          案例:

          • 背景:某 APP 作為游戲類興趣社交 APP,個人主頁作為了解他人、建立社交關系的核心一環,目前信息豐富度和社交感偏弱,故需要進行優化;
          • 目標:頁面改版核心以社交為驅動,豐富頁面信息,提升用戶建立社交概率。

          如果不去拆解問題,你知道后續的該怎么做嗎?

          想要找到設計方向和優化方向的,收下這篇方法論!

          設計拆解:想要找到設計方向和優化方向的,請你一定要看!

          想要找到設計方向和優化方向的,收下這篇方法論!

          我們知道了最直觀的感受信息度和社交能力弱,但是這 2 點并不能作為優化目標和設計策略。

          從該截圖來看,滿足了:

          • 個人屬性:照片、語音、標簽、星座、ID、性別等等;
          • 商業屬性:下單、突出異性優勢等等;
          • 社交屬性:關注、提示關注、聊天、小游戲場景(右下角人物)、分享等等。

          1. 信息是不是很滿?

          那么如果不去拆解問題,是不是就不知道如何補充信息了,那么也有社交感。用戶在主動狀態下:漂亮、萌妹、聲優也就有社交了,那么用戶在被動狀態下是什么?

          2. 是不是越想越亂,找不到方向了?

          這就需要去拆解問題了,可以讓你的思路更加清晰,保持在一條線上,形成大綱,可以挖掘更多的價值。

          拆解問題的好處是什么?

          還是同樣的案例:

          • 背景:某 APP 作為游戲類興趣社交 APP,個人主頁作為了解他人、建立社交關系的核心一環,目前信息豐富度和社交感偏弱,故需要進行優化。
          • 目標:頁面改版核心以社交為驅動,豐富頁面信息,提升用戶建立社交概率,那么我們開始拆解問題:(前提是背景已經確認好的情況下)。

          想要找到設計方向和優化方向的,收下這篇方法論!

          那么背景交代的是需要強化社交關系提升信息豐富度和社交感。經過再一輪的拆解,是不是能感覺到,自己思考的方向也多了?

          想要找到設計方向和優化方向的,收下這篇方法論!

          我拆解問題后,獲得的好處有:

          1. 思維的擴展性

          舉個例子:信息豐富度為什么會讓我覺得缺少一點靈活性?信息的展示,會不會又分為外在和內在信息?那么什么是外在信息?與同平臺上的大神之間建立的關系轉化為信息?

          2. 邏輯的嚴謹性

          • 有邏輯線索可依,從而更容易找到問題所在;
          • 方案和過程都可以假設,但是假設是必須要建立在真實的場景下。

          3. 產出結果的可視化

          可以根據拆解,將問題變得更加清晰,從而找準發力點。

          如何去拆解問題?

          前面鋪墊了那么久,現在回歸正題拆解問題主要分為 2 種(對應著初級和中級水平,可視情況任選一種):

          1. 以問題樹進行拆解,將問題細化到一個點

          還是以這個案例:

          • 背景:某 APP 作為游戲類興趣社交 APP,個人主頁作為了解他人、建立社交關系的核心一環,目前信息豐富度和社交感偏弱,故需要進行優化。
          • 目標:頁面改版核心以社交為驅動,豐富頁面信息,提升用戶建立社交概率。

          想要找到設計方向和優化方向的,收下這篇方法論!

          △ 這是提升信息度的模塊,問題樹太長,就只展示部分了

          想要找到設計方向和優化方向的,收下這篇方法論!

          △ 這是提升社交感的模塊,問題樹太長,就展示部分了

          挖掘到以下功能(列舉功能并記錄,進行權重分析):

          • 關注模塊需要重設計
          • 設計車隊模式
          • 匹配度設計
          • 話題引流設計
          • 群設計(包含營銷活動設計,展示打賞排名)等等

          這是一個很淺的影響因素分析,到了這一步,很多厲害的小伙伴,甚至會更加詳細。也就是說我們要將方向點,統統轉化為機會點和業務新方向(那些一直抱怨沒有發言權的小伙伴可以參考一下)。

          想要找到設計方向和優化方向的,收下這篇方法論!

          (全局問題樹展示-舉例就不做詳細展開了,理解意思就行)

          整合內容進行歸類

          拆分和定位分為:

          • 開發側:標記為 K-1 +顏色,比如群內人數限制,開發能不能幫助解決,如果不能,轉換至交互側產品側:標記為 C-1 +顏色。比如:車隊設置,以及后續的商業演化;
          • 運營側:標記為 Y-1 +顏色。比如:群內,該提供怎么樣的營銷策略;
          • 設計側:標記為 S-1 +顏色。比如:交互處理,開發不能滿足群內人數的擴張,該怎么做;
          • UI 該處理:如何讓頁面變得更加“溫暖”,根據用戶群來進行頁面設計;
          • 題外話:交互在我看來,其實承擔著銜接與溝通和分析的角色,整合內容看到問題其實對于經驗要求很高(比如能看到商業機會),請盡量帶著組內專業的人進行歸類分析。

          整合成一個表單:

          想要找到設計方向和優化方向的,收下這篇方法論!

          重復確認問題我們找到上級確認:是否與上級規劃的方向保持一致,不合適也能及時作出修改。

          • 證明你的專業性
          • 讓領導知道你們接下來做的事情是什么,產生了什么數據價值,將有價值的內容規劃,融入產品層的大綱中
          • 暗示領導給資源,有些拆解出的目標問題,是不能單方面來解決的

          資源規劃根據權重比,進行資源規劃。適用場景對于剛上手的小伙伴,請耐心的一步步做完,老鳥的話請直接一步到位。

          2. 以用戶的接觸點進行設計

          這一塊的內容需用到用研部分知識,以數據為主用研為輔的情況下去進行拆解問題。相對來說,流程會更加的長,但是獲得的結果更為準確一些或者說更加偏向用戶想要什么。

          流程漏斗數據圖

          還是以這個案例:(背景需要改動一些)

          背景:某 APP 作為游戲類興趣社交 APP,個人主頁作為了解他人、建立社交關系的核心一環,目前信息豐富度和社交感偏弱,故需要進行優化 。(改為:導致流失率偏高,下單轉化極低)

          目標:頁面改版核心以社交為驅動,豐富頁面信息,提升用戶建立社交概率。(添加:提升用戶建立社交概率,從而能提升用戶粘性降低流失率)

          第一步:拉取數據(某一時間段,瞎編的基礎點擊事件埋點數據,看個意思就好)

          想要找到設計方向和優化方向的,收下這篇方法論!

          △ 假的有點過分了,嘿嘿

          第二步:進行梳理

          先進行大綱梳理(以業務流程為主,梳理出主要問題)

          想要找到設計方向和優化方向的,收下這篇方法論!

          △ 以用戶直接進入個人主頁舉例

          想要找到設計方向和優化方向的,收下這篇方法論!

          第三步:假設驅動即解決復雜問題時盡可能的先找到一個合理的假設。比如:剛進頁面就流失,甚至停留時間都很短,那么你立馬給出的結論是:

          TA 真丑,不符合我的審美,嚴重 P 圖。

          想要找到設計方向和優化方向的,收下這篇方法論!

          第四步:找到用戶做這類測試的時候,當然一定要去找玩游戲的用戶且接觸過陪玩的。用戶找到-約時間-去用戶能放松的地方-開始瀏覽該軟件-進行定性測試。

          第五步:匯總結果定性的方式有很多種:這里我舉例一個「think aloud」:

          使用 think aloud 的流程:

          • 提前告知被測用戶你需要邊操作邊思考并且說出來
          • 記錄被測用戶的說話記錄
          • 分析文本,歸納問題分類
          • 將分類嵌套至說話的文本中
          • 計算統計結果
          • 建議使用中位數測量

          最后在經過數據分析得出問題的優化重點或改版方向。

          補充一句,如果條件允許,使用卡片分類法,讓用戶自主的搭配,個人主頁中功能位置。

          小結:熟練分析話術,圈重點,找到核心的發力點。也能讓思考過程更加結構化、可視化。不同的話術下,找到不同的方式,幫助快速解決問題,找準切入點和挖掘機會點和后續的跟進(要玩的流暢就取決于你的樹結構的清晰程度了)。

          拆解后的策略是什么?

          策略其實在你分析的時候就已經產生了。

          想要找到設計方向和優化方向的,收下這篇方法論!

          當然啦,我們是一個 team,當你產生策略的時候,需要和團隊內共同討論方案的可實行性。

          如何去驗證拆解結果?

          1. A/B testing

          進行原版和改版數據對比,重點/想改進的數據有沒有提升/下降就好了。

          AB 測試就是指把少部分用戶分成平均的兩組,其中一組用戶體驗網站改版的 A 版本,另外一組用戶體驗網站改版的 B 版本,分別記錄清楚相關的所有用戶操作數據以后再進行精確的比對,最后分析得出哪一個版本是用戶最喜愛的。

          2. 灰度

          灰度發布則是指在新的功能上線以及沒有上線之間能夠保證新的版本可以穩定過渡的一種發布方法,可以在灰度發布的過程當中解決一些問題或者對新版本做出一些可以提高用戶體驗的調整,這是保證網站可以平穩更新到新版本的有效過程。

          拆解流程如何優化?

          • 沒有捷徑可走,只有通過不斷的練習,你才能優化步驟流程;
          • 如果全文看下來,對于詞匯和方法沒有問題的,你已經具備了優化,差的是熟練度;
          • 這些都只是思路,并不存在百分百正確,在什么樣的情況下,就選擇什么樣的方式。了解理論不代表知道如何實際運用,理論是基石,基石決定上層建筑。

          文章來源:優設  作者:七月Xavier 

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



          什么樣的設計可以征服客戶?

          ui設計分享達人

          在過去的2020年疫情中,很多設計師都降薪甚至失業,讓本不富裕的生活雪上加霜。但與此同時,也有很多設計師反而在逆境中開了竅,接到了更多的單子,做出了更好的案子。


          那么怎么才能過上錢多事少在家辦公的獨立設計師生活呢?我們邀請了八位出色的接單高手來一起探討。他們中間有正在大廠上班偶爾接單的全職設計師,也有工作多年后毅然創業的創意老炮,有從未上班打卡的獨立設計師,還有擁有著整個設計團隊的公司老板。

           


          他們是:

           

          趙威:市場只要存在競爭就會要求我們去做一些革新和改變,這適用于所有行業。

          全職設計師 / 5年經驗 / 多服務于互聯網及新型行業:媒體,社交,海外市場等。/ 年接單金額:數十萬級 


          迦木木:與其多獨自做設計,不如多和顧客溝通,從而發現他們的真實需求。

          獨立珠寶設計師 / 12年經驗 / 直接服務于消費者,女性為主。/ 年接單金額:數百萬級


          是北瓜呀:設計是一門手工活,活要出色是第一位的。

          全職設計師 /  2年半工作經驗 / 無固定服務行業。/ 年接單金額:數十萬級

           

          力虎廣告:當你在某個領域足夠優秀的時候,機會就會自己走到你的面前。

          自營設計機構 / 公司成立5年 / 聚焦電商品牌視覺設計全案的廣告公司,客戶較多來自家居、母嬰和美妝類目。/ 年接單金額:千萬級


          NiceLabStudio:活兒不分大小,用心去做每一件事,剩下的交給時間。

          自營設計工作室 / 從業10年,工作室成立一年 / 多服務于“客戶是年輕人”的行業,例如玩具,食品,潮流服飾等。/ 年接單金額:數百萬級

           

          你好大海品牌設計:設計師應該持有一定的態度、價值,用專業的設計能力和客戶平等地對話。

          自營設計機構 / 公司成立9年 / 多服務于快消、美妝、生活美學領域,及一些原創設計品牌的合作。/ 年接單金額:數千萬級

           

          石昌鴻(上行設計):把自己的專業做到極致,無人取代便是你的核心能力。

          自營設計機構 / 公司成立8年 / 多服務于餐飲,白酒,茶類客戶。/ 年接單金額:數千萬級


          楊晟Sheen(五感覺醒設計5SD ):認真對待每一次合作,從前的合作伙伴自然感受到你的用心和盡責。

          自營設計機構 / 公司成立9年 / 多服務于互聯網行業。


           


          下面我們就進入主題:



          WHY?WHAT?

          客戶為什么找到你?

          設計師的核心能力是?



          客戶的情懷不多

          客戶都是實在生意人。設計師在苦惱缺少優質客戶的同時,客戶更煩惱怎么找到優質靠譜的設計師??蛻糁荒軓哪愕倪^往表現中為你已經證實的能力買單,而很少愿意去賭你未來可以突然爆發。


           從大家的回答和對設計項目的觀察中,可以歸納出以下四個客戶看重的設計師特征


          1、與客戶需求同類型的過往作品

          如果你參與甚至主導過和潛在客戶需求基本一致的案例,那么,這將會是最能打動客戶的表現。例如你發布的作品中很多官網類的案例,那么想要做官網的客戶就會循著這些案例找到你。


          2、客戶同行業的頭部客戶案例

          一定要盡量服務各個商業領域里最頭部的那些客戶。因為他們的跟風者和崇拜者會愿意以更多的預算和尊重找到你。盡管他們也知道找到大佬的供應商并不能成為大佬,但是人們總是會迷信“明星同款”的威力。


          3、獨特的設計風格

          客戶們在爭奪他們用戶的注意力,在滿足他們用戶的審美需求。這個時候,一個區別于競爭對手的獨特設計風格,會是他們重要的武器。做為設計師,千萬不要去完全模仿另一個設計師。有實力的金主,永遠只為第一人買單。讓自己成為第一人,不要成為誰誰誰第二第三。


          4、良好的設計師品牌

          幾乎所有的被訪設計師都把這條作為最主要的原因。良好的設計師品牌意味著更大的知名度和更好的信用度。本文后面我們會圍繞這個話題有更深入的探討。



          設計師的專業精神不少

          成功帶來更大的成功,十位設計師都不約而同地把專業精神視為設計師的價值核心,并且都在繼續加強自己的設計方法體系,把每一個單都做為招徠下一個更好客單的引子,也作為驗證自己設計觀點的現實案例。

          大多數設計師都已經選定了自己主要服務鉆研的商業領域,用深度來交廣度。設計師通過長期的服務和洞察才可以和客戶對行業的機會問題等進行深入的交流,而非流于視覺效果表面。

          持續的多維度的能力培養也是大家共同提到的關鍵,大家一致認為良好的學識和思考能力是設計師需要具備的素質。

           


          不可替代的設計能力和良好的服務意識,就是設計師的專業精神。

           



           


          叁山-濃縮茶 包裝設計 THREE MOUNTAIN TEA  by NiceLabStudio





          HOW?WHERE?

          如何獲得客戶?

          在哪里可以找到客戶?



          設計平臺仍然不可替代

          站酷是大家提到最多的關鍵詞,拋開商業互吹,這依然顯示出類似站酷,dribbble,behance這樣的設計類公共平臺在當今接單渠道中仍然保持著不可替代性。

          在此之外,八位高手們幾乎實踐了常見的所有渠道:線下開店,朋友介紹,老客戶推薦,中介服務等等,但是都只能帶來零星的機會,不足以成為穩定的主要客單來源。

           


          自建流量池的可行性不高

          有兩人提到了自建流量池。隨著這些年短視頻平臺迅速崛起,確實讓自建流量池的可能性大大增加。但是由于大眾平臺話題相對寬泛,并且讀者興趣點也相對分散,目前并沒有很多設計師通過運營自媒體實現訂單轉化的成功案例。確實有一些設計話題下的大號和網紅,但是他們的內容目標更多是依靠廣告帶貨等手段直接變現,而非提升設計師品牌。我們會持續關注新媒體平臺對外包業務的影響。另外,建立流量池的時間成本和操作難度也完全不同于設計師習慣的創作式工作模式。這次訪問的八位設計師中,僅有一位擁有千萬粉絲級微博大號。


           

          不管在哪里,用作品說話

          大家很有默契地提到了創建高質量作品集對吸引客戶的決定性作用。渠道不是秘密,作品才是第一要素,好作品+好平臺,才會帶來好客戶,這也是八位高手的共識。作品發布時,不僅要關注視覺上好看,也要注意寫清楚必要的項目背景,行業信息等客戶關心的內容。在平臺與他人的互動中,也盡量保持有禮有理有節的交流,不要給潛在客戶留下此人不好溝通的印象。

           


          主動上門的客戶,比較優質

          如果你發布的作品已經獲得了客戶的欣賞,那么接下來的合作將會比較順暢。這也是此次采訪中大家的同感。這也是設計師品牌話題中的一環,稍后在設計師品牌中我們詳細展開。

           


          溝通能力+數據能力,設計師的技能點加法

          三位設計師提到了溝通表達能力以及對數據的理解使用能力。

          其中溝通能力是個傳統技能,設計圈一直有三分做七分說的調侃,雖然有些偏頗,但是反映出溝通表達能力的重要性。因為設計師和客戶的認知方式,知識結構等都存在著巨大的差異。很多同行間不言而明的常識,在客戶那里可能是完全陌生的盲區。好的設計師需要知道怎么建立和客戶的同理心,站在他們的角度,用他們習慣的方式去思考問題。

          數據能力是時代的召喚。我們現在就生活在一個數據的時代,信息和商品的流動方式,內容和服務的交付方式,甚至消費者的決策方式都基于數據而定。在這個環境下,設計師需要建立對數據的基本認知,美學說服不了的客戶,往往可以被數據說服。在之后的系列文章中,我們會在這個話題展開說明。

           

           

           

          Mercedes me-梅賽德斯奔馳移動程序  by 趙威G


          騰訊游戲創意大賽視覺設計GWB Game Awards 2020  by 五感覺醒設計5SD

           




          designer personal brand 

          你對設計師的個人品牌怎么看?



          設計師應該持續打造自己的品牌

          設計一直是個設計師品牌驅動的職業,設計師品牌是客戶找到你的原因,它也時常可以形成很高的“品牌溢價”??梢哉f設計生涯就是個創造和運營設計師品牌的過程。以下我們梳理了設計師們對此的思考。

           


          建立:風格,特色,定位

          設計師本身往往就是品牌專家,甚至很多就是品牌設計師。但是當局者迷,為客戶做品牌設計時思路清晰,節奏明快,到了為自己建立品牌時,很多老江湖也會犯迷糊。大概是因為人最難認清的就是自己。

          但是從大家的交談中,梳理出風格,特色,定位三個線索:

          風格 是你最順手舒適的設計方式,只有你本身就喜歡的方式才可以長期堅持。

          特色 是你區別于別人的特征,用來回答為什么找你而不是別人這個靈魂拷問。

          定位 是對于市場機會的理性分析,誤入夕陽行業的邊緣地帶會帶來事倍功半的后果。

           


          輸出:品質,一致,體系

          規劃好了建立一個風格鮮明,特色明確,定位精準的設計師品牌,怎么輸出你的品牌印象給到行業和客戶呢?大家共同談到了這三點:


          品質:把有品質感的內容展現給外界,這是設計師品牌印象樹立的第一要務。品質感包括但不限于完整清晰的案例描述,畫質清晰的圖片展示。還要有發布平臺選擇,內容深度選擇等一系列的思考。如上文提到的,能給讀者留下靠譜專業的“信用感”為佳。


          一致:人們不相信萬能的神仙,留給每個品牌的記憶空間是很狹窄的。設計師品牌要避免試圖營造“啥都擅長”的印象。始終用一致的風格強化設計師品牌的特色印象,保持不變的定位,才可以占領大家的心智。什么都是的品牌,什么都不是。


          體系:市場的機會有限,但設計師們時常看起來十分相似,傻傻分不清楚,怎么辦?這時候就看同一賽道上,誰有更深入的理解,能提供更全面的服務。前文里大家都在努力構建的設計方法論,在這時發揮了作用。

           


          升級:從一個人到一群人

          設計師的個人品牌往往成為設計團隊公司化運營后的瓶頸??蛻糁该O計師本人來服務,但設計師自己的時間精力無法照顧太多項目。個人品牌的擴展性不高,團隊品牌又不容易建立共情。怎么把一個人的名氣變成一群人的名氣?這是需要在初期就做好預案的問題。

           

           

          >>>>> 前往查看8位設計師對此話題的具體回答 >>>>>



          上行案例/ 俠客行-九號蝦鋪 品牌VIS  by 石昌鴻

          《無染WURO 》品牌包裝設計 by 你好大海品牌設計


           


          Opportunities and challenges

          工作中最大的困難是?


           

          商業思維

          獨立設計師或是設計公司負責人,區別于職場設計師最大的特點應該就是商業思維了。一方面客戶和領導對設計的要求是不同的,客戶希望你的設計可以直接作用于商業結果,但領導更多只是希望你可以配合公司策略。另一方面,脫離了職場的設計師,要自己解決柴米油鹽,不具備商業思維,就會直接出局。

           


          瓶頸/未知/壓力

          這三項是不同的因素,但是把它們放在一起,代表著設計中最困難也最有趣的部分:挑戰未知。做好設計需要的能力很多,每條成長路徑上都會存在很多未知的歧途,如何管理好自己狀態,始終以昂揚斗志去面對這些壓力,是個永恒的話題。大家可以參考下面設計師們的回答和作品,去經歷他們各自的成長。

           


          人才/合作伙伴

          設計是一個鏈接性的工作,通過鏈接上下游發生作用。尤其是外包項目,經常無法參與到最初的立項探討中,導致面臨一場場“殘局”,所以就需要有強大抗壓力和靈活性的伙伴來組成“特種部隊”。幾位設計公司的負責人,都一致表達了對人才的渴求,希望本文可以幫到他們。更希望大家可以從本文中得到一句一詞的提示,讓我們做出更棒的作品,擁有更好的客戶。


           





          <婷谷>向陽而生-品牌設計全案 by 力虎廣告

          66NORD官網設計 by 是北瓜呀

           


           

          不好走的路上才有最好的風景,與大家共勉。


          文章來源:站酷  作者:站酷策劃

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

          如何設計更懂用戶的搜索頁

          資深UI設計者

          搜索模塊的邏輯原理
          搜索模塊的功能及流程分析

          “搜索”是目前互聯網產品中最常見也是最有必要的功能模塊,搜索一方面幫助用戶快速觸達自己想要商品/服務/咨詢等,另一方面作為平臺的重要數據入口可以獲取比較有價值的用戶信息。

          目前大部分產品的搜索模塊后臺邏輯和前端設計大同小異,但是不同的品類的產品又存在一些差異,從產品邏輯上分析基本原理如下圖,

          用戶輸入一個關鍵詞,搜索系統根據用戶的輸入的信息,篩選出系統認為用戶感興趣的內容,同時按照系統認定的重要性進行排序展示。簡單而言,搜索可以分為三步。


          Step1:對用戶輸入信息的過濾

          用戶輸入的關鍵詞首先要經過邏輯層進行非法詞過濾,錯詞糾錯,特定跳轉幾步操作

          非法詞過濾顯而易見就是用戶輸入的敏感詞匯會根據后端的非法詞庫進行判斷屏蔽,網上一般有現成的詞庫可以直接導入系統,不滿足的后臺可以根據產品屬性及業務需求再進行維護擴充。錯詞糾錯輸入查詢關鍵詞,用戶可能會輸入成拼音、或者錯別字,邏輯中有一套糾錯詞處理,當系統對比有錯誤時,會進行糾錯處理,最終輸出糾錯后的結果進行輸出。特定跳轉是后端將特定詞匯設置為特殊跳轉,后端需要維護的映射庫。比如雙十一的時候,輸入雙十一可能會直接跳轉到活動會場,而不是具體的某個商品。 


          Step2:根據用戶輸入信息對內容進行分析解讀

          經過三種異常詞庫的過濾后,關鍵詞會進入常規搜索詞庫。搜索詞庫是有限的,但是用戶的輸入卻是沒有限制的,怎么將無限制的搜索轉化為有限的詞庫,并且匹配到對應的結果呢?這里需要一個關鍵的步驟即分詞,分詞是將一個比較長的關鍵字拆分成多個合理的比較短的關鍵字,經過分詞非標準的關鍵詞就被轉化為標準的詞庫,而這些詞就會對應一些搜索目標內容,但這些目標內容并不全展示給用戶,展示給用戶的也不一定完全跟用戶搜索的相關,這里就有兩個跟搜索相關的兩個關鍵指標即準確率和召回率,準確率是指所有展示的內容中與用戶搜索相關的內容的占比,召回率是指所有與用戶搜索相關的內容中被展示出來內容的占比。準確率和召回率是一對存在矛盾的指標,搜索后臺會有調和這兩個數據相關的目標函數,后臺搜索優化的目標就是提高準確率和召回率,讓后臺與用戶搜索相關的內容都能盡可能展示出來。


          Step3:對解讀后的結果進行排序

          搜索系統標準詞庫都有與之現關聯的具體內容,每個具體內容是否包含關鍵詞決定是否展示這些內容,同時根據關鍵詞的權重給展示的內容一個分數,最終根據每個內容的分數進行排序,不同平臺的關鍵詞權重不一樣,這屬于平臺運營的機密,權重的高低直接影響目標內容的排序,也直接影響平臺的銷售額和用戶體驗。


          在前端設計看來一個簡單的搜索框,但是后端卻需要多層邏輯的判斷和輸出,最終實現業務與體驗的最優化。以上只是作為設計人員的簡單總結,方便我們做設計的時候更好跟研發人員溝通。 


          從前端功能流程上分析搜索模塊可以拆分為啟動搜索-輸入內容-獲取結果

          啟動搜索

          目前大部分的搜索入口分為頂部搜索框/底部導航/局部圖標,產品的屬性決定搜索功能的重要級,從而影響搜索入口的樣式,另外需要明確搜索在當前頁面中的的優先級從而明確搜索的樣式,底部是app的一個最重要位置,將搜索功能放在底部導航一方面突出搜索功能的重要級別,但相對于放在首頁頂部又不至于影響首頁的流量分發。頁面局部設置搜索圖標,相對搜索功能的重要級會低一些。頂部搜索一般是吸頂懸停,用戶對搜索的依賴性很高,此類搜索入口的功能也最完整,對設計的要求也最高。 


          完整的搜索框從功能點上分包括,掃碼/語音/圖片/文本等幾種搜索能力,設計時需明確搜索框自帶的功能點有哪些,功能點的優先級和關聯性,總結發現一般電商類服務類產品會比社交信息類產品的搜索更為明顯且搜索的功能點更多一些。


          輸入內容

          在輸入內容這個階段,用戶可能進行的操作是是輸入(語音/文本/圖片等)功能,選擇聯想關鍵詞,清除/修改文本功能信息展示上一般有搜索歷史,搜索維度,推薦搜索,默認提示詞等,歸納起來基本為關聯搜索,引導搜索,細分搜索這三種,目的都是一方面為了滿足用戶高效搜索的需求,另一方面實現平臺營銷策略。設計要兼顧這兩點,在滿足業務的同時給用戶更好的搜索體驗。

          以上搜索返回流程中兩大主流平臺有一些差異的原因

          第一種:搜索結果頁—搜索啟動頁-搜索入口,可能的原因:

                      符合移動端的流程可逆的操作習慣

                      營銷需要,返回至搜索推薦頁,多一層頁面的曝光機會

                      便于用戶觸發再次搜索的行為

          第二種:搜索結果頁—搜索入口,可能的原因:

                      用戶用取消操作,表達的是取消搜索模塊,故返回入口,同時也能再次調起

                      縮短返回路徑,更加高效,注重高效的操作體驗 


          獲取結果

          平臺屬性不同搜索結果頁的目標內容會有區別,除了目標內容的輸出外,搜索結果頁會對應的展示篩選條件和推薦,此時需要做到的是篩選維度清晰,業務核心明確,平臺特點突出

          在這個階段用戶的目的是在目標信息/商品/服務中進行對比選擇,獲得自己最想要(從平臺角度則是推薦給用戶)的。在設計搜索結果頁的目標內容時,需要注意信息層級的展示,比如電商平臺最突出價格,而咨詢分享類產品可能要突出關注度熱度等。

          大部分平臺都有自己的rank邏輯,rank邏輯是根據商品的相關因素綜合起來形成的一種排序邏輯,比如電商產品中的轉化率/銷量/點擊率等,而且會根據產品的不同階段去優化升級,目的是可以輸出更符合用戶心理的排序,從而更精準高效的滿足用戶,提升產品體驗。


          搜索異常狀態

          搜索異常的狀態一般有三種,1.搜索結果為空;2.智能糾錯;3.網絡異常等,

          搜索結果為空時一般需要空態圖和文案說明和引導,緩解用戶需求沒有達成的心情。智能糾錯,是在用戶輸入內容上的一種提示或糾正,如果用戶輸入的內容有問題或不夠標準,在搜索結果中會能給最貼切的搜索結果。網絡異常,需要考慮的是提示是在哪個階段告知用戶,用戶在沒有網絡的情況下仍然可以調起搜索啟動頁,此時提示用戶網絡異常會比在搜索結果頁告知用戶的體驗要好。


          文章來源:站酷  作者:周沐Zhoumu 

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


          什么才是設計體系?結構、原則與認知誤區

          資深UI設計者

          一、設計體系的三層一環結構

          下面是我提出一個VGLT-MO三層一環結構,幫助大家理解設計體系。

          • 愿景與原則(Vision & Principle),它們作為設計決策的參考,指導前行。
          • 指南(Guidelines),包含樣式指南(Style Guideline)、模式指南(Patterns Guideline)、內容指南(Content Guideline)等更多通過文字和圖像進行傳達的內容。
          • 庫與工具(Libraries & Tools),包含組件庫(Components Libraries)、工具包(Toolkits)、協同工具(Collaborative Tools)等可以直接進行使用的內容。

          包圍著這三層內容的一環是管理結構(Management Structure)與組織流程(Organization Process),它促進整個設計體系成為一個活的生態系統。

          我曾參與過國內某知名企業的設計體系建設過程,遇到了很多困難,但也收獲了更多的認知,了解到不能怎么做和應該如何做,進一步促成了本篇文章;因此我試著搭建出設計體系的通用結構,并且文章后面闡述其中的價值和如何去構建設計體系。

          二、設計體系的原則

          系統規則影響系統行為,穩定的設計體系結構促進產生穩定的設計體系,關于設計體系的原則我將其歸結為以下4點原則:

          1)形式上,通用卻靈活

          設計體系是獨立存在于現有業務外的,用可預測的規則進行構建和管理,指導方向一致性,而非每個人獨自開腦洞。

          但是規則并不是限制,當指導不足以傳達更佳的用戶體驗時就通過體系機制的設計,即時迭代設計體系。

          設計師可以更快地完成原型和迭代工作,因而更加靈活地去思考滿足需求的解決方案。

          2)關系上,整合但互通

          整合設計與開發,鏈接設計與實現的代碼,有效地將體驗的設計與落地的開發相結合;但又通過獨立化的模塊設計以及模塊間關系的設計,搭配良好的機制和協同工具幫助使用者更流暢地使用。

          3)組織上,開放共享且跨域同步

          通過組織流程的設計讓基于模塊化設計思維的組件、設計模式、內容策略等等能被盡可能多的人重復利用,提高知識復用率;并讓關于用戶的知識在組織中的設計師、工程師、產品經理、市場營銷人員等人中保持同步和流通。

          4)成果上,協同而一致

          通過良好的開發體驗,用設計開發的規范化指導,讓大范圍的開發與設計都能良好地匹配用戶心智模型和多設備多平臺需求,帶來優質且統一的產品價值傳達和用戶體驗實現。

          除了創建更高的可用性(Usability)之外,也能建立更高的可訪問性(Accessibility),讓體驗在如障礙群體、各類配置低下的設備、有法律與文化的國際差異等在產品多次迭代中也能更易達成一致(這些往往是較少被考慮到的內容)。

          三、不同設計體系的差異

          不同組織和產品的設計體系都會不一樣。

          設計體系有不同規模(Kholmatova,2017),簡單來說可以分為平臺級設計體系(如Apple的人機交互指南HIG, Microsoft的流暢設計體系FDS)和公司級設計體系(如Atlassian的Atlassian設計體系ADS;Salesforce的閃電設計體系LDS,Adobe的Spectrum),如螞蟻金服的Ant Design等)。

          設計體系的開放程度不一,而且有些設計體系并不對外開放(如Airbnb的設計語言系統DLS),而微軟的流暢設計體系則是全程開放。

          我們可以從實踐規則(嚴格/松散)、構造方式(模塊化/整合化)和管理機制(集中式/分布式)(Kholmatova,2017)。

          任何組織都能在其中找到合適的定位,有些設計體系極為嚴格,而有些反而得益于其松散性與靈活性;如Airbnb的設計體系整體上更為嚴格,擁有詳實的設計規范文檔、設計與開發有精準的同步流程、擁有嚴格的新模式入庫流程,詳實全面的設計文檔等;通過內網進行使用,并開發一系列的插件工具促進設計與開發流程。

          Airbnb的DLS中的規范文檔

          Airbnb內網中的DLS

          而TED只有兩名 UX 設計師和四名前端工程師專職負責設計體系相關工作,因此就更稍顯松散;不同的程度都是和自身組織的團隊文化和產品特征有關的,他們更加關注有效地實現產品設計目標。

          “我們鼓勵以正確的方式進行設計,而非一味強調一致性原則;頁面的性能表現對于我們來說更為重要,如果它無法有效地承載內容,我們會將其修改到能夠承載為止;一致性與模式化的信條對于我們來說無法成為驅動設計決策的關鍵要素?!薄狹ichael McWatters,TED UX 架構師

          TED的規范文檔

          是標準化還是松散化,更多依靠組織文化下的選擇。它們各有利弊。一個緊湊嚴格,利于精準,但有時較為死板,會限制設計師進行創造發揮;一個靈活適應,利于拓展和快速變更,但難以控制,它們都需要找到解決自身缺陷的方法。

          關于模塊化還是整合化,我們可以根據各自適應的產品特征進行抉擇。

          例如模塊化方式適用于:

          • 需要擴展與進化空間;
          • 需要適應不同類型的用戶需求;
          • 需要大量的可復用部件參與構建;
          • 需要多個團隊同步并行地參與構建。

          典型的例子包括電商產品、新聞類產品、在線教育平臺、金融平臺、政府信息平臺等等。

          而整合化方式則適用于:

          • 面向一個特定目標進行設計的;
          • 無需具備擴展性與適應性;
          • 需要在體系范圍之外進行風格探索的;
          • 部件復用率較低的;
          • 一次性的。

          典型的例子包括創意展示類頁面、一次性的運營活動頁面、作品集等等。

          當然有許多不同的特質讓每個設計體系各不相同,關鍵的是,我們如何找到適合的定位;而關于管理方式上的劃分,我將在第4章-如何構建設計體系中進行更多詳細的論述。

          四、關于設計體系的認知誤區

          知道設計體系是什么,更需要了解設計體系不是什么。

          關于設計體系有一些誤區,例如:

          設計體系是設計規范(Design Guidelines)嗎?

          許多人都會將設計規范與設計體系相提并論。但實際上,他們并不是一個層級的東西,或者更準確的說是設計體系包含了設計規范。

          設計體系是模式庫(Pattern Library)或組件庫(Component Library)嗎?

          模式庫的建立在設計體系內,而模式庫是記錄和共享設計模式的工具,只是設計體系的工具化和顯現化的部分;像Bootstrap這樣的工具包不被認為是設計體系,因為它們缺少一些定義設計系統的重要元素:模式庫、風格指南和設計語言。

          設計體系是否會扼殺組織內的創造力?

          不好的設計體系當然會,但好的設計體系往往會通過機制和流程,促進實際的創造力,因為來自終端的良好的解決方案可以更快被整個組織所采用,而不必擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。

          設計體系是一勞永逸的嗎?

          設計體系是動態的,永遠是隨著組織需求和用戶需求而變化的,一切說自己已經完成了設計體系的建設的人都是將靜態的設計規范曲解成了設計體系。



          文章來源:人人都是產品經理  作者:
          龍哩個龍

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


          設計體系的涌現:適應組織的需要

          資深UI設計者

          編輯導語:設計在產品中日常可見,但設計體系從何而來?很多時候,我們可以基于一套架構嚴謹、規則統一的體系框架,對產品表現層面的設計工作可以逐漸實現模塊化運作;本文作者分享了關于設計體系的整體詳細介紹,我們一起來了解一下。

          ——WHY 為什么?

          設計體系從何而來,為何出現?設計體系如何發展到現在的樣子?

          ——WHAT 是什么?

          設計體系是什么?不是什么?關于設計體系有哪些誤區?與設計規范、組件庫、模式庫的區別是什么?有哪些現存的設計體系?

          ——HOW 如何做?

          如何搭建自己公司的設計體系?

          ——FUTURE 設計體系的未來如何?

          這篇文章有大量我的個人理解,因此難免出錯或是不準確的地方。

          國內設計和前端界對Design System主要存在兩種叫法,設計系統和設計體系。

          看看百度詞條對兩個詞匯的解釋:

          系統,來源于古代希臘文(systεmα),英文為system,日文音譯,后引為中文,即形容若干部分相互聯系、相互作用,形成的具有某些功能的整體。
          體系,英文為structure,泛指一定范圍內或同類的事物按照一定的秩序和內部聯系組合而成的整體,是不同系統組成的系統。

          要了解Design System,首先就得了解到它一定不是一堆UI組件,不只是設計師的事;如果稱Design System稱為“設計系統”,則是把它當成“產品”存在了,過于靜態,失去了人之間的聯系,但恰恰是人之間的聯系才能促成優秀設計體系的生成。

          因此盡管原英文單詞不同,但依據實際表達的意思,本文偏向于認同“設計體系”的名稱,相信你讀完之后也會認同這樣的叫法。

          一、設計體系的涌現:適應組織的需要

          目前來說,設計體系尚未出現清晰的定義,我們可以看一些設計體系的專家的定義:

          “由明確的標準指導的可重用組件的集合,這些組件可以組裝在一起以構建任意數量的應用程序。”——Will Fanguy(2017,inVision設計體系專家)

          “一組相互關聯的模式和實例的共享,通過將一致地組織它們以服務產品目標。模式(Pattern)是我們用來創建界面的重復元素:如用戶流、交互、按鈕、文本字段、圖標、顏色、排版、微復制等;實例(Practices)是我們在團隊工作中如何選擇創建、獲取、共享和使用這些模式?!薄?Alla Kholmatova(2017,著有設計體系:數字化產品設計的系統化方法)

          “由個人、團隊或社區記錄和發布的視覺風格、組件和其他的庫,以作為代碼和設計工具,以便采用產品可以更加高效和有凝聚力。”——Nathan Curtis(2017,設計體系咨詢專家,幫助多個企業搭建設計體系)

          在本文綜合的理解下,我試著為設計體系下了更加清晰的定義:

          設計體系(Design System,也可以叫設計系統)是可重用組件的集合,由清晰的標準引導,通過機制化的組織流程和具象的指南與工具加以整合,以幫助開發者(設計、工程等)高效且一致地創建大量的應用,并且動態地確保用戶體驗的一致性。

          如果你之前不太了解設計體系,可能現在有點懵,沒關系,相信讀完我這篇文章,你一定就能了解。

          二、小故事:一個按鈕的旅程

          試想一下,現在你現在是UX設計師A1,我們現在因為某項用戶需求或業務需求需要處理。

          1. 那么最開始我們需要考慮是這個需求用按鈕還是用其他解決方案解決。最后我們決定了使用按鈕的方式。
          2. 然后再考慮一些視覺因素,例如框線、背景塊、描述、顏色、陰影、字體等元素,每個因素都需要考慮一遍……
          3. 再考慮頁面中的位置關系,在頁面靠左還是靠右?與四面保持多大間距?……
          4. 再加上互動因素,懸停的時候、點擊的時候、選中的時候、不可用的時候,再加上后續結果是跳出彈窗?打開新頁面?還是僅僅是頁面的小變化?……
          5. 嗯,不錯好像設計做完了,評審一下,大家似乎都同意了。然后交給視覺設計師C1處理視覺。差不多之后,再交到前端工程師小B1手上,啪啦啪啦敲一堆代碼,好像實現了。
          6. 驗收的時候又發現和最初設計并不一樣。前端怪你某個標注沒做清楚,然后就又拉著前端改改改……
          7. 如果又要做個按鈕,設計師A2與工程師B1之間又如何進行設計連接?工程師B2如何快速修改工程師B1的代碼?他們與組織中其他的設計師AN和工程師們BN又如何連接?……
          8. 又到某次軟件需要版本升級,需要對按鈕進行統一的改色和調整,不過之前的幾個前端到換到其他部門了,新的前端工程師B3發現軟件中的按鈕,盡管都是按鈕,但代碼都不相同,他花了非常多的時間找到了各個按鈕的代碼并逐一進行了更改……
          9. 而這些僅僅是一個按鈕,如果再加入表單、選項卡、標簽欄、搜索欄、樹形控件等等組件……停停停,已經腦溢血了。

          盡管A1設計師和B1工程師的自己的習慣可能類似,但由于參與人數的增多和任務量的增多,每個人都有自己的見解與習慣;考慮這一個按鈕中的每一種元素,回憶一下數學中的排列組合問題,最后將發現同一個問題的解決方案的組合情況將會產生成百上千甚至萬種可能,而這里很多都是重復工作。

          怎么辦?我們需要定義明確清晰的規則,讓不同的人都能為統一問題達成相對一致的解決方案處理,即達成設計工程化。

          設計體系便是一種解決辦法。但盡管是叫“設計體系”而不是叫“開發體系”,但這并不意味著這只是設計的事情;因此接下來,我將談談設計體系是如何誕生的。

          三、源起何處?——應對組織的挑戰

          上面的故事已經從側面體現出,當業務與用戶的需求迫使組織面對一系列的問題,迫使企業需要探索合適的解決方法。

          總的來說,設計體系的出現便是用來應對組織在敏捷、協作和債務處理等方面的需求。

          ——敏捷響應需求:在多設備、多平臺的現在,組織不可能選擇每隔幾年再更新一個全新的數字產品,因為這意味著在交互上用戶需要重新學習,在戰略上這種方式的不確定性因素過大,如果失敗就意味資源的大量浪費。

          就特性而言,數字產品不同于實體產品,往往需要盡快上市,最小成本檢驗,盡快迭代,以獲取更強的競爭力,而且以往寫的代碼也不會被磨損,需要定期進行維護;因此這些便對組織滿足用戶體驗的速度做出了要求,因此更多的組織逐漸采用如等以敏捷(Agile)和精益(Lean)思維為基礎的敏捷開發(Scrum)、設計沖刺(Design Sprint)等方法。

          ——復雜的協作鴻溝:對用戶來說,只需要點擊升級便可獲得最新的體驗,但這意味著這種體驗的即時在線化將體驗迭代的簡單交給了用戶,而復雜就留給了組織;UX設計師、前端工程師、產品經理、內容策略師們、可訪問性專家等等組成的組織結構和工作流程都需要得到適應性的改變,才能提供快速迭代的流程去完成版本管理、設計管理、債務管理等工作?

          Alex Schleifer(Airbnb設計副總監)也提到這樣的情況:雖然工具的提升幫助編碼的速率和設計的效率都在提升,但最終使設計生效的是多方面的協作的結果,然而原有方式越來越多暴露出在跨學科溝通上的問題,這些依然阻礙著產品創新以實現更佳用戶體驗的效率。

          ——債務大量累積: 這里的債務不是指經濟上的債務,在設計上,由于設計人員的個體差別和缺乏系統性機制促進設計經驗溝通,設計往往在長期的開發過程中提供了許多定制化的解決方案;在UI上可以體現為不同樣式的按鈕或顏色等、UX上可以體現為同一軟件上的交互邏輯混亂等,這造成了設計債務(Design Dept)。

          而技術債務(Technical Dept)亦是如此,為同一個問題,不同的工程師使用不同的代碼或是令牌標記,加大了代碼設計與維護、拓展的難度;同時,我認為其中還存在一個債務,我將其稱之為產品債務(Product Dept),不同類別的產品經理等負責產品定義等職能的人員為同一產品或業務功能提供了不同,但效果相似的產品解決辦法。

          而且無論你是互聯網公司,亦或是傳統產品公司,越是龐大的體系,人員就越細分,在整體設計上的知識就越分裂,就越有可能出現同一問題多個定制化解決方案的情況,這會讓出現在工程、產品、設計上的債務就越龐大。

          這些設計、技術、產品債務讓管理、維護都異常艱難;而且只要審視一下我們日常工作的周遭,就會發現債務其實無處不在;那些雜亂的視覺形象應用、那些不統一的工業產品材料與色彩、那些無準則的交互行為、那些不一致的反饋聲音、同一數字產品不同的功能模塊定義等等……

          時至今日,設備和用戶的多樣性都在激增,以往的標準、工作流程和基礎設施都難以支撐;我們用設計和開發應對的問題越來越多,變化也越來越多,但我們一直在定制化和通用化之間無序游離。

          可以在一些軟件中看到同樣的一個功能按鈕出現十幾種形式,而它們要解決的問題卻幾乎一樣;也可以看到那些拙劣的設計規范中,萬物歸為一種單調樣式,降低了開發成本,卻帶來用戶認知的困難。它們都難以維護,極大地阻礙了組織創造體驗、達成商業可持續和創新的效率。

          四、組織的應對?996還是一勞永逸?

          面對著這些問題,公司只能存在幾種選擇(Suarez等人,inVison):

          • A-不改變速度雇傭更多的人(通過內部雇傭或業務外包);
          • B-提升員工設計與開發的速度(個人能力的極致壓制,996、007);
          • C-改變工作的方式,創建通配式的解決方案,提高設計與代碼復用率以提升效率(如模塊化)。

          大部分組織為了滿足快速發展的需要,往往更多采用A和B的方式(例如各種各樣的業務擴充,產生了大量對工程和設計人員的需求,如阿里、網易、字節、美團等)。

          但提升人員,仍然不能解決定制化方案的拓展問題,仍然存在大量不可復用的方案,造成效率的浪費;好比毒素累積,治標不治本,當達到足夠的毒素累積之后,創新將寸步難行。

          如果不首先創新構建方式,就無法創新產品,這是非常簡單的真理?!狝lex Schleifer(Airbnb設計副總監)

          雖然組織內也一直在提升效率,但管理只能提升局部效率,工具才能帶來系統的變革。

          設計體系的提出并不只是為了解決用戶體驗的問題,而是適應組織內的開發需求。而通配式解決方案的方法則更具系統性、遠期性。這便是設計體系的源頭,模塊化(Modularity)是一個關鍵詞。

          五、設計體系的發展歷程

          早在福特的時代,“流水線”思維就將生產流程模塊化進而提升生產效率和生產一致性,形成大批量的工業化時代,形成了強勢的美國汽車工業;二戰之后,20世紀60年代,豐田作為日本汽車制造商的一分子運用精益生產的小批量生產方法,注重發掘工人的創造力,即時解決問題,響應需求,降低遠期浪費。 (E Ries, 2012)

          回到軟件開發上來。20世紀60年代,越來越多組織發現軟件發展的速度已經跟不上硬件的升級,軟件開發越來越容易緩慢、難維護且容易出錯。在開發上,預算超支、超時運行,在使用效果上效率和質量都很低下;在運維上,不符合要求、難以維護管理代碼,容易造成軟件無法交付。

          硬件與軟件之間的差距以及解決這個問題而造成的困境,軟件危機(Software Crisis)便出現了。

          沒人能對這些問題視而不見,開發者與設計師的先驅們開始探索解決方案。

          1968年,第一屆北約軟件工程(NATO)會議上,道格拉斯·麥克羅伊(Douglas McIlroy)提出了基于組件(Component-based)的開發方法,通過復用代碼來提高編程潛力的方法,減少編程的工作量,同時能幫助編程工作更高效、更易于擴展且靈活,提升軟件開發速度;因此這被認為是有可能是解決“軟件危機”的方法之一,這種方法可以算是早期的設計體系的基礎雛形。(軟件危機&INvision)——維基百科,關于軟件危機的描述

          而在設計界,也有先驅提出了類似方法。1977年,Alexander等人通過其書A Pattern Language,提出了模式語言(Pattern Language),期望用系統化的方法解決設計建筑、城鎮和建設方式的問題,幫助形成一種實現為250多種不同類型建筑的持續性方式(Koivisto,2019);這種語言通過共享共同的模式,用共同設計的方式將更多人納入設計過程。

          如果每個模式都是解決共同的問題,那么當面向同樣的問題時,用模式等方式快速應用以前的解決方法將可能是高效的工具;這里的模式(Pattern)便是用戶界面設計中的循環解決方式,模式庫是特定用戶界面上重復設計元素的集合。

          在網頁開發時代,網頁設計師用基礎的網頁架構就能搭載數以萬計的頁面。

          21世紀初,YUI和jQuery UI等庫的引入,為開發人員提供了一套小部件和模式的工具包,以創建更一致的網站用戶界面(Forst, 2016)(例如Bootstrap是Twitter開發的基于網頁解決方案的前端工具包,供設計師和開發人員使用)。

          但這些方法也會些有優有劣,例如Mary Collin就曾對使用Bootstrap開發的網頁進行綜合對比,結果發現Bootstrap容易導致成果缺乏獨特性,看起來外觀非常一致;但在另一方面,在移動端響應性和拓展性方面效果很不錯,因為足夠穩定。

          Mary Collin的一些網頁對比

          在現代,互聯網興起,尤其是移動互聯網的興起,降低了信息分發與復制的邊際成本和提供了龐大的用戶量;即時在線的網絡為數字產品的測試和快速迭代提供了可能,良好的用戶體驗能為企業創造的價值將遠超傳統時代,體驗的重要性迫使數字產品不得不用更快速的升級換代過程滿足用戶需求。——(俞軍,2020)

          但規范或庫本身是靜態的,依然具備過多的不確定性,并且缺乏對開發全鏈路的支持,尤其是未來的每一次的設計如何決策。

          因此進一步,一些通用設計資產(Design Assets)被逐漸固定下來,并輔以使用的規則描述,設計模式(Design Patterns)逐步形成,為協作而生,通過為重復的共同問題快速生成解決方案,并盡可能在整個組織內保持一致以提升效率。因為類似的原因和目的,也同時產生了例如樣式指南、設計語言、內容指南、甚至是品牌識別系統等等類似產物。

          在軟件開發問題上,設計規范和設計模式成為內部設計師們依靠復制粘貼進行傳播的文檔,亦或是前端工程們網上開源共享的模式庫(Pattern libraries)或組件庫。

          與設計模式不同,模塊化設計(Modular Design)引入了敏捷設計方法的思想;建立在以前的基礎上,讓解決方案的更快、更短的迭代,前端框架是提供特定解決方案和特定外觀和感覺的工具”(Frost,2013)。

          框架本質上是模塊化的,它們專注于單個項目或設計問題(Frost,2013);對于多個設計問題,框架、模式庫或模塊化設計本身不足以系統地使用,這樣的背景下,便迎來了設計體系的涌現。

          六、大量涌現的設計體系

          2013年,Brad Forst提出了原子設計(Atomic Design)理論為設計體系的出現奠定了一波理論熱度,提供了更加形象化的描述說明;這讓更多人意識到這些問題的存在,并且提供了易于理解且廣泛傳播的理論基礎和解決方案。

          Brad Forst,原子設計(Atomic Design)理論

          原子設計理論將交互元素似化學因子一般逐步拆分。

          • 在最底層級是原子(Atoms,例如按鈕、圖標的最小組件等);
          • 原子構成分子(Molecules,分子由兩個或多個攜帶自身屬性的原子組裝而成,并形成更實質性和功能性的組件,例如由表單標簽、輸入和按鈕組成的搜索表單);
          • 分子組成為有機體(Organisms,分子和原子組成的更大組裝體,是界面的一部分,如導航欄或標題);
          • 再組成為模板(Templates,將原子、分子和有機體等相對抽象的屬性放入情境中,接近最終解決效果,但更關注底層頁面結構);
          • 最后這些模板在設計師和工程師的協作下,變成實際的頁面(Pages)。

          這是一種逐步拆分式的模塊化方法。

          他建議用模式庫(Pattern Library,也被稱為用戶界面庫、組件庫、資產庫等)集合構成用戶界面的可重用組件,并通過指南(Guideline)指導如何創建,以進一步綜合了風格指南、流程指南、設計語言等等設計指南;包括他之內的幾位設計體系先驅都提出要進一步整合領域內語言,開始更多地使用設計體系(Design System)這樣的語言來代表類似的事物。

          理論如此,實踐永遠不會落下?;ヂ摼W的廣泛普及帶來用戶需求量爆炸,對公司來說,越來越多的業務量壓力和一致的體驗需求的迫使下,越來越多的企業推出了自家的設計體系。

          2014年伊始,Google推出了質感設計體系(Material Design System),類似的時間前后Atlassian搭建了Atlassian設計體系和Airbnb也在內部搭建設計體系(即后來的設計語言體系,DLS,Design Language System);在此之后,一系列公司跟進開始研究和開放自己的設計體系。

          例如Apple的人機界面指南(HIG),Microsoft的流暢設計體系(Fluent Design System)、IBM的碳設計體系(Carbon Design System),Salesforce的Lightning設計體系、Shopify的Polaris設計體系,甚至一些英國、美國、澳大利亞等公共部門也推出了自己的設計體系,如英國政府的GOV.UK設計體系。

          Google,Material Design System

          Microsoft,Fluent Design System

          Apple,Human Interface Guidelines

          IBM,Design Language

          而在國內,搭建的比較完善的有知名的螞蟻金服Ant Design設計體系,還有Element,以及View UI等中臺設計體系,以及許多存在于部門內部、仍然只是設計規范、或者設計體系不完全體的內容。

          螞蟻金服,Ant Design

          ——插個題外話,微軟的流暢設計體系(Fluent Design System)是我這篇文章最開始的起點,從簡單論述微軟如何統一用戶體驗聚焦到流暢設計體系。

          當然關于Fluent Design System的更多內容,我會在本系列文章之后,單獨出篇文章描述我的發現【稿子都差不多了,寫著寫著就寫成了設計體系系列文章哈哈】。

          我們現在知道設計體系是為了什么了,但在現在的階段,問題不是能搭建什么,而是如何能更好地搭建。

          “體驗工程的建設已經遠遠不止于一套設計規范或一套組件庫,他需要一套完整的系統來支撐,解決內部協作的一致性問題,解決設計系統更新的周期性問題,解決一群設計師與工程師如何規?;纳a各種業務 UI 的問題,從而最終解決用戶體驗一致性的問題“——Alibaba Fusion Design



          文章來源:人人都是產品經理  作者:
          龍哩個龍

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


          體系化表單設計-5步打造令人愉悅表單體驗

          ui設計分享達人


          前言


          2020年可以說是一個風險年,但更是一個機會年,全球各類資產都出現了大行情機會,市場的投資熱情再次被點燃。借著這股東風,在2020年年尾,我們開始了對公司金融產品的優化改造工作,希望通過改造提升產品的用戶體驗,配合來年的運營活動,提升產品的用戶數和活躍度。改造工作主要為優化開戶流程、提升社區氛圍、完善交易功能三個部分。后續我將通過系列文章對這次優化設計過程中的思考進行分享。


          表單作為平臺與用戶聯系最為緊密的一環,良好的表單設計可以帶給用戶流暢自然的用戶體驗,保證用戶情緒的正向增長,而混亂無序的表單則會引起用戶的負面情緒,影響甚至阻礙用戶操作的完成,降低用戶對品牌好感度和信賴度。對于我們這樣的金融產品而言,產品內存在著如開戶表單、出金申請表單、調整杠桿申請表單等形形色色的表單,如何將這些表單整理歸納形成一套完整的表單設計體系,帶給用戶統一、高效且優質的填寫體驗,是我們這次表單優化的主要的任務。


          系列文章中關于表單設計部分我將分為上下兩期來向大家分享,體系化表單設計(上期)主要介紹在項目中總結出的表單設計中的方法論,下期則是介紹方法論在我們項目中實際的應用,希望這次的分享能為你今后的表單設計提供思路與參考。



          1 認識表單


          1.1 表單的歷史


          表單在我們工作、生活中的使用由來已久,在還沒有互聯網的年代,表單就已經是人們收集和存儲數據、信息的重要手段,并一直沿用至今。如體檢時填寫的體檢表、入職時填寫的入職登記表、銀行開戶時填寫的開戶表都是使用的這種印刷的紙質表單。它們身上有很多設計可以作為重要的參考,幫助我們優化 UI 中的表單元素。


          表單是 UI 界面中最為常見的元素,它通常是用來搜集和呈現一些數據、信息和特定的字段。表單的應用極為廣泛,比如登錄應用時填寫賬號密碼、網上購物時完善訂單信息、OA系統中提交休假審批、修改個人中心信息時……都是在和表單發生互動。



          1.1 表單的構成


          表單的目的、內容、大小等雖然各有不同,但是表單的基本構成元素是相對固定的,在設計過程中,設計師需要合理組織這些元素,幫助用戶在填寫表單時,輕松愉快的完成,表單主要組成部分如下圖。



          1.標簽:告訴用戶此處相應的輸入元素是什么;

          2.輸入區:可交互的輸入區域,根據字段類型使用相應的交互組件;

          3.占位符:對當前項進行額外的信息描述;

          4.前置圖標(可選):描述文本所需的輸入類型和特征;

          5.后置圖標(可選):對輸入內容進行控制,如:下拉的展開與收起、清空;

          6.幫助(可選):提供表單內容的注釋或輔助類容,如:說明、注意事項;

          7.反饋(可選):告知用戶當前操作可能或已出現的問題,如:提交成功、錯誤提示、網絡問題;

          8.鍵盤(可選):在文本編輯時需要使用鍵盤,如:設備系統鍵盤、應用內置鍵盤;

          9.操作按鈕:操作按鈕是在表單的結尾,如:提交、下一步、清空所有信息。


          2 如何打造令人愉悅表單體驗


          在如今這個互聯網時代,我們幾乎每天都會接觸到形形色色的表單,作為用戶與產品鏈接的樞紐,表單設計的好壞會直接的影響產品的實際數據表現。好的表單結構清晰,交互合理,用戶能夠高效愉悅的完成表單填寫,為用戶節省了時間,同時也提高了自身產品的轉化。而差的表單往往信息邏輯混亂,填寫效率低,且容易讓人產生挫敗感而中途放棄,在無形中浪費掉了很多潛在商業機會。是什么造成了不同表單之間出現如此大的體驗差異,我們又該如何做才能設計出令用戶愉悅的表單呢?在實際項目過程中,總結出一套適用于移動端表單設計的路徑圖-通過做好五個步驟,設計出令人愉悅的表單。



          2.1 表單框架選擇


          合理的表單框架選擇是打造用戶友好型表單的基礎,在進行表單設計時,我們首先需要依照表單的使用場景和復雜程度,選用最為恰當的表單框架。確定好表單框架,也就決定了后續設計中表單信息如何組織以及呈現。我們將表單框架劃分為“錄入方式”、“標簽布局”和“按鈕邏輯”三個部分,在表單設計時通過對這三個部分的選用來確定最終的表單框架形態。



          2.2.1 錄入方式


          按照表單錄入方式的不同我們大體上可以將表單錄入方式分為“單步錄入”、“分步錄入”和“分級錄入”三種,在進行表單設計時需要根據實際情況選擇與使用場景匹配的錄入方式。


          1 單步錄入


          單步錄入是表單中最為常見的錄入方式,在一個頁面內呈現所有的錄入項,結構簡單,快速錄入、快速提交,適用于錄入項較少的表單。



          2 分步錄入


          相對于PC端而言,移動端手機屏幕尺寸較小,一份在PC端1-2屏就能完全展示的表單在移動端往往需要7-8屏。將一個需要7-8屏才能展示完整的表單放在一個頁面內讓用戶填寫,用戶容易產生抵觸情緒會造成表單完成率的降低。


          為了提高用戶填寫效率,減少用戶的抵觸情緒,我們可以將一個冗長的表單拆分成多個步驟,分步錄入。通過拆分成一個個步驟,讓表單信息呈現更為清理有條理,并且能引導用戶逐步填寫完成表單錄入。



          當表單處于以下4種場景時選擇建議選用分步錄入模式:


          1.表單錄入項過多,在一個頁面內已經不能合理清晰的組織傳遞信息。

          2.表單內容的錄入方式存在較大差異,不適宜在一個頁面內進行展示。

          3.表單錄入項在業務上存在先后順序,只有先完成上一步字段錄入,才能夠進入下一步。

          4.在業務上很重要的表單,為了讓用戶能夠沉浸、快速的完成表單填寫時。


          分布錄入模式下步4種步驟導航選擇:


          1.文字導航:當表單為2步錄入表單時,我們展示步驟條帶給用戶的引導意義并不大,通常這種情況下我們會選擇省略掉步驟條,只展示當前步驟名稱,給予用戶提示。


          2.步驟條導航:當表單錄入步驟為3-4步時,我們可以在頁面頂部放置步驟條顯示所有步驟內容標題,用戶通過步驟條能夠對表單有一個清晰的預期。


          3.雙層步驟導航:當表單錄入步驟大于4步時,受限于移動端屏幕尺寸,橫向上不夠容納步驟數太多的步驟條,這時我們可以其中某些關聯的步驟歸納為一個大步驟,形成雙層步驟導航。


          4.進度條導航:當表單錄入步驟大于4步,又擔心雙層導航給用戶傳遞出表單極端復雜的印象,勸退用戶。這時我們可以使用進度條導航,用百分比進度條來展現表單填寫進度。



          3 分級錄入


          分級錄入大家可能相對較為陌生,分級錄入在B端產品中會有相對多見,一般運用于有明顯上下級關系的表單,如項目管理工具中新建任務表單,在新建任務的同時還能新建下屬子任務。又如客戶關系管理軟件中,新建訂單的同時新建下屬的訂單明細。我們可以將使用分級錄入模式的表單視為兩張表單,子表單添加的數據會回顯到主表單上。



          2.1.2 標簽布局


          標簽用于提示用戶需要輸入的是什么信息。合理的標簽布局結構,能夠提高用戶的閱讀效率,還能降低信息填寫時的錯誤率。常見的標簽布局形式有:左右結構、上下結構和浮動結構。不同的標簽布局都有各自的優點和缺點,我們需要根據項目實際情況來選擇最合適的標簽形式。


          1 左右結構


          左右結構是目前最為常見的標簽布局形式,左右結構中標簽和輸入區域在一行內排布,其中標簽位于左側且居左對齊,輸入項位于右側有居左和居右對齊兩種對齊方式。


          優點:節省縱向頁面空間,在移動端有限的頁面空間內能展示更多的錄入項。


          缺點:標簽的長度無法確定,視覺上顯得參差不齊,表單的信息瀏覽和填寫效率一般,標簽橫向展示空間有限,對于多語言適配場景不太友好。



          2 上下結構


          上下結構也是我們能夠經常在表單中見到的標簽布局形式,上下結構中標簽位于上方且居左對齊,輸入區域位于下方也為居左對齊。


          優點:用戶的視覺瀏覽路徑相對于左右結構來說較短,擁有較強的信息瀏覽和填寫效率,標簽橫向展示空間充足,對于多語言適配場景友好。


          缺點:占據縱向空間多,一屏內能展示的錄入項較少。



          3 浮動結構


          Material Design中文本錄入的標簽形式就是選用的浮動結構,在浮動結構中標簽和提示文字合二為一,正常狀態下,標簽位于輸入區域內部原本提示文案的位置,當用戶輸入時,內部的標簽就會上移為文本輸入讓出空間,完成填寫后標簽和輸入文案上下排列展示。


          優點:結構簡單,視覺干擾少,信息瀏覽和填寫效率高。


          缺點:填寫項過多時,表單信息傳遞不夠清晰。



          4 內部結構


          內部結構相對于前面3種結構較為少見,比較長出現在登錄場景,在浮動結構中標簽和提示文字合二為一,正常狀態下,標簽位于輸入區域內部原本提示文案的位置,當用戶輸入時,內部的標簽就會消失,完成填寫后只展示輸入文案。


          優點:結構簡單,視覺干擾少,聚焦于操作。


          缺點:只適用于如登錄等錄入項極少的場景,一旦錄入項變多,由于錄入后不展示標簽,將導致用戶后續很難判斷輸入的信息是否準確。



          2.1.3 按鈕邏輯


          按鈕作為表單的重要組成部分之一,合理的按鈕邏輯能夠為用戶順暢完成表單填寫提供幫助,表單的按鈕邏輯主要由按鈕的位置和按鈕的點亮邏輯兩部分組成。


          1 按鈕位置


          按鈕在頁面中的位置情況主要有以下3種:


          1.頂部按鈕:以文字的形式固定在頂部導航欄的右側,頂部按鈕尺寸較小,因為它所占空間有限,因此在操作上相對來說不便于點擊。所以這類頂部按鈕更適用于「編輯頁面」,需要用戶謹慎操作。


          2.表單底部:按鈕跟隨表單放置于表單的最下方,根據表單內容縱向空間的大小而上下移動。因為表單內容較多時,容易下沉過多而導致按鈕不可見,所以將按鈕放置于表單底部更適用于當表單錄入項較少不足半屏的場景。


          3.設備底部:操作按鈕常駐在設備底部展示,適用于表單錄入項過多的情況,在表單設計時可以盡量將必填項放置在表單前面,用戶填完必填項后就可以點擊操作按鈕提交或者進入下一步,而不用滑動到表單底部再進行操作。



          2 按鈕點亮邏輯


          1.當表單錄入項較少時,且有明確預期按鈕何時可用,可以先置灰主按鈕,完成必填項填寫后再點亮主按鈕。


          2.當表單錄入項較多時,且用戶不清楚為什么按鈕不可以用,此時按鈕可以常亮,并在用戶點擊時給予反饋,告知錯誤原因。



          2.2 表單信息梳理


          在確定好表單框架以后,對于表單內容信息的進行有效的組織也尤為重要,特別是對于一些結構復雜、錄入項多的表單,如果不對信息進行組織,很容易顯得繁雜混亂,容易讓用戶在一開始就產生抵觸的情緒,甚至選擇放棄。那么如何合理有層次的組織信息呢?



          2.2.1 簡化表單,聚焦核心


          我們在設計表單時潛意識里都想要從用戶那里獲取到更多的信息,表單中因此出現很多必要性較低的錄入項,表單也因此變得冗長,讓人第一眼就生出「好多信息需要填,好麻煩」的沉重感,在填寫表單之前就萌生退意。我們在進行表單設計時需要保持克制,聚焦于表單的核心任務,讓表單盡量短而美。那么我們要如何為表單減負,可以嘗試以下方法。


          1 減少表單中的多余字段


          表單中每多一個錄入項需要填寫,都有可能會失去一部分用戶好感度甚至流失一部分用戶。在設計時我們需要判斷某個字段信息對于用戶來說是否有必要在表單中進行填寫,盡可能的刪減掉額外的無用字段。例如注冊表單,如讓用戶使用郵箱注冊,那么用戶的姓名字段是否是注冊的必選項?如果不是必選項是否可以在之后的信息完善中進行填寫。


          2 合并表單中的同類字段


          在表單中時有一些信息他們本身緊密相關,我們完全可以視情況將其合并為一個錄入項,來減少不必要的錄入操作,達到簡化表單,提升錄入效率的目的。合并錄入項要結合實際的使用場景以真實的提升表單體驗為目的,而不是一味的追求表單的最簡化。


          3 隱藏表單中的低頻字段


          根據用戶使用數據,適當將使用頻次不高、或者提供給專業用戶的高級表單項隱藏起來。例如一份表單中有一個填寫項,90%的用戶都不需要填寫,那么默認收起。保持表單的簡潔,讓絕大多數用戶快速完成,避免大量的表單給用戶的焦慮,而又滿足了小眾用戶的需求。



          2.2.2 先易后難,循序漸進


          根據沉沒成本的定義:人們在做決策時,受到了自己過去所投入的時間、金錢、精力等因素的干擾,對于先前付出了投資的事情有更強的忠誠度和繼續投資的意愿。進行流程設計時也可以遵循這個原理,將容易完成的表單放在前面,這樣做有3個好處:


          1.簡單的表單更容易激起用戶的填寫欲望,用戶會迫不及待地去完成。相反,用戶一開始就看到過于復雜的表單,很容易被嚇到,從而放棄整個任務。

          2.用戶通過完成簡單的表單,可以增加自信心,即使后面的表單變復雜了,用戶也更有耐心去完成。

          3.當用戶將前面簡單的表單完成后,放棄整個表單的機會成本就變高了,即使后面碰到較難的任務,用戶放棄的幾率也會降低。



          2.2.3 信息分組,一目了然


          當我們我們設計的表單字段內容較多時,需要合理的對字段信息進行分組,這樣整體看起來更加有組織性。接近性(格式塔原理)原則告訴我們: 相互靠近的物體被認為比相互距離較遠的物體更有關聯性,這樣能使設計界面層次有序,視覺清晰,減少視覺噪音。分組時需要注意:


          1.內容屬性相近或有關聯性的放在一組。

          2.根據信息的重要性及難易程度排列分組,將選填的表單內容靠后



          2.3 錄入操作提效


          在表單錄入設計階段,我們需要明確認識到一點,用戶在面對一份表單時往往沒有我們想象中的那么有耐心,復雜繁瑣的錄入操作可能會直接勸退用戶。我們需要做的就是化繁為簡,思考如何給用戶減負,讓用戶簡單高效的完成表單錄入。表單錄入操作提效有一些切實可行的方法,下面請我將一一向分享。


          2.3.1 設置默認值


          對于用戶而言,填寫信息永遠都不是一件有趣的事情,在對用戶足夠了解的前提下,我們可以選擇為表單中的部分錄入項提前設置合理的默認值,節省用戶的操作時間。默認值的設置不是一個隨性發揮的過程,而是基于用戶行為和數據的理性判斷,并且也不是每個字段都適合設定默認值。關于如何設置合理的默認值,什么字段適合設定默認值,下面幾點可供大家參考:


          1 自動填入已有信息

          在一些業務場景,會使用到用戶之前在其它表單中已經錄入的信息,此時在填寫新表單時,可以默認帶入之前的數據。


          2 自動填入關聯數據

          如果用戶正在填寫的內容有相關的關聯數據,可以默認帶入。如我們在填寫訂單時可以默認帶入該訂單關聯的商品基礎信息。


          3 系統自動獲取數據

          基于移動端設備的能力,我們可以在用戶開放權限的情況下獲取一定的用戶信息(位置信息、電話區號、運動數據等),在特定情況下默認填寫,如滴滴通過GPS定位自動幫用戶填入上車位置。


          4 經驗預判填入信息

          像電話區號、證件類型、國籍等用戶錄入結果相對固定的字段,可以根據情況提設置合理的默認值。



          2.3.2 減少手動輸入


          相較于PC端而言,移動端設備屏幕尺寸較小,虛擬按鍵的輸入效率遠不及實體鍵盤,在移動端手動輸入的成本較高。因此,為了打造便捷優雅的操作體驗,移動端表單需要盡量減少用戶的手動輸入。以下方法可以減少手動輸入。


          1 聯想輸入

          聯想輸入是給予用戶輸入字段的自動補全功能,用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇,減少用戶的輸入成本,提高用戶操作效率。


          2 替代輸入

          對于表單填寫過程中可以固化選擇的信息,應讓用戶進行選擇操作以代替手動輸入,盡可能地讓用戶減少輸入成本。


          3 歷史記錄

          一份用戶可能會多次填寫的表單,我們可以提供用戶的歷史輸入項供其選擇,如滴滴的打車頁面會將我的常用目的地放置在目的地輸入框的旁邊供我快速錄入。


          4 新型組件

          一些新型的交互組件的使用能夠簡化信息錄入的操作,例如滑塊組件等。



          2.2.3 減少頁面跳轉


          在填寫表單時如果填寫項需要頻繁的頁面跳轉會使得整體的填寫效率變低,增加用戶的操作成本。在進行表單設計時應盡量規避這種頻繁的頁面跳轉,選用更流暢靈活的交互方式。


          1 選項露出

          在網頁端表單設計中,用戶在表單填寫中需要對選項進行選擇時,常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中,觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時,當選項少于8時,在表單中直接顯示所有可選項,當選項超出過多時則在列表浮層中進行選擇。


          2 減少跳轉

          在表單填寫中我們期望用戶保持專注,盡量避免產生引導用戶離開當前頁面的填寫交互,這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。



          2.3.4  智能錄入


          1 OCR識別文件內容

          對于一些標準證件類信息的錄入,可以通過OCR識別文件內容。當用戶上傳圖片后,運用圖像識別技術提取關鍵信息并自動填入結果。值得注意的是,如果圖片不清晰或存在水印,將大大降低識別準確度。此時應提供修正渠道,讓用戶可以逐一校對并修改文本內容。


          2 號碼認證

          短信驗證碼升級方案。直連三大運營商,一步校驗手機號與當前SIM卡號一致性。優化注冊/登錄/支付等場景驗證流程,有效提升拉新轉化率和用戶留存率。不做數據加工與號碼精準營銷,保護用戶隱私。



          2.3.5  聯動鍵盤


          為了避免讓用戶頻繁的跳入跳出相同類型的輸入項,首先整合表單的信息字段,將同類型的字段進行合并,同時結合輸入控件,設計聯動式組件,讓用戶在表單輸入時更加高效。



          2.4 設計細節把控


          設計不是簡單的元素拼湊,深入下去,有很多細節需要推敲,細節應該是含蓄的,包含在整體之內。好的細節設計不容易被用戶的眼睛直接發現,但是會讓用戶與產品的交互過程變得通順、舒適,概括來說就是潤物細無聲。對應到表單設計上,我們需要通過表單設計中的細節把控,讓表單錄入這件事變得簡單、高效。


          1 必填與選填

          當表單中同時出現必填項和選填項時我們需要對其做出區分,避免用戶不知道哪些字段必須填寫、哪些字段可以選擇性填寫。沿用通用符號習慣,在表單中我們往往使用 * 號來標記必填項。但是當表單中的必填項多于選填項時,大量的 * 號會增加用戶的認知負擔,面對這種情況,我們可以使用暗提示來標記選填項幫助用戶識別。



          2 號碼組合規律

          如電話號碼、銀行卡號這類有數字組合規律的號碼字段,我們可以沿用它們在線下的數字組合規律,通過空格對號碼字段進行劃分,幫助用戶校驗和閱讀。



          3 密碼保護

          出于保護用戶賬號安全考量,我們在進行密碼輸入時通常使用隱暗文字的方式來保護用戶賬戶安全,但是暗文字的顯示方式會讓用戶無法確認密碼信息。因此我們可以在輸入時,讓輸入字段短暫顯示,保持1秒然后再轉變為暗文字,這樣既可以讓用戶明確內容,也保證了用戶的賬戶安全。



          4 符合心理預期

          我們在進行表單設計時,輸入區域的長度要符合心理預期,需要預判填寫內容長度來確定輸入區域的長度。這樣不僅在體驗上一致,而且在視覺體驗上更加愉悅。



          5 對指令有明確的稱謂

          用戶應該對他們的操作所帶來的結果非常自信,使用“提交”、“注冊”、“立即支付”、“創造賬戶”等確定性文案來描述用戶將采取的操作。



          6 錯誤信息就近反饋

          報錯信息應當一目了然,從用色、圖標到文本都應當起到高亮的效果,而且報錯信息應當靠近輸入框,而非表單的底部或者頂部或者按鍵旁邊。



          7 防止輸入框的遮擋

          在設計主要由文本輸入框構成的表單頁面時,要考慮鍵盤出現可能會遮擋輸入框的情況,我們需要把控件放在scrollView上,當鍵盤會遮擋輸入框時,則表單滾動。



          8 指導性錯誤反饋

          對于異常情況不能只是冷冰冰的告知失敗,這樣容易給用戶帶來挫敗感,且缺少下一步操作指引。錯誤反饋不應該只著眼于結果,錯誤反饋的闡述角度應該是引起用戶關注、讓其快速了解出錯情況,并指導如何處理。



          2.5 整體體驗提升


          經過前面幾個步驟,表單整體形態已經確定,最后一步我們需要從整體體驗的角度對表單進行完善和調整。包含表單的容錯性考量、表單流程閉環的打造、視情況而定的趣味性設計。


          2.5.1 表單容錯性考量


          即便你的產品90%的時間都運行良好,但是如果在用戶需要幫助時置之不理,他們是不會忘記這一點的。——《Getting Real》


          容錯性概念源于計算機領域,容錯性是指計算機系統在發生故障的情況下,依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。延伸到互聯網產品設計領域,容錯性的范疇更為寬泛,包括降低用戶操作的出錯率、及時提供糾錯幫助、提供解決方案等內容。


          容錯設計與用戶體驗息息相關,我們在表單頁面設計時也需要進行容錯性考量,盡量避免用戶錯誤操作的出現。當用戶出現錯誤操作時,幫助用戶識別、診斷,及時反饋問題所在,并提出有效的解決方案,幫助用戶快速從錯誤中恢復。讓表單填寫流程更順暢,給用戶帶來更優的用戶體驗,關于表單容錯性設計可以從以下幾個方面來進行。



          1 引導與提示

          引導和提示要突出表現,從而引起用戶關注,確保用戶在操作前能注意到引導或提示信息。引導與提示用語要簡單且易于理解,當重要或操作不可逆時,要詢問用戶讓其知道這樣操作的后果。


          2 限制操作

          如何從設計上避免用戶出錯,限制是一種非常必要的方式,可以通過限制用戶的某些交互操作或者增加某些操作的難度來對用戶操作進行限制避免用戶出錯。


          3 反饋與幫助

          當用戶出現填寫錯誤時,及時的反饋錯誤并提供糾錯幫助,出錯信息應當用清晰準確且用戶易于理解,能夠對用戶解決當前問題提供建設性幫助。


          4 錯誤恢復

          允許用戶犯錯,操作者能歸夠撤銷以前的指令,幫助用戶在犯錯以后能夠快速回到正確狀態。


          2.5.2 表單填寫流程閉環


          表單的終點并不是提交,一個好的表單設計需要兼顧考慮用戶填寫前的引導、填寫時的及時校驗與幫助、還有填寫后的整體流程體驗,為用戶提供完整的、形成閉環的表單填寫體驗。


          舉個例子,當我們設計的表單需要用戶準備如身份證、銀行卡這類的證件時,需在表單填寫前告知用戶,避免用戶填寫途中才發現證件未準備,導致用戶填寫流程中斷。再如,用戶在填寫完證券開戶表單后,其實還需要通過審批后用戶才能進行入金交易等操作,這時我們需要一個結果頁來告知用戶表單提交的結果狀態和下一步的操作指引。



          2.5.3 最后,再增加一點愉悅度吧


          表單設計并不一定需要是嚴肅且正式的,在表單設計時可以嘗試引入一些趣味性的元素,研究表明,更大的文字輸入框、適度的留白空間、優雅的動畫效果、趣味性界面設計會讓人心情愉悅更有填寫的欲望。


          例如bilibili的登錄頁面,在用戶輸入賬號時上方的卡通形象是睜眼的,當切換到輸入密碼或者驗證碼時卡通人物會有一個捂住雙眼的動作十分有趣,這樣的趣味性設計能夠在一定程度上緩解用戶在填寫表單時的焦慮情緒,并增加對于bilibili保護賬號安全的信賴感。



          總結


          以上就是我對于移動端表單設計的一些歸納和總結,過往的項目中自己設計大量的表單頁面,走了不少彎路犯了不少錯誤,但也通過項目不斷的反思總結,收獲不少的關于表單設計的經驗。在這里將項目中關于表單的一些思考和經驗分享出來,總結出自己的一套關于表單設計的方法論,也是希望能夠對正在進行表單設計或者即將進行表單設計的你提供一點點參考與幫助。

          文章來源:站酷  作者:Yone楊

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



          不同場景下【用戶提示】的設計原則

          資深UI設計者

          不同場景下用戶提示的設計原則


          什么是提示?提示,指給予題型和解釋。提示指啟示;提起注意。映射到現實生活中,教學樓“請保持安靜”、廁所的標示提示、飯店里禁止吸煙的牌子都是提示,是用來提醒人們注意自己的語言、行為


          根據不同到使用場合這里梳理了5中提示操作的使用控件:分別是彈框提示、常駐提示、通知、全局提示、徽標提示,這五種提示方式承載的信息量、優先級和用戶操作場景各有不同


          下面分別介紹這5種提示控件的使用場景:


          一、彈框提示Modal


          使用場景:

          需要用戶處理事務,又不希望跳轉頁面以致打斷工作流程時,可以使用在當前頁面正中打開一個浮層,承載相應的操作。

          另外當需要一個簡潔的確認框詢問用戶時,能夠讓用戶清晰的知道自己的操作,并且進行二次確認



          設計原則:

          聚焦:使用戶集中注意力確保任務得到解決,對話框一旦出現,應當呈現在頁面上方的視覺層。

          清晰:對話框應直接展示信息,并帶有相關或上下文信息響應用戶任務或操作。


          控件類型:

          1、功能對話框:

          • 除標題、純文本內容和按鈕外,還需要承載更多復雜信息時

          • 可配置單選框、復選框、列表、穿梭框、圖片、頭像、插畫、視頻等

          2、通知對話框:

          • 用于警示、緊急、或簡單的二次彈窗確認。

          • 按鈕文案需承接上下文表述,并準確引導用戶行為,如“確定”、“取消”、“刪除”。

          • 簡單的消息提醒時或不可返回的操作,只提供一個按鈕用于關閉,如“知道了”“刷新”。

          3、選項對話框

          • 內容不足以構成單獨頁面或不希望跳轉新頁面的對話框,多使用于搜索、設置、內容選擇;

          • 需要完成的一系列任務操作,被選擇后立即生效,無需進行確定反饋; 



          二、常駐提示 Notice


          使用場景:

          常駐提示是一種非阻礙式的信息展示,它不打斷用戶的當前操作,一般停留至頁面某個位置(優先頂部),非浮層的靜態展現形式,始終展現,不會自動消失,用戶可以點擊關閉。


          設計原則:

          直接:當前頁面需要向用戶顯示需要關注的信息時,常駐提示顯示,要求用戶立即注意;

          重點:常駐提示引起用戶注意,以確保其內容得到解決。


          控件類型:

          常駐提示屬性包括常規提示、成功提示、警示提示、錯誤提示四種。

          普通提示:建議用于展示背景條件、政策信息、規范要求、當前狀態等客觀內容。

          成功提示:建議用于展示已完成操作的成功狀態。

          警告提示:建議用于展示可能會導致某種后果的警示性文本。

          錯誤提示:建議用于展示一個信息組的報錯文本,如表單中同時滿足幾個條件時觸發整體報錯,可用此樣式。



          三、通知Notification


          使用場景:

          在系統四個角顯示通知提醒信息。經常用于以下情況:

          • 較為復雜的通知內容。

          • 帶有交互的通知,給出用戶下一步的行動點。

          • 系統主動推送。

          設計原則:

          提示文本內容以及交互方式盡量準確、清晰、簡明,保證用戶在其消息自動消失前了解提示信息或做出交互。


          控件類型:

          1、基礎樣式:分為基礎文字通知、基礎文字通知(帶操作)

          2、根據業務需要在區域內填充內容或操作類組件的通知。



          四、全局提示toast/ Message


          使用場景:

          通常出現時顯示幾秒后自動消失,或者數據正在加載時顯示,提醒用戶已經完成的動作,或者已經達成的目的,是用戶完成動作后或者異常情況下的提示(pc端叫 Message,移動端叫toast實質上都是全局提示是一個控件)


          設計原則:

          在不跳轉頁面打斷用戶工作流程的前提下,提供成功、警告和錯誤等反饋信息。不打斷用戶操作


          控件類型:

          1、刷新頁面時,提示更新的條數:

          2、收藏或者其他操作,提示用戶操作成功:



          五、徽標提示 Badge


          使用場景:

          紅點、數字或文字,一般出現在通知圖標或頭像的右上角,用于顯示需要處理的消息條數,通過醒目視覺形式吸引用戶處理。


          設計原則:

          跨平臺:可適用于 Windows/macOS/iOS/Android 平臺的所有套件產品,為產品提供一致的設計體驗,使用戶在不同端使用產品時,都可以擁有流暢高效的使用體驗。

          直觀:通過清晰醒目的視覺形式告知用戶狀態,吸引用戶關注和處理。


          控件類型

          1、點狀徽標

          當功能模塊更新、信息狀態為未讀、人員在線協同、信息量變化且無需告知具體數量或性質時,使用點狀徽標突出狀態

          2、字符徽標

          內容的信息量發生變化,且需要明確告知新增數量時

          3、圖標徽標

          在某些功能場景中,作為特殊狀態提示使用

          4、角標徽標

          通常出現在列表、卡片上,強調和突出其特殊狀態,其主要作用是標記,或吸引用戶的注意力,提示用戶關注該事物或事件



          總結

          簡單的總結,并不是非常全面,還有很多需要繼續挖掘的技巧,還有很多需要學習的東西;有一點能夠肯定的是,要從實際的用戶場景中去考慮問題,用戶體驗就必須站在用戶的角度,不能為了設計上的美感,而讓增加用戶學習成本,好的體驗應該就是用戶一眼就能看懂,操作簡便。




          文章來源:站酷  作者:郭大毛


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



          小米商城APP首頁設計全面解析!

          ui設計分享達人

          前言 



          互聯網產品首頁是與用戶進行交流的第一步,首頁設計不僅代表著一家企業的形象,還會直接影響公司的業務營收和口碑。


          本文將深度解析“小米商城”APP的首頁設計,分析B2C模式下的自營電商是如何通過設計打造品牌感,增加用戶參與感,從而促進產品的銷售轉化。



           產品定位 



          了解一款APP產品首先要了解它的產品定位,從小米商城的slogan“讓每個人都能享受科技的樂趣”不難看出小米的產品定位是性價比高的科技類產品。

           

          另一方面,從商業模式來看,小米商城是B2C自營電商,與其他B2C自營電商平臺不同的是,小米主打高性價比,以好口碑深入大眾,撬動市場,以互聯網思維賣產品,把硬件產品當互聯網軟件產品賣。

           

          由此可見,科技、高性價比是小米商城產品定位的兩大關鍵詞。



           目標用戶 


          目標用戶是產品模式和功能制定的重要考慮因素,小米商城的目標用戶可以分為三類人群:


          1、米粉用戶


          這類用戶是小米的忠實粉絲,也或許是雷總的粉絲,他們認同小米文化,喜愛小米產品,熱衷購買和傳播小米產品,是小米商城最有價值的用戶群體。


          2、科技發燒友


          這類用戶本身就是科技愛好者,喜愛探索新鮮前沿的科技產品,熱衷購買科技類創新性的產品,對于深度發燒友還會專研參數配置,并會在論壇探討分享。


          3、追求小資用戶


          這類用戶追求品質,喜愛有設計感的產品,如果了解到小米有什么產品好看又好用,他們會為了保證品質和服務,選擇從官方購物平臺購買。



           全品類商城與自營商城設計差異 


          雖然了解了小米商城的定位與目標用戶,但還需要從產品的商業模式上去推導設計,比如淘寶與小米商城的首頁設計大有不同,原因就是因為商業模式不同,致使產品的設計存在差異。


          1、全品類與自營首頁設計區別


          自營類商品其實是全品類商城的一個分支,全品類商城首頁衍生了很多獨立平臺,所以全品類商城首頁設計形式上更注重流量分發,而自營類是垂直領域,所以會更突出商品,并且創造商品賣點,打造爆款。



          全品類電商產品因為品類眾多,用戶長時間使用會形成“逛”的習慣,從運營的角度,首頁運營板塊就會以千人千面的形式出現各類產品,所以首頁在設計上需要放置更多的產品,甚至要不停的變化產品,以覆蓋到用戶的需求點。 

          而自營類電商產品,因為品類較少,用戶很難逛起來,也是因為用戶使用自營類產品本身就是帶有目的性的,這樣用戶通常會是“找”的行為,所以首頁的功能上通常會推薦主題產品和打造爆款。 




          2、自營類商城設計上注重品牌


          自營類商城運營的是品牌,能發展壯大的自營電商都成功塑造了品牌形象,所以在產品設計上突出品牌,會與用戶建立信任感,提高轉化,同時也能做到與其他電商的差異化設計。


          下圖所示,小米商城、小米有品、網易嚴選三款產品,為了能快速與用戶建立品牌認知,導航欄都放了自家的logo。


          另外,還可以從色調,板式,服務等等各個緯度突出品牌形象,總之在產品設計上要與品牌形象貼合,讓用戶處處能感知到品牌。


          導航欄設計注重品牌


          了解產品定位和目標用戶以及平臺的商業模式,對我們分析一個產品非常重要,這樣更容易從正確的方向理解產品的設計,下面我們帶著對產品定位和目標用戶的理解,開始對小米商城APP首頁設計的全面解析。



           小米商城-首頁解析 



          B2C模式下的品牌電商,首頁設計需要做到可以讓任何一款產品成為爆品,也不會讓任何一款產品出現庫存滯銷。 

          小米商城首頁的設計與運營緊密聯系,有帶貨能力超強的模塊,如小米眾籌、小米秒殺,也有能快速推廣新品的模塊,如小米新品、新品發布,這些都是品牌電商重要的組成部分。 


          接下里我們從品牌DNA、布局體驗設計、金剛區設計、登錄前后設計、參與感設計等方面對小米商城首頁進行解析。


          1、品牌DNA


          當前小米公司有著非常強大的品牌勢能,給人們留下了性價比高、高端、簡約、科技、堅持的好印象,這些都可以看作是小米的品牌DNA,因此在設計小米商城APP時,設計需要貼合小米品牌DNA,讓用戶使用產品時能感受到小米的品牌力。


          打開小米商城APP,處處能感受到小米的品牌元素,橘色的品牌色、小米的產品圖標等,都在傳遞著小米的符號,整體UI的設計秉承了小米硬件產品的一貫風格,如簡約的風格、高質感元素等,細節上體現品質。



          2、布局體驗設計


          用戶瀏覽電商產品首頁,第一屏流量最高,隨著往下走第二屏、第三屏...跳失率會越來越高,根據數據統計通常產品第三屏之后流量會大打折扣。



          雙十一期間截圖 



          上圖的數據并不能代表所有產品的數據,好的設計形式可以影響數據的變化。


          如何減少跳失率,要從用戶在當前位置的所思所想出發,做好第二屏到第三屏的功能制定和引導設計非常重要。


          小米商城首屏最后的位置可以看到第二屏的內容標題,能夠起到引導性作用,并且放的是最有吸引力“小米秒殺”和“新品發布”雙十一期間增加了運營模塊,雖然這兩塊在第二屏,但看到的同樣是最有吸引力的雙11促銷信息。


          引導用戶查看內容


          另外在不增加運營板塊時會發現,小米商城重要板塊不會放到第三屏,在第二屏下面已經開始出現精選(猜你喜歡)閑逛區,因為是太多板塊用戶會感覺首頁很亂,不容易對各板塊功能形成認知,其次就是隨著跳失率的增加,重要板塊也會失去好的轉化效果。


          打造沉浸式體驗


          多數用戶在第三屏時會失去再向下探索的動力,這時系統通過算法給用戶推薦用戶喜歡的內容,會再次吸引到用戶,重塑用戶向下探索的好奇心。


          用戶在“猜你喜歡”版塊心態是無目的的閑逛,當用戶不想再向下探索時,隨時可以側滑屏幕切換到其他品類,這樣也大大減少了用戶首頁閑逛的跳失率,營造出了一種沉浸式的交互體驗。



          閑逛區(猜你喜歡)沉浸式體驗


          同時因為用戶在此版塊是“逛”的心態,所以設計上采用瀑布流,也可以稱為Feed流,這樣的設計形式重點突出的是圖片,也就是商品本身,參數配置會弱化或不出現,因為用戶閑逛時是沒有目的的,當一個商品對他吸引后,用戶才會主動點擊查看詳情。


          如果用戶是有目的搜索某個或某個品類商品時,此時列表流更為合適,因為用戶是有目的性的查找商品,他是認識這款或這類產品的,所以必定會開始關注產品的參數配置等,列表流的左右結構,能非常合理的呈現出參數配置等信息。




          總結:當用戶無目的“逛”時會關注產品本身,所以這時需要重點突出產品圖,使用瀑布流更合適;當用戶有目的查找商品時,因為已對商品有一定的認識,所以不僅希望看到圖片,同時也希望能夠直觀看到產品的參數配置,這點對科技類產品的展示尤其重要。


          3、金剛區設計



          小米商城-金剛區


          金剛區的圖標設計直接用產品來代替,真實的手機、電腦、筆記本等,這樣不僅能與眾多電商平臺的金剛區有差異化,更加能夠把入口功能表現的有識別性、直觀性,能夠使用產品模型作為圖標元素,這本身形成了一種優勢。


          “觸碰想象,感受真實”金剛區的圖標設計符合小米的設計理念,設計師從圖標的設計營造出了貼合目標用戶認知的氛圍,讓用戶感受到了歸屬感。


          金剛區圖標的布局設計與產品定位和用戶特征非常吻合,第一個圖標是“小米新品”,對于米粉來說,這應該是最關注的功能入口,關注新品的用戶也是最容易購買新品的人群,從產品的角度來講,新品也是需要大力推廣宣傳的,所以新品入口放置首位無可厚非。


          第二個是“小米眾籌”,此功能入口對于追求性價比的用戶是最有吸引力的,因為眾籌價低于零售價,符合性價比屬性,此模式是先付錢再生產,解決了庫存、物流成本等。


          第一排剩下的是三個手機圖標,其中位于中間位置的“至尊新品”是動效展示,也是因為要強調和推廣新款手機。


          “小米秒殺”放在第二排第一個,是因為此模塊也非常重要,是一大流量入口,秒殺功能板塊是利用時間的緊迫感來刺激用戶轉化,走量能力極強,正因如此,在頁面的下方有專門的“小米秒殺”板塊。剩下的四個圖標是小米生態鏈中四個類別的產品入口,代表了大多數產品。



          4、登錄前后設計


          新人首次打開產品,促進第一單購買


          小米商城新用戶第一次打開產品時,會直接彈出“新人專享福利”彈窗,點擊查看都是性價比極高,且生活中常用的物件,性價比高是為了促進與新用戶的第一筆交易,推薦常用物品是為了讓用戶在生活中看到用到這些常用物品時可以物品的購買渠道,從而提高復購。


          新人登錄前,首頁內容促進第一單購買


          如果用戶不小心關閉了彈窗,沒關系在首頁最重要的位置也會看到“新人福利”板塊,如果享受新人福利,那在購買前一定要做的是要注冊登錄的,所以新人福利,不僅可以促成與新人的第一筆訂單,而且也有助于引導新人成為注冊用戶。


          新人登錄后,繼續促進第一單購買


          從下載小米商城到登錄后,會有三次提示有新人福利,上面介紹了前兩次,第三次是當登錄后會直接跳轉到“新人專享福利”,目的還是促成一單有性價比的交易,給用戶留下第一次好的購物體驗,最終變成有價值的用戶。






          不包郵是用戶最大的痛點
           

          據調查電商購物,用戶最大的痛點就是不包郵,同樣一件商品,99元包郵比90元+8元快遞費組合更容易讓人接受。


          上圖小米商城的新人福利,都在強調包郵,消除用戶痛點,讓用戶的首次購物真正的感受到小米商品的性價比。


          個人中心登錄前后有意思的設計


          小米商城登錄前后在個人中心有個地方的設計非常有意思,看下圖未登錄前的5個圖標設計,相信身為設計師的你一眼就能看出“錢包”的圖標偏小,這是為什么呢?



          登錄后才發現,較大的四個圖標都會換成數字,數字的大小正好與錢包圖標的大小視覺上一致,設計師似乎很淘氣。


          登錄后數字與圖標大小視覺上一致



          5、參與感設計



          小米商城的商品具有低頻購買的屬性,如手機、家電等,好在商品的種類相對較多,小米也在不斷的研發新品,為了促活,小米商城在設計上有很多參與感的設計。 

          小米商城有“星球”板塊,可以理解為是一個基于產品討論為導向的社交平臺,這樣的功能就是讓用戶有參與感。 

          當對比華為商城和OPPO商城后,發現華為與OPPO只是把產品呈現出來,卻很少有讓用戶有參與感的設計,而小米商城處處都在打造參與感設計,如游戲化設計、互動平臺等等,當然這些功能的設計與小米主打性價比和粉絲屬性的用戶有關。 


          在小米商城的首頁用戶可以打開紅包雨游戲功能、答題領紅包功能、智取盲盒機功能等,這些雖然都是營銷策略,但因為趣味性、游戲化的設計也大大提高了用戶參與感,從而增加了銷售機會。




           最后 



          對于負責流量分發的首頁,不僅要引導用戶瀏覽和購買商品,給用戶創造優秀的產品體驗,首頁也是體現公司品牌形象的關鍵點位,品牌形象能夠讓用戶了解你、信任你、感受到價值,從而促成購買轉化,這些都可以用設計助力表現。 

          以上講的是UI設計前的探索工作,也是非常有必要的工作,產品設計者只有真正了解了產品的底層架構,才能精準的把控設計,在各方面掌握好平衡。

          文章來源:站酷 作者:吳星辰

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

          細微之處見真章-逐幀分析方法的產生與應用

          ui設計分享達人

          逐幀分析方法是一種針對動態的、短暫的過程對象進行對比分析的方法。該方法可幫助設計師以微觀視角完成差異分析并得出相應結論。與傳統的靜態截圖、動態錄屏方法相比,其優勢是可以看到過程的全貌,對動態細節一覽無余,具有較高的分析可控性。


          背景


          逐幀分析方法的產生源于一次針對加載場景的體驗調研項目。百度百科對于加載的定義是:所有軟件要運行必須加載到內存,加載就是把需要的文件及信息讀取到內存里。簡單說來,所有從服務器讀取信息并顯示在手機屏幕上的過程都屬于加載。以百度APP舉例,加載的典型場景有:啟動、打開FEED落地頁、打開搜索落地頁等。這些場景都有一個共同的特點是:動態的過程,且過程較為短暫。


          基于以上特點,運用對比分析里最常見的靜態截圖或動態錄屏方法,是無法完成分析的。原因是,靜態截圖對于一個動態過程來說,無法看到過程的全貌,可對比點較少,分析要素不可控(一張靜態截圖中,無法做到涵蓋所有分析元素)。而采用動態錄屏的方法進行分析時,問題也同樣明顯:過程太快,無法看清細節;不同視頻節奏不同,對比起來比較困難。因此針對加載這種特殊的場景,就需要采用一種全新的方法既能看到過程全貌,又可以對細節一覽無余。





          方法的產生


          小時候我們都玩過跑馬燈的游戲,即一系列靜態圖片通過快速輪轉,由于視覺滯留效應,便可看到一段動態影像。如果把產生動畫的過程翻轉過來,也就是說如果可以把一段動態影像拆成一系列序列幀,那么是否可以更好的完成影像觀察?


          以百度APP打開小視頻落地頁的加載場景為例,當我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發現,除了可以清楚的看到過程全貌外,對于過程中的所有細節也可以一覽無余。同時,序列幀可以進行任意拆分,以便完成多角度觀察。




          到此為止,逐幀分析方法的雛形已經產生。在之后的章節,我將為大家具體介紹如何完成序列幀分析以及如何導出序列幀。




          如何進行逐幀分析


          面對一系列序列幀,我們可以通過“序列幀三要素”來導出關鍵數據及結論。

           

          要素1:序列幀全流程


          首先,我們進行序列幀觀察的時候,需要明確定義目標對象的起點與終點。由于逐幀對比方法適用的觀察對象均為短暫的動態過程,明確定義全流程的起點與終點是為了讓觀察過程和結論更加精準。


          以百度APP打開搜索落地頁為例,起點與終點分別是:點擊搜索結果手指松開的第一幀與搜索落地頁首屏內容全部加載完成的最后一幀(可以通過觀察前后幀是否有變化得出結論)。這一要素中,可以采集到的關鍵數據為時長,時長可以幫助我們觀察加載性能的好壞,甚至在進行競品對比的時候,快速找出與競品在時長方面的差異從而得出優化建議。結論輸出時,需要將幀數轉換成為時間單位(如何將幀數轉化成時間會在后續文章中為大家講解)。



          要素2:序列幀子流程


          在前文中提到,逐幀分析法的一個優勢是,逐幀序列可以進行任意拆分,以便完成多角度分析。在分析的第2要素中,我們可以最大限度拆分子流程,同時需要明確每一個子流程的起點與終點。這一要素的分析中,可以采集到的關鍵數據為子流程時長,缺失或多出的子流程,以及子流程內部的差異。


          例如在百度APP Android端熱啟動過程中,全流程被拆分為:啟動至全屏、持續白屏態、內容加載3個子流程。通過換算,可以看到每個子流程的時長。并且在和競品的對比中發現,百度APP缺失了持續白屏態這個子流程。而在啟動至全屏的子流程中,百度APP因為沒有添加過渡動畫,與多數競品是有差異的。


          要素3:用戶體驗節點


          用戶體驗節點的對比是逐幀分析法的第三要素,這一要素進一步深入到過程的微觀視角,使得分析結論更為全面。而用戶體驗節點是逐幀分析法所提出的一個全新概念,其定義是:產品界面上任何一次用戶可感知的變化,都叫做用戶體驗節點。以百度APP Android打開搜索結果頁為例,整個過程的用戶體驗結點有5個。通過用戶體驗節點可以采集到的關鍵數據有:用戶體驗節點的數量以及用戶體驗節點的順序。



          我們以Android打開搜索落地頁為例為大家進一步講解如何完成用戶體驗節點數量的分析。通過對比發現,百度APP在整個加載過程中的用戶體驗節點數量多于競品,多出的節點為:白屏節點、文字加載節點。雖然百度APP加載時長與競品相差無幾,但是由于節點數量較多,導致用戶在等待過程中經歷了過多的頁面狀態變化,形成了較強的視覺閃跳感,從而引發用戶感知層面的錯覺,認為百度的加載時長較長。因此我們可以通過減少非必要的用戶體驗節點,從而提升加載場景的流暢感。但是,用戶體驗節點的數量并非越少越好,這還要根據實際業務與優化方向來輸出具體結論。



          用戶體驗節點順序的分析,可以參考百度APP iOS FEED打開圖文落地頁的示例。在這一示例中,百度APP圖文落地頁內容加載節點位于框架轉場節點之后。但是對比競品發現,多數競品在這個過程中,內容加載是先于框架轉場的,而這種節點順序的優勢是,轉場完成后,用戶即可開始瀏覽內容,整體感知較為流暢。這種導致閱讀流暢感體驗差異的原因很難通過肉眼或常規競品對比法觀察得出,由此可見逐幀分析方法針對特殊場景的分析優勢非常明顯。





          序列幀三要素總結

           

          在此,我們回顧一下逐幀分析方法的“序列幀三要素”。


          要素1:序列幀全流程,可采集的關鍵數據有:全流程時長。


          要素2:序列幀子流程,可采集的關鍵數據有:子流程時長、子流程是否缺失、子流程內部的差異。


          要素3:用戶體驗節點,可采集的關鍵數據有:用戶體驗節點的數量與順序。




          如何導出逐幀序列


          工欲善其事,必先利其器。進行逐幀分析前,我們首先要將錄制好的視頻轉化成序列幀。以下章節將為大家講解如何導出逐幀序列。


          整個過程可分為:錄制、創建合成、輸出3個環節。


          1.錄制


          由于系統特性,iOS和Android手機雙端建議采用不同的錄制手段。iOS手機可直接通過數據線連接到電腦,并使用電腦的QuickTime進行錄制。這樣的好處是保證了錄屏的幀數基本穩定在60FPS(每秒傳輸幀數);Android手機建議采用機內功能或其他錄屏應用完成錄制,但是安卓中低端手機很容易出現掉幀的現象,因此就需要我們在合成和輸出階段制定一個合理的輸出幀數,讓分析的結果更加接近真實。另外,建議錄制的起始點適當延長,這樣便于素材在合成階段精準切割。


          這里要為大家講解一下如何將幀數換算成時長。以iOS的輸出幀數為例,換算公式為:iOS時長= N(幀數) x 16.6ms。例如:在iOS打開圖文落地頁的加載過程中,百度APP總時長為:73(幀數)x16.6ms= 1217ms(約等于)。



          2.創建合成


          創建合成階段所使用的工具是AE。AE的好處是:

          1.方便查看原視頻幀速率,對不穩定的幀速率進行統一處理;

          2.可以將視頻轉換為圖片序列,便于后續的逐幀分析;

          3.AE也可以將多個視頻進行同步播放來進行對比驗證。



          第一步:打開AE>合成>新建合成。


          這一步的目的是通過合成設置,統一幀速率。通過一系列實驗,我在新建合成時,將iOS錄屏的幀速率設置為60幀/秒,Android錄屏的幀速率設置為30幀/秒,這樣可以保證最大化的減少空白幀,使分析結果更加準確。



          第二步:導入錄屏




          第三步:截取起止點關鍵幀。


          在進行素材處理的時候,需要精確到每一幀,由于逐幀分析所針對場景的時長極為短暫,很可能由于一幀的差距,導致分析結果相差甚遠。


          以百度APP iOS端熱啟動過程為例,我們將錄屏中手指抬起的前一幀(即icon顯示出點擊態)做為起點,將APP啟動后填滿手機屏幕的第一幀(可通過觀察法,在AE中查看前后幀是否有變化)做為終點完成素材處理。


          3.輸出

                  

          輸出的路徑為:菜單欄 文件>導出>添加到渲染隊列,在渲染隊列中找到待渲染視頻,再在 輸出模塊>格式選擇JPEG或PNG以序列導出。這一步的目的是,將一段視頻文件拆分成可提取對比的逐幀畫面。


          最終導出的序列幀如下:


          在完成分析對象序列幀導出工作后,便可開始進行逐幀分析了。



          結語


          逐幀分析法是在實際項目中總結并提煉出的一種全新的分析方法。該方法對于短暫的、動態的過程非常適用,可以幫助我們從微觀視角發現問題、驗證問題、得出優化結論,極大的提升了分析效率和精準度。逐幀分析法也在后續的多個項目中也得到了推廣和驗證,希望可以幫助到大家。

          文章來源:站酷   作者:MEUX

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

          構建科學有效的色彩系統

          ui設計分享達人

          Meet more beautiful colors.


          “色彩是我們感知世界的重要媒介,對于信息傳達有著重要的作用,能使人們能夠更有效的感知設計的意圖和內涵,使傳達更高效。且人對色彩的視覺感知與想象能力,能夠指導人做出預測、理解和決策。”

          -- lyft kevyn arnott


          ——————————

          隨著世界的數字化轉型進程大爆發,科技把每一張有形的辦公桌移到了云端,用戶沉浸在數字構建的世界中。騰訊文檔作為先進的生產力工具,產品生態越來越多元豐富,多品類多終端的復雜環境展現在我們面前,開始真正的朝復雜龐大的大規模設計邁進。我們希望能以更加專業、高效的設計姿態迎接騰訊文檔的未來挑戰。


          色彩是體現品牌與基因的關鍵因素,構建科學高效的色彩系統,建立產品的品牌形象,對產品設計極具指導意義。


          騰訊文檔在色彩上也進行了一些深入的挖掘和沉淀,一方面希望帶給用戶全新的品牌印象和認知,另一方面構建科學有效的色彩系統,為產品的發展提供優質高效的設計系統基礎。本文將聚焦于色彩系統的構建。





          Chapter 1

          ——————————

          品牌標準色進化

          騰訊文檔代表著效率協作的先進生產力,從云端創作到云端協作,打破了辦公空間的實體界限。我們希望,新的品牌色,能夠為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和認知。


          我們將標準色由平靜的天藍色,升級為更加生動、進取、科技、可靠的明亮清澈的鈷藍色。這種藍色具有更多的電子意味,蘊含了更多的活力和想象力,承載了騰訊文檔對未來數字世界新挑戰的態度和形象的進化。



          同時我們認為灰色在騰訊文檔的色彩系統中起著至關重要的作用,為產品界面創造結構、表達邊界、建立信息層次。我們將灰色賦予了統一的品牌認知感受,將藍色加入到中性灰色里,生成了騰訊文檔特有的藍灰色。



          至此,騰訊文檔標準色進化升級,它體現了騰訊文檔對可靠穩定的技術、產品體驗的追求,以及對未來智能的數字世界的不斷創新和進取,蘊藏著無限的可能性。



          Chapter 2

          ——————————

          豐富多元的輔助色


          在一個科學有效的色彩系統里,往往包含至少兩種色彩:主色+輔助色,兩者互相搭配組合成產品體系的整體色彩感受,減少用戶在產品體驗中對反復出現的主色的視覺疲勞。


          騰訊文檔的產品生態愈來愈豐富多元。我們擁有多品類的產品,為用戶提供了豐富的產品功能,其中云端協作、文檔資產的沉淀管理是騰訊文檔的非常重要的能力,在線文檔、在線表格、在線幻燈片、在線收集表、在線思維導圖、在線流程圖以及文件夾等的品類圖標,又是用戶在對文檔進行協作分享及沉淀時,識別不同類型文件的關鍵因素?;诖?,騰訊文檔相較于其他產品需要更多的輔助色。


          于是,如何有效的選擇既符合品牌調性又有區別度的輔助色是構建騰訊文檔色彩系統的關鍵。在輔助色選擇上,我們以鄰近色、互補色、對比色為主要方法構建了輔助色彩體系。


          1、 創建色相色板,保持相同明度、相同飽和度



          我們以騰訊文檔標準色#1E6FFF(H 218 S 88 B 100) 為起始點,S(飽和度)、B(明度)保持不變,H(色相)以218°為起點,以15°為增量或減量標準,生成24色色板。這個色板是我們選取輔助色的重要依據。



          2、 以鄰近色、互補色、對比色為原則選擇豐富的輔助色彩

           鄰近色 在色相環中,相差15°的顏色為鄰近色,凡在60°范圍內的顏色都屬于鄰近色的范圍。鄰近色之間往往是我中有你,你中有我,色彩之間比較和諧。


          ● 對比色 在色相環中,角度相差120°-180°之間的色彩,文檔使用了120°為角度來選擇對比色。


          ● 互補色 在色相環中成180°角的兩種顏色,互為補色,當這兩種顏色彼此相鄰放置時,它們會為這兩種特定顏色創造最強烈的對比度。


          為了保持騰訊文檔的基礎品牌調性,并保證其具有極清晰的識別度,我們以品牌藍色為起點,選擇了相對較多的鄰近色,以保證在色溫上保持騰訊文檔整體色調的清爽感。并利用對比色及互補色,選擇更加豐富多元的色相,以保證能夠滿足各種使用場景下對色彩的需求。


          總的原則是利用鄰近色構建有質感、品牌感的色彩家族,利用對比色及互補色擴展色相,以制造更強烈的色彩對比,滿足一些沖突性場景。



          3、 校正輔助色

          雖然我們保持相同的飽和度和明度,使用科學的方法得到了較為合適的色相,但由于色彩本身自帶感官明度屬性,導致在視覺感受上的感官體驗并不同頻。


          黃色、綠色的明度即發光度較高,藍色就稍微偏暗一些,導致色板看起來不一致。為了讓不同色相看起來更加協調,需要調整色板的明度和飽和度,以保證視覺感官體驗同頻且更加和諧舒適。



          校正原則:


          ● 色相必須保持是 同類色(色相環中15°夾角內的顏色)


          ● 保持感官明度同頻


          ● 保證視障群體的識別度


          校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對視障群體進行了色彩測試。





          Chapter 3

          ——————————

          易用的中性灰色

          灰色是產品體驗設計中至關重要的一節,工具型產品大部分是由各種各樣的容器、面板、列表組成?;疑珵楫a品界面創造結構、表達邊界、建立信息層次,保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。


          前面我們已經定義了騰訊文檔的藍灰色,在界面的設計中,我們將其與中性的灰色結合,共同構建灰色的色彩體系 。

          ● 擴展藍灰色相,應用于圖標、容器,構建有層次、舒適清爽的產品界面 。

          ● 用帶透明度的黑色,應用于字體等。

          為構建一個高效易用的灰色調色板,我們將藍灰色彩作為Y軸,有透明度的中性灰色作為X軸,兩者透明度保持一致,建立起騰訊文檔有梯度的、豐富的灰色調色板。



          對比度是否合理是閱讀體驗是否舒適的重要評價維度,過高或者過低的對比度都會影響閱讀體驗及識別度。下圖是對比度的鐘型曲線圖,隨著對比度的增加,舒適度和識別度都在上升,但一旦超過一個界點,對比度越增加,識別度和友好度亦會逐步下降。



          為保證視障用戶的使用,保證足夠的對比度,遵守 WCAG 2.0 的標準,我們對調色板灰色的對比度進行了可用性測試,以指導騰訊文檔體驗設計中灰色調色板的使用。



          是:對比度在AA標準以上,符合W3C標準,可以使用。


          中:僅可用于disable狀態。


          否:對比度在AA標準以下,不符合W3C標準,不可使用。



          Chapter 4

          ——————————

          高效易用的調色板


          定義好文檔的主色、輔助色以及中性色后,我們需建立完整的調色板來滿足不同場景下顏色的使用。以傳達品牌精神,建立色彩層級,或傳達信息,或強化界面層級。

          在色彩系統中,很多產品使用 Tints and shades 系統,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板。但這種方法得到的調色板往往比較刻板僵硬,故騰訊文檔采用了另一種方式,將已生成的灰色色板與色相疊加,在符合無障標準的區域,選擇不同明度飽和度的色彩,形成有梯度、有層級的彩色調色板。


          Tencentdocs_blue:


          生成主色-藍色色階:



          用同樣的方法將輔助色生成色階:


          現在,我們有一個梯度豐富,能夠支持騰訊文檔設計系統的調色板了~




          實際案例


          實踐才是硬道理,我們嘗試以這個調色板為指導來調整優化騰訊文檔鏈接色的優化調整。



          為保證用戶閱讀體驗的舒適度,鏈接之類的彩色文本,要求顏色在背景下可以達到4.5:1對比度以上,以使它能夠清晰的從灰色文本、背景中脫穎而出。于是,我們放棄了品牌藍_1E6FFF,選擇了品牌藍70_175CEB 作為鏈接色。


          以后,選擇顏色,so easy~



          結束語

          這個長長的制作調色板的故事就要結束了,我在這項工作中,重新審視過去設計中的設計決策方法,在其中學到了很多東西,希望本文對您也有所幫助。


          我們經??焖俚膭邮?,依靠主觀情感去選擇顏色,在剛開始可能沒遇到什么特別的問題,但隨著產品的壯大和發展,往往會越來越凌亂。抽絲剝繭的搭建色彩系統,真正讓色彩為設計服務,簡化團隊的工作,相信您會有更愉快的工作體驗~




          文章來源:站酷  作者:騰訊ISUX

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

          日歷

          鏈接

          個人資料

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

          存檔

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