<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設計分享達人

          APP中的閃屏、啟動頁、引導頁的區別,設計方法,個人案例分析,以及品牌解讀

          【什么是閃屏 / 引導頁與閃屏的關系】

          (部分引用觀點)



          引導頁是閃屏的其中一種,一般出現在版本分布或大版本升級時。

          我們先整體看一下閃屏頁的大致類型:

          (聲明:以下圖片來源于應用截圖,僅作為學習交流使用)









          一、常規閃屏


          為什么叫常規閃屏?

          因為這類閃屏比較普通,我沒有想到什么更專業的詞匯,暫且就叫常規閃屏吧。這類閃屏的使用國內的和國外有點不同,因為按照蘋果官方的說法是,用戶打開應用能立即使用是最好的體驗,例如:系統自帶的一些應用,是沒有閃屏的。再甚者閃屏最好就是讓用戶感覺不到,和首頁能有一個完美的融合和過渡。

          這種體驗也很棒,國外的instagram、facebook等就是使用這種設計,閃屏長得很像首頁,更像是一張加載類的占位符。








          當然,因地制宜,國內的我們已經習慣了閃屏作為App品牌的宣傳和推廣手段,一般由logo+名稱+slogan+品牌色組成,界面還是相對簡潔明了的,但還是很明顯的違背了蘋果官方的指導說法,但是沒辦法,這就是商業需要。


          這樣設計也有利處,可以減少用戶在打開App時的焦慮感,也可以讓用戶更直觀的了解品牌,傳遞一些情懷、理念,多看一次閃屏,也是讓用戶強化品牌記憶的過程,只是不知道是好的記憶點還是壞的,就要我們自己斟酌了。








          二、廣告閃屏


          廣告閃屏,顧名思義就是產品本身為了進行流量變現從而獲得盈利,給一些商家打廣告或者進行合作設計的一類閃屏,這是無可厚非的。不過廣告閃屏自帶被“嫌棄”屬性,應該很多用戶看到這類閃屏的心理是比較排斥的。

          至少對我來說,我是很少關注這類閃屏,除非閃屏設計的非常的酷炫,我愿意多看一下,否則的話我就想立刻把它關掉,所以在這類閃屏上加上“倒計時(loading)和跳過”就顯得很必要,并且“跳過”的位置也要方便用戶點擊。

          這類閃屏最好只出現每天第一次打開App時,避免讓用戶厭煩。不管出于何種目的,都需要在商業利益和用戶體驗之間保持一個平衡,不然用戶會流失的很快,用戶流失了,何談盈利呢?

          另外廣告閃屏和下面要說的活動閃屏一樣,會有一個模板:底部是閃屏圖片,上面蓋上一層logo模板。

          App啟動時會從服務器拉取閃屏數據,本地會保存logo模板。如果服務器更新了閃屏數據會拉取數據進行展示,如果沒有更新或是網絡不佳,就會默認展示緩存的閃屏數據,以免發生卡頓現象,以保證流暢的用戶體驗。







          三、活動閃屏


          活動閃屏和廣告閃屏有點類似,出于產品運營方面的需要,它起到活動宣傳的作用,每年的雙十一、雙十二期間,各大電商App的閃屏都會用到活動閃屏,還有一些商家自己造的一些節日:品牌周、年貨節、會員日、狂歡周…相信大家已經見怪不怪了。


          近期我留意到一個問題,就是我們在使用App時,經常會在應用之間進行切換使用。如果我們從其他應用再次返回時,最好不要再加載一次閃屏,會給用戶很不好的用戶體驗。目前使用下來,淘寶、天貓等這類主流應用都有這種問題,但是我想這應該他們有意為之。







          四、節日閃屏


          每逢一些節假日,各大品牌都會推出一些當日的閃屏,那么為什么要設計節日閃屏?

          我覺得有幾點原因:

                 長期看常規閃屏,用戶很容易會有視覺上的一種疲勞,節日閃屏會給用戶一種不經意的驚喜和新鮮感;

                 可以蹭一蹭節日的熱點,提升產品本身的品牌調性;

                 在節日給用戶以問候和關懷,和用戶在情感上產生共鳴,從而更好的連接用戶和產品,我想這應該是最重要的原因。


          節日閃屏比較吸引用戶的注意力,它不像廣告類閃屏,我看見這類閃屏就會忍不住的多瞅幾眼,所以設計這類閃屏的時候要非常重視,因為用戶愿意等待,這是非常求之不得的,這就需要設計師具有比較強的表現能力了。

          我們在設計的時候可以先進行思維上的發散,或者是逆向思維之類的,比如:春節將近,我們可以聯想到是什么,理清一個思緒,要有節日的氛圍,可以活潑、可愛、夸張…切忌呆板。

           







          五、大版本升級閃屏(引導頁)


          在App進行了大版本升級后,要向用戶展示產品新功能的操作方法。這類閃屏也可以稱為引導頁,頁面數量控制在3-5頁,每一頁都有一個對應的主題,主題要精簡,切忌文字過多。


          而且每一頁設計形式要類似,否則會給用戶一種視覺落差感。頁面上要加上“跳過”功能,因為用戶更希望盡快體驗新版本,而不是看你的這些教導,在最后一頁要加上類似“立即體驗”的button。







          ——分割線【品牌傳達力】——










          啟動頁面告訴用戶“我是誰”“我是做什么的”,開頭跟用戶做了自我介紹,引導頁的目的主要是告訴用戶:“我該怎么使用”或者是“我有什么亮點”(重點宣傳的功能),借用男女相親例子,雙方介紹完自己之后,開始展示自己有什么優勢,好的引導頁設計直接關系到用戶是否“對你有興趣”想一進“了解你”。

          從上圖可以看到,引導頁在品牌傳達力上居首位,其次應用市場說明圖。








          【引導頁展示目的】

          以下盡量列舉了金融相關app截圖,僅供學習使用



          引導頁定義比較廣,往小了講,我們一般會認為在用戶初次打開應用時跳出的幾張介紹應用功能的頁面就叫做引導頁;那往大了說,在用戶使用某個功能前就能幫助用戶降低學習成本的頁面或存在引導屬性的彈窗都可以稱為引導頁。

          先從引導頁展示的目的出發,再結合實際app情況去確定宣傳標題,最后結合不同的設計展示方式以及動效。







          一、產品特色介紹


          多數時候,我們初次打開應用會看到下面這樣的引導頁:


          可以看到一個共通點——即頁面呈現的內容為該 App 的主功能或新功能推薦,或者是對剛迭代的功能做了哪些優化的說明。

          理想情況是:用戶能了解這次產品做了哪些優化,幫助用戶更清晰地了解產品。







          二、操作引導


          這類引導會出現在內容頁面,直接引導用戶去操作相關功能

          蒙版引導通常緊貼著界面流程進行而出現,使用透明色間隔形式加上簡單指示性文字與圖形,總是能夠簡潔明了地告知用戶產品的功能或者使用方法,并且由于其輕量的屬性會大大減少用戶的閱讀時間。設計得當的蒙版引導不僅可以與其他引導相輔相成,同時也能夠增加用戶對產品的好感度。

          它的好處就是清晰明了,直接讓用戶知道你想表達什么。它的實際效果會比純內容引導頁好很多,但同時也會有一個問題,即打擾用戶操作。

          這樣的方式已經解決了內容操作引導的問題,但其實這種方法也會使用戶厭倦,所以內容不易過多。







          三、理念傳達


          以傳達態度理念,生活方式等為主,比較概念和意義上的東西,吸引用戶達到某種程度的共鳴,從而產生吸引力。







          四、側面實力烘托


          多用于有實力/特色的產品或者企業,展示自身優勢,讓用戶對產品產生信賴感。










          五、問題解決


          指出用戶所面臨的問題,而你的產品正好可以解決。



          結合自身app/企業所具有的優勢;產品的功能特色;產品的定位;等相應的展示目的。也存在混合展示,不過要把握好標題的設定,在標題與設計上達到統一。








          【引導頁設計方法】


          在確定了引導頁展示目的之后,下面整理了在引導頁設計過程中的方法。

          目前比較常見的幾類引導頁的類型(電商除外),根據產品的特點來確定設計風格,總體沒有固定規則。










          一、圖文結合


          使用有關聯性的圖片,同種版式,優點是感情表達直觀簡單,畫面沖擊感強,缺點是泛表達,不能表達內容。









          二、產品界面描述型


          功能描述型,使用app畫面說明,通常在版本更新時用來對新功能進行重點描述,是目前比較常見的引導頁表達方法之一,比較通用。









          三、模擬應用場景


          通常用插畫方式表現,通過圖文結合的方式全方位闡述中心思想,插畫風格具有豐富的多樣性,同時又能貼切表達主題,所以在app中出現頻率越來越高。

          以下列舉了百度金融的版本引導頁,通過系列插圖表現貼心、安心、用心、省心、隨心,插畫緊密契合主題,完美使用排比句的形式。











          四、吉祥物的運用


          一個成熟的app通常會吉祥物來表現,啟動頁是用戶打開app第一眼看到的地方,吉祥物可以讓用戶在2-3秒時間內深刻體會到產品的核心價值觀。












          五、代交互 動效的


          這類啟動頁通常是在頁面切換中加入一些動效果的設計,使得在交互體驗上更加突出,與靜態頁面間的切換顯得更加生動有趣。

          動畫呈現方式趣味性更高一些,開發成本相對也會高一些。











          六、視頻類/動畫類


          這類的理論上不叫啟動頁,叫開篇動畫更貼切,打開app通常為一小段視頻或動畫引入頁面











          【實際案例分析】


          閃屏/引導頁的設計方法很多,但要在設計之前充分考慮到產品定位和應用場景。

          下面引用我自己的案例分析,因為對產品理解不夠到位,設計過程比較坎坷,經歷了幾個版本的優化。








          【引申思考】


          對晉盈匯app來說:

          1.用戶層面上,在不同版本的情況下需要緊跟不同的用戶引導頁,尤其這類理財類等APP,使用操作都是比較繁瑣,因此需要用戶引導幫助用戶玩好APP;

          2.品牌形象上,可以深化品牌價值,比如提煉產品slogon,吉祥物等,啟動頁是用戶打開app,第一眼看到的地方,需要讓用戶深刻體會到產品的核心價值觀。

          3.商業用途上,可以利用啟動頁配合營銷事件,實現商業價值。

          4.從技術層面,程序可以利用啟動頁的2~3秒內,預加載一些東西,使得后面的用戶體驗更好。


          啟動頁更多的是在啟動過程中的2~3秒內,體現app的核心的品牌價值,而品牌價值通常體現在產品的情感化設計上。


          情感化設計基于三個基本層次水平:本能水平的設計、行為水平的設計、反思水平的設計。

          本能水平的設計——外形(UI界面,整體視覺感受);
          行為水平的設計——使用的樂趣和效率(把完成目標前的過程樂趣化,如何最便捷的觸達相應功能,或達成某結果);
          反思水平的設計——自我形象、個人滿意、記憶(強化品牌傳播,構建品牌形象,讓品牌成為一種文化)。


          情感化設計點:登陸界面、啟動頁、引導頁、節日閃屏、404、刷新加載...




          強化品牌標識,有利于品牌傳播



          上圖是美團外賣的閃屏,以插畫這種具有親和力的表現手法去搭建一個場景,講一個小故事隱喻一個情感。然后傳遞給用戶一個主題。而插畫下方,則是美團的品牌標識:袋鼠LOGO、文案“美團外賣,送啥都快”。


          當你聽到電腦發出“滴滴滴”的時候,你就知道這是QQ來消息了,聲音也是一種品牌標識。



          彌補產品在用戶使用過程中發生的意外



          上圖是ofo共享單車在用戶退押金時的三個提示頁面,分別是告訴用戶ofo的作用是讓你便捷輕松出行,退押金后損失的優惠,最后是用利益誘惑你。從三個層面去打用戶的痛點。不過確切來說只有第一個界面算是與用戶情感化交流,后兩個算是再利用人的貪欲。


          關于文案的情感化設計要分情況,根據APP所分領域、調性和目標用戶人群的特性而定。



          轉自:站酷-嗚嗚吉良斯基

          如何創建精致的UI界面布局篇

          ui設計分享達人

          前言

          前面已經完成這個系列的 “排版和圖形”兩篇文章,本周接著后面的 布局篇幅,我們知道布局的好壞直接影響產品美觀度,不同形式的布局,給用戶帶來的感受是不一樣的,產品也將會有不一樣的性格,因為布局直接影響界面空間疏密程度,不同產品都有著不同空間,那么我們要如何做,才能更好的去布局,并且能在激烈的競爭中脫穎而出,現今大部分產品基本都是長得差不多,作為設計師更應該去多研究一些布局趨勢,并能將其融匯在自家產品中。 




          為什么要重視布局

          - 
          布局對界面設計來說十分重要,不僅是我們常說的在移動端或者web端的設計中,他在車載中、電視端UI或者VR設計同樣有很大影響。我們知道界面設計中最關鍵的五大基礎語言;形,色,字,質, ,其中 構(結構)即是我們所說的布局,五個維度之前已經和大家分享了 圖形和字體篇,今天我們可以看下布局對界面設計的影響,以及我們該如何通過布局來使界面設計看起來更加有范,更有自己的視覺特征點在里面。 




          目前主流布局趨勢是怎樣的

          -

          前面在向大家介紹布局的重要性和他對界面設計的影響,那么如果我們需要做出一些比較有創新的布局來提高界面精致度,該如何去下手呢?我們可以通過觀察目前主流一些趨勢做法,了解國外設計師如何找到更有創意的方式來設計他們的布局 - 并將一些創意運用到界面設計中的,下面我們一起看下。 





          偏移與疊加網格布局

          -

          網格布局我相信大部分人都知道,很熟悉,那么今天所說的偏移疊加網格布局是什么樣子的呢?其實就是我們在設計界面時候,把最底層基礎網格搭建好后,上層的內容排版,通過錯落疊加方式來布局,這種布局的優點是留白空間大,呼吸感強,圖文錯落交織一起,形式感增強。缺點是,運用的范圍會小一些,承載內容少,一般Web端運用比較多。當然也有一些移動端設計個性化產品存在這樣的布局 (Rover APP)可以去下載體驗下。 


          上圖文字與圖片交疊錯落排版,圖片與圖片之間也是網格交錯



          上面移動端設計,設計師通過留出左側空網格,整體內容往右側偏移,導航相對內容來說做了差異化設計,并未進行偏移設計(看我上圖紅框部分)  。這樣做的目的是因為,我們點擊漢堡菜單的時候,本來整體就要往右側移動,如果再繼續移動,那么內容會顯示不下,同時視覺效果并沒有很好



          半偏移網格布局,界面中并非所有的內容都偏移底層網格,而是部分模塊這樣去做,原因是內容多的情況下。





          分屏布局

          - 

          分屏布局,顧名思義就是將屏幕進行幾種不同區域的劃分,然后內容分布排版在里面,分屏布局解決的主要問題將屏幕大的設備進行合理劃分空間設計,一般是在橫屏運用比較多,比如PAD,或者WEB或者車機中控屏,下面一起看下分屏布局在實際設計中的具體表現



          上圖界面設計采用了1/2分屏布局,將圖片與內容文字進行區域劃分,下圖是將主文案擺放在分割區域中間(文字較少情況下可以這樣去做)增強形式感。當然分屏布局可以有多重形式,列如,2/3,1/3,3/4等等,可以根據內容進行選擇合適分屏





          Z軸視差布局

          -

          視差布局,在web app或者web端布局常用比較多的一種,運行方式當滑動頁面內容時內容與內容之間運動速率會有時間差,同時Z軸空間位置也會有深度差異,這樣就形成了視差效果,視差布局一般在H5界面出現比較多,用于營銷場景會多一些,當然WEB端倒是比較常見 


          地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/





          內容重疊布局

          - 
          內容重疊布局,打破了傳統平整的極簡注意風格,扁平化設計將會加入Z軸空間元素,使得整體設計有了新穎的布局方式,這也是一種區分競爭產品的布局方式,一般內容重疊產品大多出現在偏雜志化設計的產品中,如之前我介紹圖形篇時候提到 韓國29cm
          他們詳情頁,運營頁面運用了重疊布局。 



          地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/






          卡片布局

          - 
          為什么要把卡片布局拿出來講?卡片布局應該是我們見過最多的布局了,卡片布局也會有很多種方式去布局,根據產品內容復雜程度去建立卡片容器大小,卡片作為承載內容的容器,對于響應式布局也是非常有利的支持,我們看appstore,behance的移動端,都是卡片布局。 



          卡片布局還有一個最大好處就是,他能夠封裝內容,使得畫面布局整潔,所有內容都往容器里面放,信息之間保持很好的區分



          全封閉卡片布局,內容之間通過卡片封裝,中間無空隙





          自由式網格布局

          - 
          這種網格布局相對來說比較開放性的,布局上多以卡片承載內容為主,卡片跟隨隱形網格隨機分布在畫板中,有點類似我們說的暴瀑流布局方式,這種會比較靈活,一般會在攝影類,雜志類,文藝類產品居多。 







          如何運用這些布局進行創新設計

          -

          上面已經列舉了目前比較流行的一些布局,可能部分人還是感覺不會使用,也不會很好的去利用在自己設計中。要么就直接把別人布局抄襲過來,其實是有方法的,我們可以把自己認為比較好的一種布局拿出來,然后拆解他,拆解完后,再來重新組裝,組裝的時候,你可以參考下其他布局,兩者集合起來,就像樂高積木一樣,你可以有很多種組合方式。 


          上面利用樂高積木思維重新對布局進行拆解組合,當然一切的布局都是基于當前你的主旨,你的產品內容,找到合適布局,然后去研究他,并且拆解,然后重新搭建屬于自己產品一套布局規則





          總結

          -

          全文向大家介紹5種布局思路,當然其實不止這5種,但是其他布局相對來說會運用少一些,這些布局我們可以加以學習利用,可以運用在任何設計中去,當然運用的時候,一定要清晰知道自己產品的主旨目標,用戶群體,合理運用布局,做出創新設計!


          轉自:站酷-設計TNT 

          如何讓你的設計更有說服力?掌握這五個體驗設計原則··

          ui設計分享達人

          從數個項目中總結出的體驗設計原則,包括詳細的舉例說明

          李笑來說過一句話:審美常常并不需要知道原理,但創造美的人必須有方法論,否則不可能持續創造。但是很多人總覺得背方法論是笨工夫,高手難道不應該根據場上局面隨機應變嗎?但事實是,隨機應變才是笨辦法,方法論和成語典故、數學定理一樣,是人腦思維中的快捷方式,“聰明人”之所以能做到隨機應變,是因為他們腦中存有足夠多方法論,當遇到事情時,這些方法論像神經一樣互相連接,給出最優的解決方案。

           

          今天就跟大家分享設計的方法論——設計原則,在方案輸出時,可以將設計原則作為方案的自檢工具,這樣在方案內審時,面對領導和同事的質疑,除了說“大廠都是這么做的”這樣蒼白無力的解釋外,還有更多的設計原則做支撐。

           

          一、一致性

          一致性的益處:對用戶來說,一致性可以降低學習成本,對開發團隊來說,可以減少錯誤,降低產品的維護成本,提高代碼和設計的復用率。對企業來說,一致性意味著產品的不同模塊要有相似的外觀、感覺和行為,這種特性會被擴展到企業其他產品中(比如Adobe旗下的產品都嚴格保持著相同的標準),有利于強化用戶對品牌的認知,建立品牌忠誠度。

           

          一致性的弊端:很多設計師容易被這一原則而禁錮,進而成為設計師偷懶的借口,設計師有時為了強調一致性而忽略了特定情境下的用戶行為和使用模式,所以在設計時不能只關注用戶的感覺和品牌認知,要根據特定場景敢于創新。

           

          一致性可以從以下幾個維度分析:

           

          1、交互行為一致性,交互行為一致性又包括操作方式,控件,控件位置等。拿最近做的項目舉例,「轉到銀行卡」和「信用卡還款」雖兩個不同功能,但盡量使模塊內控件,控件位置及操作方式保持統一。


          2、視覺表現一致性,包括風格,色彩,文字,圖標,圖片等。風格和色彩的統一比較容易理解,這里詳細說一下圖標和圖片如何保持統一。


          圖標的統一性:

          1)一款產品在各個平臺上的圖標要一致

          2)多款產品在一個平臺上的圖標之間的風格或規范要一致

          3)一款產品的每個圖標的風格、細節、體量感上要一致


          如何做到每個圖標風格,細節,體量感上的統一?

          1)保持圖標的復雜程度或簡約程度統一

          2)不使用潦草、手繪的造型,幾何形更容易達到統一

          3)保持圖標的維度統一(二維/三維)

          4)保持圖標陰影、漸變等樣式統一或均無樣式

          5)保持圖標顏色或圖標背景的顏色統一

          6)保持圖標的尺寸和比例統一(體量感)

          7)保持圖標線的粗細統一

          8)保持圖標圓角大小統一


          如何做到圖片的一致性:

          1)圖片的處理方式一致(尺寸比例,圓角,投影)

          2)圖片的風格一致,圖片風格是否保持統一視產品屬性而定,像淘寶這樣的電商平臺想要保持圖片風格的統一性簡直要了店家的命,但是圖片的處理方式可以做到統一,比如淘寶的商品圖大部分是灰色背景等。

           

          3、文案的一致性,文案的人稱,風格保持一致,網易云音樂的文案都是用的第二人稱,且具有很強的趣味性。

          二、優先級

          優先級可以從以下幾個維度分析:


          1、功能優先級:把握核心需求,突出亮點功能,拿最近做的項目舉例:轉賬主頁面功能優先級最高的是「轉到銀行卡」「微轉賬」,所以在頁面布局、所占比重上強調這兩個功能,同時上滑時兩個按鈕變小凍結在頁面頂部,方便用戶快捷使用。


          2、內容優先級:內容分級,突出核心內容。拿最近做的項目舉例:代金券詳情頁,根據用戶使用卡券的場景,以及數據分析得出的內容優先級對內容進行布局與設計。將優先級最高的代金券二維碼放在用戶視線觸達的位置,當用戶上滑時,底部出現全局浮動的按鈕,可快速顯示二維碼。


          再比如,轉賬后的狀態頁面,用戶最關心的內容是轉賬后的狀態及轉賬金額,其次是收款方信息以及轉賬備注,將信息進行整理、歸類、隱藏、刪減,避免不重要信息對用戶獲取重要信息時的干擾。點擊箭頭可查看更詳細的轉賬信息,最后的頁面設計如下:


          3、交互優先級:主要路徑清晰,減少干擾和分支。如下轉賬流程中,根據用戶每一步驟的目的與使用場景進行信息呈現,該出現的時候出現,不該出現時隱藏,分步驟進行,使轉賬這一主路徑清晰明了,減少其他信息對用戶的干擾。


          4、視覺優先級:重要的視覺信息第一眼看到,主要次要信息有所區分。如微信錢包頁面,收付款和錢包的視覺優先級明顯高于下方的騰訊服務。美團首頁上方雖都是功能按鈕,通過圖標的體量、大小、位置拉開彼此層級,突出展示「掃一掃」「付款碼」「紅包/卡券」「騎單車」這些功能,很好的引導了用戶視線,完成產品目標和用戶目標。


          三、易讀性

          易讀性可以從以下幾個維度分析:


          1、使用用戶語言而不是開發者語言,貼近生活實際而不是學術概念。圖1是改版前的頁面,頁面的核心目的是通過圖表、止鼾次數、分貝向用戶傳達止鼾器的止鼾效果,呈現方式不直觀,且用戶對分貝并沒有確切的概念,圖二將分貝巧妙的轉化成蜜蜂的聲音,增強了易讀性,在這里蜜蜂的聲音就是用戶語言,分貝即開發語言。


          2、符合用戶認知與心智,延續約定俗成概念。蘋果的首席設計師喬納森·艾弗說:“好的設計無需認知門檻”,好的設計不需要任何指示用戶就知道如何操作。如下圖蘋果系統的亮度設置,向上滑動是提高亮度,向下滑動是降低亮度,而不是向下是提高,向上是降低。


          再比如,根據我們的正常認知,下一步應該在右,上一步在左。


          3、保持簡潔,不給用戶造成困擾與疑惑。還是拿之前做的項目舉例:微轉賬不同于普通的銀行卡轉賬,需要給用戶進行解釋說明,改版前的說明直接將大段的解釋文字展示給用戶,可讀性差,改版后將大段的解釋轉化成4個直觀的步驟,對用戶來說更容易理解。

          四、容錯性

          容錯性可以從以下幾個維度分析:


          1、操作前可預知:有預防用戶出錯的措施,關鍵操作有確認提示,及早消除誤操作。如圖1輸入轉賬金額時提前告知用戶銀行卡余額,避免余額不足讓用戶重復輸入;圖2提前告知用戶提取的金額是50的倍數,避免用戶出錯。



          分期還款時,提前告知用戶一個賬單周期只能申請一次分期,且在用戶二次確認的彈出框再次提示。



          2、操作中有反饋:給用戶明確的錯誤信息,并協助用戶方便從錯誤中恢復工作。如在分期金額輸入錯誤時及時告訴用戶出錯的原因。



          3、操作后可撤消:允許用戶撤消錯誤操作,如mac系統垃圾箱中「放回原處」功能:



          微信對話中的「撤回」功能,這些都體現了系統的容錯性。


          五、可控性

          可控性可以從以下幾個維度分析:


          1、記憶及預測用戶行為,幫助用戶做些事情,減輕用戶記憶負擔。如mac系統的密碼管理可以幫助用戶記住常用的賬戶密碼:

          郵件中,輸入收件人的姓,軟件能自動檢索出該姓下曾出現過的所有用戶的郵件地址。


          2、對操作給予及時反饋,用戶能了解操作是否已生效,用戶在界面上的任何操作,不論是單擊、滾動還是按下鍵盤,或者操作狀態變化,界面應及時給出反饋。


          3、將操作狀態或進度顯示出來,用戶能了解當前系統狀況,如讓用戶實時了解貨物的物流信息,會減輕用戶等待的煩躁感,同時增加可控感。


          4、用戶清楚知道自己當前在哪里,退路在哪里,可以去哪里,如分頁控件就能明確的告訴用戶自己在哪,退路在哪,還能去哪。




          5、提供適時幫助、必要的信息提示,如最常見的功能引導



          回顧:


          一、一致性

          1、交互行為一致性:操作,控件,位置。

          2、視覺表現一致性:風格,色彩,文字,圖標,圖片。

          3、文案措辭一致性:提示語,功能按鈕等。


          二、優先級

          1、功能優先級:把握核心需求,突出亮點功能。

          2、內容優先級:內容分級,突出核心內容。

          3、交互優先級:主要路徑清晰,減少干擾和分支。

          4、視覺優先級:重要的視覺信息第一眼看到,主要次要信息有所區分。

           

          三、易讀性

          1、使用用戶語言而不是開發者語言,貼近生活實際而不是學術概念

          2、符合用戶認知與心智,延續約定俗成概念。

          3、保持簡潔,不給用戶造成困擾與疑惑。

           

          四、容錯性

          1、操作前可預知:有預防用戶出錯的措施,關鍵操作有確認提示,及早消除誤操作。

          2、操作有反饋:給用戶明確的錯誤信息,并協助用戶方便從錯誤中恢復工作。

          3、操作后可撤銷:允許用戶撤銷錯誤操作。



          五、可控性

          1、記憶及預測用戶行為,幫助用戶做些事情,減輕用戶記憶負擔。

          2、對操作給予及時反饋,用戶能了解操作是否生效。

          3、將操作狀態或進度顯示出來,用戶能了解當前系統狀況。

          4、用戶清楚知道自己當前在哪里,退路在哪里,可以去哪里。

          5、提供適時幫助、必要的信息提示。


          -希望此文對你有一點幫助


          轉自:站酷-poppy



          干貨|尼爾森十大可用性原則案例解析

          ui設計分享達人

          尼爾森的十大可用性原則,它們被稱為「啟發式」,<br>被奉為交互設計師的入門法則。

          開篇靈魂拷問:


          你認為一個怎樣的產品才算是一個好的產品?

          這個問題耳熟嗎?面試的時候是不是有被問到過?
          我們經常使用的那些產品,哪些是好的產品呢?

          當我們談論一個 APP 產品時,
          作為用戶你最關心的是什么?
          一般都是是這個產品好用嗎?功能復雜嗎?
          而不是這個產品用戶界面顏色好看嗎?
          交互的動效酷炫嗎?

          互聯網已經深入到每個人的生活當中,
          時刻影響著我們;
          一個好的產品會給我們帶來便捷,
          使我們的生活變得簡單而又美好;
          也會有一些產品使用時會感到不舒服,
          糟糕的產品體驗會讓我們的生活變得復雜而又煩惱。
          所以,決定一個產品好不好用,
          能不能長期使用都是用戶體驗直接決定的。
          用戶體驗關注的是在滿足用戶需求的同時帶給用戶美好的感受。

          接下來我們來聊一聊「尼爾森十大原則」,
          這十大原則是具體而又全面的用戶體驗可行性檢驗方法。

              
          尼爾森是誰?
          雅各布·尼爾森(Jakob Nielsen)是畢業于哥本哈根的丹麥技術大學的人機交互博士,他擁有79項美國專利,專利主要涉及讓互聯網更容易使用的方法。于1995年1月1日發表了「十大可用性原則」。1995年以來,他通過自己的 Alertbox 郵件列表以及 useit.com 網站,向成千上萬的 Web 設計師傳授 Web 易用性方面的知識,盡管他的一些觀點可能帶來爭議,至少在 Web 設計師眼中,他是 Web 易用性領域的頂尖領袖。2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。他還被紐約時報稱為“Web 易用性大師”,被 Internet Magazine 稱為 “易用之王”。
                  
          尼爾森的十大可用性原則,它們被稱為「啟發式」,      
              
              
          是廣泛的經驗法則,而不是特定的可用性指導原則。
          雖然是1995年提出來的,
          但是至今仍然被奉為交互設計師的入門法則,
          我們不能把它上升為一種標準,
          而只當做一種經驗來學習,
          然后跟現實中的設計結合來使用。
          因為尼老師是從 web 設計提出的十大可用性原則,
          我們要結合的是目前移動互聯網的特點,

          然后在「尼爾森十大原則」的結構下探討在用戶體驗上達到的目標。


          尼爾森十大可?用性原則為:

          01. 狀態可見原則 

          02. 環境貼切原則 

          03. 撤銷重做原則

          04. 一致性原則 

          05. 防錯原則

          06. 易取原則 

          07. 靈活原則 

          08. 易掃原則 

          09. 容錯原則 

          10. 人性化幫助原則


          下面我們就針對每一條來單獨分析一下吧~


           ·.  狀態可見原則 
          系統應該讓用戶知道發生了什么,
          在適當的時間內做出適當的反饋。
          不要蒙蔽用戶;
          溝通是所有關系的基礎,無論?還是設備。

          示例:在淘寶里,我下拉時他告訴我「松開刷新」,也就是現在還沒有開始刷新;我松開后狀態變更成「刷新中」,表示現在正在刷新。
          這樣的設計告訴我們,界面現在是什么狀態,現在在干嘛,在整個功能的變化過程中我們都能看到對應的文字描述。


          其他示例:下拉刷新時的加載中,加載完成提示,收藏成功、支付成功、實付失敗等提示。


          ·. 環境貼切原則

          功能和服務貼近用戶使用的場景,

          符合當前場景用戶的體驗。

          產品的功能和服務應該貼近真實世界,

          讓信息更自然,邏輯上也更容易被用戶理解。


          示例:我們在店里買東西的時候經常會聽到這樣的聲音「支付寶導致:5元」就是貼近環境的設計。
          商家需要確認你是否付錢,
          但是又經常忙于手頭的事情無法及時查看;
          而這樣功能的設計,商家即使在忙著手頭的事情依然能通過聲音來確認已經收到你的錢了。
          這樣的設計對于商家和消費者是友好便捷的。


           ·.  撤銷重做原則 

          在使用產品時了解和掌控當前頁面。

          如果用戶誤操作,可以隨時撤銷,用戶在使用產品時足夠自由。


          示例1:我們用微信和對方聊天時,當我們寫了很多字,發出去時卻發現其中有錯誤,這時我們可以使用微信的撤回功能,體驗更好的是,撤回消息旁邊有「重新編輯」功能,可以讓之前編輯的文本回到對話框重新編輯再發送。如下圖:


          示例2:iOS系統照片的刪除和撤回


          ·. 一致性原則

          同樣的文字、狀態、按鈕,都應該觸發相同的事情,遵從通用的平臺慣例。也就是,同一用語、功能、操作保持一致。主要包括以下五個方面:


          1. 結構一致性

          保持一種類似的結構,新的結構變化會讓用戶思考,規則的排序能減輕用戶的思考負擔。

          示例:微信中每個模塊的條目都有統一的「圖標+文字信息」的結構樣式,能讓用戶快速了解每一個模塊;


          2. 色彩一致性

          產品所使用的主要色調應該是統一的,而不是換一個頁面,顏色就不同。

          示例:淘寶的圖標顏色與界面的主色均為橙色,也包括其中一些標簽和強調的文字顏色都是橙色色。整個界面除了圖片的有效信息外,都通過灰、白、橙色色來呈現,界面保持了很好的一致性;


          3. 操作一致性

          能在產品更新換代時仍然讓用戶保持對原產品的認知,減小用戶的學習成本。

          示例:微信在對話框和通訊錄都采用了左滑出操作的交互,如下圖:


          4. 反饋一致性

          用戶在操作按鈕或者條目的時候,點擊的反饋效果應該是一致的。

          示例:QQ的每個分組點擊后都是向下展開組內成員列表;


          5. 文字一致性
          產品中呈現給用戶閱讀的文字大小、樣式、顏色、布局等都應該是一致的。
          示例:例如微信幾個關鍵界面的字體:三個主界面內容結構不盡相同,但是,列表的標題字體和間距都一樣,這樣讓整個APP視覺上看起來很舒服;


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

          1. 限制操作范圍與條件;
          示例:未輸入驗證碼前,底部的登錄按鈕是置灰不可點擊的,只有填寫完整,底部的登錄按鈕才會變為可點擊狀態。這就是為了防止用戶犯更多錯誤;


          2. 對有風險的操作進?二次確認;
          示例:刪除個好友時,通過二次彈窗給出防錯措施。

          ·. 易取原則

          減少用戶記憶負荷,在適合的時機給用戶需要獲取的信息。
          1. 為用戶提供歷史記錄、關注、收藏等功能;
          示例:愛奇藝為用戶提供了看過記錄和我的收藏,幫助用戶記憶:



          2. 選擇而不是輸入,盡量降低輸入成本;

          示例1:打車軟件自動獲取當前位置;

          示例2:iOS系統收到驗證碼后自動帶入到鍵盤,點擊直接輸入;


          ·. 靈活原則

          對于新用戶來說,需要功能明確、清晰,對于老用戶需要快捷使用高頻功能。不可為了某一種用戶,把不必要的信息占據重要部分。主要體現在3個方面:

          1. 自定義功能或模塊的展示位置;

          示例:支付寶首頁的應用是可以根據自身喜好自定義的,包括定義常用應用、排序、刪除、新增等等。這樣用戶可以根據自己的個人興趣定制自己適合的應用分布方式,這就叫做用戶定制常用功能,如下圖:


          2. 將“常用”自動歸納以提升使用效率;

          示例:微信聊天界面表情彈窗中會有一個「最近使用」的模塊,它把個人平時使用頻率或者次數最多的表情進行歸類。當用戶使用的時候,能很快的找到自己喜歡或者常用的表情,提高了聊天效率;包括餓了么的「我的訂單」里的每一個訂單都可以通過再來一單重新一鍵下單,如下圖:


          3. 縮短操作路路徑,提升使?用效率與體驗;

          示例:微信的對話框,當點擊「+」調出下面的操作選項時,會默認彈出剛截圖或拍照的照片,方便用戶直接調取,還有APP長按后出來的快捷操作列表,如下圖:


          ·. 易掃原則

          直譯:美學和簡約的設計;頁面不應包含不相關或很少需要的信息,頁面中的每個額外信息都會降低主要內容的相對可見性。

          示例:如下圖列表中出現的信息都是用戶比較關注的信息,比如配送費,配送時間,距離等;攜程的選擇機票界面講最重要的時間和機票價格放大突出,讓用戶能一眼看到,如圖:


           9 ·. 容錯原則

          直譯:幫助用戶識別、診斷和從錯誤中恢復;我們盡量避免用戶出現錯誤,但當出現錯誤時,我們應該盡量去安撫用戶的挫敗感。

          ?配圖+文字代替「404」,明確告訴用戶哪?錯了和解決方案。

          示例:界面加載失敗時的刷新提示,還有登錄時的手機號碼校驗,如果手機格式錯誤會出現會提示用戶手機格式不正確和正確的格式。


           10 ·. 人性化幫助

          幫助性提示最好的方法是:

          1.無需提示:非常簡單易懂,用戶看界面就知道怎么操作,無需提示;

          2.一次性提示:只需要一次提示用戶就懂如何使用;

          示例:常見的新功能引導、引導?等,示例:


          3.常駐提示: 較重要的提示,用于指導或幫助用戶;

          示例:支付寶轉賬時,常駐在頂部的安全確認提示,還有轉賬時的服務費提示,如圖:


          4.幫助文檔:稍微復雜一點的軟件,雖然要讓他盡量簡單但幫助文檔都是必要的;

          示例:微信設置界面里的「幫助與反饋」,還有支付寶轉賬時彈出來的「求助反饋」,點進去后的常見問題界面;


          以上就是我對Jakob Nielsen(雅各布·尼爾森)的十大交互設計原則的理解和實例解讀,希望對大家有所幫助。如果大家同樣對這些方面有些興趣或者看了后有些什么想法,歡迎一起討論。

          轉自:站酷-搞設計的月野兔



          以人為中心的設計指南(一)

          ui設計分享達人

          前言


          《以人為中心的設計指南》是我翻譯的第二本完整的設計書籍。在我開始廣泛的閱覽國外優秀的設計團隊、設計公司的沉淀輸出后,收獲頗豐。我意識到很多年輕的設計師尤其是傳統意義上的UI,苦于進階無門,很難系統的去學習設計理論、設計方法以及設計流程,無法系統化梳理設計知識,就只能在有限的設計范圍內修修補補,就像你在局限于視覺時沒有意識到體驗,在忠實于體驗時又忽略了商業,總是無法全面的考慮和輸出設計方案,這是源于沒有系統化的學習。


          國外的人機交互、體驗設計領域的確發展較早,有著大量的理論和方法的沉淀,國內各大設計團隊雖然也開始持續輸出一些本土化的內容,但仍然擺脫不了系統化這個問題。因此我從今年開始,就有了翻譯國外設計論論體系及對應的成熟可用的設計方法的沖動。如果你讀了我往期的文章,你應該了解到了設計思維的五個步驟、了解了用戶體驗的七要素、可用性方法以及眾多可操作的實踐方法。


          我翻譯的內容既有各大設計機構無私分享的內容,也有我自費購買的設計課程,我希望為大家帶來一些真正持續影響設計生涯的內容,要實現這一目標,軟件技法做不到,只有思維方法、系統化知識可以做到。


          本次翻譯的《以人為中心的設計指南》是IDEO出產的一本設計工具書,包括具體的設計思路,規范的設計流程,以及各種關鍵設計原則。它將結合實例,教授設計師如何解決問題,如何以人為本的解決復雜問題。


          本書內容量較大,共有四大模塊,及73個小章節,我將以連載的形式發布譯文,完整翻譯后,為大家排版一份PDF格式的電子書,分享給讀者,也分享給國內的所有設計師,每個人都可以盡一份力讓國內的涉及環境變得更好。


          本篇文章主要翻譯介紹部分和第一模塊的7個小節(標紅部分),闡述了IDEO團隊在設計過程中一直堅守的心態。下面開始正文。



          介紹


          以人為中心的設計師意味著什么?
          擁抱以人為本的設計意味著相信所有的問題,即使是那些看似棘手的問題,比如貧困、性別平等。此外,這意味著相信每天面對這些問題的人是掌握答案的人。以人為本的設計為任何類型的問題解決者提供了與社區與用戶一起設計的機會,深入了解我們所服務的人,構思各種想法,并根據人們的實際需求創造創新性的解決方案。
          在IDEO,我們幾十年來一直使用以人為中心的設計來創造產品、服務、體驗和社會企業,這些產品、服務、體驗和企業之所以被采納和接受,是因為我們把人們的生活和訴求放在核心位置。社會各個領域的創新時機已經成熟,我們已經一次次證明我們的方法行之有效。作為一名以人為中心的設計師,你要相信,只要你堅持從別人身上學到的東西,你的團隊就能找到世界需要的新解決方案。有了這份實地指南,你現在就擁有了將這種信念變為現實所需的工具。

          接受不同的心態
          以人為中心的設計師不同于其他的問題解決者——我們修修補補,不斷測試,我們一開始就失敗了,而且經常失敗,我們花了大量的時間但可能仍然不知道問題的答案。然而,我們勇往直前。我們是樂觀主義者和創造者,是實驗者和學習者,我們感同身受,不斷重復,我們在意想不到的地方尋找靈感。我們相信解決方案就在那里。
          通過專注于我們的目標群體并提出正確的問題,我們將一起達成目標。我們會想出很多點子,有些行得通,有些行不通。我們把我們的想法具體化,這樣我們就可以進行測試。


          然后我們提煉它們。最終,我們的方法等同于瘋狂的創造力,不斷地推動創新并給予我們自信,它將我們引向我們開始時從未意識到的解決方案?,F在,我們要分享我們的設計哲學和心態。
          讓我們與眾不同的七種心態:同理心、樂觀、迭代、創造自信、實踐、接受不確定性,以及從失敗中學習。

          理解的過程
          以人為中心的設計并不是一個完美的線性過程,每個項目都有自己的特點,但無論你面臨什么樣的項目,你都將經歷三個主要階段:靈感、構思和實現。通過依次采取這三個階段,你將與你為之設計的用戶產生深刻的理解;你會弄清楚如何將你學到的東西變成設計新解決方案的機會;在最終將你的產品正式上線之前,你會建立并測試你的想法。在IDEO,我們使用以人為中心的設計來處理大量的設計挑戰,盡管我們的項目涵蓋社會企業到傳播活動到醫療設備各個領域,但這種創造性解決問題的特殊方法每次都能幫助我們度過難關。

          靈感
          在這個階段,你將學習如何更好地理解別人。你會觀察他們的生活,聽到他們的訴求和愿望,并逐漸加深你對這個設計挑戰的理解。
          構思
          在這里,你將理解你所了解的一切,產生大量的想法,確定設計的機會,并測試和改進您的解決方案。
          實現
          現在是你把你的解決方案帶到現實中的機會。你將弄清楚如何把你的想法推向市場,以及如何最大限度地發揮它在世界上的影響力。


          使用工具
          雖然沒有哪兩個以人為中心的設計項目是完全相同的,但是我們使用相同的設計流程和工具為每個項目進行設計。


          例如,為了與我們要服務的人建立深厚的同理心,我們總是對他們進行訪談。


          為了保持創造力和活力,我們總是在進行團隊協作。


          為了使我們的思維更有創造力、更加敏銳,我們總是把我們的想法做成有形的原型,因為它幫助我們解決問題。


          因為我們很少在第一次就成功,所以我們總是分享我們的產出,并根據我們得到的反饋進行迭代。


          這本指南中的57種方法提供了一套全面的練習和活動,可以幫助你從制定設計挑戰到將其推向市場。有些方法你會用兩到三次,有些則不會。但是作為一個整體,他們會讓你走上持續創新的道路,同時讓你所設計的社區或用戶成為你工作的中心。 



          相信這個過程,即使它讓你感到不舒服
          以人為中心的設計是一種獨特的解決問題的方法,這種方法有時會讓人覺得很瘋狂而不像一個方法——但如果你總是使用傳統的解決方案,你就很少能找到創新的解決方案。這個過程的目的是讓你直接從用戶那里學習,敞開心扉,接受各種各樣的創造可能性,然后專注于最理想、最可行的方案。你會發現自己在這個過程中頻繁地推翻假設,當你完成它的三個階段時,你會從具體的觀察到高度抽象的思考快速變換,然后再回到原型的具體細節。我們稱之為發散和收斂(菱形設計法則)。 


          在構思階段,通過更廣泛的思考(大范圍,多領域),我們想出了各種可能的解決方案。


          但因為我們的目標是最具可行性的方案,所以我們必須確定,在這一系列的想法中,哪一個最有可能真正發揮作用。你會發散和收斂幾次,每一次新的周期,你會越來越接近一個投放市場級別的解決方案。


          創建真正可用的方案
          以人為中心的設計是一種獨特的定位,最終目的是達成解決方案的可取性(用戶角度),技術可行性,商業可行性。
          首先從用戶開始,了解他們的希望、恐懼和訴求,我們很快就能發現什么是用戶亟需的。一旦我們確定了一系列能夠吸引用戶的解決方案,我們就開始著手于在技術上可行的方案以及如何使解決方案在經濟上的可行性。這是一個平衡的過程,但這對于設計成功且可持續的解決方案至關重要。

          Image title


          一:心態


          1.創造性的信心

          任何人都可以像設計師一樣理解世界。作為一個問題解決者,解鎖這種潛力所需要的只是創造性的信心。創造性的自信是指每個人都具有創造力的信念,而創造力不是繪畫或構圖或雕刻的能力,而是一種理解世界的方式。
          創造性信心是以人為本的設計師在實現思維的飛躍,信任他們的直覺以及追求他們尚未完全弄清楚的解決方案時所依賴的品質。我們相信,您可以并且將會為問題提出創造性的解決方案,并且相信所有這一切都需要著手去實踐且深入嘗試。
          它是一種自信,相信你所需要做的只是卷起袖子投入進去。創造性的自信會驅使你去做事情,去測試它們,去不斷犯錯,然后繼續前進,確信你會到達你需要去的地方,并且你一定會一路持續創新。
          建立創造性的自信需要時間,實現這一目標的部分原因是相信以人為中心的設計過程將向您展示如何以創造性的方式解決手頭的任何問題。從微小的成功開始,然后建立一個更大的目標,你會看到你的創造性信心的增長,不久你就會發現自己變成了一個非常有創造力的人。


          2.著手去做

          作為以人為本的設計師,我們之所以這樣做,是因為我們相信有形(實物、可視化)的力量。我們知道,把一個想法變成現實,可以揭示出許多僅僅靠理論所不能揭示的東西。當目標是將有效的解決方案投入使用時,您不能生活在抽象和理論中。你必須讓它們成為現實。 以人為中心的設計師是實干家、修補匠、工匠和建設者。我們使用任何我們可以使用的東西,從紙板和剪刀到復雜的數字工具。我們建立我們的想法,這樣我們就可以測試它們,在真正去做一些東西后,我們會發現以前從來沒有想到的機會和復雜性。制作也是一種奇妙的思考方式,它有助于我們關注設計的可行性。此外,把想法變成現實是一種非常有效的分享方式。如果沒有來自人們的反饋,我們將不知道如何進一步完善我們的想法。



          3.從失敗中學習


          失敗是一個非常強大的工具,設計實驗原型、交互和測試他們是以人為本設計的核心。要知道并非所有這些能發揮作用,當我們想要解決一個大問題時,我們一定會失敗,但如果我們保持良好的心態,我們就會從中受益。


          以人為中心的設計是從一個不知道如何解決設計挑戰的地方開始的。只有通過傾聽、思考、構建和提煉我們的答案,我們才能得到對我們的用戶有用的東西?!霸缡?,早成功”是IDEO的一個常見口號,它的力量之一就是允許出錯。由于拒絕冒險,一些設計師實際上與真正的創新機會失之交臂。
          托馬斯·愛迪生說得好:“我沒有失敗。我剛剛發現了10000種行不通的方法。對于以人為中心的設計師來說,找出行不通的東西是找到有用的東西的一部分。
          失敗是以人為中心的設計中固有的一部分,因為我們很少在第一次嘗試時就能取得成功。事實上,第一次嘗試就做好并不是重點。關鍵是把一些東西創造出來,然后用它來不斷學習,不斷提問,不斷測試。如果以人為本的設計人員最終取得成功,那是因為他們曾經失敗了無數次。


          4.同理心


          同理心是指站在別人的立場上,理解他們的生活,并從他們的角度解決問題的能力。 
          以人為本的設計是以同理心為前提的,你為之設計的用戶是你通往創新解決方案的路標。你所要做的就是感同身受,理解他們,并在設計過程中把他們時刻掛在心里。


          比如長期以來,國際發展界一直在設計解決貧困問題的方案,卻沒有真正同情和理解它所要服務的人民。但是,通過設身處地為我們的設計對象著想,以人為中心的設計師可以開始通過一個新的、強大的視角來看待這個世界,以及所有改善它的機會。
          讓自己沉浸在另一個世界中,不僅會為你打開新的創造可能性,而且它能讓你拋開先入為主的理念和過時的思維方式。與你為之設計的用戶產生共鳴是真正理解他們生活的背景和復雜性的最佳途徑。但最重要的是,它將使你的設計過程完全圍繞用戶,從而產出對他們來講真正有用的東西。

          5.接受不確定性


          以人為中心的設計師總是從不確定的問題開始。在一些注重于快速找到方案的公司文化中,這或許不是一個好的開始。但是從第一步開始,接受不確定性的設計人員會勇敢的走出去,追求很多不同的想法,甚至找到意想不到的解決辦法。通過接受這種模糊性,并相信以人為中心的設計過程將引導我們走向一個創新的答案,我們實際上迸發出更強的創新能力。 


          將以人為中心的設計師與其他設計師區別開來的一個特點是,我們相信總會有更多的創意。我們不再執著于自己的傳統想法,因為我們知道我們會擁有更多新的想法。因為以人為中心的設計是一個如此富有創造力的過程,而且因為我們倡導團隊合作構思,所以很容易拋棄不好的想法,保留一些一般的想法,并最終得到最好的想法。
          雖然這似乎違反直覺,但這種不確定性實際上促使以人為中心的設計師進行創新。
          如果我們一開始就知道答案,我們能學到什么呢?我們怎樣才能想出創造性的解決方案呢?我們為之設計的人會在哪里指引我們?擁抱不確定性實際上解放了我們的創造力,鼓勵我們去追求一個最初無法想象的答案,這讓我們走上了持續性創新的道路

          6.樂觀

          我們相信設計本身就是樂觀的。 


          為了迎接一個艱難的挑戰,特別是像貧困這樣巨大而棘手的挑戰,我們必須相信,創新是唯一的方法。如果我們不這樣做,我們甚至不會去嘗試。樂觀是對可能性的擁抱,即使我們不知道答案,但我們相信總會有一個方案等待我們去挖掘。
          除了推動我們走向解決方案,樂觀還使我們更有創造力,鼓勵我們在遇到死胡同時繼續前進,并幫助項目中的所有參與人員凝聚在一起。從解決問題的角度來處理問題,會給整個過程注入解決最棘手問題所需的能量和動力。
          以人為中心的設計師總是專注于可能發生的事情,而不是可能遇到的無數障礙。這是我們的核心信念——每一個問題都是可以解決的——這就是以人為中心的設計師的樂觀。

          7.迭代

          作為以人為中心的設計師,我們采用迭代的方法來解決問題,從我們的用戶那里得到反饋是促使解決方案誕生的關鍵部分。通過不斷地迭代、持續改進我們的工作,我們會有更多的想法,嘗試各種各樣的方法,不斷釋放我們的創造力,更快地找到成功的解決方案。


          迭代使我們保持敏捷、反應靈敏,并訓練我們一直專注于核心的想法,經過幾次迭代后,每個細節都恰到好處。如果你每次建立一個原型或分享一個想法時都追求完美,那么你就會花很長時間去完善一些不一定有效的東西。但是,通過構建、測試和迭代,您可以不花費過多的時間和資源來推進您的想法,直到您確定它是正確的。


          在項目早期,我們不斷進行迭代,因為我們知道第一次不會得到正確的結果。迭代讓我們有機會去探索,去犯錯,去驗證我們的直覺,最終會得到一個將被采納的解決方案。我們進行迭代,因為它讓我們不斷學習。我們不是躲在工作室里,打賭某個想法、產品或服務會大受歡迎,而是迅速地走出去,讓我們的用戶成為我們的向導。



          第一部分就到這里了,重新回顧下,在本篇文章中,你應該了解到IDEO在設計過程中一直堅守的7個心態。

          他們分別是創造性的信心、著手去做、從失敗中學習、同理心、接受不確定性、樂觀、持續迭代。

          產品思維·用戶體驗中的五個層次(下)

          ui設計分享達人

          昨天我們講了用戶體驗分為五個層次,從內而外分別是:

          ①戰略存在層 > ②能力圈范圍層 > ③資源結構層 > ④角色框架層 > ⑤感知層


          以下案例來自于 梁寧老師的《產品思維30講》

          苦思冥想,還是只有梁寧老師這個案例最為合適;


          說到“搜索”,你會想到哪些呢


          如果我沒猜錯,你想到的第一個詞是:“百度”

          研發行業的話,可能我們用的瀏覽器應該是:“google”居多

          但你是否用過古老的“yahoo”呢?



          今天,我們就來說說搜索業三大巨頭的戰爭,

          他們之間的戰爭,有助于我們去理解用戶體驗的五個層次


          首先


          Google與百度


          說到百度與谷歌的競爭前,梁寧老師說了下雅虎:


          我們做設計的最知道,色彩是非常重要的元素,如果以科技為關鍵詞,

          我們想到的第一個詞,一定是藍色,藍色一來不會太刺眼,

          又相對普遍,所以不會出現審美疲勞,

          而yahoo用的是什么為主色呢,是一個我們最不會用的顏色——紫色

           


          那么,假如有個用戶指著那個“紫色”的“音噗忒(input)”說:“不好用”,

          他指的是什么呢?


          1.是感知層,不喜歡藍色?

          2.按鈕的形狀太突兀?尺寸太大?位置不合適?

          3.還是說是框架層,內容的排列方式沒有令他滿意呢?


          說點令人興奮的,我們在百度搜索“大樂透”,

          度娘顯示的結果第一條,就是本期開獎的結果,

          然后是百度百科對“大樂透”這個詞條的解釋,

          其次的就是關于大樂透的各類新聞和各種“行業大師”對下期開獎結果的分析;


          百度的框架的意義就是,能一步走完,絕對不讓用戶走一步半,

          為什么百度能給出這么符合用戶的搜索結果呢?


          雖然這個結果離不開的肯定得是百度的爬蟲技術是數以毫秒為單位的,

          但百度爬蟲技術肯Google當然還是沒法比的,

          最重要的什么呢,是百度不單只是去爬數據,而且他還建立數據,


          當整個互聯網的數據都不多的時候,

          百度做了一件Google沒有做的事,

          就是我們剛才說到的“建立數據”

          百度做了兩個平臺:1.百度貼吧     2.百度知道


          展示下各自的裝備


          一個在升級技術去爬,一個在建立數據

          你覺得,誰會贏到最后呢,


          你說,Google為什么不跟著做呢,

          Google 的性格是絕對不會的,用梁寧老師的話來說:

          “以Google的清高和耿直,不會做這樣的事,甚至當用戶有需求時,Google還會為百度導流量,給對手送彈藥”


          但至此,搜索業都還是處于資源層的比拼

          這一仗,百度帶著它的百度貼吧和百度知道,拿到了勝利!


          但三十年河東,三十年河西

          百度在移動場景下輸給微信,也是因為微信以百度戰勝Google同樣的方式,以公眾號的形式建設資源;



          Yahoo與Google


          2004年,一批華爾街精英做了搜索引擎的比評,評測結果呢,Yahoo優于Google,Yahoo勝利,

          但奇怪的是評測完之后,大家打開了Google工作,


          為什么會出現這個情況呢,


          他們的評測方式非常的簡單,對,就是簡單,


          第一步:選幾個關鍵詞

          第二步:在各個搜索引擎中搜索

          第三步:將結果打印

          第四步:比對結果,認為哪個好,就投一枚硬幣


          最后雅虎獲得的硬幣最多

          簡單吧,你閑的蛋疼也可以去試試,


          那為什么雅虎會勝出呢,因為雅虎用的后臺搜索引擎也是Google的,

          雅虎只是對熱門的關鍵詞做了人工優化,

          所以結果不是跟Google一樣,就是比Google好,

          。。扯吧,但就是這樣。


          那為什么這批精英日常還是會用Google呢,

          竟然是因為框架層,因為Yahoo的設計比較喜歡高大尚,所以界面相對寬松,易看,

          但缺點就是一屏只能顯示一兩條,



          而谷歌的搜索結果一屏展示好幾十條,

          所以對于搜索引擎這個東西來說,

          我們更在乎內容,

          而形式恐怕稍微次要,


          在感知層差別不大的情況下,Yahoo竟然在框架層就輸了一局,恐怕很難想到吧



          設計師,要有產品思維!

          但在互聯網設計的今天,可能這五個層級有了一些整合,

          但是,在用戶抱怨體驗不好時,你能分辨,會去分辨用戶是說哪個層級嗎?

          還是說你會跟用戶講道理,說服他們呢?


          銷售天然的本領就是說服,掌握各種說服的技巧:

          擺事實,講道理,打比方,舉例子,要同情,裝可憐,將心比心,軟磨硬泡;

          如果是現實中,或許你能說服用戶,


          但作為一個互聯網產品,別說說服,你連站在旁邊說句話的資格都沒有,

          何況,比起用自己的道理說服用戶,我們更應該做的,不應該是挖掘用戶真正的需求嗎?


          從今天起,

          不再做銷售:按我的來

          而要做產品:順你的意


          用戶沒有我們這么專業,他的表達方式就是:情緒;

          如果我們不能接受這個表達方式,就不可能挖掘到用戶的真正需求,


          總結一下:

          1. 接受用戶的表達方式,通過五個層面,挖掘到用戶真正的需求;

          2. 銷售是按我的來,而產品是順你的意

          取消與關閉:請在設計上區分差異

          ui設計分享達人

          3個方法,區分取消與關閉,避免丟失用戶正在操作的內容。

          概要:區分這兩種操作,可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改,使用文本標簽而不是“X”圖標,并在破壞性操作之前提供確認對話框。



          一、讓人迷惑的“X”圖標


          很久以前,“X”這個符號是用在地圖上,標記“寶藏的藏身地”。但在今天的數字化界面中,“X”符號不再用來標記位置,而是被用來取消進程,或者關閉某個臨時頁面/彈框。但是如何確定“X”代表的是“取消” or “關閉”?有的時候可以確定,有時卻模糊不清難以界定。

            

          其實,主要的問題在于“X”圖標缺少了文本標簽。當同一個圖標在不同的界面,卻代表不同的含義,該圖標的可用性就會受到影響,因為用戶判斷不了到底是什么含義。



          二、為什么要區分“取消”與“關閉”


          當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時,系統會完全取消該過程并清空之前所有操作,這讓人沮喪,甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉,所以區分這兩種可能性對于交互的成功至關重要。


          在某些情況下,區分取消 or 關閉并不重要。當一個彈窗占據你的大部分屏幕時,點擊“X”按鈕(盡可能快地),既可以關閉該模態,也可以取消它可能觸發的任何進程。


          但是,如果頁面中包含正在運行的計時器,正在播放的音頻,正在選擇多個選項標簽,或其他類型未保存的內容,那就很有必要說明“X”圖標所代表的意義。因為用戶可能打算讓計時器或音頻繼續運行,或者希望立刻應用這些選好的選項標簽,或保存正在進行的工作,同時希望關閉該視圖繼續其他操作。

           

          例如:絲芙蘭在結賬過程中,使用模態窗口來展示用戶可以添加到購物車的免費商品。在以下示例中,單擊“ ADD(添加)”按鈕選擇商品后, 該按鈕直接被變成了“ Remove(移除)”,看起來似乎商品已經被添加到購物車中了。但是,實際上當用戶單擊右上角的“X”圖標后,該商品并不在購物車中。他需要再重復這個步驟,最后點擊“Done(完成)”按鈕,商品才會被加入購物車。

          Sephora:單擊右上角的"X"會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”,再單擊“Done”才能將商品添加到購物車。



          三、如何避免丟失用戶正在操作的內容


          要避免丟失用戶正在操作的內容,首先需要確定用戶的意圖 - 取消 or 關閉 - 并提供明確的選項。有以下幾種方法:


            · 主動要求用戶確認他們的意圖

            · 使用明確的文本標簽而不是模糊圖標

            · 顯示兩個不同的按鈕:“X”圖標表示關閉視圖(可以自動保存頁面內容/操作),而“取消”則代表放棄該過程


          1、要求確認


          如果用戶在已經執行操作的模態彈框或頁面視圖中,點擊“X”圖標,UI則可以在關閉視圖之前,直接詢問用戶是否應用該操作,來確認其意圖。此解決方案非常適合會破壞用戶工作的破壞性取消操作。例如,過濾器視圖可能會被意外關閉,并且關閉會導致用戶丟失其選定的選項。


          這個問題在移動端界面上很常見,因為過濾器視圖占用了很大的屏幕空間,這使用戶很難或不能判斷是否已經應用了那些選擇。為了防止這種潛在的錯誤,在關閉過濾器視圖之前,跟用戶確認是否要應用這些選擇并關閉視圖,抑或是清除這些選擇。例如:下圖中,當用戶選擇后,點擊“X”圖標時,Lowes 會出現如下確認彈框。

          左 :點擊"X"圖標或返回箭頭,所有的選項都會被取消,并將用戶帶回上一個頁面。右:點擊“X”后,出現一個確認對話框,確認用戶是應用還是取消篩選,然后再返回結果列表頁。

           

          同樣,當用戶關閉正在進行的課程時,語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開,除非確認“退出”。至少,該APP向用戶傳達了這一限制,同時他們也可以選擇“取消”來繼續課程。點擊“X”按鈕將結束當前課程。為了防止出錯,結束前會出現一個確認對話框。

           

          缺點:

          a. 雖然確認對話框在避免“X”圖標有歧義方面很有效,但它卻添加了額外的步驟;

          b 用戶在按下“X”圖標之前還是不知道它到底做了什么,代表什么意思,因此他們可能會對這個操作感到疑惑。



          2、使用文本標簽


          不要完全依賴對話框來讓用戶確認模糊的“X”圖標,而是使用明確的文本標簽。文本可以消除歧義,并清楚地傳達將發生的操作:取消與關閉。

           

          Yelp的篩選頁面在屏幕頂部提供了標有”Cancel(取消)“和”Reset(重制)“的按鈕,在底部提供了一個大大的”Apply(應用)“按鈕。類似地,Etsy中的 Filters視圖提供了“Clear(清除)”和“Done(完成)”兩個按鈕。


          注意:Etsy使用“Done”而不是“Apply”,因為過濾器一經選擇就可以被應用,而這里是關于開關切換與否的建議。

          (左)Yelp:Cancel、Reset 和 Apply 這三個文本標簽既直接又清晰,這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。(右)Etsy:Clear 為用戶取消提供了一種清晰的方式。而點擊 Done 則返回到“產品列表”頁,其中的選擇已經應用。




          3、關閉并保存


          果必須使用“X”圖標而不是文本標簽(比如為了以節省空間,或者因為正在遵循團隊的設計語言),請謹慎使用,并在用戶完成前保存操作/內容。另外,可以提供一個單獨的“取消”按鈕,讓用戶在進程之外有一個緊急出口,并消除“X”(關閉 or 取消)在兩種含義之間的歧義。

           

          例如: Gmail會自動保存在非模態窗口中填寫的郵件信息到草稿(Drafts)。這樣的好處是,用戶在需要折疊或關閉該窗口時,仍然保存原來的內容以便于下次繼續編輯。將鼠標懸停在消息窗口右上角的“X”圖標上時,會顯示一段提示:Save & Close(保存到草稿并關閉)。此外,點擊窗口右下角的“垃圾桶”圖標可以刪除該郵件 - 這個圖標離頂部的“保存和關閉”選項很遠,可以防止用戶誤點。

          Gmail:Hover 透露, “X”圖標是用于關閉窗口而不是刪除草稿,它允許用戶保存并關閉消息窗口而不會丟失剛剛正在編輯的郵件。

           

          對于長進程或傾向于在后臺運行的進程(如計時器),默認自動保存也是一種很好的解決方案。

           

          例如,Glow Baby中,后臺運行喂食或睡眠計時器時,用戶還可以瀏覽APP的其他區域。因為這些計時器一般會運行很長一段時間。此功能還能讓用戶在APP中做其他的任務操作,例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點擊計時器視圖中的“X”圖標也只是關閉窗口并不會取消正在運行的計時器。

          Glow Baby:(左)點擊運行計時器視圖中的“X”圖標,在不停止計時器的情況下取消視圖,從而允許用戶繼續使用APP記錄其他類型的事件、參與社區討論、閱讀文章等。(中)運行計時器的狀態顯示在屏幕頂部的狀態欄中。(右)在計時器暫停時點擊“X”圖標,彈出“放棄”或“取消”按鈕以確認用戶的真正意圖。


           請注意:在關閉前保存中間工作或維護正在進行的過程是主動的,但有時可能會與用戶的意圖相反:如果用戶打算通過單擊“X”按鈕取消其選擇,那自動應用這些選擇可能會令人困惑和沮喪。


          這就是為什么還必須有一個單獨的“取消”按鈕,給用戶一個出口,而不是強迫他們必須關閉時自動保存。



          四、結論


          雖然“X”圖標會造成模棱兩可,而且經常導致可用性問題,但它不太可能馬上從所有接口中消失。設計人員應該注意“X”圖標的多重含義,消除“關閉”和“取消”之間的歧義,并提供確認對話框或自動保存等保護性措施,避免丟失任何用戶正在操作的內容。


          若存在疑問,請記住:先保存,再退出。



          原文作者 | Aurora Harley

          編輯作者 | WanSU

          原文地址 | https://www.nngroup.com/articles/cancel-vs-close/

          本文版權歸原作者所有;僅供學習使用,轉載請注明出處。



          五、小思考


          讀上面這篇文章的一個小啟發:


          為什么手機驗證碼登錄微信/淘寶時,驗證碼輸入錯誤,二者都是用的模態對話框提示用戶,而不是用Toast呢?

          a. 微信和淘寶的用戶群體都很龐大,幾乎橫跨所有年齡層。Toast出現又自動消失的交互體驗,用戶會感到不可控,尤其是對大齡、老齡的用戶不夠友好。

          b. 也有悖于iOS人機交互指南中提到的“用戶控制”這一原則,我想這也是iOS設計語言沒有Toast這種控件的原因之一吧。

          c. 而模態對話框雖然干擾性較強,但用戶可以隨時控制,在使用過程中是用戶掌握主導權。


          補充:Toast這一控件,原是Android系統的控件。但自Android 5.0 推出原質化設計后,Toast就被弱化,而是將 Snackbar 作為官方推薦的控件。如今在 Material Design中更是找不到 Toast的蹤影。主要原因還是 Snackbar 在交互友好性方面比 Toast 要好,例如:支持手勢交互、支持與CoordinatorLayout聯動等。所以說 Toast都過時了呢,應該講 Snackbar。

          日歷

          鏈接

          個人資料

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

          存檔

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