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

          首頁

          iOS 13 隱秘的細節②:原生APP的細節變化·上

          ui設計分享達人

          拆解iOS 13原生APP的細節變化,及其“影響”。

          undefined


          0.前言

          在上一篇《iOS 13全局組件》中,主要講述了新版系統中的分段控件、Switch、Sheet彈窗、Context Menu等組件的細化及影響。

          從這篇開始,開始講述iOS 13原生APP的設計細節,以及對設計師的影響。


          開始前,依舊先明確下文中用到的機型和系統版本:

          設備1:iPhone 7,iOS 12.4

          設備2:iPhone X,iOS 12.2

          設備3:iPhone 6S,iOS 13 Developer beta 6


          -


          下面開始原生APP的相關內容:




          2.1 計時器

          iPhone的計時器是個特別好用的功能。

          日常生活中,類似“小睡一會”、“蒸煮東西”、“女友敷面膜”這些場景都能用到計時器。過去4年,我平均每天使用8次以上計時器。


          雖然iPhone的計時器已經非常好用,但在某些場景下,尚有不足:

          比如,設置一個80分鐘的計時,中途看時間,雖然屏幕上顯示還剩28分鐘。但卻無法直觀掌握計時的進度(百分比)。有時睡迷糊了,忘了最初設置的總時長,導致不清楚睡了多長時間...

          在iOS 13新版計時器中,Apple做了一些調整,很好的解決了上述問題:


          變化1:新增圓形的進度條,如下圖:

          進度條可以方便用戶掌握計時進度。


          變化2:新增“到點”的時間(幾點幾分)

          用戶不用自己換算,就能知道計時結束的具體時間是幾點幾分。


          變化3:鈴聲入口位置下移:

          一般而言,用戶在使用計時器時,通常的操作是:第一步:選擇時長、第二步:點擊開始。

          并不會出現調整鈴聲這步操作,可以說,過去鈴聲放在中間的布局就很雞肋。要么礙事、要么被忽略...

          PS:過去四年,我從未察覺到有設置鈴聲的功能。囧

          如何用“全鏈路思維”讓設計更加符合需求方的預期

          ui設計分享達人

          篇首語:


          隨著互聯網時代的發展,尤其近幾年進入“互聯網寒冬期”以及失去人口紅利之后,企業對各個崗位要求都變得“非?!眹栏?。對于UI設計而言,把作品做的非常牛X,顯然已經無法滿足市場需求和用人需求了。


          前期的鐵三角“產品經理、交互設計師、UI設計師”很有可能結合變成是“交互視覺二合一”甚至是“產品交互視覺三合一”的狀態。在一些企業你會發現有一些崗位上的缺失。出現這種情況最大的原因是,很多公司會把一些職能進行合并用來節省成本?,F在仍然有大多數的公司并沒有交互設計師的崗位,但是交互設計的職能不代表沒有,而是被產品經理或者視覺設計師兼任了。


          說到這里大家可能會說,大企業資金雄厚,不缺少任何職能崗位。是的,沒有錯,但例如“華泰證券”,“浦東發展銀行”等,不再是UI設計而是用戶體驗設計師了。那么作為UI設計師、運營設計師、品牌設計師(以上統稱為視覺設計)的我們,該如何順應時代發展,更加符合當下的市場規律,成為一名優秀的用戶體驗設計師呢?


          當我們拿到需求方(產品或運營)的設計需求時,不再是盲目的直接找參考、找素材開始了,而是用產品思維模式,理解“產品目標”、鎖定“目標用戶”、切身體會“用戶場景”、遵循“用戶行為習慣”等的方式,充分理解需求方所提出的設計需求,進而設計出更加符合需求方心理預期的設計作品。


          因為與需求方“同頻”思考才會設計出符合需求的設計,難道不是么?


          本文目的:本文引入“全鏈路思維”模式,幫助視覺設計師提升思維高度,通過“分析需求”、“拆解需求”、“競品分析”等三個緯度思考,并將這些分析結果轉化為設計方案。


          正文


          一、全鏈路思維


          最近所謂“全鏈路思維”的話題很火,但事實上,全鏈路早就不是什么新鮮的概念了,而且也并非什么崗位頭銜(和全棧、什么都能干不是同一概念),更接近于一種設計思維與方法。


          近幾年,設計的發展趨勢從UED(以用戶為中心)變成UGD(以用戶為中心,以業務增長為導向,不以結果導向的KPI都是耍流氓),對設計的價值考核也越來越清晰,同時對于設計師的能力體現要求更高。行業上升發展趨勢要求設計師更懂行業(掌握行業間的差異)、更懂用戶(洞察用戶的需求)、更懂數據(善于分析業務數據)、更懂增長(投入產出比)。


          在需求階段,我們比較傳統的一種流程,是被動從產品經理處接受已被加工為具體方案的需求,對需求產生的背景并沒有什么深刻的接觸和理解。而在進行全鏈路設計的業務場景中,需求方不會直接給你一個加工好的答案,甚至他們自己都沒想清楚問題出在哪里、應該如何解決,而更多是帶著一個提升某業務指標的原始訴求或一堆零散的原始用戶反饋來找你;至于怎么從中引導對方發現問題、分析問題、歸納機會點、輸出能幫助達到商業目標的產品設計方案、甚至協調推動落地,都需要設計師作為 Owner 去思考和負責。


          “全鏈路”這個詞應該是2016年從阿里出來的,對于“全鏈路”思維的理解,行內有不同的理解方式,筆者結合工作總結出以下幾種方法:

          需求分析 > 拆解需求 > 分析競品 > 確立設計方案



          二、用戶體驗


          對于用戶體驗的理解,根據思考維度的不同其結果往往是眾說紛紜,由于各個職能崗位之間工作側重點以及專業度的不同,溝通起來是有成本的,只有用戶為中心的“用戶體驗”思維才是各個職能崗位之間的唯一溝通《通用語》。例如:當產品向設計傳達產品需求時,產品無法用視覺角度去闡述產品,設計也無法用視覺專業知識向產品解釋設計理念,你只能用“用戶體驗”思維去解釋你的設計方案。當然,如果對業務場景非常了解,兩相結合,溝通起來效果更佳。


          那么什么是用戶體驗,唯一的核心只有一個,那就是“解決問題”

          解決用戶具體某個需求點,讓用戶使用起來更佳容易,并且給用戶留下深刻的印象(轉化率)


          解決了用戶某個問題點并印象深刻,用戶才覺得用著舒服。注意,這里的舒服指的是“舒爽”而非“酸爽”哦~。說到這里不得不再次提及老生常談的,用戶體驗5要素:

          表現層 > 框架層 > 結構層 > 范圍層 > 戰略層


          那么以架構層與結構層為例

          (一)、架構層:頁面布局(各類控件及信息擺放),頁面布局的核心點在于:恰好


          當一個功能恰好出現在,用戶期望出現的位置上,即符合了“用戶的心理預期”,也符合了“用戶行為習慣”,那么用戶用著是否“舒爽”?所謂,以用戶為中心指的就是,迎合用戶的行為習慣及心理預期,讓用戶感到恰好、舒爽,同時感到被照顧、呵護的感覺:你好懂我~

          大家都知道,一個頁面最佳視域為:左上、右上、左下、右下,左上最佳,右下最次。功能類控件(如:評論,點贊,發布,分享)在一段信息區域的右側,不是說右側不好么,這是因為為了符合人體工程學,右側好點擊原理(左撇子除外)。


          (二)、結構層:信息架構 (信息層級梳理及頁面流),核心點在于:瘦身


          結構層相對于架構層較為抽象,我們可以將他理解為“鏈接”。架構層是針對單頁面結構設計,而結構層是將單頁面鏈接在一起,從而形成了系統。

          拿app舉例:架構層決定了點擊頁面圖標和按鈕后頁面跳轉到哪一頁。通過刪除、組織,隱藏和轉移,將復雜的結構變的簡化,也是提高用戶體驗的手段。例如QQ5.0的升級,通過漢堡導航及tab標簽將功能整合,似的應用在感覺上苗條了很多。


          以阿里巴巴(1688) APP 8.0為例:


          (三)、怎么做好頁面布局及信息層級梳理:核心在于準確理解產品需求


          也許大家都遇到過這樣的情況:當產品經理看到你的設計方案時,突然找到你并且要求你,“這里放大,那里縮小,哦不,你給我放大的同時縮小,這個顏色我要五彩斑斕的黑,哦不,我的意思是@#¥%”


          遇到這樣的情況,設計師要無條件的遵循么?產品經理對于視覺有自己的審美,當他發出需求時腦子里已經有了2-3個設計方案,只是他不會做,設計方案沒有符合他的心理預期(以至于指手畫腳)。甚至他的審美經過這么多年優秀作品都熏陶,不會比任何一個設計差,只是他無法用設計專業知識去指導你罷了。


          這個時候設計師該怎么做?出現這種情況只有這幾種可能:沒有同頻思考、沒有準確領悟產品目標(意圖),進而對信息架構、信息層級理解有誤、沒有把重點信息清晰體現、功能類控件,沒有做好有效的視覺引導。以上統稱為:需求理解錯了。


          說到需求理解,據一個簡單的例子:假如有個用戶說:“我想吃蛋糕”,那么注意了,如果真的給用戶蛋糕,那就完蛋了。首先分析用戶為什么要吃蛋糕:就喜歡吃蛋糕?喜歡吃甜的點心(別的甜點能否替代)?還是說只是單純的餓了,不知道該吃什么,只是突然想到了蛋糕,那么可否用其他我能提供的什么東西去替代?


          所以,這個用戶的需求不一定就是蛋糕,蛋糕只能是訴求,解決溫飽的訴求而已,但不一定是需求,他的需求是,解決溫飽的食物而已,如果不多問一句,不就產生了“放大的同時縮小,五次斑斕的黑”么?因為對需求的理解錯誤,沒有準確的理解產品目標,才導致設計方案才會出現錯誤,難道不是這樣的么?



          二、需求分析


          有人會問:“視覺設計師還需要像產品經理那樣做需求分析么?”,正如上文中提到,要與產品經理保持“同頻思考”,還要準確的理解產品需求。不需要做,但并不代表不會或者不去思考。因為需求分析是“全鏈路思維”模式的前提。那么對于視覺設計師而言,不需要像產品經理那種專業度,只需要思考以下幾點即可:


          (1)為什么要做這個需求(業務目標)

          思考:業務方為什么要提出這個需求,為了提升轉化率、用戶留存、曝光/流?、點擊率、訪問率、注冊率,也就是業務方的核心目的是什么。


          (2)產品期望得到什么結果(產品目標)

          思考:產品為了達到業務目標,采取的策略是什么,通過什么功能實現的。產品的核心功能及交互流程是什么。


          (3)誰來使用這個功能(目標用戶)

          思考:此業務目標是針對哪些人群的,這些人群有什么共同的特點,和行為習慣。


          4)他們為什么要使用這個功能(用戶需求)

          思考:這些人群有哪些共同的需求點,產品目標是否滿足這類人群的核心需求,解決了哪些痛點。這些人群期望怎樣的結果。設計師該如何引導用戶,理解產品目標。


          (5)他們在什么情況下使用這個功能(用戶場景)

          思考:在這樣的業務目標下,用戶在什么場景使用該功能,為什么使用,會不會有反感,如果我是用戶,我的感受是什么。


          其實,業務目標和用戶的需求是矛盾的。比如,業務方希望提升注冊率,但對于用戶而言,注冊與否并不敏感,或者根本不想走一遍繁瑣的注冊流程。這時產品就需要在特定的場景下,在某個功能流程中恰好出現注冊功能,讓用戶不得不注冊,因為用戶不注冊就得不到他剛好想要的服務或體驗。這個時候設計師要考慮的是,通過設計營造一種喜悅的氛圍,不讓用戶感到反感。因此設計師的核心價值在于,如何平衡業務目標和用戶需求之間的矛盾,做出有效視覺引導。




          三、拆解需求


          拆解需求指的是,當設計師分析需求方的需求后,將需求拆解成其對應的視覺解決方案。上文中提到,需求分析不需要達到產品經理的專業度,但“拆解需求”必須達到專家級程度。因為這部分是需求分析后,如何理解需求方的需求(業務目標、產品目標)的關鍵所在。這時,我們視覺設計師要思考一下幾點:


          1、信息層級

          (1)信息層級的分類(在明確需求后要對信息進行劃分及拆解)

          (a)用戶能否在最短的時間閱讀到信息、

          (b)哪些信息是屬于業務流程范圍的、

          (c)哪些信息是產品想要突出表現的、

          (d)哪些信息看似不重要但沒有還不行、

          (e)信息描述前后是否統一,會不會給用戶帶來困惑


          (2)信息層級的權重

          在明確主要信息歸類后,通過視覺上的,黑、白、灰,把層級表達清楚。明確信息權重,權重高的是否優先展示,有沒有誤導用戶。


          2、功能層級

          (1)功能優先級權重劃分(在明確功能后要對功能進行分類及拆解)

          (a)哪些功能優先級最高,哪些是屬于主業務流程及功能流程、哪些功能是子功能、

          (b)哪些功能產品經理并不想突出,但用戶卻需要的、

          (c)同一個頁面,同一功能多次出現,產品經理的目的是什么、

          (d)產品不同時期,功能的視覺變現是否有差異、


          (2)交互層邏輯是否貼合用戶場景

          在明確業務目標與產品目標后,設計師要反復驗證交互邏輯是否合理,邏輯是否符合該用戶場景。


          (3)交互體驗是否流暢

          在明確目標用戶與使用場景后,把自己融入到使用場景中,反復驗證交互流程。看是否符合業務目標與產品目標,同時看交互流程是否流暢,有沒有給自己帶來障礙。


          (4)用戶操作是否便捷

          如果自己是用戶,操作是否符合用戶行為習慣,有沒有恰好出現在該出現的位置上,視覺展示是否引導合理,視覺引導有沒有給用戶帶來誤區。


          3、頁面布局

          在明確目標用戶與使用場景后,把自己模擬成目標用戶,思考頁面布局是否符合用戶行為習慣和心理預期。主流程下的控件是否在視覺上有點擊欲望,會不會反感。(用戶體驗中已有詳細說明)


          4、狀態的查缺補漏

          各類交互狀態,如,圖標點擊后的狀態(移動端、pc端)、hover 狀態(pc端)、非主業務流程下的功能提示(如:錯誤提示、缺省提示)。這些產品經理往往會忽略掉,或者文檔里也會給出過,要注意觀察及時查缺補漏。


          5、視覺的有效引導

          在準確的理解產品需求,做到“同頻思考”后,分析信層級和功能優先級及權重劃分,將這些在視覺設計的過程中做有效的引導,并時刻查缺補漏。這個時候對于哪些信息和功能需要突出,哪些信息和功能需要弱化,在頭腦里有個清晰的認知和思路。讓信息和功能恰好出現在用戶期望的位置上,并且解決產品目標為目的,也就是上文中提到的用戶體驗的核心點,解

          決問題。


          值得注意的是

          視覺設計師是對產品方案的進一步完善,以用戶為中心的用戶體驗思想,用視覺引導的方式引導用戶實現產品目標的,而非只會照著原型圖毫無思想的畫圖。同時要讓用戶無論在視覺上還是體驗上,都能感受到“舒爽”而非“酸爽”。


          產品經理給出的原型,重心在業務邏輯,因此,為了提升用戶體驗、避免給用戶帶來誤區和障礙,設計師要以產品思維(產品思維和業務思維是不一樣的)在業務及產品目標、主功能邏輯不變的情況下,重新劃分信息層級、做好頁面布局,做好視覺引導。



          四、競品分析


          通過需求分析(理解需求)、和拆解需求(明確設計目標)后,在正式進入視覺設計之前,視覺設計師們通常要先找一波資料(找參考),如果只是這樣,那么僅僅是尋找視覺表現手法而已(什么風格、什么顏色)。本文中所提到的競品分析,不是產品競品分析也不是交互競品分析,而是為了視覺設計而準備的視覺競品分析?;凇叭溌贰彼季S模式下通常需要考慮一下幾點:


          1)我們的方案和競品的區別在哪里,為什么不同。

          跟競品之間的區別很重要,因為每個產品業務目標與產品目標,以及產品處于的階段都是不一樣的,即便看著很類似也不可以盲目參考。


          例如:產品階段的不同,對于“搜索”功能的要求是不一樣的,產品初期由于信息量不夠,搜索不出太多的內容。屬于沒有還不行,有了還不能太明顯,不能誤導用戶去搜索,而是要用分類功能。因此,即使產品經理給出了“”搜索”功能,在視覺上也要弱化變現。但你如果參考了成熟期的產品,可想而知你設計出的“搜索”會是什么樣的了吧。


          (2)競品是怎么做的,優點在哪里,解決了哪些問題,他們為什么這么做

          我們要找到與本產品業務目標與產品目標基本一致的競品去對比,切勿只是原型基本類似就以為目標一致。因此,先要看這個競品都解決了哪些問題。


          3)什么是我們可以借鑒的,是否可以改進

          在確定目標基本一致后,要分析哪些可以借鑒,能不能比他做的更好,如果只是抄襲,那就沒有意思了。


          4)那么設計該如何表達,比競品做的更好

          經過上述分析,在這個階段對于視覺設計師而言,設計方案基本在腦子里已經成型了。這時對于什么風格、什么顏色,才基本符合產品預期。在結合需求拆解的方式,拿出可行的設計方案。


          轉自-站酷

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

          如何通過競品分析來解決問題

          ui設計分享達人



          1.競品分析的定義


          從專業的角度來講,競品分析是通過系統的分析方法去全面了解市場上位于前列的競爭對手的產品,能夠讓設計師快速了解自家產品所處的位置,從而來針對性的改進自身產品的一個方法。簡而言之,就是要站在巨人的肩膀上去思考,以競品分析的形式去學習其他優秀的產品,從而解決自身產品所存在的問題。



          2.為什么要去做競品分析


          做一件事情之前一定要思考做這件事的價值和意義,只有你明白其重要和必要性,你才會知道該怎樣去做這件事情,而不是一提起競品分析就找一大堆專業框架和術語然后去填內容,這樣雖然產出了很多,但是關鍵性的內容點其實還是不清楚。


          說直白點,你需要通過這篇競品分析去解決你工作或者創作中遇到的什么問題,帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況:



          因此我們要學會根據自己的不同需求,去制定不同的競品分析方案,讓分析的內容更聚焦。作為UI設計師來講,通過競品分析為自己的設計方案提供科學的理論依據,為自己贏得話語權,能夠更好地科學產出內容。



          3. 如何尋找競品:


          競品的選擇非常重要,如果找到錯誤的競品,那么你所分析的一切結論可能都引向了一個錯誤的方向。從而讓自己的努力都白費。那么怎樣才能找到合適的競品呢?分為以下三類情況


          A.核心服務與目標用戶相同的產品(直接競品)


          這一點是廣大設計師都能想到的范疇,也稱為直接競品。即提供的核心服務、市場目標方向、客戶群體等與我們的產品基本一致,產品功能和用戶需求相似度極高的產品 。往往是通過業務關鍵詞就能直接搜索到的競品,比如音樂類產品,那么直接在應用商店,或者通過專業網站(易觀千帆等)搜索關鍵詞“音樂”即可搜索出排行前列的競品。



          B.目標人群不同,但功能模塊和服務接近的產品(間接競品):


          這類競品可以找起來并不那么直接,可以通過對應功能去逆推擁有此功能的產品,并進行相關搜索。


          如果想不到,可以通過“人人都是產品經理” “36氪“等關于產品資訊的網站進行查詢,甚至可以通過百度指數來進行發散思維,看一下跟你關鍵功能相接近的都有哪些。比如你研究外賣產品,除去餓了么和美團等直接競品,你還可以在分析用戶下單和購買流程中,去分析淘寶和京東等購物產品,也能得到一定的幫助。



          C.目標人群和服務都不同,但交互或者視覺有可以參考的產品(關聯競品):


          這里所選擇的產品,定位和領域可以都完全不同,但是你要從這款產品中得到啟發,從而讓你的產品能夠擁有其他競品不同的特點或者功能模塊。有一個很典型也熟知的的案例,就是衛龍辣條的設計案例,在衛龍推出之前,可以說是沒人會想到辣條會和高端扯上關系,但是衛龍就是借鑒與其領域完全不同的蘋果設計去做,從而在包裝上獨樹一幟,從而吸引人們注意取得成功。因此通過不同領域跨行業的產品有時候也可以找到不錯的思維方向。



          4.如何進行商業分析:


          進行商業分析,這里只提及到三個基本選項:商業背景、產品盈利模式以及用戶人群。通過這三個基本要素,你能對所研究的競品有一個大概的了解。當然深入了解還需要其他平臺(官網網站、36Kr等)來查閱更多的相關性資料,下列是對QQ音樂商業背景的簡要分析。




          5. 如何進行交互分析:


          我們在做交互分析時,我們需要進行必要的兩點分析:用戶路徑和交互維度。


          用戶路徑:指用戶從某個開始行為事件直到結束事件的行為路徑,即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說,我們看看排行前列的競品是怎么做的。通過相應的體驗和對比分析,我們就可以找出這其中符合我們產品性質的最優解,從而提高我們的登錄注冊效率。



          交互維度:交互維度和用戶路徑有所區別。這一層需要弄清楚產品的核心路徑,從而能夠更好的解析產品各個層面的邏輯關系,這就需要我們以用戶的角度去逐個體驗,整體聯系,隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細節,怎樣分享的,怎樣展示的,比如音樂軟件進行截屏后和點擊喜歡按鈕后的反饋是怎樣的。




          6. 如何進行視覺設計:


          在進行視覺分析時,有一點需要注意,如果你需要詳細分析某一模塊,請用手機尺寸截圖后拿到設計軟件中進行測量,不要光靠眼睛觀察,很多時候的小細節我們只有在手動測量后才能感受到,比如控件的尺寸大小,間距的大小,以及顏色的取值,都需要精準測量后才能得出靠譜的結論。


          怎樣進行視覺分析呢,我比較推薦從一個app 視覺語言最基本的五個維度去分析,即“形色字構質”



          最近以音樂APP進行了一次競品分析,以QQ音樂APP來舉例進行分析(當然競品分析并不能只分析一個,而應該根據你需要的功能找多個競品進行對比分析,才能看到更多的維度,這里只拿一個舉例):




          6.1 圖形元素的分析


          首先我們以形進行分析,形即圖形元素,具體來講即LOGO和圖標。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標整理歸納如下:



          可以看到整體的圖標色調更加清新,造型設計更加圓潤,未選中狀態的線形圖標則采用4px的描邊,粗線形描邊讓整體界面風格顯得更加穩重的同時對用戶的干擾也較小。新版的圖標界面讓界面保持穩重的同時又富有活力。



          6.2 色彩體系的分析


          其次則是對色這一類別進行分析,顏色其實是對于品牌調性有很大的影響,比如一想起QQ音樂就知道主色是綠,一想起網易云音樂就知道主色是紅,對用戶的記憶點更深刻。通過截屏測量進行分析,得出整體的顏色如下(由于手機屏幕的色差原因,不可避免會有些許誤差)


          從局部來看,分析顏色最重要的一點就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色,觀察成熟的產品是怎樣用顏色(和字重)去區分層級關系的。



          可以看到,用主色和三種輔色即可區分界面的整個層級關系,由此思考我們在制作自己的界面時也避免用太多的顏色,造成界面太過花哨。(顏色的具體色值可能有些許誤差,更重要的是看顏色層級關系)



          6.3 字體體系的分析


          接下來是字的分析,字即字體體系,可具體到字體和字號。設計中字體一般來講是蘋方,字號則根據設計師的定義來進行相應的規范。通過頁面的測量分析,可以拿到其具體的字號大小層級分析。(以下定義基于750的設計尺寸)



          對于單個界面的分析,個人覺得要帶有思考的眼光去看待,比如在首頁中字號其實分配過多,像“更多”這種按鈕就不應該再分一個字號,字號太多整體就顯得有一點點亂了。雖然大廠的設計能在一定程度上給予我們參考,但并不是說他的每一個設計都是正確的,我們要學會用審視的眼光去看待出現在身邊的設計。



          6.4 界面構成分析


          界面構成即界面的元素大小以及他們的布局,例如有時候我們不知道一個標準的搜索框的長寬具體多少才是合適的,這就需要我們去分析其他成熟的商業產品,通過測量來知道具體的數值,從而督促自己進行正確的設計。這里選取了一個默認的首頁進行分析。



          將一個頁面用右邊的形式進行原型化,去掉干擾可以把結構看得更清楚。間距之類的也可以通過軟件進行測量。可以看到QQ9.0版本的去線化設計,利用大間距來區分各個模塊,去掉了其他的干擾元素,整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統一的圓角化設計也讓整體設計符合流行趨勢,顯得更活潑。



          6.5 質感與風格分析


          關于界面的質感則是不同于扁平化的一個設計,即有的頁面在你看來細節會更豐富,層級會更深。界面質感通過漸變,疊加,透明度等不同方式來呈現,比如在QQ音樂中的會員界面卡片,則體現了微質感:



          上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質感,讓整個界面顯得更精致。當然,疊加的圖案都是與內容相關的,不能為了疊加而疊加。包括下方的權益圖標,也采用了漸變的方式來讓整個圖標顯得更精致和有質感。我們再處理質感的時候也可以用這種方式來進行。


          以上通過“形色字構質”來分析是屬于單個分析,相當于去拆解一個成熟產品中的每一個細節點,從而去學習和吸收。我們還要學會進行對比分析。把單獨某一個功能模塊拎出來,通過不同類型的對比從而歸納出這一類的設計方法和樣式,進而總結相應規律。


          比如某一天你需要設計一個歌單列表,你此時就需要分析所有TOP排行的歌單列表,看看分別都有什么,從而總結歸納出結構來,再進行分類。



          通過分析提煉,形成以下結論并進行相應的概念風格展示設計:



          這樣,我們最后制作出來的方案才能涵蓋比較全的解決方案,從而能夠更好的助力設計產出。上圖的產出可能稍顯簡陋,但只是做一個簡單的示例,真正的產出應該更加有細節和落地,也要結合自己的工作需求做相應調整。



          7.關注競品的版本迭代和用戶評價:



          關注版本更迭,閱讀競品版本更新的詳細說明,你可以從中得出版解決了什么問題,提升了哪些體驗,添加了哪些功能,融合了什么流行的設計趨勢。產品迭代就是團隊通過用戶需求對某個產品不斷完善的一個過程。迭代對于一個產品來說是至關重要的,一個產品如果不想被對手超越,就必須不斷的對版本進行更新迭代。


          除了關注具體的內容,你還可以觀察版本更新的提示信息,例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你,從而讓你更加情愿去更新,提升新版的使用率。


          用戶評價則更不用說,產品的最終服務對象就是用戶,用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價,吸收好的建議,屏蔽無腦的意見,從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網站(https://appbot.co/)去查詢。



          總結


          以上的篇幅較長,看下來可能會有一些累,那么此篇文章提及到的點在這里回顧一次:


          1.競品分析的定義-站在巨人的肩膀上去學習;

          2.為什么做-基于自己的目的去進行對應的競品分析,分析的最終目的是解決自己在設計過程中遇到的問題;

          3.競品分析分為三個層面:視覺分析、交互分析以及商業分析;

          4.怎樣進行商業分析(商業背景、盈利模式、用戶人群);

          5.怎樣進行交互分析 (用戶路徑、核心路徑、交互細節);

          6.怎樣進行視覺分析 (從“形色字構質”五個維度去分析以及如何對比分析應用);

          7.競品的迭代和用戶評價的重要性。


          自己有一個小習慣,看完每一篇文章,總會告訴自己一定要在腦海里回顧一遍,思考一下這一篇文章到底有什么觀點是自己之前沒有想到的,哪怕只有一點是沒觸及到的知識盲區,那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。


          寫這篇文章的目的是給自己的競品練習做一個總結,以輸出倒逼輸入是一種比較有效的學習方法。但基于自己的水平有限,在某些分析的地方仍然存在不足和疏漏之處,希望大家諒解并及時交流。感謝大家看到這里,希望大家每天都進步~


          轉自:站酷-進擊的M 

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


          如何更好的使用彈窗?

          ui設計分享達人

          彈窗在設計中運用的非常廣泛,基本上每個應用都會涉及到。恰好這段時間我也在整理公司設計組件這一塊,所以就想總結分享一下


          設計師都會使用彈窗,但對于彈窗背后的分類及運用可能還不是特別了解,在寫這篇文章之前,我查看了很多應用及資料,所以下面會有大量的案例,相信大家看完可以對彈窗的認識更明確,做設計規范的時候也能有自己的想法。


          現在的彈窗分為兩種,一種是模態彈窗(重提示),一種是非模態彈窗(輕提示)。

          常見的模態彈窗:Dialog/Alert、Actionbar、Popover/Popup

          常見的非模態彈窗:Toast/Hud、Tips、Snackbar、



          Dialog/Alert  對話框

          對話框是我們常用的彈窗,安卓開發語言是Dialog,iOS開發語言Alert,它通常出現在頁面的中間,對話框/警示框的類別非常多,對用戶的干擾比較大。前面之所以說模態彈窗是一種重提示,是因為它需要用戶主動觸發選擇才可以繼續當前的操作。


          ① 信息-選擇確定

          特點:這類彈窗通常是一些系統功能的授權、版本更新、消息通知、重要提示等,通常只有1~3個主按鈕,只需要用戶進行簡單的選擇。


          下圖舉例分析:

          iOS詢問是否刪除APP,就屬于重要提示彈窗,它一般會用在像刪除、確認提交...一些比較重要的功能操作中。

          小紅書的這個是否允許使用網絡彈窗,大家一定在許多APP中都見過,這屬于一個系統自帶的授權彈窗。

          馬蜂窩與天貓的消息提醒彈窗,一個屬于初次使用APP時,系統自帶的彈窗,一個屬于使用后期APP為了推送消息,主動提示你開啟消息通知。

          有錢花和愛奇藝的版本升級彈窗,都屬于偏運營類的彈窗,這一類的彈窗通常會弱化暫不升級的按鈕,突出升級主按鈕。




          ② 信息-輸入勾選

          特點:這類彈窗通常是輸入一些比較少的信息或者勾選信息,常用于備注輸入、規格選擇、分組選擇等,通常只有確定和取消兩個按鈕。


          下圖舉例分析:

          微博對于已關注人的分組及備注,都屬于信息輸入及勾選類彈窗,操作通常都比較簡單。




          ③ 信息-傳達展示

          特點:這類彈窗通常是一些廣告、紅包優惠、節日活動等一些運營類彈窗,主要是吸引用戶點擊及參加活動,這類運營彈窗通常會設計的比較吸引人,造型各異,會突出領取、查看等大按鈕,弱化關閉按鈕。


          下圖舉例分析:

          拼多多和餓了么這類的紅包優惠彈窗,就不多說了,大家都懂,它們最主要的目的就是吸引用戶點擊,提升購買率。

          美團的變黃送好禮彈窗,屬于一次比較大的品牌升級,它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設計都非常清晰,視覺感很強。

          支付寶的這個猜世界杯贏螞蟻積分的彈窗,屬于活動彈窗,它的整體設計非常貼合主題。




          Actionbar操作欄

          Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出,它的操作及信息會比對話框類型的彈窗更多更復雜。這種當前頁面的下拉彈窗好處就是,可以讓用戶清楚的感知當前的操作,比跳轉到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。


          ① Action Views操作視圖

          特點:這類視圖彈窗通常占屏比較多,以文字、圖標等形式展示各種功能,也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出,不太強調歸屬,大多出現在購買、支付、分享等場景。


          下圖舉例分析:

          百度網盤的這個+號擴展彈窗比較特殊,它也可以說是浮層,占滿整個屏幕,它最吸引人的還是它的小動效。

          京東購買時的彈窗和支付寶付款時的彈窗,都是比較典型的,在各種電商產品及付款頁面用的非常多。

          轉轉這個的鍵盤與輸入為一體的彈窗,設計的非常人性化,讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。

          網易云音樂的分享彈窗就是典型的以文字與圖標來展示功能的。

          微信讀書的底部閱讀設置彈窗,比較特殊,為了使用戶沉浸閱讀,它是比較隱藏的,而且非常輕量化。


          undefined



          ② Action Sheets 操作列表

          特點:操作列表相對于操作視圖,它更單一。主要是以文字展示功能按鈕,重要敏感的功能操作一般會用主題顏色或紅色顯示,主要運用在一些日??丶?、功能選擇、刪除、保存等場景。


          下圖舉例分析:

          Keep的選擇日期,屬于iOS原生控件,非常常見。

          淘寶的選擇地址彈窗,整個展示的非常清晰全面,而且用戶每選擇一項,就會有相應的顯示。

          支付寶和天貓超市的兩種列表彈窗,就不多說了,簡單的功能選擇都會采用這種。




          ③ 抽屜式彈窗

          特點:這種抽屜式彈窗一般從左右兩邊彈出,經常運用在一些導航擴展和目錄展示中,它能承載比較多的信息,基本上都是用來放一些不太常用的功能。


          下圖舉例分析:

          微信讀書及一些其他閱讀類產品,由于目錄很長,而且一般是從上到下瀏覽的,所以基本都采用了這種抽屜式彈窗。

          小紅書的這個抽屜式彈窗,以圖標和文字的形式展示了一些不是很常用的功能,為我的頁面節約了不少空間。




          Popover/Popup 浮層

          Popover是ios的開發語言,popup是安卓的開發語言,浮層是指,用戶點擊某個功能后浮出一個臨時氣泡對其作出補充,它通常會伴隨著半透明的遮罩或者投影襯底,用戶需要點擊功能區域操作,或者點擊空白處取消,才能進入下一步操作。它與上面操作欄的最大區別就在于,它更強調歸屬,可以出現在頁面的任何地方,而操作欄一般只出現在底部,不強調歸屬。


          ① 指向浮層

          特點:這類的浮層一般伴隨有小三角指向,強調歸屬。氣泡里面的功能通常以單一的文字或文字與圖標結合的形式來展示,主要運用在頂部加號補充、復制、分享轉發等場景。


          下圖舉例分析:

          支付寶和美團的頂部加號補充浮層,展示形式是差不多的,只是UI樣式不一樣,一個是白色氣泡黑色半透明遮罩,一個是深灰色氣泡。

          微信讀書和微信的選擇文字氣泡,在文字復制中很常見,通常會與其他轉發收藏小功能一起出現。




          ② 導航篩選浮層

          特點:所謂導航篩選,自然是與導航分不開的,再加上浮層是比較強調歸屬的,所以它通常會與導航連在一起,一般出現在頂部。


          下圖舉例分析:

          美團的導航篩選,因為選項及開關很多,所以它的底部會有兩個主按鈕,一個完成,一個重置。

          餓了么的這個只有一個功能選項,所以它一般是直接選擇就收起浮層了。




          ③ 引導浮層

          特點:引導浮層的作用就是引導用戶更好的使用產品及交互,降低用戶的學習成本。它通常會出現在用戶首次進入APP的時候,一般只會出現一次,點擊空白位置或我知道了浮層就會消失。


          下圖舉例分析:

          QQ音樂與微醫的引導浮層都是用戶首次進入應用時,給出的功能搬家提醒浮層。





          Toast/Hud 提示框

          Hud是ios的控件名詞,Toast是安卓的控件名詞,它們都屬于一種輕提示,給予用戶及時反饋,讓用戶知道自己當前所處的狀態。

          Hud一般只出現在屏幕的中央,以毛玻璃的樣式表現,內容展示比較富豐富。

          Toast可以出現在屏幕任意位置,通常以黑色半透明的小框來表現,內容一般是純文字提示或者文字與圖標結合提示。


          ① 狀態提示

          特點:狀態提示的Toast,它們一般都是反饋用戶當前操作的狀態,只出現1到2秒就會自動消失,場景一般是關注成功、密碼錯誤、音量提示、靜音、清除緩存等。


          下圖舉例分析:

          移動的屬于操作遇阻提示。

          京東的屬于操作成功反饋。

          iOS的音量控制屬于毛玻璃Hud。

          微信的清除緩存屬于正在操作狀態。




          ② 按鍵提示

          特點:按鍵Toast提示與狀態提示不同,它們一般自動出現或者點擊觸發才會出現,用于對功能點的補充說明,讓用戶對功能有更深的了解。


          下圖舉例分析:

          螞蟻森林里點擊樹木就會出現相關信息,當然它也會自動出現,點擊其他區域也會自動消失。 

          知乎的消息標簽不僅有小紅點提示,還會在上方自動出現數字提示。




          Snackbar

          Snackbar是Android中的一個控件。它一般會在超時自動關閉或者在屏幕上滑動關閉,它沒有Toast那么輕量,設置出現的時間會比Toast長,而且可以點擊按鈕進行交互。


          下圖舉例分析:

          UC瀏覽器的Snackbar,是在提示用戶上滑,來查看更多內容,它需要滑動或者超時才能關閉。

          京東的Snackbar,是在為用戶推薦商品,提示用戶點擊箭頭來查看喜歡的商品,它比UC瀏覽器多了一個關閉的按鈕。




          Tips提示

          Tips與Snackbar最主要的區別就是:Tips它是內嵌在頁面上的,而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁面才會消失,一般用于需要用戶感知到的通知信息,或者植入廣告。


          下圖舉例分析:

          百度網盤在下載視頻時,就會出現一個Tips的提示,讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告,但它抓住了用戶的場景及心理,觀看廣告的幾率大大提升。

          愛奇藝的Tips提示就屬于重要通知提示了,提示用戶VIP即將到期,續費可優惠,它們都有一個主按鈕及關閉按鈕,需要用戶主動觸發提示才會消失。


          undefined



          規范總結

          目前的彈窗樣式非常多,你能想到的,你想不到的基本都可以技術實現。但這同時也帶來一個問題,那就是“不規范”。以上提到的彈窗種類,你只需要選擇符合你產品要求的幾個類型,最好不要在一個產品中運用多個同種類型的彈窗,否則后期會很難規范及組件化,當然運營廣告類彈窗可以另當別論。

          轉自:站酷

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


          拆解「開關」背后的設計細節

          ui設計分享達人






          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          小小開關中的大學問



          一.生活中的反面案例


          故事要從我搬到新出租屋開始講起。半年前搬到新的出租屋后,房間里配置的洗衣機也比之前的大了一倍,而且操作區上分布著的密密麻麻的文字和按鈕讓洗衣機看起來更高級了,然而這種對它的好感并沒有持續多久。在我第一次使用它時,我將衣物放進洗衣機后,選擇好時間和洗滌方式,按下了啟動按鈕(如下圖右側白色按鈕)。



          按下后洗衣機發出了“滴”的一聲,在我的認知里它應該是開始工作了,但是10秒過后沒有任何抽水聲和洗衣服的聲音。我疑惑地想:“是不是剛才并沒有成功啟動?”,于是再次按下了啟動按鈕,又是“滴”的一聲,但是這次我等了 1 分鐘沒有任何反應。之后的十分鐘里,我與這臺匪夷所思的機器“交涉”多次才理解了它的運行方式。這臺洗衣機啟動后需要等待大概十幾秒才開始運行,但是在我按下啟動按鈕后我得不到任何反饋或者提示來告訴我洗衣機已經開始工作了,所以疑惑的我又按下了一次啟動按鈕,然而令人崩潰的是這臺洗衣機的啟動和暫停按鈕是一體的,我第二次按下實際是進行了暫停操作,從而導致我第二次的困惑。


          如果你是這臺洗衣機的設計師,你會怎么解決上述的問題呢?


          可能你的心中已經有了答案,在回答之前我們先試著探究問題的本質。


          人們不管是使用日常物品還是與機器進行交互,都會面對兩個階段的問題。一個是「執行」,一個是「評估」。執行時用戶需要理解如何操作,操作后可能會有什么結果。評估時用戶需要知道具體發生了什么。作為設計師我們要通過合理的手段幫助用戶解決這些問題,保證交互的可用性和流暢性。


          通常我們會使用「意符」在用戶執行前告知用戶如何理解、如何操作、操作后會有什么結果。在評估前通過「反饋」告知用戶結果是什么。


          對于意符的定義,在《設計心理學 1-日常的設計》一書中,作者唐納德·諾曼做出了這樣的解釋:


          人們需要某種方式了解他們將要使用的產品或服務,某些標識表明的用途,會發生什么,有什么樣的替代方案。人們尋找蛛絲馬跡,尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號非常重要。設計師需要提供這些線索。人們所需要的和設計師必須提供的,就是意符。除此之外,優良的設計要求對產品的目的、結構和設備的操作與使用者進行良好的交代。那就是意符的作用。


          簡而言之,意符就是在用戶使用前,機器為了讓用戶更好地理解和使用它而做出的提示。而反饋就更好理解了,機器在我們操作后做出的反應就是反饋,沒有反應同樣也是一種反饋。


          下圖展示了機器與用戶如何進行交互。一個合理的設計可以讓用戶快速順暢地進行 1234 四個步驟進而完成任務,而糟糕的設計會讓用戶不斷重復這個流程。之所以會出現糟糕的設計,就是因為在步驟 1 和 3 沒有進行合理的意符提示和反饋提示讓用戶摸不著頭腦,進而導致用戶根據自己的猜測和過往經驗來進行操作,最后得到非預期的結果。



          回到文章開始時的洗衣機開關問題,因為開始和暫停按鈕是一體的,在沒有任何意符和反饋的情況下我按下這個按鈕時我并不知道我啟動的是開始操作還是暫停操作。


          我們可以就這個問題列出以下解決方案:

              1.增加文字提示,如啟動時在顯示屏上顯示“已啟動”,暫停時顯示“已暫停”;

              2.增加語音提示,啟動開關后使用語音告知用戶“已啟動”或“已暫?!?。


          當然解決方案有很多,每個人都可以根據場景想出不同的解決方案。


          與現實機器的開關類似,在 UI 設計中我們如果進行開關設計也需要遵循相應的設計原則。


          一個合理的開關設計主體包含的意符分別有兩種:

              1.表示當前狀態;

              2.表示操作后的狀態。

          主體之外我們還可以添加輔助提示更加清晰地傳達意符和反饋。


          接下來將介紹一些常見的開關類型和輔助提示類型,最后總結出體驗優質的開關設計方法。



          二.開關類型


          1.icon


          在 UI 設計中最常見的開關可能就是 icon 了,即由單一的 icon 通過顏色或圖形的變化來表示開或關的狀態。因為交互設計從古到今并沒有統一的嚴格標準,所以到底是將開關 icon 的樣式設計為「當前狀態樣式」還是設計為「按下之后的狀態樣式」并沒有一個約定俗成的規則。然而,對比而言如今各類 App 設計中常見的且體驗比較好的方案還是將開關樣式設計為當前狀態樣式。如下圖iPhone自帶相機的實況照片開關icon就是顯示當前狀態。



          然而,并不是說將開關樣式設計為當前狀態樣式做法普遍且體驗更好就可以這樣做了,有些開關的設計因為使用廣泛,已經在用戶的心智中扎根,我們如果強行改變反而適得其反導致體驗變差。最典型的就是視頻和音樂的播放暫停開關,他們表示的就是操作后的狀態而不是當前狀態,如下圖。



          因此,大部分應用的開關類 icon 都是混用當前狀態和操作后狀態的,如下圖嗶哩嗶哩的視頻播放界面,播放暫停開關 icon 表示的是操作后狀態,彈幕開關表示的是當前狀態,而視頻鎖開關 icon 又變成了表示操作后狀態了。



          是否統一倒不是關鍵,關鍵是我們是否能夠讓用戶理解相應的意符和反饋,目標是讓用戶在操作開關前能夠知道當前狀態是什么,操作開關后當前狀態是什么。


          舉一個反例,下圖中的美顏相機的夜拍模式開關就沒有直觀表現出當前是開還是關,這種有歧義的設計可能讓新手用戶手足無措,可能本來未開啟的功能讓用戶誤以為已開啟,導致拍出來的照片不符合用戶預期。


          由此我們可以看出,單一的 icon 開關如果沒有其他的輔助提示會造成意符和反饋的缺失,進而形成較大的歧義性,用戶會在疑惑中按照自己固有的心理模型和過往經驗進行判斷,體驗因此降低。



          2.主體與開關分離(分離式)


          上一部分舉了美顏相機的反例,其意符和反饋不明產生的歧義問題導致了用戶的困惑,但使用「主體與開關分離」(后文一致簡稱為“分離式”)的開關設計可以解決這個問題,它在意符和反饋層面都給予了用戶提示,可視性很強,完全解決了開關狀態無法被用戶感知的問題。分離式開關指的是,主體不再充當開關,只當做開關的名稱或icon,另外制作一個開關傳達意符和反饋,解決了當前狀態與操作后狀態混淆的問題,其通常的樣式如下圖。



          如下圖,Faceu激萌不同于美顏相機設計方式就是將主體與開關分離,很清晰地傳達了當前開關狀態。



          大部分App的設置頁面使用的開關都是主體與開關分離的方式,如下圖。



          顯而易見,分離式開關直觀展示了當前狀態,在消除歧義方面優于 icon 開關,但同時缺點也很明顯,它占用了過多頁面空間并美感欠佳。




          3.名稱變化


          名稱變化指的是開關依賴于其名稱的變化告知用戶開關的當前狀態和操作,常見的類型如下:



          部分 App 會將開關的名稱變化的方式統一,但也有部分 App 會將這兩類進行混用,即一個是表示當前狀態,一個是表示操作。


          下圖為部分 App 的名稱開關,我們可以將上圖的開關名稱類型的序號對號入座。



          表示操作的按鈕文字具有一定引導性,用戶容易感知和觸發,反之,表示狀態的按鈕文字由于不具有引導性,如果用戶沒有對這類按鈕形成使用習慣甚至難以意識到它是可點擊的,因此我們可以利用其特性進行逆向應用引導用戶的行為。比如在直播App中,我們希望引導用戶關注主播,又試圖避免用戶關注后又取關主播。我們就可以將“關注”制作為表示操作,文案寫為“關注主播”(屬于1.開啟...)。將“取消關注”制作為表示當前狀態,文案寫為“已關注”(屬于7.已開啟...)。前后的顏色進行區分,“關注主播”的按鈕制作得對比度強,吸引力大,“已關注”做得弱一些,讓用戶誤以為不可點擊,如下圖的斗魚直播。



          然而,名稱變化的開關由于語言的模糊性,仍然造成了部分歧義。我們可以發現很多App的名稱變化開關設計中,都會在操作后加入其它提示來消除歧義(如:toast 提示),有些App則并未加入,因此在后文中會著重介紹輔助提示的優點和使用方法。



          小結


          icon、分離式、名稱變化,如果按照消除歧義的優劣排列的話,大概是 分離式>名稱變化>icon。


          那這樣的話是不是應該把開關都換成分離式呢?當然不是,分離式雖然在意符和反饋的層面很充分地消除了歧義,但是其也有明顯的缺點,分離出的開關會占用部分空間,可能會影響美觀,因此我們需要根據需求和頁面結構選擇最適合的開關類型。


          那名稱變化和 icon 類的開關如何消除歧義呢,我們可以通過添加下面介紹的輔助提示來解決。



          三.輔助提示


          1.環境暗示


          環境暗示指的是用戶在操作開關前,開關以外的區域給予用戶的提示,這些提示本身存在于交互流程中并不是我們刻意加入的,用戶根據這些提示可以判斷當前狀態以及按下開關后的狀態。


          例如在觀看視頻時,當用戶去按下視頻播放按鈕前,用戶會通過當前圖像靜止與無聲音這個環境暗示明白當前狀態是可能是視頻未播放,所以應該按下播放按鈕讓視頻播放。


          再比如得到 App 的夜間模式,用戶可以通過當前界面的樣式判斷當前是否已經開啟了夜間模式,如下圖。



          看下圖,如果沒有環境暗示,你能分清得到的夜間模式的開關哪個當前狀態是夜間哪個當前狀態是日間嗎?



          因此,環境暗示的優勢是我們不需要進行另外設計其他的意符和反饋告知用戶當前狀態,環境給予的暗示已經足夠直觀。



          2.模態/非模態提示


          當用戶按下開關后模態和非模態提示可以在反饋層面告知用戶,讓用戶知道自己是觸發了開啟還是關閉。


          常見的模態提示控件是「警告框(Alerts)」,非模態提示控件是「提示框(Toast)」,前者提示強度大,使用在一些危險、重要的反饋中,后者則使用在一些輕量的提示中。


          介紹 icon 開關的部分我們提到了美顏相機的夜拍模式的 icon 開關狀態難以區分,但美圖秀秀在這里使用了頂部的非模態提示在反饋層面告知用戶當前狀態,很好地解決了這個問題,如下圖。



          拉勾網的設置中,隱藏簡歷為危險操作,用戶極有可能由于開關名稱的歧義或由于疏忽觸發開關導致簡歷被隱藏從而錯過工作機會,因此此處設計了一個形式為警告框的模態提示來告知用戶當前狀態以及潛在風險。




          3.輔助文案


          輔助文案指的是在主體(主體可能是開關名稱、icon 或二者皆有之)之外另外放置一些文案信息來充當意符和反饋。下圖案例就是高德地圖的下車提示的開關,開關的主體是名稱,但是下面的一行輔助文案很清晰地傳達了當前的開關是什么狀態。




          4.其他輔助提示


          并不是所有提示都需要讓用戶看見,我們可以給予用戶其他感官的信號告知用戶當前開關的狀態。


          在現實生活中,我們會通過鑰匙在鎖中扭動發出的聲音判斷鎖是否被打開,通過觸摸感受摩托車是否繼續震動判斷其是否已經熄火。


          同樣,在 UI 設計中,我們也仍然可以使用聽覺和觸覺來消除開關的歧義。一個比較優秀的案例是高德地圖,當用戶打開下車提示之后,會出現語音提示“已開啟下車提醒”,它充分考慮到身處戶外的用戶可能并不能很方便地獲取屏幕上的視覺信息,因此使用語音的形式提示用戶。



          小結


          輔助提示很好地補充了開關在消除歧義上的不足,但我們需要合理使用否則就會產生不必要的視覺噪聲。如下圖,試想音樂的暫停播放開關如果加入的 toast 提示會怎么樣呢?由于我們已經可以通過“手機是否發出聲音”這個環境暗示獲知當前的開關狀態,如果再加入 toast 提示必然會出現不必要的視覺噪聲。




          4.總結


          介紹完開關類型和輔助提示后,我們如何將其應用到我們的產品中,設計出無歧義或低歧義的開關呢?


          如果我們選擇的開關類型已經足夠的消除歧義,如分離式,我們就不太需要額外地增加輔助提示了。但是如果使用容易造成歧義的開關,我們可以按照(開關類型+輔助提示 1 +輔助提示 2 +......)的公式進行設計,即一種輔助提示不足夠消除歧義,可以使用多種一起。


          舉個上文的例子,高德地圖的下車提醒開關的設計就是「名稱變化開關+輔助文案+語音提示」 的組合。


          然而,任何設計都不是完美的,很多地方都需要我們做出妥協,雖然我們可以選擇合適的開關類型和輔助提示解決歧義問題,但隨之而來就可能出現其他問題。如分離式開關消除歧義效果很好,但是占用空間且不美觀,模態和非模態提示給予用戶的反饋比較強,但是可能打擾到用戶。


          綜合上文提到的三款相機軟件作為案例,如下圖,我們可以發現在消除歧義的過程中避免不了對用戶造成的干擾或頁面美觀度的降低。我們很難去評判Faceu激萌、美顏相機和美圖秀秀哪個設計得更好,它們只是在易用性和美觀性之間找到了它們所認為的平衡點。具體如何設計,還是要具體問題具體分析。



          那么我們應該如何進行取舍呢,在這里我們要考慮另外的因素。我們可以從以下角度分析,使用頻率、用戶人群、潛在風險等。


          使用頻率:使用頻率越高,用戶對操作的熟悉度越高,歧義對用戶造成的理解與記憶成本就降低了,設計可以偏向低干擾和美觀度,反之使用頻率越低,歧義對用戶造成的理解與記憶成本升高,設計就應該偏向于易理解。


          用戶人群:不同的用戶人群的風格偏好、認知能力是不一樣的。例如,我們要設計一款目標用戶為年輕人的相機產品,設計風格簡約,此時我們比較偏向的設計方案可能就類似美顏相機。反之,如果我們的目標用戶是中老年人,就要偏向于易用而犧牲美觀度,方案轉而偏向美圖秀秀或 Faceu 激萌。


          潛在風險:開關的切換如果會導致潛在風險,設計就應該偏向于易理解,且需要使用模態提示告知用戶風險。例如用戶如果關閉了推送通知開關,會導致接收不到實時重要的信息通知,此時不僅要使用易識別的開關類型,還需要添加模態提示告知用戶風險。


          我們可以將這些考慮角度放到雷達圖,如下圖所示,最終形成的面積越大我們越應該將按鈕制作得易理解、易使用,反之我們可以偏向于將開關制作得更美觀犧牲一些易用性??紤]到一些特殊產品的特殊用戶屬性,我們可以在下圖中增加其他考慮角度,其并不是一成不變的。



          以上是本次對開關設計的思考,看似小小的一個開關,包含的學問卻不勝枚舉。作為一個互聯網產品設計從業者,一定要善于感受生活,用設計師細膩的內心去打量、洞察身邊的一切事物,發現美與不足,思考改進方法,并在這個過程中逐漸提升自我的價值。

          轉自:站酷-Ballen貝林 


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


          讓用戶多走一步,讓產品前進一大步

          ui設計分享達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里



          在產品交互設計中,

          有些交互邏輯會“故意”讓選擇用戶多走一步,


          而短短的一小步,卻會迸發出更多的價值!

          (在不影響用戶體驗情況下)


          而這次,我在體驗這些產品當中,獲取的一些思考分享給大家。

          我們就來聊聊有哪些是多讓我們做一步而讓產品更加升華的一些APP吧!



          文中涉及到的理論包括:


          尼爾森十大可用性原則

          第五原則-防錯原則(Error prevention)

          第六原則-易取原則(Recognition rather than recall)

          第七原則-靈活原則(Flexibility and efficiency of use)

          我們常能聽到以上的十大原則之中的著名設計理論,

          但可能還是不太清晰是什么意思


          而這篇文章將會實際分析

          涉及到的原則知識我將會在案例中分析講解~



          --------------------------------------我是分割線------------------------------------


          以下是實例分析:



          1-1 . 靈活原則(Flexibility and efficiency of use)

          「中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計,

          不要低估,也不可輕視,保持靈活?!?



          實例A網易云歌曲收藏功能和淘寶收藏功能對比

          (收藏后選擇歌單方便一步)




          在網易云的歌曲收藏功能里,點擊收藏需要再次選擇你想放入的歌單才能收藏成功。相比于淘寶的點擊收藏立馬收藏成功,這樣的做法明顯是網易云多了一步,而個人觀點分析這樣做的是因為(網易云重度用戶):


          1.功能性來說:

          歌單是早期網易云誕生的重要和特色功能


          2.行為路徑來說:

          減少用戶后期創建新歌單過程中 還要去重新收集歌曲,從而更容易定位快速創建自己的個人歌單

          (歌單做分類 同時網易云歌單作為分享也占很大一部分)


          總結來說:網易云是一個主打評論和歌單的音樂社區軟件,先選擇歌單多一步步驟,讓用戶后面聽自己的歌單更為清晰的知道分類,也同時活躍于創建歌單的樂趣當中,讓用戶停留的時間越長,產品也就得到了一部份價值,從而增加了用戶的粘性。這樣就是“多一步”的特別之處。


          實例B:愛彼迎的注冊信息多步界面操作

          (表單信息更便利一步)



          愛彼迎在用戶注冊信息的時候,會把收集的資料分多次進行輸入。

          這樣的設計解決了用戶面對長篇表單填寫的心理壓力,同時告知余下的頁面數,讓用戶心理存在預期考慮。


          將復雜的表單分成若干步,并引導用戶如何操作,并提示余下操作的步驟。一個這樣的舉動,不光是分段優化了表單的填寫步驟的一小步,同時讓新用戶更輕松注冊,提升了用戶的注冊轉化率的一大步。


          實例C:小紅書淘寶等大部分app的隱藏退出功能
          (隱藏退出更深一步)


          目前近幾年大部分應用的退出賬號功能是做的比較隱藏(點擊設置icon-最下方才能退出)
          相比于早些年app在個人中心里最下方直接會出現退出登錄
          近年來隱藏二級或三級頁面下的做法是在太普遍
          而大概分析了如下App的的做法

          (小紅書)


          小紅書個人中心界面設置除去頂部個人信息展示

          另外就是側重筆記功能-收藏功能-贊過功能

          因為這三個功能方便了用戶能快速找到自己的收藏從而閱讀或者自己發布,而設置功能僅用一個icon去代表,而整體布局就摒棄了傳統的功能設置列表那樣,更突出了產品功能側重點,也迎合了產品的業務發展。


          (淘寶)


          淘寶的個人中心頁面就十分大體量了 里面涵蓋了諸多產品功能 一個很完備的生態系統 ,隱藏在二級的功能設置順應了產品的向上的全面發展軌跡,設置功能(退出等)就屬于一個超低頻率的觸發事件了。節約了界面的展示成本。

          而存在較為直接展示退出賬號的App嗎?


          答案肯定是有的~


          (qq安全中心-Appstore)


          此類應用首先功能比較單一,
          就先拿qq安全中心來說,它是屬于一個賬戶保護監管的應用,而為什么不把設置隱藏在更深的頁面呢?
          如圖所示就大概看的出來,產品功能較為單一,再去添加一個設置功能二級入口就顯得冗余了,且對于用戶擁有多個賬戶 退出切換功能就比較重要了。


           Appstore也是如此 垂直于App的應用商店,在個人設置上功能較少,也是較為直觀的放在底部。


          存在的一些個人認為可調整的app

          (印象筆記)



          印象筆記的退出登錄其實比較迷了 在個人中心界面放的猶為突出,而底部的現在同步功能我覺得在同類筆記中是較為重要。而這樣本末倒置了,就是一個大的謎了。




          --------------------------------------我是分割線------------------------------------




          1.2 . 防錯原則(Error prevention)

          「比出現錯誤信息提示更好的是更用心的設計防止這類問題發生。在用戶選擇動作發生之前,就要防止用戶容易混淆或者錯誤的選擇」


          實例A:銀行類(信用卡)app的重復驗證功能

          (增加雙重驗證一步)


          拿招商銀行推出的掌上生活App來說,在用戶每次重新打開的同時都需要重新驗證身份(各類平臺存在 Face ID 手勢密碼 登錄密碼等),而你在付款或者交易的過程中,需要再次密碼驗證, 這樣每次都多一步交互動作,其實都是為了更加安全的保障用戶的個人財產,同時也突出了產品的安全性和可靠性。


          那為啥QQ 微信每次不這樣呢?(常用設備環境下)

          微信qq雖然也有鎖定功能,但考慮用戶使用打開頻率較高,所以只在支付層面上保護驗證密碼。
           

          實例B:微信的側滑刪除功能對比淘寶側滑刪除寶貝功能

          (增加確認刪除一步)



          微信聊天列表的滑動刪除在一次點擊后會繼續顯示“確認刪除”按鈕,其實也是二次保障讓用戶有一個心理預期,效果其實和大部分APP彈窗顯示刪除一樣。


          而淘寶收藏列表的商品側滑刪除點擊就立馬刪除,由于沒有提示“確認字樣”,對于很少用該功能的用戶來說,會帶來一種不符合預期的想法。


          當然淘寶和微信區分做法認為考慮的是 :

          淘寶:讓用戶能夠快速刪除該商品,不需要造成不必要的二次確認,浪費時間。

          微信:刪除的是聊天記錄,是不可逆的操作,聊天記錄對用戶價值比較大,而淘寶的商品是可以繼續收藏回來,就比重來看的話,兩個刪除操作其實大有不同。



          實例C:優酷等視頻類App 4G網絡下播放提示

          (增加提示一步)



          在大部分視頻App中,當在無WIFI環境下的4g網絡連接下,播放視頻過程中會顯示當前視頻為流量播放單中,是否繼續使用流量播放下去,這樣一個小提示,避免了用戶因為WiFi斷開導致產生大量流量費用。



          --------------------------------------我是分割線------------------------------------




          1.3 .易取原則(Recognition rather than recall)

          「盡量減少用戶對操作目標的記憶負荷,動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。這也說了交互的一部分,比如填完表單,下一步應該生成表單,而不是下一步就是完成?!?


          實例A:淘寶人生賬單

          (增加表單全部展示一步)



          在最近新出的淘寶人生賬單中,會展示出自己消費的數據,

          并在分享之前再次確認信息的完整度。這里為什么要需要最后展示一步呢?


          而 同等邏輯下網易云音樂2018年度報告,

          沒在最后展示所有分析數據,我們是否質疑沒做到很優秀呢?


          (網易云音樂2018年度報告)


          其實不然,首先網易云音樂的報告長度很長,放在最后面會導致長圖分享,沒有單頁面展示效果好,也照顧到了大量數據長圖表單分享的復雜性。


          1.并且我們目前大部分年輕人分享某個頁面的時候, 慣用的操作是立馬截圖,

          而網易云音樂做到了每個頁面都放置了當前的二維碼 從而做到識別二維碼快速分享,

          也能讓用戶快速打開自己的年度報告。


          2.心理層面深度分析下:部分數據的內容,其實用戶不太想分享,如果網易云做了最后的長圖分享,其實會讓部分用戶不愿意分享自己的某些不想讓別人知道的私密歌曲或其他。造成多余的用戶操作(裁切或者隱藏)給部分用戶帶來不便。



          淘寶人生賬單案例

          展示完表單數據,下一步生成對應表單,讓用戶有意識性的能再次確認內容,從而分享轉發,而不是盲目的完成,造成用戶的上一頁查看產生困擾。


          網易云音樂

          的做法,由于數據的復雜性和多樣性,聰明的以現在的用戶操作行為和心理研究等,每頁嵌入二維碼,做到了更發散思維的方法拓展。



          更多一步實例:Youtobe視頻開頭廣告

          (增加5秒跳過廣告一步)


          youtobe的廣告是業內運營的比較好的例子,他的好在于,在一段30秒的廣告當中,讓用戶可以選擇5秒后跳過此廣告,但為什么要讓用戶不看完廣告就可以跳過呢?這不就讓廣告沒有價值了?


          其實不然,youtobe也分析了用戶的等待廣告行為,在投放youtobe的30秒廣告當中,5秒的廣告,會讓用戶會更有耐心看完,因為時間短,用戶愿意等待,而不是用戶去上個洗手間,去冰箱拿個汽水之類的行為,用戶會更加專注于5秒的廣告當中,而廣告投放商們,他們會更加把5秒的視頻內容做的更加突出重點,短短5秒就呈現出該廣告的優勢所在,從而用戶會激發點擊欲望,從而達到商業價值。這里的產品增加跳過廣告一步,其實蘊含的價值,推廣遠比完整30秒的廣告更加優秀。



          --------------------------------------我是分割線------------------------------------



          總結:


          以上的諸多“多一步”,其實是產品思維的多一步分析。

          促使我們在設計界面和產品功能架構上,

          更加了解各類App設計布局的深層次邏輯思考。


          設計優化的不光是視覺,更是產品思維的層層剖析。
          在參考的過程中,不要盲目的抄襲模仿布局架構,邊做邊思考。

          從而形成自己對產品的理解。

          轉自:站酷-tronyoung


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

          如何設計更好的表單

          ui設計分享達人



          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          介紹表單設計里經常會犯的錯誤~

          無論是注冊流程,還是信息輸入的界面,表單都是產品設計里最重要的組件之一。本文重點介紹了表單設計里常見的注意事項。不過這些只是通用的規則,實際應用中總有例外~



          少于6個選項的情況,建議全部顯示

          把選項內容放在下拉框里,不僅隱藏了選項內容,而且需要兩次點擊。如果大于5個選項,建議用輸入選擇器,如果超過25個選項,建議加上搜索功能~



          輸入框長度可以暗示內容長度

          輸入內容的長度決定了輸入框的長度。這種做法適合應用在一些固定長度信息的情況,比如銀行卡號、電話號碼、郵政編碼等。



          標簽頂部對齊

          相比左對齊,標簽頂部對齊的表單用戶完成率更高。移動設備屏幕大小有限,頂部對齊的效果也更好(標簽文案長度不可控)。然而在大量數據輸入時,還是可以考慮左對齊標簽,因為瀏覽更,還能節省高度。



          不要把占位符當做標簽

          用戶在輸入的時候就會看不到標簽內容是什么了。詳見Nielsen Norman團隊的總結。

          *也可以參考Google的做法,默認把占位符當作標簽,輸入時標簽移動到輸入框上方



          將復選框/單選框上下排列

          上下排列方便瀏覽閱讀,橫向排列選項內容會被選框控件隔開。



          指出錯誤在哪

          告訴用戶具體哪里出錯了,以及錯誤的原因。



          等用戶填完了再進行驗證

          不要在用戶正在輸入的時候就去驗證,除非這能幫到他。例如在創建一個有字數限制的密碼~



          不要隱藏幫助信息

          盡量默認顯示幫助信息。如果信息太復雜,考慮在輸入時放在輸入框的旁邊。



          不要用*星號表示必填項,標出選填字段

          用戶不一定知道星號代表什么含義。還不如明確的標出哪些是選填字段。



          標簽和輸入框成組

          標簽和對應的輸入框形成一組,他們之間的間距要比組與組之間的間距小,這樣用戶不會困惑標簽是屬于上面還是下面。



          按鈕的文案描述具體意圖

          比如按鈕上的文字建議寫“注冊”,而不是“提交”。



          主次按鈕有層次區分


          關系近的內容成組

          太長的表單讓用戶感到不知所措。有邏輯地分組能讓用戶更快地理解表單。

          轉自:站酷-大秘密mimi

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

          如何通過競品分析來解決問題

          ui設計分享達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          1.競品分析的定義


          從專業的角度來講,競品分析是通過系統的分析方法去全面了解市場上位于前列的競爭對手的產品,能夠讓設計師快速了解自家產品所處的位置,從而來針對性的改進自身產品的一個方法。簡而言之,就是要站在巨人的肩膀上去思考,以競品分析的形式去學習其他優秀的產品,從而解決自身產品所存在的問題。



          2.為什么要去做競品分析


          做一件事情之前一定要思考做這件事的價值和意義,只有你明白其重要和必要性,你才會知道該怎樣去做這件事情,而不是一提起競品分析就找一大堆專業框架和術語然后去填內容,這樣雖然產出了很多,但是關鍵性的內容點其實還是不清楚。


          說直白點,你需要通過這篇競品分析去解決你工作或者創作中遇到的什么問題,帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況:



          因此我們要學會根據自己的不同需求,去制定不同的競品分析方案,讓分析的內容更聚焦。作為UI設計師來講,通過競品分析為自己的設計方案提供科學的理論依據,為自己贏得話語權,能夠更好地科學產出內容。



          3. 如何尋找競品:


          競品的選擇非常重要,如果找到錯誤的競品,那么你所分析的一切結論可能都引向了一個錯誤的方向。從而讓自己的努力都白費。那么怎樣才能找到合適的競品呢?分為以下三類情況


          A.核心服務與目標用戶相同的產品(直接競品)


          這一點是廣大設計師都能想到的范疇,也稱為直接競品。即提供的核心服務、市場目標方向、客戶群體等與我們的產品基本一致,產品功能和用戶需求相似度極高的產品 。往往是通過業務關鍵詞就能直接搜索到的競品,比如音樂類產品,那么直接在應用商店,或者通過專業網站(易觀千帆等)搜索關鍵詞“音樂”即可搜索出排行前列的競品。



          B.目標人群不同,但功能模塊和服務接近的產品(間接競品):


          這類競品可以找起來并不那么直接,可以通過對應功能去逆推擁有此功能的產品,并進行相關搜索。


          如果想不到,可以通過“人人都是產品經理” “36氪“等關于產品資訊的網站進行查詢,甚至可以通過百度指數來進行發散思維,看一下跟你關鍵功能相接近的都有哪些。比如你研究外賣產品,除去餓了么和美團等直接競品,你還可以在分析用戶下單和購買流程中,去分析淘寶和京東等購物產品,也能得到一定的幫助。



          C.目標人群和服務都不同,但交互或者視覺有可以參考的產品(關聯競品):


          這里所選擇的產品,定位和領域可以都完全不同,但是你要從這款產品中得到啟發,從而讓你的產品能夠擁有其他競品不同的特點或者功能模塊。有一個很典型也熟知的的案例,就是衛龍辣條的設計案例,在衛龍推出之前,可以說是沒人會想到辣條會和高端扯上關系,但是衛龍就是借鑒與其領域完全不同的蘋果設計去做,從而在包裝上獨樹一幟,從而吸引人們注意取得成功。因此通過不同領域跨行業的產品有時候也可以找到不錯的思維方向。



          4.如何進行商業分析:


          進行商業分析,這里只提及到三個基本選項:商業背景、產品盈利模式以及用戶人群。通過這三個基本要素,你能對所研究的競品有一個大概的了解。當然深入了解還需要其他平臺(官網網站、36Kr等)來查閱更多的相關性資料,下列是對QQ音樂商業背景的簡要分析。




          5. 如何進行交互分析:


          我們在做交互分析時,我們需要進行必要的兩點分析:用戶路徑和交互維度。


          用戶路徑:指用戶從某個開始行為事件直到結束事件的行為路徑,即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說,我們看看排行前列的競品是怎么做的。通過相應的體驗和對比分析,我們就可以找出這其中符合我們產品性質的最優解,從而提高我們的登錄注冊效率。



          交互維度:交互維度和用戶路徑有所區別。這一層需要弄清楚產品的核心路徑,從而能夠更好的解析產品各個層面的邏輯關系,這就需要我們以用戶的角度去逐個體驗,整體聯系,隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細節,怎樣分享的,怎樣展示的,比如音樂軟件進行截屏后和點擊喜歡按鈕后的反饋是怎樣的。




          6. 如何進行視覺設計:


          在進行視覺分析時,有一點需要注意,如果你需要詳細分析某一模塊,請用手機尺寸截圖后拿到設計軟件中進行測量,不要光靠眼睛觀察,很多時候的小細節我們只有在手動測量后才能感受到,比如控件的尺寸大小,間距的大小,以及顏色的取值,都需要精準測量后才能得出靠譜的結論。


          怎樣進行視覺分析呢,我比較推薦從一個app 視覺語言最基本的五個維度去分析,即“形色字構質”



          最近以音樂APP進行了一次競品分析,以QQ音樂APP來舉例進行分析(當然競品分析并不能只分析一個,而應該根據你需要的功能找多個競品進行對比分析,才能看到更多的維度,這里只拿一個舉例):




          6.1 圖形元素的分析


          首先我們以形進行分析,形即圖形元素,具體來講即LOGO和圖標。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標整理歸納如下:



          可以看到整體的圖標色調更加清新,造型設計更加圓潤,未選中狀態的線形圖標則采用4px的描邊,粗線形描邊讓整體界面風格顯得更加穩重的同時對用戶的干擾也較小。新版的圖標界面讓界面保持穩重的同時又富有活力。



          6.2 色彩體系的分析


          其次則是對色這一類別進行分析,顏色其實是對于品牌調性有很大的影響,比如一想起QQ音樂就知道主色是綠,一想起網易云音樂就知道主色是紅,對用戶的記憶點更深刻。通過截屏測量進行分析,得出整體的顏色如下(由于手機屏幕的色差原因,不可避免會有些許誤差)


          從局部來看,分析顏色最重要的一點就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色,觀察成熟的產品是怎樣用顏色(和字重)去區分層級關系的。



          可以看到,用主色和三種輔色即可區分界面的整個層級關系,由此思考我們在制作自己的界面時也避免用太多的顏色,造成界面太過花哨。(顏色的具體色值可能有些許誤差,更重要的是看顏色層級關系)



          6.3 字體體系的分析


          接下來是字的分析,字即字體體系,可具體到字體和字號。設計中字體一般來講是蘋方,字號則根據設計師的定義來進行相應的規范。通過頁面的測量分析,可以拿到其具體的字號大小層級分析。(以下定義基于750的設計尺寸)



          對于單個界面的分析,個人覺得要帶有思考的眼光去看待,比如在首頁中字號其實分配過多,像“更多”這種按鈕就不應該再分一個字號,字號太多整體就顯得有一點點亂了。雖然大廠的設計能在一定程度上給予我們參考,但并不是說他的每一個設計都是正確的,我們要學會用審視的眼光去看待出現在身邊的設計。



          6.4 界面構成分析


          界面構成即界面的元素大小以及他們的布局,例如有時候我們不知道一個標準的搜索框的長寬具體多少才是合適的,這就需要我們去分析其他成熟的商業產品,通過測量來知道具體的數值,從而督促自己進行正確的設計。這里選取了一個默認的首頁進行分析。



          將一個頁面用右邊的形式進行原型化,去掉干擾可以把結構看得更清楚。間距之類的也可以通過軟件進行測量??梢钥吹絈Q9.0版本的去線化設計,利用大間距來區分各個模塊,去掉了其他的干擾元素,整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統一的圓角化設計也讓整體設計符合流行趨勢,顯得更活潑。



          6.5 質感與風格分析


          關于界面的質感則是不同于扁平化的一個設計,即有的頁面在你看來細節會更豐富,層級會更深。界面質感通過漸變,疊加,透明度等不同方式來呈現,比如在QQ音樂中的會員界面卡片,則體現了微質感:



          上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質感,讓整個界面顯得更精致。當然,疊加的圖案都是與內容相關的,不能為了疊加而疊加。包括下方的權益圖標,也采用了漸變的方式來讓整個圖標顯得更精致和有質感。我們再處理質感的時候也可以用這種方式來進行。


          以上通過“形色字構質”來分析是屬于單個分析,相當于去拆解一個成熟產品中的每一個細節點,從而去學習和吸收。我們還要學會進行對比分析。把單獨某一個功能模塊拎出來,通過不同類型的對比從而歸納出這一類的設計方法和樣式,進而總結相應規律。


          比如某一天你需要設計一個歌單列表,你此時就需要分析所有TOP排行的歌單列表,看看分別都有什么,從而總結歸納出結構來,再進行分類。



          通過分析提煉,形成以下結論并進行相應的概念風格展示設計:



          這樣,我們最后制作出來的方案才能涵蓋比較全的解決方案,從而能夠更好的助力設計產出。上圖的產出可能稍顯簡陋,但只是做一個簡單的示例,真正的產出應該更加有細節和落地,也要結合自己的工作需求做相應調整。



          7.關注競品的版本迭代和用戶評價:



          關注版本更迭,閱讀競品版本更新的詳細說明,你可以從中得出版解決了什么問題,提升了哪些體驗,添加了哪些功能,融合了什么流行的設計趨勢。產品迭代就是團隊通過用戶需求對某個產品不斷完善的一個過程。迭代對于一個產品來說是至關重要的,一個產品如果不想被對手超越,就必須不斷的對版本進行更新迭代。


          除了關注具體的內容,你還可以觀察版本更新的提示信息,例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你,從而讓你更加情愿去更新,提升新版的使用率。


          用戶評價則更不用說,產品的最終服務對象就是用戶,用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價,吸收好的建議,屏蔽無腦的意見,從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網站(https://appbot.co/)去查詢。



          總結


          以上的篇幅較長,看下來可能會有一些累,那么此篇文章提及到的點在這里回顧一次:


          1.競品分析的定義-站在巨人的肩膀上去學習;

          2.為什么做-基于自己的目的去進行對應的競品分析,分析的最終目的是解決自己在設計過程中遇到的問題;

          3.競品分析分為三個層面:視覺分析、交互分析以及商業分析;

          4.怎樣進行商業分析(商業背景、盈利模式、用戶人群);

          5.怎樣進行交互分析 (用戶路徑、核心路徑、交互細節);

          6.怎樣進行視覺分析 (從“形色字構質”五個維度去分析以及如何對比分析應用);

          7.競品的迭代和用戶評價的重要性。


          自己有一個小習慣,看完每一篇文章,總會告訴自己一定要在腦海里回顧一遍,思考一下這一篇文章到底有什么觀點是自己之前沒有想到的,哪怕只有一點是沒觸及到的知識盲區,那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。

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

          產品設計之「取消按鈕」的使用詳解 | 細節分析

          ui設計分享達人



          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          通過對「取消按鈕」的分析,指導各位正確的進行對于「按鈕」的設計。


          按鈕,無論是在 Web 還是 App 上都被廣泛地使用,而很少有設計師會注意到按鈕當中的細節,導致在設計過程中出現一些低級的錯誤,使得用戶在完成任務的過程中產生阻礙,無法順利達成目的。


          在許多優秀的產品中,關于按鈕的設計已經有了一套相應的規范去執行。作為設計師,應該總結這些規范,并產出一套適用于自家產品的設計規則。這也是我寫「按鈕規范」系列文章的目的。


          今天主要先與各位聊聊「取消按鈕」的設計思路。


          關于「取消」,大多數人對其理解還停留在 PC 端,認為「取消」的目的就是讓用戶停止操作上的流程。但時至今日,「取消按鈕」的設計已經有許多解法與思路,如果不仔細研究與分析,可能會忽略一些用戶行為上的細節。


          所以我們從下面三個大點來聊聊「取消按鈕」的設計:

          1. 按鈕中的「召喚行為」(理清按鈕設計的概念)

          2. 其背后的控制權(關于按鈕的權重信息)

          3. 「取消按鈕」的正確解法(重點)



          按鈕中的「召喚行為」


          通常,我們在產品中會為了達成某種指標,需要在界面上引導用戶去完成我們希望其完成的操作。且這類操作是可以達成某種目的的,我們把這類操作稱為「召喚行為」,即從元素的角度引導用戶完成任務。


          這類「召喚行為」最常出現的,是在按鈕設計的過程中。


          用戶如何將元素理解為按鈕?就是通過對形狀和顏色的控制,使該元素看起來像一個按鈕。



          它唯一的作用就是讓用戶點擊,并且是主動讓用戶點擊。

          我們經常在各類設計中見到這樣的按鈕設計,或許還有更多樣式,如:



          它們的目的一致,都是召喚用戶進行點擊,至于類型的選擇一般根據功能界面的上下文情況進行判斷。


          其重要程度也是以此順序排列:凸起 > 扁平 > 邊框 > 文本。


          這類設計的結果就是:無需讓用戶思考要點哪里,而是直接判斷下一步是否進行。幫助用戶簡化一個思考點。


          注:因為判斷是否進行的操作還取決于功能本身以及文案的提示,與我們今天要聊的不是一回事。所以我們跳過這塊,直接聊「召喚行為」與「取消按鈕」的關系。


          這段內容各位只要記?。?strong style="outline:0px;margin:0px;padding:0px;">按鈕的行進與回退,基本遵循「召喚行為」的思路來設計。


          這個概念知道了,我們就可以對后面的內容繼續進行拆解了。



          背后的控制權


          接下來我們從多個角度來挖一下「取消按鈕」的設計,分析其不同地位。


          a. 安全性后退


          「取消」在多數情況下,意為安全性地后退,并將界面恢復到原有的內容上,不對界面與功能本身造成破壞,防止對系統進行不必要地更改的「安全措施」。


          所以正常來說,「取消按鈕」不是「召喚行為」。以至于通常在設計上會被弱化,以表示該按鈕在功能的流程中,不是主要的,且是提供給用戶作為回退余地的操作。


          如:



          在這張圖里,「登錄」是「召喚行為」,所以突出顯示。根據風格定義,用了扁平按鈕。而取消在這個場景里屬于「安全性后退」的操作,于是將其弱化。


          這是多數產品采用的設計方式。


          比如美團的這個頁面:



          產品希望用戶登錄,就會強化「登錄」行為的按鈕,弱化「回退」行為的按鈕。


          同樣,我們在微信朋友圈的設計里也能見到這樣的設計:



          我們總是希望用戶持續操作下去,但也要給用戶提供回退的行為,所以在這些設計中,「取消按鈕」會被弱化,「行進按鈕」會被強化,因為「取消按鈕」在這里不是產品人員期望的「召喚行為」。


          這是一直以來的設計共識,但如今也發生了些許變化。「取消按鈕」也開始具備「召喚行為」的屬性。


          b. 強化「取消按鈕」


          當我們不希望用戶退出某個界面,或停止某個流程時,往往會選擇將「取消按鈕」強化。


          如:



          或:



          通過對字體的加粗,以暗示用戶不要輕易退出。在這個流程里,「取消按鈕」具備了「召喚行為」屬性。


          也有產品通過改變「取消按鈕」的文案,讓其具備「召喚行為」的屬性,使得用戶在此過程中輕易不要退出該流程:



          這里的「繼續選座」就是「取消」,因為這里的「取消」成了「召喚行為」,所以通過改變文案的方式,確保用戶留下來繼續進行流程中的任務。


          但是不可取的是,這里的「返回」反而給了用戶一種需要思考的壓力。返回?是留在這里,還是退出去?思考幾秒后,反應過來,是退出去。這樣的文案與只有在看到「繼續選座」后進行對比,才能反應過來具體是什么意思,除非是用戶具備操作習慣,知道「右邊」是「行進」操作,才能很快理解。(當然還有個問題,我們在第三各模塊來說明)


          但是多數用戶還是得思考一下,所以要改,最好兩者文案都能改了,否則思考的「停頓」會讓用戶產生厭惡感。


          且在一些產品界面里,為了避免用戶在流程中終止行為,甚至會轉移「取消」與「行進」兩者的位置,如:



          之前截圖了某個產品的界面,寫文這天發現已經改回來,這里就沒放了。


          各位謹記,最好不要這樣進行設計,因為用戶在 App 的操作上已經習慣左邊取消,右邊行進,調換位置雖然能暫時解決用戶的退出行為,但容易產生誤操作,與用戶的期望不同,導致在產品體驗上會被用戶排斥。


          所以到這里,先給一個結論,即在 App 的設計上,行進操作在右,回退操作在左,召喚屬性根據場景對按鈕做突出處理。


          但是「取消按鈕」真的應該具備召喚屬性么?不著急,我們第三模塊再細聊。下面我們先聊聊 Web 與 App 的之間的差異。


          c. Web 與 App 的位置差異


          我們現在見到越來越多的 Web 端產品,也開始遵循 App 產品的設計,把「取消按鈕」放在左邊,「召喚行為」按鈕放在右邊。


          但在早期,Web 的「取消按鈕」基本是放在右邊,原因是鼠標的移動路徑是根據眼動規則來,我們的視線會首先與文案聚焦到「召喚行為」的按鈕上,也就是左邊,這時候鼠標輕而易舉地隨之而來。


          而手指行為的操作,會以右為前進導向,且右手手勢因為便捷性,也會以右為確認操作。否則單手持機,且行進路徑長的話,用戶想進行確認操作會相對比較吃力。



          這就是 Web 與 App 在按鈕位置上的主要區別。


          那會有同學問到說 Web 的「取消」到底是放在左邊還是右邊?這里我說點自己的想法。


          如果根據眼動規則與鼠標的操作模式來說,Web 「取消按鈕」當然是放在右邊更為合適。但如今人們已經習慣了移動產品的「右行進,左取消」屬性,且在界面上的視覺終點一般是在右邊,能引導用戶進行召喚行為。


          但這不具備指導性原則,如果要拆開說,里面還有很多說法。


          比如 windows 和 macOS 的設計規范里「取消按鈕」的位置完全是相反的。win 的取消在右,macOS 的取消在左。



          兩套體系的按鈕位置相互矛盾。這件事本身也說明,只要你在你的 Web 產品里規范好自己的設計體系,就沒有對錯之分。不要一會兒這個「取消」在左邊,一會兒那個「取消」又在右邊,給用戶造成認知障礙即可。


          但是!我更推崇 macOS 的設計規范。原因在于成熟度與一致性。


          主觀因素:眾所周知,蘋果是更擅長做設計的公司,體驗過 Mac 的朋友應該能理解我說的這句話。一般來說,我只聽過從 Win 切換到 Mac 的,沒有說從 Mac 切換到 Win 的,除了少部分因為工作需求需要同步使用的。


          客觀因素:移動產品的普及,已經有相當成熟的設計體系支持行進按鈕右側化設計,統一 Web 或 PC 產品只會讓用戶的操作行為更方便。


          這就是我本小節想聊的,關于 Web 與 App 按鈕設計的差異。



          「取消按鈕」的正確解法


          我相信,只要是平時稍微有認真觀察的同學,都能知道我上述聊的內容。我個人也不認為這些內容具備任何需要總結的價值。但是如果不寫出來,就沒辦法說明我接下來要聊的內容,也是我這篇文章的重點部分。


          通過上述內容,我以不同類型的按鈕案例來解釋「取消按鈕」的控制權。各位可以看出,即使是不同類型的「取消按鈕」,在權重上的道理也都是一樣的。


          但我上面舉的所有產品功能的例子,都不是最佳設計方案,包括微信。


          那如何設計才是最佳方式呢?取消按鈕真的具備召喚行為?


          a. 界面層與彈框層


          其實嚴謹點來說,界面層的「取消按鈕」與彈框層的「取消按鈕」的意義是不同的。


          雖然都是安全性后退,但是前者多了一層含義:放棄屬性。


          還是微信朋友圈的界面:



          這里的「取消按鈕」有兩個狀態,一是用戶剛點進來,無任何操作,點擊取消,解散該頁面;二是進來之后,附帶操作行為,這時候點擊取消,不僅僅是解散當前頁面,還包括「放棄當前編輯的狀態」。


          所以會彈出第二層彈窗:



          這時候無論點擊「保留」還是「不保留」都是取消,退出當前編輯頁面,不對系統產生變更行為,但都屬于放棄了當前操作。

          無非就是微信通過加粗「保留」來告訴用戶,這里的召喚行為是它而已。


          所以這層「取消」的含義,不僅僅是取消,還多了一步是否把你放棄的內容保留下來的邏輯。


          因此在這層含義上,「取消按鈕」也需要特殊處理。


          如果說微信這里的「取消按鈕」在設計上沒有突出其特殊性,那 Twitter 同樣的例子,就比微信高明很多:



          同樣是發布行為,Twitter 在「取消按鈕」上選用了品牌色。因為在其編輯狀態下點擊取消,會出現與微信同樣的情況:




          而 Twitter 的高明之處不僅僅在其對于「取消按鈕」的樣式處理,還在于其對是否「保留」做了明確的設計區分:微信的保留等于 Twitter 的保存草稿,不保留等于刪除。而在通用型設計規范里,刪除內容在樣式上應該區別于發布以及取消。


          更甚者是,其彈出的這個彈框中,還保留了真正意義上的「取消」,即解散行為。在 Twitter 的這個設計上,兩個取消雖然都叫取消,但是通過顏色進行區分,來表示它們之間在邏輯上的差異,這才是我說的高明之處 —— 對每個按鈕的處理都恰到好處。


          類似的還有微博,但是微博對于「取消按鈕」的類型差異沒有做出區分,原因在于它為了弱化界面層的取消,與彈框層的取消樣式保持了一致。



          雖然沒什么太大問題,但從嚴格的邏輯上來說,這兩者取消是存在歧義的。只是用戶已經習慣且理解了,所以沒要造成使用的負擔。


          微信的彈框雖然避免了這層歧義,但在操作上還是不夠直觀,我每次發微信朋友圈,點取消彈出「保留」與「不保留」我都要停頓一下謹慎地進行選擇,生怕自己點錯。


          當然,這里面還有關于顏色的說法。


          這時候再對比 Twitter 的界面就能看出設計師之間的差距了。


          b. 彈框層「取消」顏色的差異


          上面提到的許多例子中,還存在一個類似的問題:它們大多選用 iOS 自帶的彈框直接做為操作對象。


          我始終覺得在 iOS 提供的彈框中,兩個操作的按鈕顏色保持一致是不對的。


          粗細有時候很難被直觀感受,而顏色可以在第一時間被感知。


          比如前面提到的這個案例:



          理想情況下,即使用戶知道右邊是行進,左邊是取消,但彈出這個彈框的時候,不免還是需要再次閱讀一遍進行確認。


          但如果改個顏色,好像就更好理解(當然文案也是問題,但優先級弱于顏色),畢竟彈框也是設計的一部分:



          需要注意的是,用戶既然已經選擇取消,就盡量明確的告知用戶,不要為了留存而留存,以至于模糊化該彈窗的選擇結果。

          所以召喚行為,并不是強迫用戶去做,而是遵循用戶的「旨意」去提供選擇。這里的「返回」才是真正的召喚行為,而「取消」并不具備召喚屬性。硬生生的給「取消」附上召喚屬性,只會讓用戶在操作時摸不著頭腦。


          包括下圖,我常常因為在使用 App 時,彈出這樣的彈框,而不能在第一時間進行正確的點擊,選擇退出當前的 App。



          這樣例子還有很多。


          但是我覺得做得好的,應該是這樣的:



          或:



          這就是刻板印象造成的結果。我們應該學會適當地使用控件,并根據自己的產品對其進行優化。而不是一味跟風。


          綜上所述:界面層的取消,為了表示其作用性的不同,且界面元素眾多,突出顏色是沒問題的;但彈框層的取消與確認在顏色上沒做區分,直接用不太明顯的粗細效果讓用戶聚焦于這兩個內容的選擇上,其實是不友好的設計。


          如果對 iOS 設計規范有足夠的了解的同學就能知道:它們在彈框控件上給出的兩個選擇都不是真正意義上的召喚行為按鈕,只是常規內容,且更適用于產品開發,而不是設計指導。


          如果你仔細觀察 macOS 的設計,就能發現他們為具備召喚行為的按鈕位置與顏色都做了特殊處理,并不是簡單的同色系,或用粗細表示。如圖:



          雖然用 macOS 來反駁 iOS 似乎不太合理,但我只是想說明在設計結果上,我們應該有自己的思考。


          就這個問題,我在 Twitter 上咨詢了前 Apple,后創辦了 UXM 的產品設計師 Anthony。原因是,他曾經也就「取消按鈕」的顏色提出過一些個人看法。


          在我說了這些內容之后,他跟我說的第一句話是:

          Hi Dai — While Apple is very good at design, they are not perfect.(Apple 非常擅長設計,但它們并不完美。) 

          接著他繼續說道:你這套理論非常棒,所以你完全可以按它去給自己的產品構建一套設計規范,并不一定要遵循 Apple。


          借著這個機會,我還跟他聊了許多其他內容。而這件事本身再一次驗證了我的想法:越牛逼的人越謙虛,且平易近人。


          哦,不是,跑題了,應該是:不存在完美的設計規范,設計師在成長過程中并不一定要循規蹈矩,受到規則的限制,認為設計就該如此。而是學會獨立思考,突破屏障,去挖掘更深層次的內容。


          看完這篇文章,再去翻一翻 Google Material Design Guidelines,就會有一種「哇哦!原來如此!」的感觸了。



          小結


          所以我這篇文章的內容結論是:

          1. 位置固定,左回退,右行進;

          2. 顏色區分,左淺色,右深色;

          3. 召喚行為不是用戶想做的事,而是我們應該要讓用戶做的事,但不是強迫,所以正常情況下,「取消按鈕」通常不具備召喚屬性。


          可能有人會覺得,這么一個小問題,不至于用這么長一篇文章來說明,不過人么,就是存在這樣那樣的區別。我認為需要就可以了。


          本來這篇文章還有一段關于「手勢按鈕尺寸」的內容,不過到目前為止,文章內容太長了,所以我暫時去掉了,會在之后的文章里分享給大家。


          當然,到此為止,我聊的內容基本適用于通用場景,且適用于大部分的產品設計,但在一些特殊場景下的按鈕位置、顏色,也會有不同設計方式,這就要根據具體問題來具體分析。


          我這里只是把「取消按鈕」的設計差異、細節提供給大家,以便幫助各位在工作中有更深入的思考,而不是想當然的說就是放左邊或右邊,或者就應該是什么顏色等等。包括對待其他內容也一樣。

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


          日歷

          鏈接

          個人資料

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

          存檔

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