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

          一、為什么交互設計能幫助產品解決問題


          為什么那么多人覺得應該先學UI設計再學交互設計,因為UI門檻低所以入手快。其實交互比UI更早出現,從需求理論可以看出人們在追逐主觀體驗的感受,在基礎需求未被滿足前是不會出現更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知,如果底層的交互和產品的可用性未被滿足,那么UI做的再好也是徒勞。




          市面上大量出現同質化產品、設計,就是因為大家都在按照現有的,常用的模版在設計,現在其實比早兩年會好很多,很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。


          例如下面的案例,這是一個電瓶車電池租賃的一個產品。



          undefined



          從美觀角度,左側的界面更加簡潔信息也有規律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時,大家在第一反應中,有多少人可以重啟自己的視角,還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢?


          如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質沒變。所以為什么我們說要做正確的事而不是正確的做事。





          交互不僅僅能夠讓產品好用的,也要讓產品走對方向。


          另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學的快,用的會,交互體現在人們日常所接觸到的大部分媒介,并且與之產生聯系。例如一把水壺,水壺的設計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調溫等等。



          1.交互設計中媒介與人的關系


          1.1順應


          交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現代人的習慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。


          所以在當時人們為了適應非常有限的工具資源,改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮,那基本也就涼涼了。


          從2g到5g時代的發展,除了生活方式發生翻天覆地的變化外,我們所接觸到的媒介也發生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內容,外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機,改變了我們的認知也改變了我們的生活方式。



          1.2遷移


          平臺遷移的交互成本,很多同學可能都玩過moba類游戲-dota,這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





          在現在非?;馃岵⑶夷J胶蚫ota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預判技能釋放。







          同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備,專門用來給多余的手指進行射擊操作。


          另外,大家如果做b端的同學應該也深有感觸,平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事,因為在網頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯動的左側標簽導航和頂部聯動的標簽導航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現,所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。


          web端的工具和網頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變為撤銷按鈕,有待考量。



          2.交互認知的盲區


          到底什么是交互設計,這個問題其實是比較復雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設計的概念真的挺多的,光網上能夠找到的定義就不下5種,這些對交互設計的定義中,比較頻繁出現的是行為、場景、用戶等詞匯,交互設計到底設計的是用戶的行為,還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設計的本質。


          中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿,更多的是擔心用戶成本過高而妥協為滿足用戶預期。



          2.1信息不對稱


          事實上,為什么我們講不清楚什么是交互設計,其實UI設計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


          例如“你可以意思一下”,單就這句話,我們大概知道最關鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應付一下?


          當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


          同樣的,在設計領域,很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述??赡苷f者覺得現在信息太密集讓人無法呼吸,但設計者覺得現在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。


          我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設計師通常喜歡描述從左到右或者從上到下,但是在開發的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識,開發也盡可能的去補充設計背景。


          在這里,交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通,所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。


          再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風格?用戶:“什么是風格?”


          所以交互設計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。




          3.交互語言的淺見


          我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言,不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等,例如在模型手辦中有分線、滲線、勾線、補土等,這也都是在特頂專業領域中的一些術語,但這些并不是語言,只是在某個領域中大家總結出來便于溝通的文字符號。


          所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規范,而并不是語言。語言擁有更強的普適性和通用性。


          那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。


          語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。



          這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態的,比如點擊之后的跳轉頁面,另外他也可以具備產品賦予的自定義屬性,例如底部滑出picker。




          還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數也可能是實數,但是在交互設計中,我們如何表示點擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜?,例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。






          那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設計師,在產品團隊中大家都能夠有一套共性的交互語言系統,無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中,大多都是多種元素的拼合,給出常用的、可復用的控件、組件,但是大家依然還是無法從語言角度去創新,這就導致了很難會有新的、有用的交互形式的出現,比如很多搜索控件都是承載在頂部導航欄中,那么在做規范的時候也只能在這個組件上去微調,殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規規范形式就能和很多產品區分開來了,當然要視產品形態不同。



          4.業務背景與交互形態


          4.1不同業務背景下的信息組織


          市面上有許多的新零售電商產品,頁面中的信息流也是大同小異,但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。





          所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中,首屏基本上都是呈現這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局,從基本上能夠滿足一個大量sku電商產品的所有需求,但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢?


          從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。





          4.2營銷工具化


          通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經常看到的營銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。


          4.2.1更加靈活的控制方式




          4.2.2多樣的營銷結構



          最后總結一下,我認為交互設計也包含了視覺,所以我們在決定用什么樣的設計形式之前需要考慮更多,入業務、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。






          二、為什么UI配色那么難


          不管是做UI設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產品設計中使用的。



          1.人類對色彩感知的原理


          大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環境中使用的多。


          視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。





          大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。



          1.1人對色彩邊緣的對比更加敏感


          我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學可以自己在工具中嘗試一下。




          但如果你把這個色塊拿出來后,不在這個環境中直接進行邊緣對比,那就不會出現漸變的情況了。那光說原理,我們也來看一下在產品設計中需要注意的地方,因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。





          如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。





          還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。





          2.色彩在UI設計中的作用


          1.加深品牌印象與品牌感


          一般來說,產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非?;顫?、有趣、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。


          但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風格對比起來太強烈,引起不適。





          而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。



          2.引導用戶視覺凹增加易讀性


          我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品,使用了高亮色來引導用戶視覺。







          當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區分層級。


          3.區分信息交互的狀態


          同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現,但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。


          所以不是所有的元素都要賦予顏色,這樣會使整個頁面非?;靵y





          另外,UI設計中主色除了引導用戶的作用外,也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態。





          4.營造氛圍傳遞熱度


          色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造





          3.在UI設計中色彩運用的坑與技巧


          1.色彩的正反兩面

          在色彩的心理學上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。





          然而其實很多的產品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規人之中,咖啡應該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色





          在瑞幸剛出來的時候,很多人其實不太習慣把這個藍色和咖啡結合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調,“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。





          2.顏色的禁忌用法

          但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。


          1.高飽和度的色彩

          會讓人產生“幻覺”!讓人產生視覺疲勞,例如我將餓了么這個界面的色調調整一下大家看一下,不亮瞎算我輸。




          2.灰部使用過多的配色

          為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的




          3.沒有規律且過多的配色

          讓界面或者插畫看起來非?;靵y。一般來說顏色的使用也需要有側重點,所以我們常用的方法是6、3、1的色彩配比。





          4.熒光色

          熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!





          5.太輕柔的顏色

          在很多dribbble的飛機稿中,經常能看到這樣的配色和練習。無論是在練習中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。





          6.現在很火的新擬物化設計

          說真的,這樣的風格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調,這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。


          為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設計:“設計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。




          7.不要將對抗色重疊

          例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼





          4.正確的UI配色方法


          定義主色


          首先我們必須要說,色彩肯定是需要結合產品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結,我們發現大部分的產品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。

           




          在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。






          定義中性色


          其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。





          文章來源:站酷  作者:應駿

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



          15個著名的設計心理學原理以及在設計中的應用

          ui設計分享達人

          你是否有在聽別人說某某原理法則時一臉懵B的時候?明明知道這個原理卻說不出它的名字?不要緊,本文就來介紹與人機交互設計相關的15個常見的設計心理學原理,約13000字,幫助你了解產品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設計予以理論支撐。


          1956年美國科學家米勒對人類短時間記憶能力進行了研究,他注意到年輕人的記憶廣度為5-9個單位,就是7±2法則。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上。


          因為人腦處理信息的能力有限,所以它通過把信息分成塊和單元來處理復雜問題。7±2法則應用很廣泛,例如iPhone通訊錄中的手機號碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號、身份證號,我們總是喜歡把一長串數字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。


          Web導航欄選項卡數量不超過9個

          在設計網頁導航時,如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在7個左右(不超過9個),如蘋果、Dribbble、behance等網站的導航分類。


          Web導航欄選項卡數量過多時

          如果導航或選項卡內容很多,可以用一個樹狀層級結構來展示各級別關系,但要注意其廣度和深度的平衡。例如人人都是產品經理和Dribbble,把更多子類別收在二級目錄里。



          移動端選項卡導航

          在移動端應用設計中,常見的電商app例如奈雪和樂凱撒分類模塊,兩個產品的商品分類布局形式很相似,都是用了選項卡的方式來分類商品,層級明確,相應的提升了用戶找尋單品的效率。


          Tabbar區標簽最多不超過5個

          在移動應用設計中,底部Tabbar最少3個,最多為5個(幾乎沒幾個超過5個),這樣做除了減輕用戶記憶負擔,超過5個會降低視覺和操作上的體驗。事實上就算只有4個,我們也經常想不起微信底部的4個Tab分別是啥。



          頂部導航欄頁簽

          我們看到的大部分app頂部導航欄的頁簽數量都嚴格遵循了7±2法則,雖然在橫軸可無限滑動,

          但在顯示區域只保持7±2法則的顯示數量,例如馬蜂窩、飛豬旅行等。


          金剛區圖標不超過8個

          我們常說的“八大金剛”就是一屏顯示8個圖標,超過的則放在第二屏。如果兩行10個,往往第十個是“更多”入口,總的來說也沒超過9個。


          banner文案不超過9個字

          產品運營banner主文案字數通??刂圃?個字以內,在設計時也通常把長標題一分為二排兩行,便于用戶快速閱讀,提升點擊率。

               


          在交互設計中,7±2法則是減少用戶認知負荷,提升用戶體驗的重要環節。同時還強調了在設計過程中對產品的預見性,避免在不斷為產品添加功能時,破壞原有的視覺基礎。



          0無需說明書

          喬布斯曾說過:“蘋果應該創造所有人都可以使用的產品,即使沒有用戶指南”。


          1 一看就會

          簡單易懂,看一眼就明白你想說什么,不用教學就知道怎么用。


          2秒法則

          所謂“2秒法則”,是指用戶在使用某類系統時的等待時長不超過2秒。在極短的時間內展示重要信息,給用戶留下深刻的第一印象。這里的2秒只是一個象征意義上的表達,也許有一點隨意,但是這卻是一個合理的數量級。我們熟知的“F”瀏覽模式其實就是間接縮短用戶看到重要信息的時長,達到快速瀏覽的目的。


          進入App的首頁加載時間如果過長就會導致用戶產生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應用將首頁加載時的空白頁進行占位圖設計。


          下拉刷新也是一個設計點,為避免刷新時間過長,設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫用戶焦躁不安的心情,無形中降低了用戶對等待時間的感知。


          APP里面的banner設計要有視覺沖擊力,如果兩秒之內沒有抓住用戶的眼球,可能就被用戶忽略了。


          因此,在設計互聯網產品的頁面時,用戶等待的時間越短,用戶體驗越佳。反之,就會讓用戶產生焦慮的情緒。


          3次點擊法則

          用戶在3次點擊之內如果還沒有找到他們想要的信息或了解網站特色,他們就會離開該網站。這條原則突出了清晰的導航,符合邏輯的結構和易于理解的網站層級的重要性。(來自《眾妙之門》P133) 

          其實在交互體驗中,點擊的次數往往是無關緊要的。只要每次點擊都是無需思考的,毫不費力地順勢進行,那么用戶的挫敗感就會大大降低。如果你的網站能夠讓用戶知道他在哪里,從哪里來,要到哪里去,并且能夠讓用戶了解如何完成目標,這樣的點擊即使有10次也是沒有問題的。例如,在京東購買一件商品需要經過“立即購買>確定>提交訂單>選擇支付方式”4次點擊才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點擊行為(比如選擇地址、優惠券),用戶并沒有感受到不方便,使用過程流暢而自然。


          在可用性測試領域,“三次點擊”定律一直是一個很具爭議內容。體現在以下幾點:

          ·研究表明,用戶在超過3次點擊還沒到達想去的頁面時,往往并沒有退出網站,而是會繼續多點幾次;

          ·當把一個3次點擊就能到達的流程改為4次點擊的時候,用戶發現目標頁面的能力反而提升了600%;

          ·合理的導航系統比點擊次數更重要;

          ·比起“3次點擊”,有人提出了“1次點擊”定律,即用戶的每一次點擊都應該讓他們更接近目標,同時盡量減少能干擾實現這一目標的因素;

          ·用戶抱怨要花很長時間才能找到某個產品,實際上他們是在抱怨無法找到想要的東西,如果用戶找到了想要的東西,他們就不會抱怨點擊的次數了;



          英國心理學家William Edmund Hick認為,在簡單的判斷場景中:一個人所面臨的選擇越多,做出決定所花的時間就越長。有時候在選擇中花費太長時間從而導致決策失敗。

          生活中我們也經常會面臨選擇困難癥,比如早上起床就糾結今天穿什么?中午去食堂就會糾結吃什么?造成我們如此糾結的原因就是因為選擇太多了(遠古人就沒這些煩惱,尋找食物時逮著什么就吃什么)。


          在設計中的應用

          應用到界面設計中也是如此,選項越多,意味著用戶做出決策的時間越長。

          例如APP Store首頁,改版前的首頁把眾多app平鋪出來,對目的不明確的用戶來說選擇有點多。改版后的首頁大幅減少了App的數量,卡片的設計方式簡潔且目標清晰。


          不得不面對較多選項時, 對主要和次要的選項做視覺權重區分,做好設計上的歸類,提升用戶做決定的效率。例如美團外賣金剛區第一行5個入口的圖標在尺寸和表現手法上都比下面的入口圖標要大更醒目?!拔业摹表撁姘岩恍┑皖l率功能或不太重要的功能收納到“設置”里,此外還可以通過置灰、鎖定等方法間接減少選項,降低干擾。


          對于多流程的任務進行分步操作,讓用戶專注眼前任務。 例如Clubhouse注冊時,把需要用戶選擇的選項分步引導完成,讓用戶能專注當前行為。


          對于多種類別的選項應當做二次分類的區分,我們都知道電商平臺的品類繁多,僅通過單一分類是不夠的,比如數碼頻道下面還分相機、影音娛樂、數碼配件、智能設備、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的,所以分類不怕多,就怕混亂。


          適用邊界

          雖然選擇越少,用戶做決策的時間越短,但這并不是提高用戶體驗的唯一標準,過度的減少選項,可能導致負面效果。

          如上圖右,如果在刪除App的彈窗中只有一個“刪除”選項,沒有明顯的取消之類的途徑,那么用戶會覺得特別難受,感覺被強迫去刪除。如果當下有急需使用手機處理一些事情,那么這樣會把這種負面情緒給無限放大,讓用戶抓狂。


          希克定律主要受影響于選項的多少,但是它不適用于需要高難度閱讀的任務。例如考試試題每道題只給你A、B兩個選項(學渣竊喜),那也太容易蒙了,這就是??硕稍诖鸢冈囶}中的局限性。


          ??硕墒且粋€可以適用于設計的指南,記住要盡量減少用戶在一次決策中要做的選項,因為決策效率是一個產品導致用戶流失的重要原因之一。引導用戶在明確的選項之間進行選擇,以便快速將他們送到某個地方(例如賬單支付),這將大大提升用戶體驗并達到你的目標。




          費茨定律由心理學家Paul Fitts提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。


          如上圖所示,如果光標現在在任易地點想要去點擊目標target,最短路徑一定是D,最短路徑上容錯的最長路徑是D+W,只要水平上移動超過了D+W你就點不到了,而這個點擊動作所耗的時間是一個常數加上一個以D為正比W為反比的函數的和。 


          詳細解釋如下,圖中紅色方塊代表點擊目標,虛線代表移動路徑,此時因為紅色方塊目標較大,所以用戶從任何一處點擊都很容易(可以用鼠標在屏幕任意點移至紅色方塊試試)。


          相反,紅色方塊目標變小,快速點擊就會困難很多,很難一次到位。


          但如果紅色方塊目標很小距離很近的話,因為移動范圍小,也能準確的點擊到。


          按鈕越大越容易點擊

          在頁面中,大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的觸達目標。比如頁面中的大按鈕。


          將按鈕放置在離開始點較近的地方

          夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域,相比常見頂部搜索欄更方便操作,效率更高。


          相關按鈕之間距離近點更易于點擊

          注冊登錄界面,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。


          適用邊界

          費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用。比如iPhone關機按鈕,沒有使用點擊關閉,而采用滑動操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進而避免了用戶誤操作。


          App彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,希望用戶先完成彈窗提示的任務。還有啟動頁廣告,喜歡把“跳過”按鈕放在難以點擊的右上角(恰飯重要),以提高用戶的誤觸機率提高轉化。


          思考小結

          按鈕越大越容易點擊,因此在程序開發中,會增加按鈕點擊的熱區范圍,減輕用戶精準點擊的壓力。但也不能過分的大,容易引起誤觸;

          讓相關聯的內容更靠近彼此,用視覺手法增強用戶對它們相關性的認知。距離產生美,注意不要靠的太近,會出事;

          將按鈕放置在離出發點較近的地方,比如頁面主按鈕一般會放在屏幕底部易操作區域;

          屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調”,參見macOS底部dock欄;

          定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能;




          “任何事物都具有其固有的復雜性,無法簡化”。

          泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「復雜度守恒定律」。

          該定律認為:每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。


          生活中很多我們習以為常,感覺便捷方便的生活方式,是無數卓越的數學家、工程師、設計師等無數的時間投入,才實現的某個小功能,是他們把這些復雜性轉移到自己身上替我們簡化了。


          說回移動端,每個應用中都有其無法簡化的復雜度,也不能按照我們個人意愿去除這些功能。這就是為什么飛機稿都簡潔好看,而一搬到線上就面目全非。常見的復雜性轉移有:“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉移跳轉,比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中,把用戶的操作范圍轉移到另一個地方。


          除此之外,還有一些降低操作復雜度的方法:

          刪除、組織、隱藏

          視覺層面的“降噪”方法,刪除會干擾用戶操作的選項;功能分類明確,圍繞用戶行為組織信息內容;隱藏那些不常用而又不能少的功能,延遲及階段性展示??偟膩碚f就是將復雜的信息收起來,展示重要且簡潔的界面。


          簡化交互設計

          可以用代碼節省用戶操作時間的地方,是互聯網人一致的追求。例如,B站的一鍵三連,用戶長按點贊按鈕,會同時觸發點贊、投幣和收藏,省時省力。


          算法解放“生產力”

          個性化算法就是通過技術手段,將用戶復雜度降低,而轉移到開發者身上。抖音為什么會讓人上癮?是算法知道了你的喜好,專推給你喜歡的內容而不用自己去找,誰都喜歡私人定制。這對用戶來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負重前行”,這里的簡化復雜的難度就轉移到設計和開發身上了,還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的內容都是基于你的喜好定制化推薦給你的。


          我們常說以用戶為中心去設計,就需要從用戶角度出發,在交互設計中盡量簡化操作的復雜度,降低學習成本。但如“復制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的復雜性,無法簡化”。因此,如何取得復雜度的“平衡點”就是重要的部分,是讓工程師及設計師花費大量時間去降低產品的使用難度,還是在設計中保留一定的復雜度是我們需要思考的事。



          該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論,她強調結論先行,論點自上而下。

          你是否遇到過這樣的場景,部門開會時有人口若懸河的講了半天,到最后你都不知道他想說什么。所以如果開會時你會走神,這不怪你,只怪講演者說話沒有邏輯,沒有重點。


          金字塔原理指示結構化表達遵循結論先行的原則,即任何問題都能歸納出一個中心點,讓受眾能夠第一時間清楚你想談論的主題。然后由數個論據作支撐,而這些一級論據可以繼續由數個二級論據支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。


          應用到交互設計上,即將信息展示的重點與交互行為的主任務優先展示,再根據用戶在這個界面上所愿意停留時間逐級給予更多細節補充。以京東的商品詳情頁為例,首先金字塔的最上層是用戶目標明確直接進行“立即購買”的底部全局按鈕,其次是商品的頭圖和用戶評價這些,讓用戶了解更多信息,進一步促成購買,最后一層是提供商品相關的全部信息、參數、評分等,確保交易的最終完成。在這個過程中,用戶在每一層花的時間也在逐級增加,呈金字塔狀。


          映射到設計師身上也是如此,從設計新人到設計總監,中間差的就是一個完整的設計技能金字塔。就像升級打怪,每完成一項任務獲得相應的經驗值,累積的經驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之后,你的設計水平會在不知不覺中更加精進,形成一套自己的設計風格,成為一名優秀的設計師。


          有趣的是,把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下,激勵用戶成長。它告訴我們:

          用戶的需求是永遠滿足不完的,所以什么值得做,什么是可分階段去實現的是決策人需要明白的。如喬布斯所說:“消費者并不知道自己需要什么,直到我們拿出自己的產品,他們就發現,這是我要的東西”;

          不斷完善主要功能,以滿足金字塔頂的核心用戶群。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個廣告位;

          如何優化完善產品架構,檢驗產品策略的合理性和完整性;



          防錯原則由世界著名的品質管理專家新鄉重夫提出,即在過程失誤發生之前加以防止,是一種在作業過程中采用自動作用、報警、標識等手段。使操作人員不用特別注意也不會失誤的方法。

          防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,可以通過優化設計把過失降到最低。該原則最初用于工業管理,后來應用于界面交互設計中,當使用條件沒有滿足時,常常通過功能失效來表示。


          自動檢測提示

          bilibili在登錄時輸入框沒有內容或沒有輸密碼時,登錄按鈕處于禁用的置灰狀態,只有兩者都滿足了才可以正常點擊。此外登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、郵箱錯誤等不同的錯誤。通常必須賬號和密碼同時滿足且匹配才能成功。


          Twitter發帖時只允許用戶輸入140個字,為了提醒用戶,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字符,超過會以負數警示。知乎發布文章標題過長時也會提示錯誤預警。


          消除可能的失誤

          防錯法則認為大部分的出錯都是產品設計的不夠優秀,而不該責怪用戶操作疏忽,通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是,如何有效的在用戶出錯之前就盡量避免錯誤的發生。比如,美團外賣在接受短信驗證碼時,系統會自動提取驗證碼在鍵盤上方顯示,用戶點一下就可以自動填寫,省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程,有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬號,避免手動輸入的出錯率。


          將失誤降至最低

          二次確認,在一些比較重要的場景讓用戶二次確認,通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結果,進一步降低出錯率。例如,最近大家都在用的報稅App,會在提交信息前再次確認。


          視覺暗示

          可在視覺(置灰或隱藏)上屏蔽那些不能選的選項,避免用戶點擊后才報錯或點擊沒反應。


          其次,一些不可恢復的操作,視覺上通常會給強標識。例如,刪除短信時的文字顏色“變紅”。


          為用戶犯的錯買單

          當用戶輸入錯誤信息時,比如打錯字,系統應該給予用戶想要的信息,而不是無動于衷,冷漠視之。


          范圍限制

          其實限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。例如,Airbnb訂房可選日期和設置鬧鐘時的時間范圍。


          研究得出,使用產品時有77.7%的錯誤都是人為的,防錯法則可以幫助設計師站在用戶體驗的角度考慮設計方案,做到操作前、中、后都有及時的反饋,預測到他們有可能發生的誤操作狀態,讓用戶更快完成目標,幫助用戶減少出錯率。



          每次拿起U盤插入電腦時,我就呆住了,到底朝那個方向才是對的?

          防呆(Fool-proofing)是一種預防矯正的行為約束手段,運用避免產生錯誤的限制方法,使出錯的機會降至最低,進而達到“第一次就把工作做對”之境界。


          設計師應謹記:不要認為用戶是專家。比如,我們都知道“漢堡”圖標就是菜單,點擊這個按鈕就會調出某些功能。但是設計師忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是面包屑、什么是抽屜式導航、什么是3Dtouch、怎樣雙指滑動。更何況普通用戶并不會研究App,在他們眼中產品只是眾多工具中的一個。因此,一定要把交互和設計做的簡單,通用的圖標、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復學習的負擔。每個頁面應強調一個重要的功能而不應該讓用戶做選擇題,這些都是有效防呆的好方法。


          △頁面的中主按鈕更突出


          防呆設計是預防錯誤發生的方法,讓非專業、無經驗的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時時為用戶思考。



          又被稱作“簡單有效原理”:“如無必要,勿增實體?!?

          通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情?!被蛘弑硎鰹椤霸谄渌麠l件相同的情況下,要求得越少的那個就越好,越有價值”。


          應用到設計學領域,該法則認為做產品時功能上不可過于繁瑣,應該保證簡潔和工具化。例如,產品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設計元素會導致使用效率降低,還會增加不可預知的后果。建議在不損及功能的前提下,干掉多余的元素,當兩個設計方案都能達到設計目的時,選擇較為簡單的那一個有利于更好地傳達內容更好地用戶體驗。


          總的來說,我們可以結合《簡約至上》一書中提到的刪除、組織、隱藏、轉移四個策略來將復雜的設計和體驗變得更加簡單。

          刪除:關注核心,讓用戶注意力集中在自己要完成的目標上,刪除不必要的功能、流程和造成視覺混亂的元素等;

          組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎,把項組織到7加減2個塊中;分塊越少,選擇越少,用戶負擔約輕;

          隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過漸進展示和適時出現的方法減少干擾;

          轉移:把合適的功能轉移到合適的設備上去。讓用戶感覺簡單的一個重要前提,就是先搞清楚把什么工作交給計算機,把什么工作留給用戶。




          小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

          可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達


          雷斯托夫效應又稱隔離效應(isolation effect),以及新奇效應(novelty effect),前蘇聯心理學家馮·雷斯托夫認為,某個元素越是違反常理,就越引人注意,收到更多的關注。


          一樣東西與以往經歷明顯不同就產生了經歷差異。比如人生中的很多第一次,第一次高考、大學的第一天、初戀、第一份工作等等。該差異也會出現在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。

          該理論以多種不同的方式應用到設計中,最明顯的就是如果想要突出某個重點內容,就要使它特殊化,通過色彩、尺寸、留白、字體粗細等設計手段。利用對比來凸顯想要表達的重要信息。例如金剛區、tab欄的運營活動廣告,特殊化的設計讓它們在背景中脫穎而出。



          個人中心的會員卡為了吸引用戶注意,增加開通率,都成了重點設計對象。


          與以往不同的界面設計可以更加的吸引用戶,加深用戶的記憶,同時擴大了活動對用戶的影響力。例如每年淘寶的雙11首頁設計都與往常不同。


          Google doodle 會在一些比較特殊的日子改變 logo 的設計,把logo設計成與這個日子相關的插畫或涂鴉,與平時的 logo 形成差異化,幫助人們更好地記住這個日子。


          因此我們在界面設計中,若想讓用戶對哪個模塊或者是元素引起注意或點擊,就可以打破常規對該元素進行強調設計,使他在背景中脫穎而出。但是不要任何元素都強調,因為什么都強調就等于什么都沒強調,就沒有重點,所以要謹慎使用這個方法。


          回到開篇的題目,答案是「嶗山可樂」。相比其他飲料,嶗山可樂遇到的少,反而成了最特別的一個了。你的答案是什么?歡迎在下方留言探討。




          食之無味,棄之可惜

          損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。 同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如,丟100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平復之前的心情。


          生活中類似的栗子還有很多,比如旅游時,雖然這個景點很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;吃自助餐時,明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應了那句話:“食之無味,棄之可惜”;花了50塊買了張電影票,過了10分鐘發現是部爛片,就算在電影院睡覺也不愿提前走,覺得這50塊錢不能白花...


          那么,該如何將“損失厭惡”賦能給產品設計呢?

          最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計時xx小時后恢復原價等等。商家就是為了營造現在不買就會錯過的套路,用戶也會覺得失之可惜。一年一度的天貓雙11,京東618,還有情人節、中秋節等各種有的沒的節日都是商家利用“損失厭惡”心理為基礎刺激消費。



          我們App的用戶粘性不太理想,增加一個“簽到”功能吧,產品經理如是說。如是我們看到各種簽到得禮品,贏紅包等活動。中間還不能中斷,要連續簽到多少天才能得到獎勵,用戶也擔心中斷的損失。


          某網盤下載文件時,會給你一個10秒VIP高速下載的體驗,計時過后又恢復到龜速,讓你恨的牙癢癢。雖然這招有點損,但用戶體驗到了VIP的快感,很多人還是會乖乖成為付費會員。


          產品運營中會經常發一些優惠券,雖然知道自己不會用,也要先領了再說。這些券也都有時間限制,快過期的提醒也會加快用戶決策。還有0元開通會員,套路是第一個月免費,次月開始按正常價自動續費,典型的“騙”進來養肥了再“殺”。


          人天生會對危險的,不好的東西避而遠之。如是我們就看到保險行業,他們會用一些負面信息(空難、車禍)刺激你,用戶就會產生焦慮,自然就想規避掉這些概率小的風險。例如購買機票時的意外險,QQ退出登錄時的提示。


          還有就是有用戶自己的內容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,后來看到幾個更好用的軟件,但要想到把原來的這么多東西全部轉移過去也是件很心累的事,太麻煩,還是繼續用飛書好了。QQ這個“古老”的軟件,估計很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因為那上面有很多青春的回憶。




          用戶會將大部分時間花在其它網站上,因此他們會希望你的網站也能像他們已經掌握的其它網站一樣,擁有相同的使用模式和習慣。 

          Jakob定律是由Jakob Nielsen提出的,他認為用戶在其他網站所積累的經驗教會了他們如何使用網站,所以他們會希望你的網站可以與那些熟悉的網站一樣,相似的使用方式,在使用你的產品、服務、內容和信息的時候,他們不會感到恐慌,而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式,以避免混淆用戶或導致更高的認知成本。


          例如YouTube2017年改版前后的對比,在新版中,網站框架和功能上幾乎沒動,只是在UI上做了順應新的設計準則,比如調整字體大小、顏色、欄目間距等。整體上和舊版沒太大區別,而且還給用戶提供了舊版的選擇。


          在移動端App中也應如此,在具有相同功能的頁面,盡量保持一致。大到頁面底層框架(比如電商應用中的購物流程),小到UI設計中的一個按鈕,一個圖標,甚至一句微文案。


          在設計產品時,要先延續大眾早已習慣的概念模型。然后再從自己的產品出發,對其進行改善。而不是從零開始制定自以為是的流程。

          日常使用的各類修圖軟件,版式都高度相似,中間是圖片,各種濾鏡、貼紙、調整等功能都放在底部操作區域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學習成本提升使用效率。


          也許你會質疑當所有產品都遵循相同都設計模式,會讓產品同質化嚴重,答案是必然的。此時需要深入了解用戶的目標和心智模型(用戶訪談、用戶畫像、用戶體驗地圖等),并將其應用到我們的產品設計中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗。上文YouTube例子中,就是通過簡單的用戶授權(新舊版本選擇),避免了心智模型的不一致會帶來的問題,當用戶準備好隨時可以切換到新的版本。相反的案例Snapchat在18年設計改版時,因為新的布局未能確保改版前后用戶心智模型的一致性,導致大量用戶流向競爭對手Instagram那里了。


          但是也要注意設備之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大屏幕可視范圍更大,小小的漢堡包圖標很容易被忽略,這時候平鋪出來可能會更好。


          思考總結

          1、用戶會把在其他產品使用中已熟悉的操作習慣轉移到另一個看起來相似的產品上;

          2、利用現有的思維模型,使用戶可以專注于自己的目標上,而不是學習新的操作方式;

          3、在進行必要的改版時,請給用戶過渡到新版本的機會,即可以選擇短時間內繼續使用舊版本;



          看名稱挺拗口,另一種翻譯叫做“對角線平衡的和諧狀態”。它告訴我們瀏覽頁面是由左上至右下的視線流,左上角是視覺第一落點區,右下角是視覺最終落點區,因此右上角和左下角都是一個強烈的視覺盲點區,大多數時容易被忽略。


          在進行信息排布時,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。運用視覺元素來創建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對角線移動,符合用戶習慣性的眼動規律。


          古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價格、快遞和優惠等用戶主要關心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。


          我們都知道一般頁面按鈕都在界面底部是因為離手近,方便操作,但不僅僅如此。還因為瀏覽是用戶的第一行為,他們的視線會根據頁面元素進行移動,最終停留在底部結尾的地方。


          看各種社交產品評論、點贊的位置,就知道產品希望用戶先干什么的想法。


          彈窗的按鈕擺放一般都是左「取消」右「確認」,目的是讓用戶最快地看到主要操作內容。



















          余額寶的「轉出」在左,「轉入」在右,畢竟誰也不想財往外流是吧。


          既然如此,為什么“發布”頁面的按鈕都在右上角呢?因為發布頁是屬于“編輯頁面”,需要用戶謹慎操作,這里關注的核心應該是可編輯內容區域,而不是按鈕本身。


          類似的例子還有很多,設計中與此視覺流與節奏規律相似的還有F型布局和Z型布局,合理運用這些節奏模式,使用者會跟隨你“設計”的視覺流和運動規律來瀏覽頁面,有效提高用戶閱讀的節奏和理解能力。




          美國心理學家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動機的角度提出需求層次理論,該理論強調人的動機是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實現更高的需求和目標。


          馬斯洛需求層次理論有兩個基本出發點,一是人人都有需求,某層需求滿足后,另一層需求才出現;二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵作用。例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。


          回歸到產品,一款產品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產品的需求分析指明了方向。

          生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供方便的應用;

          安全需求:人生安全、財產保險,也是強需求。如是各類投資理財軟件層出不窮。

          社交需求:包括友情、親情、愛情多個層次,滿足人類社會關系,讓每個人不再是孤單的個體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;

          尊重需求:每個人都有被尊重的需求,都希望展現自己,獲得人們認可。此需求可以深度結合在社交需求中。

          自我實現:最高層級的需求,完成與自己的能力相稱的一切事情,實現自己理想的需要。結合到產品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。


          由此規律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實現,變得可有可無,不再是所有人的剛需。一個優秀的產品,深諳人性滿足用戶核心需求,才能形成持續穩定高用戶粘性的產品。




          序列效應法則又叫系列位置效應,是指一種記憶現象: 在列舉項目時,排在最前面與最后面的元素,要比排在中間的更容易讓人記住。

          因為人們對排在頭、尾的項目,要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級里我們一般都知道成績最好的第一名和倒數第一名,至于排在中間的很難記住。因此對排在開頭的項目產生加強的回想效果,稱為“首位效應”( primacy effect)。對排在結尾的項目產生加強的回想效果,稱為“近因效應”( recency effect )。


          分類頁簽中,我們通常都會記得“精選”、“熱門”這類標簽,是希望給用戶進入App后看到的主要內容。這就是“首位效應”,把重要性高的內容放在首要位置。


          我們都知道界面中“返回”按鈕放在左上角,除了操作習慣和防誤觸外,還因為它出現在頁面左上角最開始的地方,更長久地儲存在長期記憶之中,需要“返回”時能夠快速回憶出來。


          tabbar數量不管是3個還是5個,用戶通常都會記得第一個“首頁”和最后一個“我的”,對排在中間的都會選擇性的忽略掉。


          有時候新上一個功能,產品想提高它的位置引起用戶注意,會和“我的”互換位置。例如網易云音樂,新版本中把“我的”放在第三個tab,為了提升“云村”重要性,把它放置最后一個tab,正是利用了“近因效應”。


          近因效應常用于及時進行反饋的設計界面中,比如點贊、評論、分享等功能置于底部不僅可加深印象,同時用戶在看到有趣的內容,想要評論或分享時,不用等到文章看完即可操作。從而增強內容粘性,提高互動率。


          用戶的記憶具有系列位置效應,而且人的短期記憶非常有限,通過序列效應法則的應用,我們可以幫助用戶減輕記憶負擔。在排列項目時,把重要的放在首位或末尾,以達到最好的記憶效果。

          文章來源:站酷  作者:Fyin印跡

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


          如何撰寫高效的交互說明?

          ui設計分享達人

          定義:

          交互說明是針對原型圖內容元素的補充解釋文字(包含交互邏輯描述、反饋狀態描述等) 

          交互設計說明書由交互設計師完成編輯、修訂、發布的 
          主要閱讀對象:產品人員、設計人員、研發人員、測試人員等,他們都是交互設計文檔的使用主角。 




          不同角色的關注點:

          產品經理
          主要關注:交互邏輯、功能架構、交互事件、界面頁面流轉與內容布局等。這里的產品經理代表產品經理及以上管理層。 
          注意要點: 為項目梳理清楚邏輯關系,文檔按照邏輯關系和功能架構分支等設置目錄講清楚項目、功能、組件、頁面流轉關系。

          UI設計師
          主要關注:說明文檔的具體頁面數量,因為這決定 UI 設計師出多少效果圖。另外,要看你的原型設計給 UI 設計師留了多少發揮空間,不要過于高保真。以及頁面元素是否統一規范便于提煉出典型頁面和設計規范。 
          注意要點: 清晰合理的頁面功能布局,注意交互組件復用,頁面不同狀態描述清晰。

          研發人員
          主要關注:非常關心細節實現,關心有多 少個功能、多少個功能新特性、多少個頁面元素組件、多少個交互動效等, 但他不關心方案里一個輸入框里是用彩色還是黑白,因為他是具體功能的實現者。 
          注意要點: 明確表示出關于功能設計、頁面邏輯、組件交互等信息的細節,例如:一個頁面刷新,要分為觸發刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況:網絡不佳、程序異常等。如果你沒有提出明確需求,責任就會在需求方,而不是研發部門。

          測試人員
          主要關注:測試是依靠需求說明書和交互設計說明書,進行測試用例與測試腳本的編寫,在交互設計說明文檔里需要說明白每一個功能的交互動作與事件,測試是抓細節的,所以需要配一些說明性文字解釋交互設計的思路與實現路徑,這樣測試人員就可根據設計思路設計出測試用例。當然,測試用例分多種類型,這里指的是功能測試與邏輯測試,一些性能測試等需要依靠程序使用的軟件、數據庫等技術性的接口文檔來定。 
          注意要點: 功能點、業務邏輯、界面元素、交互過程分解步驟。

          上面解釋了各角色使用交互設計說明文檔的場景及他們期待的真實需求,我們需要清楚地了解這些內容,才能有針對性地撰寫交互設計說明。 
          在交互設計過程中,上述四個角色會不斷有所交集。所以,一旦編輯文檔,就需要對這幾個角色有針對性地解釋和閱讀優化。 




          清晰準確的交互說明,可以起到哪些作用:

          1.減少交互設計師與產品上下游人員的溝通成本 
          2.提升協作效率 
          3.避免項目返工延期 




          交互說明撰寫準則:

          只寫最重要的: 

          只針對有邏輯規則、異常狀態、特殊交互、分支流程、關鍵節點等進行說明。 
          對于一些常識性、無異常點的地方不用堆積文字描述... 
          交互說明畢竟是要給人看的,堆積的文字誰看得下去??只會帶來額外的閱讀壓力和極高的理解成本,交互設計師修改起來也麻煩。 


          按模塊來展示說明: 

          01.設計內容組件:對于重復性強、出現頻率高的內容,設置一個模板內容及說明即可。 
          對于重復出現的地方,直接代替過去就行,可大幅度減少交互設計師的工作量,開發也方便理解。 

          02.分頁面/位置來展示:當整體交互原型頁面較多時,不要全都鋪在同一個頁面進行展示說明,會顯得頁面臃腫、瀏覽費力??蓢L試:單獨展示某個模塊、分支流程、場景等下的交互稿。小而聚集,內容更精簡、理解更方便。 

          03.若各模塊/分支流程/場景中的交互稿存在一定的關聯性,可以先做一張總體性的「概覽圖」,再去單獨展示。讓開發知道整體方案之間的關系、又能了解各個細分方案里的交互說明。 


          復雜說明單獨展示: 

          交互稿里總會有一些比較復雜、難以文字來說明的想法,像是一些動效、狀態等。 
          對于這一些比較復雜的說明,可抽離出來進行對比、詳細描述,針對局部進行狀態效果描述,不必重復復制全量頁面。 
          像一些按鈕或功能存在多種狀態時,也可用“表格/列表”的方式進行展示。 


          交互說明的排版布局要有助于閱讀:

          針對不同體量及復雜度的項目,交互說明一定存在多種排版布局方式。但要注意以下幾點: 
          01.就近原則:交互說明盡量靠近所描述的原型圖(或具體功能點)采用數字標號對應描述。特殊情況下交互說明離頁面數字標注點較遠時,可用虛線連接引導閱讀動線。 

          02.縱向展示:同頁面不同狀態/模塊及交互說明盡量縱向延伸展示,這樣更便于鼠標滾動查看。不要橫向平鋪太長。 

          03.減少重復:對于相同的頁面框架/功能菜單僅部分模塊/狀態不同,可畫一張全要素主頁面示意,其余針對不同模塊/狀態拆解后,單獨對比展示,并補充交互說明。突出差異點,減少重復性元素的干擾。 

          04.主次分明:交互說明樣式整體需要區別于原型圖頁面元素,可一眼區分。同時,對于交互說明也需要區分主要解釋和次要描述,讓不同查看者抓住重點。 

          不同的排版布局方式各有利弊,所以具體采用哪種布局方式要根據所做項目的情況,以及開發人員的閱讀習慣而定。 


          交互說明組件化: 

          類似于設計的控件庫,我們在項目中寫交互說明寫多了就會發現,既然元素可以調用控件庫快捷使用,那么該元素的交互說明也可以歸類入庫,在需要的時候直接拿出來根據具體情況調整使用。這樣做的目的:使用時快捷調用,修改時快捷修改。 


          有更改及時告知: 

          若交互原型做了調整(包含交互說明),一定要告知團隊成員??!并寫明修改位置(在哪個頁面)。 
          否則產品、前端、后臺、測試等同事的相關想法、工作會停留在上個交互稿里。不要因為信息沒對齊而造成了不良影響。就算改了一處小東西,也盡量和同步一下。 




          交互說明的三種樣式:

          1.同一頁面內不同模塊描述

          當同一頁面內存在多種狀態時,可畫一張全要素主頁面示意,其余針對不同模塊/狀態拆解后,單獨對比展示并補充交互說明 



          2.頁面功能點邏輯規則描述
          對于頁面中的元素和功能點描述可采用數字標號對應的形式,若面功能點較多且存在關聯時,可分組標號做統一說明 




          3.頁面內細節簡短標注描述
          用于描述頁面內功能點及元素的簡短說明(20個字內)大段說明文字不建議用此方式(易干擾頁面)… 

          文章來源:站酷  作者:體驗為王UX

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

          你要知道的交互成本

          ui設計分享達人

          交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力(無論是精神上還是物理上)。

          理想情況下,我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本,并且是檢驗可用性的里程碑。

          不幸的是,由于大多數站點和應用程序都提供了用戶可能想要做的許多事情,因此很少能達到零交互成本。大多數時候,用戶必須四處瀏覽,閱讀,可能滾動,找到有希望的鏈接,單擊它,等待頁面加載,然后重新進行整個過程。有時,一個新窗口可能會在現有窗口的頂部彈出,在這種情況下,用戶必須將注意力轉移到新窗口上,也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下,用戶可能需要記住一頁上的信息,然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。

          可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說,它們最小化:

          • 閱讀

          • 滾動

          • 環顧四周以查找相關信息

          • 理解提供的信息

          • 單擊或觸摸(不會出錯)

          • 打字

          • 頁面加載和等待時間

          • 注意開關

          • 內存負載-用戶必須記住的信息才能完成其任務


          這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如,閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難,而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道,但是如果蜂窩網絡覆蓋較慢,則移動設備上的頁面加載可能會花費很長時間。

          許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如,網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。

          交互成本示例

          讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本,并且在啟動Dictionary應用程序后立即開始分析。

          啟動應用程序后出現的第一件事是啟動屏幕。


          在這一點上,交互成本包括等待幾秒鐘,以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間:


          在此頁面上,互動成本來自定位搜索框。幸運的是,搜索框非常顯眼地位于頁面頂部,因此我們可以放心地認為,用戶只需很少的精力就可以找到它。找到后,用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標,因此交互成本也可能會降至最低。


          接下來,用戶必須編輯搜索查詢。

          當輸入焦點在搜索字段中移動時,自動建議的詞將自動顯示。

          用戶必須查看自動建議并確定它們不相關,然后清除當前查詢。他們可以通過按右側的灰色x按鈕(如果他們熟悉iOS規則)來執行此操作,也可以通過按觸摸屏上的Delete鍵來逐個清除字符。

          刪除后,用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時,關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。


          選擇(或鍵入)單詞“ ceremony”后,用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面:


          用戶必須推斷Origin可能包含有關單詞來源的信息。(對于大多數用戶而言,這是一個簡單的推論,因此認知成本很低;但是,如果改用“詞源”一詞,則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩;因此,“來源”是更好的選擇,因為它降低了交互成本。)



          讓我們總結一下交互成本的各個組成部分,以找到“儀式”一詞的由來:

          1. 等待啟動頁面

          2. 搜索

            1. 輸入幾個字符

            2. 掃描自動提示列表,以查看所需單詞是否在其中

            3. 如果否,請輸入更多字符并在上一步中重復

            4. 如果是,請通過點擊選擇所需的單詞

            5. 找到搜索框,然后點擊將輸入焦點移至該搜索框

            6. 閱讀搜索框中顯示的查詢和自動建議

            7. 決定查詢不相關

            8. 刪除搜索框中顯示的查詢

            9. 鍵入或選擇自動建議

            10. 點擊搜索

          3. 等待結果頁面

          4. 在結果頁面上找到相關的詞源信息

            1. 向下滾動頁面并掃描內容以查找詞源信息

            2. 找到標簽并閱讀

            3. 請注意,右側還有更多隱藏的標簽

            4. 推斷詞源可能是隱藏的標簽之一

            5. 注意到滑動會向右暴露內容

            6. 向右滑動

            7. 閱讀Origin并將該單詞與目標聯系起來,以找到單詞的來源

            8. 點擊詞源

          5. 了解“儀式”一詞的來源

          如您所見,一個相當簡單而輕松的過程需要很多步驟和子步驟;他們每個人都會產生互動費用。對于某些人而言,交互成本微不足道-例如,記住人們向右滑動即可顯示更多內容,因此交互成本非常低,因為人們在移動設備或Web上已經多次遇到水平滾動。可以優化其他步驟以最小化交互成本;因此,在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣,將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。(當然,選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。)


          預期效用

          請注意,對于前面各節中的某些步驟,用戶可以有多種選擇。例如,他們可以按灰色的x按鈕刪除當前字符串,也可以多次使用Delete鍵?;蛘撸麄兛梢詮淖詣咏ㄗh列表中選擇建議,也可以在最后輸入字符串。

          人們如何決定采取哪種行動?答案在于預期效用的概念:

          預期效用=預期收益–預期交互成本

          用戶嘗試最大化一項操作的預期效用:換句話說,他們權衡了每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的方案。

          當有幾種方法可以實現具有相似利益的相同目標時,用戶通常傾向于選擇使估計的交互成本最小的操作。



          例如,許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞,而是可能會再鍵入一個(或幾個)字符,直到可見“儀式”一詞為止,因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。


          這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標,則除非與初始站點進行交互的收益確實很高,否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子,如果用戶真的想購買Apple電腦,他們可能會堅持使用Apple的網站,因為他們不太可能在其他地方購買。在這種情況下,用戶的動機確實很高,因此他們可能愿意忍受很高的交互成本。但是,如果用戶要購買燒烤架,則可能不在乎是否從Home Depot或Lowe's或其他站點購買,并且會離開互動成本高的站點。

          營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益;可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。

          為什么您應該關心交互成本

          交互成本是可用性直接度量。實際上,該概念早在人機交互時就被引入,以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。

          從長遠來看,快速評估設計的交互成本可以節省大量資金,因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間比較工具:通常,將交互成本最小化的方案具有更大的成功機會。

          文章來源:站酷 作者:ZZiUP

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


          交互設計中排行榜設計詳解

          ui設計分享達人

          “今天吃什么???”

          “不知道啊,看看大眾點評,哪家店比較靠前”

          “一會去看什么電影?”

          “我看豆瓣上,這部片子評分特別高,我們去看這個吧”

          當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時,面對的選擇越多卻越不知道如何做決定,或者當下做了決定覺會一直思考做的這個決定是不是最好的,選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式,幫助用戶做決定的同時,引導用戶購買目標產品,極大的降低了用戶的選擇成本,其中排行榜就是平臺的常用套路。用戶的選擇成本是什么?排行榜為什么能夠幫助用戶降低選擇成本?排行榜僅僅是用來降低用戶的選擇成本,為什么商家對排行榜也趨之若鶩?下面帶你了解為什么人人都愛排行榜,及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道,我們的生活正在被各種排行榜所支配!


          排行榜的本質是一個沒有感情的信息篩選機制,某一相關的同類事物之間通過比較,反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可,比如我們買衣服會首選淘寶,電子類產品會首選京東,看電影會看豆瓣評分,這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選,由于錨定效應降低用戶自己的選擇成本,準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應,也會對上榜主體產生強烈的品牌認可,為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽,比如:B站的百大up主,各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么?


          一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分,俗話說屁股決定腦袋,不同的定位決定了排行對三大組成部分不同的作用,當然背后的原理也不盡相同。

          1.選擇類排行榜-降低用戶選擇成本

          在沒有各種應用前,當我們決定購買什么東西或去哪家消費,前期需要花費大量的人力、物力,搜集相關的信息進行整理集合后,對比集合信息后才能做出決定,也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后,做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本(前兩個階段發生的成本是交易費用,而不是選擇成本)。在備選集的建立過程中,包含的選擇越多,用戶選擇的難度就越大,選擇成本就會越高

          選擇性排行榜在備選集建立完成后,利用沉錨效應在用戶心理建立潛意識的目標參照,幫助用戶完成擇優決策,降低用戶的選擇成本。(另一方面平臺在幫助降低選擇成本的同時,也會影響這用戶的最終選擇,在接下來的平臺側方面會有詳細的分析)

          比如說:當我需要買個耳機時,如果在沒有各大應用的前提下,我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人,收集信息建立備選集,但由于京東在電子設備方面的權威性,我會優先查看京東的耳機類排行榜,也就是說京東完成了前期的信息搜集及備選集建立,而用戶出于對平臺權威性的信任,根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息,最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找,以及用戶對信息確定性的尋找過程。

          2.信息類排行榜-滿足社交需求

          在馬斯洛需求中,當個人的生理需求和安全需求被滿足時,與他人建立情感聯系或關系成為人們最強烈的需求,即社交需求。社交又分為:為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如:QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

          無論是“功利社交”還是“共情社交”首先需要的是溝通,溝通的本質則是信息的流通,但當雙方都沒有可以溝通的信息時則社交不成立,而類似:微博熱搜、今日頭條、澎湃新聞等信息類排行榜,則給有社交需求的用戶提供了相通的談資。

          在選擇類排行榜中,提到的從眾心理(又稱羊群效應),是指人類由于對信息壓力規范壓力,會希望融入到群體中尋求安全感的特性,即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感,會熱衷于瀏覽此類排行榜來獲取實時信息,融入群體生活。每天早上,在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件,在上班電梯或工作間隙討論各自掌握的信息,及對事件的見解,甚至在與他人有相同的見解或之后,會對對方產生莫名的親近感,滿足自己的社交需求。

          3.分享類排行榜-自我確認需求

          過年期間各家app紛紛推出自己的用戶年度報告總結榜,不知道你有沒有參與到其中,并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序,人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外,還需要了解自身在大數據下的自我確認,通過各種各樣的榜單,判斷自身的能力、情緒、價值等,來達到自我認同,否則就會感到焦慮不安。

          加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺,人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程,我們想要呈現給觀眾怎樣的形象,需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己,為了維持自身的平衡防止崩潰,人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己,讓用戶更加清楚的認知自己,同時通過分享,滿足自我確認以及他人確認的需求。

          我目前只總結出這三種類型的排行榜,如果有小伙伴想到其他類型歡迎在評論區提出,一起參與討論。

          無論哪種排行榜,用戶信任的基礎都來自對平臺的信任,那么用戶為什么信任平臺?排行榜對平臺意味著什么?背后原理是什么?

          對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性,選擇成本是品牌經濟學的核心,而用戶對于排行的信任首先要建立在平臺品牌的權威性下。

          1.平臺權威性—用戶側

          從我們記事起,我們對世界的認識來自自己的父母或老師,而這些教導我們什么是對、錯,對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家,比如:醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠,可以幫助普通用戶節省研究問題的工作,做出更輕松的決定,雖然不一定是正確的。

          搜索我們會第一時間想到百度,影視、書籍會想到豆瓣,想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性,形成品牌號召力,推動用戶做出需求決策。另一方面排行榜中也會說明數據來源,比如京東會在排行榜頁面有明確的榜單說明,豆瓣根據平臺數據更新,汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明,減少用戶做出決定中的思考、猜測,獲得用戶的信任,增強平臺的權威性。那對于平臺來說權威性的建立意味著什么?

          2.平臺權威性—平臺側

          • 影響用戶的決策方向

          平臺權威性意味著說服力影響力,在減輕用戶的決策壓力的同時,影響用戶做出平臺所需的決策方向;

          • 平臺自帶話題性

          每年蘋果發布會都會帶來范圍極大的熱度討論,而app store內的熱門推薦自帶話題度和討論熱度

          • 輸出口優化

          排行榜作為內容輸出口,在平臺權威性的背書下,產品優化自身的價值,而平臺也可以通過排行榜優化自身平臺價值

          • 平臺盈利

          平臺權威性下,可以通過多種方式達到盈利,比如蘋果app store應用商店內的付費應用,百度的鳳巢系統、微博熱搜的第3、4位排名等。

          3.平臺權威性—廣告告知

          在平臺完成建立權威性開始利用排行榜進行商業變現時,比如百度、58的競價排名,現在大部分應用會使用明顯的方式告知用戶,防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”,淘寶、小紅書推薦猜你喜歡的“廣告”。

          上榜主體作為整個排行榜的內容中心,由于排行榜自帶的競爭機制、篩選機制,使得用戶會很樂于分享出去,比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。 

          由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度,以及各種潛在資源,比如:流量、資源、人脈、某一領域影響力、平臺背書等等,這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感,比如bilibili不同粉絲量級會送出相對應的粉絲牌。

          而平臺方也利用上榜主體挖掘潛在的用戶,為平臺帶來更多的新用戶,加強平臺權威性,形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量,帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站,簽約西瓜視頻”,各大平臺也時不時會出現搶占流量up主的情況。

          排行榜資源的建立

          排行榜設計要達到用戶攀比的效果,很重要的充分條件就是相同需求好友基數足夠大,這樣才能構成排行榜設計成功的必要條件。

          1. 同系同門資源導流

          對于已有成功產品的公司,可以借助平臺相互間的導流完成初試資源的搭建,比如:微信初期借助QQ好友流量,帶來好友初期的爆發;抖音最初的活躍借助今日頭條的流量輸入。

          2.自建用戶體系

          不斷推送已關注好友的信息流,當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交,你要先有這個人聯系方式才能要求好友,關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等,不斷社區建設推送動態信息流和好友卡片推薦。

          3.偽造

          當應用建立初期,沒有很多的資源和內容時,需要平臺自行填充內容,使得排行榜信息量大,增加用戶活躍,才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等,或是平臺pgc發布推送的內容。


          面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化,根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

          在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成,其他則根據不同產品類型及產品需求決定是否展示。

          1.頁面tab

          在首頁底部或頂部tab形式出現,多出現在以UGC或文字信息為核心的產品,以內容信息為主,常見以信息熱度為主要功能的資訊、新聞類應用。比如:知乎、今日頭條、36氪。

          知乎熱榜內容完全展開;36氪分為話題榜、人氣榜,話題榜僅展示前5條,人氣榜展示10條,僅在前5條有名次圖標,在36氪熱榜的中部還會出現收藏榜,綜合榜。

          而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”,點擊“查看更多”后,展開“頭條熱榜”及“今日關注”“北京熱榜”,整個交互形式類似微博熱搜。

          2.圖標入口

          首頁功能入口處明顯排行榜圖標,優先級較高,常見自帶推薦屬性,能夠幫助用戶快速選擇,減少選擇成本,比較依賴榜單的應用。比如:豆瓣、音樂類、騰訊動漫等應用。

          其中豆瓣、網易云音樂由于各種類型的排行榜很多,在圖標點擊開后,在當前頁面平鋪不同維度榜單類型,用戶進行點擊跳轉;騰訊動漫相對榜單類型較少,在左邊側邊欄切換不同的榜單。

          3.商品詳情頁榜單入口

          用戶查看商品詳情時,可能會希望能夠橫向對比同類商品,才能最終決定購買那件商品。常見于電商類應用,比如:京東、拼多多、得物等。點擊后進入不同的榜單頁面,獲取更多產品信息進行篩選。(淘寶的商品詳情頁沒有排行榜,但在首頁卻存在隱形排行榜,在隱形排行榜模塊會有詳細說明)

          4.搜索-篩選(無明確搜索目的)

          當用戶沒有明確搜索目的時,搜索框的下方,平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶,比如:微博熱搜、淘寶熱賣、抖音熱榜等。

          沒有明顯排名及規則,但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前,位置越靠前,在用戶心目中的默認位置越靠前,比如淘寶的“有好貨”、編輯精選等。

          1.編輯推薦/小編推薦

          在平臺建立初期沒有特別的內容供平臺呈現,這時候就需要平臺人工有目的的推薦一些內容,不同于“猜你喜歡”建立在用戶的行為數據下,編輯推薦更多的平臺希望用戶看到的內容,一方面作為平臺內容的輸出口引導用戶,另一方面內容是平臺自己發布內容,也可以保證內容的高質量。

          2.猜你喜歡/相關推薦

          平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期,并且存在大量的平臺用戶使用數據,“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性,各大應用平臺適用性強,一般出現在首頁部分。

          3.年度總結排行榜

          朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜,這些其實是用戶自己確定了解自己,且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓,清楚的認識自己。

          4.TOP排行榜

          不知道大家小時候看沒看過《第10放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫。現在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦,這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜,從眾多選擇中選擇出部分答案,給出理由,而用戶只需在已被篩選過的內容中進行決定,節省選擇成本,比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定,但可以迎合用戶對確定性需求的各種盤點性質的排行榜,比如抖音的TOP榜哥就是盤點各種內容,人物。

          5.搜索-篩選(有明確搜索目的)

          相比其他排行榜,篩選后的內容已經體現了用戶的具體需求,高效明確的給用戶提供選項,引導用戶快速選擇。


          排行榜一般由必需的榜單頭部、上榜主體,及非必需的榜單規則、更新信息構成;而上榜主體由必需的主體信息、排序,以及非必需的推薦理由、排名變化、熱度信息構成。

          好的榜單能夠快速吸引用戶快速找到自己的需求點,引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、復用性榜單頭部。

          1.唯一性榜單頭部

          當排行榜在整個應用中有且只有一個時,通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出,增加平臺的品牌權威性。

          2.復用性榜單頭部

          有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況,為了平臺的統一性、降低后期的維護成本,一般會使用可復用的榜單頭部,如豆瓣、京東、QQ音樂等。

          得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配,但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案;馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式,通過更換文案底圖達到適用不同主題;京東就相對比較簡單,只是更換標題的文案達到多主題適配。

          排行榜上榜主體由于不同的場景業務需求,一般有純文字形式圖文結合形式、橫排+列表結構3種表現形式,其中主體信息及排序為排行榜必須信息,而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

          1.純文字形式

          純文字的排行榜一般是以內容(或標題)加排名的形式出現,常見以信息為主的排行榜,比如微博、知乎、今日頭條等以信息為主要關注點的應用,或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準,因此會在標題及排位外,增加各種突出熱度信息的表現形式,如關注熱度人數,或是“熱”“新”“爆”等等表示熱度的標簽,如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。

          2.圖文結合形式

          相對于純文字形式,圖文結合的排行榜因為圖片信息的增加,使整個榜單主體占居更多的空間也可以展示更多的產品信息,輔助用戶進行選擇。

          • 圖片形式

          上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式,延續了用戶閱讀新聞類資訊的習慣;而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖,因此沿用至線上使用的也是豎版圖片形式;而京東、大眾點評、馬蜂窩則使用方版的圖片形式,大概是因為產品的多樣性需要考慮多種圖片的適配問題。(視頻、游戲類由于使用場景大部分采用橫版圖片形式;但由于游戲封面、宣傳海報也會有豎版的形式,比如:游民星空、小黑盒)

          • 左文右圖VS左圖右文

          每當設計圖文結合的部分,首先要考慮到底是采用左圖右文還是左文右圖的形式呢?可能很多人會說這兩種形式沒有什么大的區別啊,有什么可糾結的!或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的,因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

          人類對畫面的閱讀及掃描方式通常為三種布局方式,包括:古騰堡圖(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中產品列表頁中最常使用的就是F型布局模式,F型布局是雅各布·尼爾森(Jacob Nielsen)在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是,眼睛從上/左,水平移動到上/右,然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后,向右掃動的次數會越來越少,并且會隨著向下移動,眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面,即自左向右自上而下的閱讀模式,越向下信息獲取效率會越低。

          因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式,比如:騰訊動漫、愛奇藝、得物等等。

          3.橫排+列表表現形式

          說到排行榜我們一般第一個會想到領獎臺,很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜,平臺用戶的注意力大部分集中在第一名,而領獎臺的形式模仿現實生活中的獎勵形式和儀式感,將整個排行榜的關注范圍從第一名擴展至3名,另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系,增加了第一名的高度。(目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到)

          榜單規則是排行榜規則的描述,是平臺權威性的體現。榜單規則有些平臺本身具有數據庫,會有相關的平臺數據支持如京東;而汽車之家則依靠“汽車工業協會”外部的數據支持,增加平臺的權威性及榜單的可信度;

          信息更新一般存在在榜單頭部和上榜主體的中間,有些是固定時間更新,也有類似微博熱搜是實時更新的模式,而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。


          排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案,但歸根到底因為人們對于不確定性的懼怕,無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式,結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同,排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯,以及用戶操作行為背后的思考及心理效應,提出合理的設計,幫助用戶了解產品功能,滿足用戶需求。

          文章來源:站酷  作者:9號自習室

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


          產品設計的國際化與本地化

          周周


          國內互聯網近幾年發展迅速,在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈,很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 Sensor Tower 數據顯示,2020年Q1全球移動互聯網應用下載量達336億次,同比增長了20.3%。


          產品出海的第一道屏障就是語言。但若想打造一款能夠適應海外市場的產品,只完成不同語種的翻譯是遠遠不夠的。在產品設計的過程中,我們需要考慮兩個方面:國際化與本土化。

          國際化+本地化的策略,也就是“glocal—global+local”,指的是結合國際統一和地區差異。這種策略在統一的前提下,通過靈活配置保障地區的個性化體驗,既能滿足統一維護提升產品效率,也能保障當地用戶的特殊訴求,是一種性價比很高的設計方案。



          產品設計的國際化


          產品的國際化,即全球化。國際化的通用設計能夠為產品打造一個全球統一的形象與內核。

          Chrome的不同地區首頁功能與樣式基本一致


          一套通用的設計系統和設計規范,既可以幫助我們在產品的國際化設計中 樹立產品調性,又可以保證操作的 一致性,同時提升設計的 高效性。阿里旗下面向東南亞市場的購物平臺Lazada在開發之初,通過使用Fusion Design的設計系統,大大節省了設計的時間。在如此復雜的電商業務場景之下,整套產品的設計最終僅3靠個設計師就完成了。

          設計系統對產品研發成本的影響

          除此之外,一致的內核也能夠幫助企業在全球范圍內建立起統一的品牌形象,增強 品牌的識別度與知名度。


          產品設計的本土化

          想要讓產品在某一個市場上站穩腳跟,對于本土化的思考是必不可少的。本土化的核心是 因地制宜,根據地區差異相應調整產品策略。


          UC瀏覽器在不同地區的首頁布局

          為什么說本土化對于產品的出海非常重要?其原因并不難理解。Charles Eames說過,“Recognizing the need is the primary condition for design.” 任何設計的本質都脫離不開對需求和問題本身的理解。好的設計是在對需求、動機、心理、環境等相關因素有了充分了解之后所產出的解決方案。


          針對海外設計研究的思維框架


          在考慮產品的本土化時,我們需要關注到用戶的需求是什么、是否仍然成立,用戶的行為模式是什么樣的,以及整個外在社會物質、精神環境等方面的狀況。螞蟻金服團隊通過海外本土化設計實踐,總結出了一套“環境-人-需求“的研究框架,列出了可以去調研的多個方面。


          螞蟻金服-“環境-人-需求”出海產品設計研究框架(做了小部分修改)


          需求(價值)


          首先,我們要做的第一步判斷就是原來的 用戶需求是否成立。產品在原市場想要解決的問題,是否在新的市場仍然存在,即我們的產品是否 有用?這個問題的答案決定了原先的產品是否對于該市場的用戶是有 價值的。如果有價值,那么就可以深入探索如何讓用戶用起來;如果沒有價值,那么就需要進一步判斷是否要繼續開拓這個市場,以及如果繼續開拓這個市場,在原有的產品形態上,我們能否通過改造的手段讓它符合在新市場的用戶群中挖掘出來的、不一樣的 新價值?達到了“有用”的標準,我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件,產品才能夠被用戶用起來、從而真正在新市場落地。在實現“好用”的過程中,我們可以關注以下幾個層面的影響因素:

          生活形態、價值觀

          生活環境與社會環境會塑造當地用戶的生活形態與習慣。下圖分別是日本和北美地區的新聞資訊類App。同樣是推送新聞資訊,兩者在表現形式上卻大相徑庭??梢钥闯鋈毡镜男侣凙pp布局緊湊、信息量大、頁面坪效很高;而北美的新聞App則更注重突出重點內容,信息密度相對來說并不高。


          日本-新聞資訊類App


          北美-新聞資訊類App


          這種差異的背后,其實是兩地上班族生活形態的差異。日本城市小、人口密度大,上班族通勤大多會選擇地鐵。而北美地區面積大,大部分人會駕車上班。駕車的人雙手需要長時間控制方向盤,同時開車也需要持續注意路況,只能在間隙中查看新聞內容;而乘坐地鐵的人雙手更加自由,也有較長的通勤時間需要消磨,故可以接受更多的信息,也能夠接受更繁瑣的操作。

          北美(左)和日本(右)各自的生活形態


          有時候,某個地區的用戶長期習慣的操作模式,會與主流的操作模式有所差異。設計師junu在個人博客中講述了他為Melon(一個韓國主流音樂播放器)進行體驗優化的一段經歷。他發現Melon當時的播放操作邏輯比較冗長,用戶需要先點選列表中的多首樂曲,再點擊底下的播放鍵,此時Melon會將用戶所選歌曲自動生成一個列表并進行播放。這和當時Spotify等音樂播放器“點擊即播放”的主流交互邏輯相比,要更復雜和麻煩,尤其是在用戶只是想要立即聽到某一首歌曲的時候。因此,junu 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后,卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪。基于用戶反饋,最終,他們采取了一個折中的方案,既保留了原先的復選框作為多選操作的區域,讓用戶仍然能夠選擇樂曲生成列表并且播放;同時又引入了點擊單曲直接播放的操作。相比第一版優化方案,用戶的接受程度有了明顯提升。

          Melon播放器的點選操作邏輯


          設備環境

          10年前,高端大屏幕手機在東南亞和非洲市場普及率并不高,因此產品出海時需要考慮當地常見的設備是什么,并作出相應的適配。近幾年,隨著市場經濟的發展以及中國手機的成功出海,即使是東南亞和非州的發展中國家,高端移動設備的普及率也已經很高,這為設計師在考慮通用性的過程中減輕了不少負擔。不過,在為每個地區的用戶做產品設計時,仍然需要調研清楚當地設備的使用情況,比如什么樣設備更流行、普及率更高;如果某一地區的設備不夠發達,那么設計的操作也需要考慮到設備不同所造成的差異。


          業態/監管


          在不同的國家或者地區,各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中,在北美和英國占據了重要市場份額的Quickbooks、Xero等公司,卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下,歐洲本土的企業顯然會對當地的政策和制度更加熟悉,也更容易設計出符合當地企業與會計需求的財會產品。


          2015年,Airbnb進入中國市場。在最初的市場調研和用戶調研之后,針對本土化,他們所邁出的第一步就是根據中國的業態環境對產品的前10%和后10%做了改造。其中,產品的前10%指的是登錄這一類用戶開始使用產品所需要進行的步驟,而后10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時,其功能流程基本相通(搜索地點、挑選房間、瀏覽信息等),不需要做過多的改變;但產品的前10%和后10%則決定了用戶能不能把產品用起來并不遇到障礙。因此,針對登錄的部分,愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號的登錄;而在支付的部分,愛彼迎引入了支付寶與微信支付的方式,打破了中國本土用戶進入產品和完成訂單的壁壘。


          Airbnb產品中國本土化的“前10%與后10%”策略


          社會經濟

          社會經濟環境的不同代表著社會階層狀況的不同,它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現,當地擁有銀行賬戶的人口僅占了總人口的34%,同期中國擁有銀行賬戶的人口則占了總人口的85%。而這34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓,大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪,繼而影響了產品各個層面的設計。


          文化/宗教

          在各個文化/宗教里存在著不同的意象,也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為,在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外,在不同的文化/宗教語境下,人們會有不同的行為模式與價值取向,這里我們會引入一個模型——霍夫斯泰德文化維度模式,來對這一問題進行更詳細的解讀。



          霍夫斯泰德文化維度模式(Hofstede’s Model of Cultural Dimensions)


          霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解,從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度:


          • 權力距離指數(power distance index,縮寫為PDI):指在家庭、公司、社區等組織機構中地位較低的成員對于權力分配不平等的接受程度。權力距離指數高的文化,組織更中心化、有特定的等級秩序、更容易聽從領袖的決策;而權力距離指數低的文化,組織更扁平化、主張人人平等、更傾向于自己做判斷而不易受控制。
          • 個人主義(individualism,縮寫為IDV):與集體主義相對,指個人融入集體的程度。個人主義越高的文化,自我意識更強烈,更看重依靠個人努力獲取利益和價值,追求隱私保證和自由;而個人主義程度越低的文化,會期望得到“團體”的照顧,更忠誠地依賴于群體和熟悉的社交關系,更傾向跟隨主流價值觀做決定。
          • 不確定性規避指數(uncertainty avoidance index,縮寫為UAI):指社會能在多大程度上容忍不確定性。不確定性規避指數越高,人們會更遵循規則,恐懼變化、喜歡熟悉,并且習慣通過已知經驗推演事物邏輯。而不確定性規避指數越低,人們會更有更強的安全感,對變化的包容性更強,有著更輕松的生活態度,鼓勵冒險,對風險的承受度更高。
          • 男性化(masculinity,縮寫為MAS):與女性化(femininity)相對,指人們(不論男女)更富有競爭精神,自信與野心,注重財富和社會資源的積累,而女性化社會責注重人們之間的關系和生活的品質。故男性化程度高的社會,人們會更加自信、進去、好勝,追求英雄主義,關注物質成功及權利地位;而男性化程度低的社會,人們會更加注重合作與謙和,信奉中庸共識主義,更享受生活、關愛他人。
          • 長期導向(long-term orientation,縮寫為LTO):最初名為“儒家動力”(Confucian dynamism),指社會對未來的重視程度。長期導向的社會,注重堅持不懈和節儉,愿意計劃未來生活,也會設定長期目標;而短期導向的社會,會認為活在當下更重要。
          • 放任與約束(indulgence vs. restraint,縮寫為IVR):指社會成員在多大程度上意圖控制自身的欲望。放縱指數越高的社會,人們會更加樂觀、積極、沖動,認同隨心所欲的觀點,更傾向自我欲望的滿足和表達;而克制指數越高的社會,則會在心態上更加嚴肅、嚴謹、審慎,會有更嚴格的社會規范制度,而認為休閑娛樂不重要。

          使用他們官方網站(https://www.hofstede-insights.com/)上的 Culture Comparison Tool,可以查詢到各個國家的文化維度指數,也可以選擇不同的國家進行對比。

          • 日本與荷蘭的文化維度指數對比 - hofstede


          在為特定地區的用戶設計產品時,我們可以以從這些維度去解讀他們的行為傾向,并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時,根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。

          墨西哥地區的文化特征指數

          滴滴墨西哥的本土化設計策略


          這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上,“按照銷量排序”是一個被高頻使用的功能,消費者們認為什么產品買的人多,什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上,我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇,他們不認為他人推薦的就一定是好的。


          國內外電商平臺對比



          在企業即時通訊工具行業,國內的主流產品,如企業微信、釘釘等,都選擇了藍色這一比較沉穩的顏色作為主色調,在產品功能的形態上也偏向于嚴肅。而海外的辦公產品Slack,視覺色彩更加豐富;整體的產品定位也更加活潑歡樂,常常會有“不嚴肅”的表達,比如在界面多處都使用了emoji。這樣的產品形態差異,其背后是兩種文化在放縱(享樂)/克制(嚴肅)這一維度上的差異。


          企業微信與slack的產品風格對比


          內容本土化


          除了功能框架上的設計需要考慮本土化外,產品中運營內容的本土化也是不可輕視的一環。Spotify Design 團隊在《 Designing for Belonging: Why Image Localization Matters 》一文中,記錄了他們對于內容本地化的一些經驗和思考。同樣,內容的翻譯僅僅是本土化的第一步。在地區之間區別不大時,完成內容的翻譯便能夠滿足其他地區的需求。如下圖中 “浴室歌單( Songs to sing in the shower)”的播放列表,列表上的文案一經翻譯,就能夠推送給德國、波蘭、以色列、意大利等一眾國家的用戶。但當內容的閱讀群體有著更顯著的差異時,僅僅翻譯是不夠的。在看到這張圖片的時候,其他人種比如亞洲人可能就不會產生很強的代入感,也會缺少對產品的一種歸屬感(這個產品并不是為”我“設計的)。

          Spotify "Songs to sing in the shower" 歌單



          下圖展示的是Spotify另一個歌單—— “快樂時光( Happy Hits)" 的封面在不同國家的呈現形式。可以看到,面對文化差異更大的群體時,Spotify在保持了統一的樣式風格的基礎上,針對每一個國家和地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶,也能夠讓用戶產生更強的連結感與共感。

          Spotify "Happy Hits" 歌單



          結語

          回到那句話 —— ”Recognizing the need is the primary condition for design.“  產品的出海其實只是我們在設計中會遇到的一種場景,在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步,那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計,我們始終應該保持對用戶的好奇,讓最終的設計實現我們期望達成的目標。






          文章來源:UI中國       作者:酷家樂用戶體驗設計



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



          值得反復學習的「交互設計5大定律」

          資深UI設計者

          推導

          在介紹重新定義的交互設計定律之前,我們先來回顧一下經典的《交互設計 7 大定律》

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          費茨定律告訴我們要節省操作時間應該怎么做:放大目標對象,減小目標距離。

          席克定律告訴我們要節省決策時間應該怎么做:盡可能的減少選項的數量。

          米勒定律告訴我們人類記憶的上限,所以要將信息數量控制在 4±1 內。

          接近法則告訴我們相鄰≈相關,所以要根據信息親密性組織其位置關系。

          泰思勒定律告訴我們復雜性是守恒的,我們要平衡復雜性的天平向誰傾斜,以實現整體效益最大化。

          防錯原則告訴我們用戶出錯是不可避免的,我們只能減少并降低其犯錯的可能性。

          奧卡姆剃刀原理告訴我們如無必要,勿增實體,設計要盡量的簡約。

          不知道你看完以上 7 個定律有什么感受,我的感受是,他們彼此之間有些重合(奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡),但用其概括交互設計的精髓,又覺得不夠完整(做到這幾點就夠了嗎?),整體交互設計的精髓要義并沒有表達地很清楚(如何用一句話來概括交互設計的目標?)

          帶著這幾點疑問,我重新去思考到底什么是交互設計的底層設計目標?到底哪些交互設計定律能更好的體現其本質?以下是我思考的結果:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          交互設計的終極目標是改變和影響用戶的行為,達到期望的業務結果,比如下單率、搜索率等結果指標,結果指標因產品而異,不具有普適性,不可一言以概之。而在交互設計的過程中,以交互設計定律為指導的過程指標是通用的,幾乎可以說放之四海而皆準,我把這四個過程指標概括為四字箴言:少快好省。怎么理解呢?

          • 所謂少,就是信息功能要精煉,要一目了然,要盡可能減少功能/信息的復雜度。
          • 所謂快,既是性能也是效率,指的是要盡可能快的響應用戶的操作,達成用戶目標。
          • 所謂好,就是產品的設計必須達成行業一流的設計標準,讓用戶用的順手、滿意。
          • 所謂省,就是省心省力省時,能夠幫助用戶節約時間,降低操作和認知負荷。

          基于這樣的過程指標,我挑選了 5 個設計定律來進行設計指導,下面我們逐一來看。

          奧卡姆剃刀原理

          奧卡姆剃刀原理告訴我們:如無必要,勿增實體,即“簡單有效原理”。對于工業產品適用,對于軟件類產品也是如此。因為任何增加的非必要信息和功能,都會帶來生產/維護成本的增加,以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代,復雜會讓人望而卻步,也容易使人迷失,而精簡的產品更利于人們的理解和操作。

          典型案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          小米的電視遙控器設計和傳統遙控器設計相比,對奧卡姆剃刀原理的運用非常極致,相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。

          我們再來看一個互聯網產品設計的案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          19 年初,外銷瀏覽器做了一次視覺煥新大改版,從交互結構到視覺界面變化都比較大,所以我們就增加了新版本的滑屏引導,告訴用戶有哪些界面及功能的變化,結果新版灰度期間,信息流滲透率下降了 33%,搜索下降了 18%,經過仔細的數據排查,發現都是滑屏引導惹的禍,當把滑屏引導去掉后,搜索和信息流的數據都恢復正向了。

          19 年底,我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火,我們就做了一個錦鯉大作戰的小活動,畫面精致,獎勵也比較誘人,但是發現活動上線后轉化率效果卻不及預期,我們再次把矛頭對準了蒙層引導,通過去掉蒙層引導,CTA 按鈕場景化,并增加微動效,轉化效果立刻得到了提升。去掉不必要的引導,讓界面自己會說話,這也是奧卡姆剃刀原理的一個體現。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          米勒定律

          米勒定律告訴我們:人們工作記憶平均能記住的元素數量僅為 4±1。所以我們在設計時,首先要運用奧卡姆剃刀原理,盡可能的去做減法,盡量將數量控制在 4±1 的范圍內。如果選項較多,且減無可減時,就需要對信息/選項進行分類和分組,保證類別的數量在 4±1 的范圍內。

          典型案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          對于像手機號、銀行卡號、身份證號這種類型的信息,因為其固有的信息長度無法做精簡,所以在信息組織時就會采取分組的方式,保證分組的數量控制在 4±1 的范圍內。

          另一個案例也是關于我們的外銷瀏覽器:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          左一是改版前的頁面,功能有 12 項之多,且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析,將功能劃分為了三大類:重要功能,常用功能,必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現,界面復雜度迅速降低,功能清晰度和操作便捷度顯著提升。

          多爾蒂門檻

          多爾蒂門檻告訴我們:系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率。

          先來看一組模擬的響應效果:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          △ 圖片來自作者「超人的電話亭」

          從這組圖片可以感受到,當圖片在 400ms 內時,是勉強可以接受的,但當時間延長到 600ms 及以上時,人們就會感受到明顯的延遲、等待和卡頓感。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          多爾蒂門檻對響應時間的上限給出了參考,而后續的研究則給出了更細致的響應標準,比如元素的點擊反饋應控制在 0.1s 左右,盡量不要超過 0.14s,單個元素入場退場時間應控制在 0.2s 左右(入場一般比退場稍慢),而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在 0.3s-0.4s 之間。只有響應時間符合上述標準,才不會讓用戶對產品的流暢性有所懷疑。

          雅各布定律

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們:作為設計師,我們必須要多研究把玩各種 App,這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。

          對于新入行的設計師,我會建議大家好好研究一下 ios 和 android 的 OS 規范,了解平臺的特性,同時再翻翻下面這些書籍,了解各種常見的設計模式,豐富自己的設計組件庫。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          此外,在做某種特定類型的產品設計時,也非常有必要做行業及競品分析,這樣才能確保我們在做產品設計時,可以延續用戶的主要視覺及行為習慣,減少用戶的學習及使用成本。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          以視頻 App 為例,行業內的頭部產品在產品框架及元素布局上都具有高度的一致性,這也是雅各布定律的一個體現。

          可感知性原則

          操作前有預期,操作時有反饋,操作后可撤銷。這是十年前我入行時接觸到的一句話,我不知道是誰提出來的,但卻是這些年我做交互設計最重要的一條參考原則,我將其簡單命名為可感知性原則。

          操作前有預期,指的是要符合視覺認知原理,符合行業設計習慣,讓用戶一看就懂。

          操作時有反饋,指的是操作時要即時反饋,就近反饋,并且反饋合理。

          操作后可撤銷,指的是任何操作都盡量讓其可撤銷,讓用戶無后顧之憂,安心探索。只要存在用戶行為的交互,這個準則都是可以用來檢驗的,以下圖為例。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          當我們想要刪除某張照片時:

          操作前有預期:工具欄位于默認的底部位置,有刪除圖標+文字明確示意的功能按鈕,讓用戶一看就知道應該選擇哪一項操作。

          操作時有反饋:點擊刪除按鈕時,刪除按鈕有一個灰色的點擊態,隨后馬上出現一個確認彈窗,而且是就近位置出現,確認彈窗上提示簡單,按鈕用的是 CTA 的形式,操作交互一目了然。

          操作后可撤銷:當用戶確認刪除后,照片消失,但是還可以去最近刪除的文件夾中,恢復照片。

          結語

          到這里,交互設計 5 大定律就全部介紹完成了,圍繞交互設計的過程指標,少、快、好、省依次展開,給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          也是為了滿足米勒定律的 4±1 原則,我將交互設計定律濃縮成了 5 條,如果在此基礎上加一條的話,我會在「好」的指標下,增加一條「格式塔原理」,它包含的 7 大設計原則。格式塔原理是做設計排版的基石,絕對值得所有設計師反復學習、研究和運用。

          文章來源:優設  作者:VMIC UED.Joyce

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

          交互設計師如何為業務提供價值?

          資深UI設計者

          交互設計是什么?

          交互設計就是通過設計出完整的界面和用戶操作流程,保證其符合用戶的認知模型,避免用戶在使用過程中任務失敗。

          交互設計師是承接上游(產品經理)和下游(視覺設計師)的角色。

          交互設計師的基礎價值來源于兩方面:

          • 團隊工作流程中的價值;
          • 提升產品的用戶體驗。

          交互設計師的核心價值是將產品業務通過更好的設計,將其更大價值化并落地。

          本文大綱如下:

          • 交互設計師如何熟悉業務
          • 交互設計師如何推動設計
          • 如何通過業務優化設計

          如何熟悉業務?

          將自己作為各種角色的用戶,去使用體驗,感受整個產品的流程。從而找到可優化的地方。

          針對于 B 端產品,產品中會涉及到超級管理員、管理員、普通員工至少三種大類角色,其中普通員工里面可能會細分多類角色。交互設計師要在各個角色中,使用體驗產品,梳理清晰的產品業務邏輯。使用使用中,弄清各個角色的權限管理和流程邏輯。

          針對于 C 端產品。對產品的分層用戶主流程和分支流程進行體驗走查,找到使用中不好的地方并加以優化。并對行業競品進行重度使用體驗,了解整個行業產品的特點。

          如何推動設計?

          我以前寫過好多設計師的專業技能方面的文章,我之前一直認為設計師最重要的素質是專業技能。

          但是設計師最重要的素質并不是專業技能,因為專業技能可以慢慢培養,任何人都可以學會。

          設計師最重要的能力是推動能力。因為推動能力和責任感、性格及天賦有關,而這恰恰會成為設計師進階的障礙。

          想要推動業務之前,先要將自己的職責做好,負責的工作做好,讓大家信任,這個時候才能贏得大家的信任,讓大家更加相信你。

          1. 為什么推動能力最重要?

          在實際工作中設計師最基礎的能力是解決問題的能力,團隊需要能解決工作問題的設計師,這樣才不會團隊造成負擔或者拖團隊后腿。

          設計師在工作中會遇到形形色色不同性格的對接人。那么肯定會遇到對接難度大的 PM、視覺設計師、交互設計師或者開發,這時候就需要有較強的推動能力,不然很容易使得工作進度受阻,導致設計方案無法快速落地。

          擁有較強的推動能力對個人而言有以下好處:

          • 強化個人價值。設計可以推動產品優化,這一過程中,個人價值會得到比較大提升。同時設計師可以深度擴展設計專業知識。例如在推動中總結一些設計方法,對于個人經驗提升幫助巨大。
          • 獲得成就感。當產品數據或者用戶口碑獲得提升,設計師可以從工作中獲得正向反饋,獲得成就感,工作才會更加有激情。
          • 提升設計師的地位,設計師不在只是被動的接受需求、修改設計。設計師主動推動產品的體驗上的優化或者需求上的決策,在這一過程中更是對產品負責。
          • 推動團隊設計流程或者設計理念改變,這樣可以影響更多的設計師,對于個人產生的價值,對團隊產生的利益有很大的提升。

          2. 怎么做推動?

          推動分兩方面,一方面是產品上的推動,另一方面是團隊里的推動。

          針對產品上的推動,設計師需要做一些前期工作和設計方案,然后和團隊領導溝通,獲得他們的支持,最后和產品經理溝通,讓產品經理看到,我們做這個設計方案可以帶來哪些價值。

          得到了產品的支持后再進行推動設計,推動的事情可以做例如首頁改版,設計規范優化,核心流程上提升數據指標,可用性測試等等。

          針對團隊中的推動,先發現團隊缺少哪些東西?針對團隊缺失的東西,做一些推動的事情。在此之前需要做大量的準備工作,并得到團隊領導的肯定和支持。

          例如團隊沒有做組件化,那么你可以牽頭做組件庫和設計規范。團隊缺少數據分析思維,那么你可以現在團隊培訓數據分析知識,然后做一系列的數據設計模板,將數據融入到設計師的工作流程中。

          團隊協同不太順利,那么你可以和領導商量,做一些團隊協同上的工作,例如團隊新軟件的引入,團隊項目協同文檔規則制定等。

          3. 如何順利推動?

          如果剛進一家公司,那么先要熟悉團隊運行模式,每個設計師負責的產品業務和他們的處事風格。

          當熟悉產品業務和團隊,那么接下來先將自己負責的產品需求做好,后續就可以進行一系列前期推進準備工作。做推動之前,需要先和領導確認,得到領導的肯定后再慢慢在團隊推動。

          當在團隊取得一定的進展,則后續可以嘗試產品上的推動。在推動的過程中,要記住不斷地迭代優化自己的推動方案,讓自己的推動過程中做得萬無一失。

          如何通過業務優化設計

          先熟悉業務運行邏輯,掌握業務后,分析業務流程。

          1. 找到業務核心并優化

          找到產品中核心是什么?例如資訊類產品,產品的核心是用戶通過推薦列表,到達新聞詳情頁閱讀的過程。在這個主流程的過程中,交互設計師可以做的事情就是如何提升推薦列表的點擊效率、展示效率和詳情頁正文展示效果。通過優化結構樣式,提升設計價值。

          例如電商產品,核心就是如何讓用戶快速找到想要的商品,并順利的完成購買。在這一過程中,交互設計師可以做的事情,如何提升用戶快速找到商品這一場景和購買支付的流暢度。


          文章來源:優設  作者:Echo的設計筆記

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


          交互設計定律和用戶體驗地圖

          周周

          交互設計之父的阿蘭·庫珀,最為人熟知的就是這句話:“除非有更好的選擇,否則就遵從標準”。





          1. Fitts’ Law / 菲茨定律(費茨法則)


          a. 費茨定律,它是在1954 年 ,由保羅.菲茨心理學家 Paul Fitts 首先提出,當時用來預測從任意一點到目標中心位置所需時間的數學模型,在人機交互和設計領域的影響力最為廣泛和深遠。


          b. 定義:從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大小

          (上圖中的 D與W),用數學公式表達為時間 T = a + b log2(D/W+1)。




          c. 費茨定律,在產品設計中的價值是提高產品的可用性和易用性。例如:界面設計中,按鈕等可點擊對象要合理的設置大小尺寸才能容易操作,所以在移動應用中,圖標按鈕會增加點擊熱區范圍,以便用戶輕松點擊按鈕,做到

          產品設計上的可用性和易用性。





          費茨定律的思考分析,如下圖所示 。

          1. 可點擊對象的設計,需要設計合理的大小和尺寸。功能設計的越大,用戶越容易點擊操作,交互效率越好。




          2. 界面設計的屏幕邊緣或角,適合放置像菜單欄或按鈕這樣的設計元素,如果邊角是目標,它們可無限高或無限寬,更容易觸達到操作目標。不管你移動了多遠,點擊操作最終都會停在屏幕的邊緣,并定位在按鈕的上面。




          3. 界面設計中,出現在用戶正在操作的對象旁邊的刪除列表(右滑刪除)比下方彈出選擇對象容易操作,右滑刪除交互可以被用戶打開得更快,更有效率,因為不需要移動到屏幕的其他位置,就可以刪除多余的列表。




          4. Apple的iOS人機交互設計指南中指出,按鈕的點擊熱區大于44x44pt,這樣操作按鈕才會讓用戶覺得容易使用。




          5. 費茨定律案例:用戶在使用產品時,比較重要的操作,我們會放在移動端應用的屏幕邊緣處,方便我們的

          用戶點擊操作產品的功能圖標。如下圖所示。






          2. Hick’s Law / 席克定律(??朔▌t)



          我們看一下,席克定律的數學公式表達是 : RT= a+blog2 ( n )。RT 表示反應時間,a 表示跟做決定無關的總時間,b 表示根據對選項認知的處理時間實證衍生出的常數,n 表示同樣可能的選項數。


          在人機交互的界面設計中,選項越多,意味著用戶做出決定的時間就越長。



          分布操作,專注當前行為,就可以節約用戶作出決定的時間。如下圖所示。




          其他符合席克定律的案例,如下圖所示:


          a. 對于用戶,低頻率功能或不太重要的功能,可以收納起來。比如:個人中心的設置功能模塊。如下圖所示:




          b. 分布操作,專注于當前的行為設計,如下圖所示:




          c. 在人機交互設計中,我們對核心功能選項做好設計上的歸類,可以提升用戶做選擇的效率。

          比如:我們幫助用戶選擇 5 種核心的功能需求,它首先劃分了旅游場景下的功能分類,讓用戶對分類進行選擇。

          然后進入選擇機票入口,這樣我們極大的化解了用戶面對很多旅游功能選項的難度和糾結,節約了用戶做決定的

          時間。




          d. 做好分類選擇,可以提高交互體驗設計的效率,選擇你想要的商品并購買。如下圖所示。







          3. 神奇數字 7 ± 2 法則



          1. 因為美國認知心理學 George A Miller 的研究,人們短時記憶廣度大約為7個單位(字母、數字、中文等),也就是說每次只能處理 5 到 9 件事情。


          2. 人的大腦認知信息的能力有限,所以我們通過把信息分組和模塊分類,以此來認識和思考一些復雜性的問題。



          3. 神奇數字 7 ± 2 法則,應用范圍很廣。例如我們記憶的電話號碼,可以分成三組數字:159  5555  6666 ,

          這樣分組記憶起來就會容易很多。


          4. UI 界面的導航設計,為了給用戶提供明確的設計向導,兩種導航(底部導航欄和頂部導航欄)的欄目設計通常都控制在 5 個之內,欄目功能過多用戶不容易記憶,5 個之內的導航設計方便用戶記憶和快速操作。

          5. 移動應用的交互設計規律。神奇數字 7 加減 2 法則同樣適用,螞蟻金服的品類區的核心功能模塊的設計,懸浮卡片上只顯示 8 個 功能圖標,如下圖所示。




          6. 同一類功能和同一層級的元素出現時,數目一般控制在 5-9 個,如下圖所示。




          7. 如果超過 5 個,可以右滑選擇你想要的產品功能,如下邊的右圖所示。




          8. 神奇數字 7±2 法則,運營廣告圖設計要抓住重點去設計,更好的引導用戶去瀏覽內容和產品的交互體驗。

          如下圖所示,數字符號標注-突出重點,主圖、主題、操作按鈕、主色氛圍等,我們會作出優秀的運營設計。





          4. The Law Of Proximity 接近法則


          根據格式塔的心理學思考 :當對象離得太近的時候,人的意識會認為界面元素之間是相關的。


          在交互設計中,界面設計中的接近原則是對相似信息及功能類別進行內容分組和布局設計的優化設計。


          接近法則在界面設計中的作用,能夠直接影響到用戶與產品界面之間的視覺互動,來引導用戶的瀏覽及點擊交互行為。因此,相似的內容和功能模塊應該彼此靠近,而關聯性較弱的內容應該保持大一點的間距。


          接近法則運用的目的:在視覺上通過組與組的區分,來劃分功能模塊之間的關聯性,讓界面變得更加清晰,同時幫助用戶在瀏覽頁面時,能夠清楚的看到到各個內容模塊之間的關聯性,就是視覺信息的劃分和分組展示。




          如下圖所示。同一類的功能可分為一組,組內使用淺灰色的分割線來表達。而關聯性弱的功能模塊,組內的可以用淺灰色的分割面表達,拉開組與組之間的距離,做好視覺信息的劃分效果。






          5. Tesler’s Law 泰思勒定律(復雜性守恒定律)


          a.  “復制粘貼之父” Larry Tesler (1945-2020) 說過,“任何事物都具有其固有的復雜性,無法簡化”。


          引入第三方登錄,減少注冊賬號的復雜步驟,節約用戶登錄或注冊這一流程上所耗費的步驟和時間。


          復雜性守恒定律,認為每一個產品設計的過程中,都有其固有的復雜性,存在著一個臨界點,超過了這個點產品設計的過程就不能再簡化了,你只能將固有的復雜性從一個地方轉移到另外一個地方。




          b. 以用戶為中心的產品設計,交互設計應盡量簡化用戶層面上的交互設計的過程。比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中。如下圖所示。





          6. 新鄉重夫:防錯原則


          a. 防錯原則,認為大部分的意外都是由產品設計上的疏忽,而不是人為的操作疏忽。所以我們可以通過改變產品

          體驗設計把過失率降到。


          我們在設計過程中,要從用戶維度出發,做設計前思考用戶的使用場景,預測到他們有可能發生的誤操作狀態,

          做到操作前給用戶的溫馨提示、操作中的實時告知、操作后給用戶的及時反饋。



          b. 防錯原則是著名的品質管理專家新鄉重夫提出來的。原則最初是用于工業管理,在交互設計中也可以使用。


          比如圖 1,今日幸運星主題,分享給好友幫忙砍價。在沒有滿足條件時,通過彈窗來提示用戶去邀請好友,以此

          來完成產品設計的任務。


          比如圖 2,請輸入驗證碼的彈窗,驗證碼錯誤,您還可以重復 3 次,只有信息都輸入正確時,用戶才能完成的這個界面任務,如下圖所示。






          7. Occam’s Razor 奧卡姆剃刀原理(簡單有效原理)


          簡單有效原理,被稱為“如無必要,勿增實體”(Entities should not be multiplied unnecessarily),即如有兩個

          功能相等的設計,那么選擇最簡單的、視覺干擾比較少的設計。在其他條件相同的情況下,要求得越少的那個就

          越好,越有價值。


          a.  合并多余流程,點擊極速支付,支付成功彈窗提示。




          b. 高頻率使用的產品界面,保持清爽的設計感。




          c. 優先展示核心功能,減少點擊次數。如下圖所示。

          圖 1,界面中清晰的品牌色的底部操作按鈕,可以明確的引導用戶去選擇優質的理財產品。

          圖 2 ,摩拜單車首頁,用戶最關注的功能是掃碼開鎖的核心功能,方便用戶直接操作,提高交互效率。




          d. 蘋果官方網站的簡約設計做的很棒。蘋果公司用一種很和品質感的設計提供了足夠多的內容,網站的文案,交互和圖片都比較集中展示,網頁設計沒有放一些使用戶分心的廣告和不重要的內容。如下圖所示。




          總結:

          1. 在產品設計領域,有很多經過時間檢驗過的定律,可以作為產品設計的指導原理。作為交互設計之父的

          阿蘭·庫珀,他最為人熟知的就是這句話 :“ 除非有更好的選擇,否則就遵從標準 ”。


          2. 交互設計的定律,能夠幫助產品設計師對界面上的各種視覺元素進行合理思考,從而發現一些用戶使用場景中的可用性問題。從產品設計的維度思考看,我們來改善產品設計的操作效率和用戶的滿意度。設計服務于產品、設計服務于商業。






          二.  用戶體驗地圖的制作思考:



          a. 什么是用戶體驗地圖 ?


          定義:用戶體驗地圖,是一種梳理產品體驗問題的設計工具。展示的就是用戶在使用一款產品和設計服務的過程中,每一個階段的體驗、用戶對產品直觀的心理感受。將用戶的所做、所思都展現出來,便于團隊設計師全面思考產品帶給用戶的體驗,挖掘設計的優化點。例如,你去三亞去度假旅游,用戶體驗地圖就是用圖形的形式,可視化的表達,將你在三亞的一天活動情況記錄下來,其中包含你這段時間去過的旅游景點,以及在每個旅游景點的用戶

          體驗感受。



          思考用戶體驗地圖,適合在產品設計的那幾個階段繪制?


          1. 原型制作前,設計師從直觀感覺的角度看,我們要了解自己的產品為用戶提供了什么功能、交互體驗,同時協助我們的產品設計團隊,做好產品功能的體驗設計。


          2. 產品上線時,我們可以結合用戶調研、可用性測試等方法論。以此獲取用戶的美好體驗和真實的心理感受,來幫助我們公司的產品設計發現問題,以此作為產品設計的迭代優化的方向或者尋找新的創意設計機會點來解決問題。



          b. 為什么要設計用戶體驗地圖 ?


          a. 我們做好用戶體驗地圖的兩個優點:


          1. 產品設計的體驗目標是讓用戶用起來,感覺到產品具有可用性、好用性、易用性,那么產品設計也應該從用戶

          視角出發,用戶從產品那個觸點點擊進來,怎樣點擊交互下一步,怎樣保持對產品的活躍度,如何傳播分享;定位用戶使用產品過程中的體驗痛點。


          2. 真正思考用戶需要什么功能,讓更多用戶參與進來,換位思考我們產品帶給用戶具體什么感受,全局性的思維去思考產品的體驗,與團隊成員、產品交互設計、開發部門和項目負責人等達成一致性的共識、有效溝通和協作,一起制作出解決方案。




          b. 思考用戶體驗地圖的價值點



          1. 基于用戶使用場景的設計是基于用戶達到某個體驗設計目標的一系列場景的分析與產品思考,理解用戶在每一個使用場景下的痛點及需求分析,同時結合用戶的上一場景,思考用戶下一步的體驗目標,我們可以通過做好體驗設計,來引起用戶情感上的共鳴。


          2. 使用用戶體驗地圖,團隊成員可以從用戶的痛點出發,讓產品設計師、團隊成員全面的思考產品體驗,從用戶

          體驗地圖中來挖掘產品設計的機會點。




          c. 如何制作用戶體驗地圖 ?



          以途牛用戶體驗地圖為例,如下圖所示。




          我們運用用戶體驗地圖時,作為設計師或參與者需要切換成用戶視角、第一次使用者的角度去思考,去發現產品體驗上的問題,同時解決產品體驗中遇到的問題,提升用戶體驗的滿意度。 


          制作用戶體驗地圖時,四個關鍵點的思考:

          1. 明確我們的核心用戶人群等;  2. 研究用戶的使用場景。3. 做好用戶的訪談和調研。4. 制作好用戶體驗地圖。





          制作用戶體驗地圖的具體步驟如下:


          1. 前期準備工作:

          我們可以先做用戶的深度訪談、用戶對產品反饋、產品設計的走查和交互的走查、產品的數據分析、同行業的競品分析、訪談用戶等方法,獲取大量真實可靠的資料。


          我們就會認識到:思考用戶在使用產品設計的過程中產生的行為數據、用戶體驗和用戶內心的真實感受。我們也可以思考產品的設計思路、產品的核心用戶人群等,以此作為我們制作用戶體驗地圖過程中的重要參考和依據,知道用戶到底需要什么功能和流程,來幫助用戶解決問題。



          2. 用戶調研的方法如下:

          我們可以先采訪用戶或者做好調研和記錄,將我們的采訪或調研記錄的內容做好整理歸檔,團隊成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實的想法。



          3. 我們要梳理好關鍵產品設計任務的流程,就是用戶在使用產品功能的過程中,會面臨很多不同的場景或復雜的設計流程和體驗設計的目標。然后我們再撰寫用戶完成每個關鍵任務的時間:比如,對于我們日常所見的查找功能而言,用戶希望更快的查找到自己想要的產品功能和體驗目標。


          我們再寫出關鍵產品任務的用戶操作產品時的行為

          指的是用戶當下在做什么,通常是用 “我+動詞” 來表示,例如:我購買基金產品。


          4. 我們再確定好關鍵節點,寫出用戶調研過程中的痛點思考、用戶的滿意度思考,放在對應的行為點的下方。

          我們思考和分析用戶的痛點、用戶滿意度的調查,判斷用戶的情緒變化。分析結束后,需要將以上三類信息都寫下來,方便后續整理分組。把行為按照達成用戶目標的邏輯順序整理出來,并做好歸類。例如:美團 App 的例子中分為 4 個階段,如下圖所示。




          5. 我們來判斷:用戶在每個階段,體驗產品設計任務中所產生的情緒高低的不同值,并把它們連成一條線,這樣就形成用戶的情緒曲線。


          6. 也就是說,制作用戶體驗地圖過程中,我們要思考用戶每個行為背后的痛點和產品設計上的機會點。

          最后,制作好一張實用性很強的用戶體驗地圖,以此來挖掘用戶的痛點問題,我們可以更好的去挖掘產品體驗設計中的設計機會點,如下圖所示。




          網上的案例欣賞,出境購物的用戶體驗地圖,如下圖所示。




          總結:


          1. 我們制作用戶體驗地圖,注重的是團隊成員的洞察分析能力和對產品的思考能力,我們要用心思考產品設計中的核心用戶的痛點和產品設計中的機會點,我們要輸出一套符合用戶價值、商業價值和和產品功能價值的體驗設計方案,以此解決用戶的體驗問題,把產品做的更好,讓用戶使用產品過程中,產生愉悅感。


          2. 制作用戶體驗地圖的價值是,不僅能使我們以“用戶視角”的維度去思考,引導團隊和設計師去思考問題并做好

          產品的體驗設計。同時我們也可運用“全局性的設計思維” 去思考產品體驗設計,去發現產品問題并解決產品設計中遇到的體驗問題,讓我們產品帶給用戶的是:產品設計的可用性、好用性和易用性的價值。



          文章來源:tob.design     作者:峻溪POINTV



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


          設計與思考-高級體驗設計師的思維養成

          周周

          2021年的第一篇萬字長文,文章主題是一次偶然的反思中總結出的設計師思維進階的過程,詳細講述了我在兩年間從一名應屆非科班設計師成長為一名高級體驗設計師的思維進階過程。與一篇UI教程、一篇交互分析的文章不同,這篇文章希望能夠從底層的思維層面幫助你明確自己的狀態,并提供一個快速進階的思路,所謂授人以魚不如授人與魚正是這個道理。

          一:前言:靈感與反思 


          靈感始末

          最初,在一個偶然的機會讀到一本規范相關的書籍,然后我開始反思自己是否有積累成系統的設計規范、設計技能樹,為了驗證這一點,我便以設計一個彈窗為例子開始模擬演繹,演繹完畢后進一步思考,我是如何積累這些方法論或思維模型的?正因此發現了我作為非科班設計師,從最初開始自學設計到如今晉升到高級體驗設計師的思考方式的轉變。進一步從現象中探究原因,于是輸出了本文。

          如何設計一個彈窗?  

          在做任何需求的時候,甚至是一個極小的需求,你有沒有持續思考過?有沒有進一步思考過?又有沒有刻意、主動完善設計思路,積累思考模型?如果沒有,你可以從接下來這個思考案例中反思一些東西。

          設計彈窗時,我畫的第一個元素——彈窗的矩形背景時,是如何思考的,考慮了哪些元素。進一步設計我還要考慮哪些因素?下面是我的瞬時思考能整理的有效信息。

          方法1:根據彈窗內容進行界定(根據內容極限情況,及你的設計系統定義的間距來控制整個彈窗的尺寸)

          方法2:根據固定比例,主要適用于移動端,例如3比4的矩形比例較美觀,計算彈窗面積與屏幕整體面積的比例、計算留白與彈窗的比例、參考黃金比例Golden Ratio、白銀比例Silver Ratio等。 

          方法3:根據你的系統定義的柵格進行界定,如小彈窗使用1/4,1/3,1/2,大彈窗使用1/2,2/3,3/4柵格。

          方法4:柵格+比例,方法3界定寬度,方法2界定高度 。

           

          更上層規則


          設計延展性:考慮彈窗內的內容發生變化時的自適應情況,內容過多的極限情況/內容過少的極限情況。 自適應的規則,彈窗窗口尺寸的延展方式(橫向拓展/縱向拓展)


          交互:彈窗又叫模態視圖,其通過遮罩突出彈窗視區,在蒙層遮罩上方的最高層,根據通用規則,大部分情況我們不應當在彈窗上再次疊加界面層。若彈窗場景下有新的縱深層,如下一級操作或內容界面,此時如何處理?

          如下方,PC端google drive,就在結構上使用類平級跳躍的形式來“借面板”解決新的操作需求。

          而再下方的IOS使用的bottom sheet則采用了完全不同的解決方案,表面上似乎是違背了彈窗模態上重復疊加的規則,但在移動端一屏僅僅解決一個問題、完成一個任務的語境下,反而更加合理。(而這些成熟的模式、范式,或者說設計單元,正是在主動思考和被動思考階段設計師需要積累的設計經驗,它們將作為設計師知識庫中的組成部分,指導設計并進一步提效和促使設計合規)

          常規易用性:如退出機制——關閉的解決方案,通過關閉按鈕退出,那關閉按鈕尺寸在當前彈窗尺寸下定義為多少合適,視覺尺寸與hover實際可點擊尺寸分別是多少?PC端是否只能使用關閉按鈕退出?點擊空白區域退出是否更,如下方的dribble,點擊上方黑色空白區域即可退出,而無相關經驗的用戶也可以在右上角看到關閉icon的暗示線索。

          場景與業務背景:詳細了解當前需求的業務背景與場景,進一步概覽整體業務背景,即兼顧其他可能性的業務場景。如我設計的B端系統包括辦公室類工作場景,同時也包括站立、遠距離觀看屏幕的工作場景,這將涉及到信息能否直觀清晰的被傳達、獲取。當前需求的業務是主流場景?可向上向下兼顧大部分同系統的其他業務場景?還是無法兼顧而需要同時列出更多場景來制定通用規則?以我所設計的B端系統為例,較高頻的出現在彈窗下存在下一級操作或展示頁面的場景,因此我考慮在工作空閑時輸出一份彈窗場景下有縱深的下一級信息或操作的解決方案,并將其作為產品相同場景的應用解決方案。

          視覺合規性:保證主要信息的對比度,清晰度,保證所有信息傳遞和展示時的節奏和梯度優先級。從字號到字重再到段落行高間距等,從彈窗中ICON的樣式選擇,到Icon語義清晰度等。

          ...

          如果進一步思考,其實可以思考more and more。你會發現,從基礎的結構涉及的柵格,到基礎的視覺合規性涉及到的字體設計、icon設計。再到交互涉及到的典型設計單元,通用交互模型范式等,在設計一項內容前,我們有很多的思考空間,或者稱之為思考機會點更為合適。將充足的思考納入設計過程后,初期設計時間線被拉長,但長遠來看避免了思慮不足引發的風險與反復更改的成本,合理的設計預測與分析則向上向下兼容未來場景,提高設計輸出物的通用性與成效,即所謂的磨刀不誤砍柴工。

          那么這樣成熟(我自己其實是偽成熟,還不夠完善和系統)的思考過程,分析過程是如何學習或者說培養的?

          二:設計思考的三個階段

          這其實是我接下來要講的正題,我將設計中的思考分為三個階段,無思考——主動思考——被動思考,這是一個初期線性發展,后期循環迭代的過程。其實我定義這一套思考階段的分級是在短暫的靈感爆發后立即輸出的,來源于我對自己2年間從一個非科班新手到如今高級體驗設計師思考邏輯的發展變化的回顧。我發現其確實有跡可循,在地鐵上很興奮很興奮的頭腦沸騰過程中快速記錄下大綱,到了工位立即記錄并輸出。 


          無思考階段

          大意為,新手設計師,或沒有刻意練習、思考、總結的習慣的設計師,最初由于沒有通用的設計經驗、沒有相關成熟設計模型或組件與設計單元的使用和設計經驗,因此設計一個新內容實際為從0開始,此時設計師可能會單憑直覺 隨意設計,例如設計彈窗就隨便畫一個矩形,然后隨機調整。或者使用成熟的組件系統,直接套用,純粹執行。這就是處于 0思考階段,憑直覺設計(注意和直覺性設計區分開,直覺性設計是從用戶的維度定義的,即用戶可以單憑直覺理解設計,這也是我們常說的可供性"affordance"原理)

          主動思考階段

          而主動思考階段的起點是,隨著設計師接觸的工作范圍、工作內容、合作對象的擴大或增加,及接觸同類工種(其他設計師、設計leader)的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。 

          前者會使新手設計師(或沒有有意識的反思、總結沉淀的初中級設計師,或剛剛轉換行業的各等級設計師)逐漸暴露并意識到自己的問題,大概率可能涉及到輸出物質量、規范性、平臺或行業壁壘造成的經驗缺失等。

          后者則是一個對比與發現的過程,即接觸到更優質的輸出物,更合規的輸出過程,更的設計流程、協作流程等等??赡苁潜粍咏邮艿?,如leader或同事的分享,及日常工作中為提高團隊整體效率而被灌輸的新的工作方法和進入新公司要強制適應的新的工作流,也可能是主動接受,如發現同事設計到輸出的質量和效率等遠優于自身而自發去了解,學習。

          因此,在主動思考階段,會有一個從發現問題到解決問題的過程,是不是和設計本身的職能很像,而在這個過程中,設計師自身就是被設計的對象,即如何解決自己身上存在的問題?如何使自己變得更完善更優秀?


          你可以回顧下,在你初入行業時,最熱情的接納各種信息、知識、經驗的階段,你當時的狀態是什么樣的?概括來講就是遇到感興趣的內容-發現自己在此間的不足-了解學習并掌握。從基礎的某個視覺效果的實現方式,到某個設計方法論、某個解決典型問題的交互設計等。

          主動思考階段與興趣(對某個領域的衷情)、個人行為習慣(自學習慣,求知與自發研究的習慣)、周邊環境等因素有關。因此核心是與本人、其他個人(同事,設計圈關系人)、團隊相關。某些人天生對未知事物、信息及技能有濃厚的興趣,所以會自發的廣泛接收各種新的信息,并在這個過程中養成思考總結的習慣(比如在下),同理,個人在大學期間,甚至成長過程中有養成良好的自學習慣,有訂立目標并逐步實現的習慣,他們會長期甚至一直處于主動思考階段。另一種情況則是周邊環境,社交關系人對你所產生的主動及被動的影響,如leader布置課題及學習計劃,同事,好友,行業人員的協作共創活動,分享會等。

          所以,主動思考階段應該是優秀設計師需要長期自發維持的一個設計狀態,持續的發現身邊的問題,發現自身的不足,發現新內容新趨勢新動態。并在發現新的內容并與自身能力模型對比的過程中,發現不足并持續思考和輸入信息,反思,輸入,鞏固,沉淀。是一個升級打怪的過程更是一個知識資本的原始積累階段,與無思考階段相比,由于它是一個主動,刻意學習的過程,因此積累知識的效率要遠遠高于懵懂狀態的初級設計師。(這應該也能解釋為什么一些沒有進入主動思考階段的設計師,工作四五年卻被一些一兩年的新人設計師趕超)。

          從新人設計師“無思考”階段到主動思考階段關系到一個設計師能否完成初級到中級的進階。主要差別則是輸出物的不確定性(初級)與輸出質量趨于穩定并持續迭代提升(中級)。

          這個思考階段線性過程的第一個門檻,雖然是初中級設計師面臨的門檻,卻是能持續影響設計師整個設計生涯的關鍵轉型點,奇異點。就像先賺它一個億中所謂的一個億啟動資金??邕^這個門檻,設計師會迎來第一個爆發期,中級設計師我的理解是下限清晰,上限無窮。即在主動思考階段,設計師可以將個人設計能力,從技巧到方法推動到一個較高上限的地步,概括定義———擁有在從事行業領域內輸出高質量設計方案的能力。


          如何跨過新手期,從無思考到主動思考?

          刻意練習與學習

          最優解是從興趣到發現,即培養興趣,調動興趣去開展某個內容或者技能的研究學習,并逐步掌握為自身技能樹的一部分。次解則是從目標到強制規劃自我再到研究學習和逐步掌握。以興趣為老師是最易收獲的方法,但確定目標并刻意學習才是大多數人要走的路。完美解則是興趣驅動同時嚴格規劃。在我作為非科班設計師開始自學到工作的早期,每天固定不變的是大量瀏覽作品,大量閱讀文章,大量練習技巧,后面逐漸選擇性瀏覽,選擇性閱讀,選擇性練習。這期間發生了什么?是綜合當前工作場景和設計趨勢等各方條件后的縝密思考所做的決策,也就是一個反思的過程,從發散到收束,以提高在當前工作場景下的個人能力,集中精力在核心能力的提升上。

          也是這種能力使我快速B端轉型C端,使我在上手新軟件Figma后由一個新手使用者快速蛻變為講師、分享輸出者??桃饩毩暫蛯W習的能力與傾向,應當在主動思考階段養成為習慣。

          What——How——Why

          從淺層思考到深層思考,最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美,積累設計相關的表層信息。而當你思考How時,你將掌握如何實現該效果的能力。再進一步,當你開始思考Why時,你終于探尋到設計的本質,該設計是在遇到了一個什么設計課題、問題的基礎上提出的,解決了什么問題,如何解決的,有沒有更優解?目前的解法能否納入自己的知識庫?

          T型構建能力模型

          T型中縱深為你所對應的領域、行業、業務強關聯的能力。 以UIUX為例,其中又以基礎UI界面輸出能力為例。

          視覺:布局結構、柵格、字體、配色、間距、ICON及插畫繪制、對應平臺尺寸規范...

          交互:信息架構、業務梳理、導航設計、流程設計、原型設計、交互演繹

          業務:當前從事行業、細分領域、細分到業務的理解程度,細分需求的業務背景的理解程度

          橫向為拓展能力,通用能力如經常講的共情能力,溝通能力,協作能力,邏輯思維能力,復盤輸出能力等等。除此之外還有特殊能力,比如UI UX以插畫 ,3D作為特殊能力項。


          關注環境

          在最初定義主動思考階段時,我就講過個人覺醒主動思考的過程中,他人和環境的影響因素十分關鍵,因為這是一個發現不足然后去解決問題的過程。整體環境如整個大的設計團隊,及細分的每個設計組,從小環境到大環境都有相當多的團隊沉淀和個人沉淀可以供你吸收成長。如我們設計團隊定期舉辦的月度會議包含超高質量的分享,公共Drive保存有設計團隊成立來的所有設計輸出積淀。再如你的設計小組的定期分享,以及你身邊擁有個人特長能力的同事們,關注優秀的內容,優秀的解決問題的思路,身邊就是老師,萬物都是書。例如我從C端轉型B端后,在一兩個月內快速融入團隊,期間從不同的同事身上學到了時間管理(正經的)、項目管理、規范體系的制定等特長能力,而我給團隊成員的反饋是智能組件系統的制定方法同時搭建了一套常用智能組件,大大提升了復用界面的設計效率,至少百分五十以上。沒有對應的環境和社會關系人,靠自己悶頭苦學很難有這樣的效果 。


          善用工具

          這里專指記錄,輸出類工具,例如印象筆記。從舊的設計過程中獲得收獲與經驗的核心在于復盤。忌諱對所知和所得模棱兩可,因此需要在記錄,總結的復盤過程中真正鞏固從設計思考和實踐中獲得的反饋,并進一步加深為自身的持續性積淀。沒有復盤過的設計師可能不會意識到,你的每一個需求設計經過一次復盤后都有可能發現新的問題,思慮不足的點或者仍然未解決的痛點等,當然也很可能發現能持續復用的思路、設計模塊等優質資源。

          除了筆記類工具,公開分享甚至私人交流都可以作為復盤工具,在這個過程中你會回顧自己的設計流程和思考過程,并在言辭交鋒間發掘新的機會點。因此當你完成一次自我感覺良好的需求設計乃至小的版本迭代后,嘗試著與身邊的工具人同事溝通,嘗試在設計小組內分享,在籌備分享與交流思路時,對于該需求的設計思路便躍然而紙上了。


          被動思考階段

          被動思考階段有兩個核心特征,這里的被動不是指傾向性,而是指無意識且自動處理信息的狀態。可以理解為游戲中的被動技能。

          第一個特征,即達到在主動思考的基礎上,持續積累和迭代知識庫的信息,然后將設計規范,典型范式,通用經驗思考模型等內化后的階段。

          何謂內化,抓起超燙的茶杯會自動放開手,反應速度不會超過零點幾秒,這就是人自我保護機制的內化,即整個過程已經不需要刻意去思考和醞釀,而是在無意識的過程中自發的做出反應,完成系統的思考并形成一個規范的方案建議。


          與主動思考階段相比,主要差別在于對已有能力的使用熟練度,調用效率,及思考的全局性。

          說的通俗些,遇到一個設計問題時,處于主動思考階段的設計師會在遇到設計問題后,從過往經驗,相似解決問題的思路中篩選,尋找一個合適的解,這些解是零散的,且需要設計師主動去回憶甚至瀏覽歷史文件來搜集。而對于被動思考階段的設計師來講,若是面對一個較為熟悉的設計問題,如一個彈窗設計,此時該設計的解答方案會自然而然的出現在腦海,并且存在多個方案進行對比,并且每個方案都完整全面,從業務的考量到體驗的權衡,再到業務與體驗的相互平衡。方案如何推進,按照經驗會遇到哪些阻力,需要說服哪些利益相關者,案例如何演示,有否有設計還原類風險?如何解決等等。

          因此,處于被動思考階段的設計師能夠自然并的調用個人積累的成體系的技能和經驗以及執行和推進設計的流程,從輸出設計到推動方案落地一氣呵成,宛若天成。在沒有一定思考和實踐經驗積累的情況下,主動思考階段的設計師則可能需要花費成倍的時間在方案探索輸出再到落地的過程上,期間遇到的典型性問題則會一點點被消化并推動設計師向被動型晉升。


          第二個特征則是視野與維度,視野也就是常掛在我們口中的全鏈路視野,維度則指的是看待問題或方案的更高維度。這一特征使用實際案例來說明或許更易于理解,


          案例1微信紅包早期推廣的案例

          微信紅包作為微信的一個核心功能,初期花費大量成本推廣并成為一個現象級“產品”,作為產品設計師,底層的視覺設計師與交互設計師在產品視覺交互邏輯等方面投入較大精力,他們只需要將自己負責的需求完成,輸出達標的基礎方案,可能會聚焦于如何設計紅包樣式更易于理解,如何設計紅包樣式能賦予其可供性,幫助用戶快速理解產品與現實中的紅包的映射關系,在進一步可能要考慮不同年齡階層對紅包樣式的接受度,而交互設計師可能要考慮如何縮短用戶路徑,使紅包開啟的愉悅感能夠最的被用戶觸達。

          而此時產品負責人是如何考慮該紅包功能設計的?答案是通過微信病毒式傳播,的綁定銀行卡,為微信支付業務鋪路。綁卡才是當時該產品設計的核心。這就是維度的差異,同一個產品,不同的崗位不同的身份,不同階段的設計師看到的會是不同的維度視角,更高的維度往往意味著更長遠的考慮,意味著碾壓式的決策?!盀橹Ц稑I務奠基”與“糾結紅包是否要帶花紋”相比,維度視野的差距,高下立判。


          案例2與設計團隊負責人評審 Logo方案


          上圖是該提案的部分PPT,在一次品牌LOGO提案的評審過程中,我花費較多的精力去宣講Logo的品牌理念和故事,分析圖形的演化過程,同時輸出多個方案用于對比。設計負責人一針見血的指出幾個核心問題。

          第一點,在設計過程中不要過早的給圖形設計融入顏色,顏色是第二層信息會干擾設計過程,當然也會干擾需求方的理解過程。一次只闡述一件事情,設計圖形,講解圖形就使用灰度模式。

          第二點,給群體及普通需求方宣講可以使用較多包裝或附上比較詳細的設計思路,而需要給企業級Boss過稿時則切記簡化一切過程,開門見山,直接鋪陳LOGO圖形,對不同利益相關者采用不同的策略。

          第三點,該品牌LOGO的單獨設計輸出物看起來不錯,但需要置于我們跨國的多個產品品牌構成的總的品牌體系中,判斷其品牌一致性等問題,一致的產品品牌效果不僅能闡釋品牌歸屬,同時也能很大程度上降低推廣成本。作為設計師,既要細化到每一像素,又要高屋建瓴從全局層面考慮問題。

          當你收到的反饋或建議都是你從來沒有考慮到的問題和想法時,這有可能就是維度的差異。


          資源3:周陟 《設計師如何解決全過程問題》

          周陟分享的《設計師如何解決全過程問題》是一個全局性與高緯度思考的典型案例。該分享詳細的闡述了設計師如何從產品的底層框架,結合業務的思考,市場趨勢、歷史數據對比分析,定義核心設計問題并探索設計方案的過程。

          其中即有低維度的設計師底層能力方面的闡述,如從產品用戶體驗五個層面的設計思考(戰略層、范圍層、結構層、框架層、視覺層)到具體的可讀性、視覺舒適度等具體的設計問題。更有高緯度的市場銷售趨勢、不同手機廠商間的用戶流失流轉情況、市占率、信任度等業務層思考。從上帝視角,全覽產品各個階段的場景及問題,并在對比分析中聚焦核心問題,探索方案去持續解決。 

          《設計師如何解決全過程問題》資源鏈接


          我們可以用一個超級樸實的方式來闡述主動思考階段和被動思考階段的差異。當一個設計師處于主動思考階段,你可以把他置于他所熟悉的設計領域,他將會輸出高質量的設計物,能夠較好的解決當前遇到的設計問題,體驗問題。

          而一個被動思考階段的設計師,你可以把他置于有一定相關性的各個設計領域(比如互聯網方向的設計不能被置于廣告方向),他會在較短的時間內理解不同領域的特征和需求,并輸出高質量的解決方案,且能夠兼顧各個利益相關者,主動推動產品實現進度,并提前規避各類問題。這其中的差別在于,是否有自己沉淀的一套解決問題的方法和過程,是否將通用設計經驗系統化,是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設計師,還是一名高級體驗設計師,前者限制在一個領域內,后者已然破圈。 


          如何從主動思考階段跨越到被動思考階段

          在體驗設計的領域,主動思考階段的設計師與被動思考階段的設計師,在單純的設計能力上,其實沒有太大的差距,即輸出物本身沒有太大差距。都能夠快速輸出達標的設計方案,解決大部分體驗類問題。那么關鍵差距提現在哪里?


          其一是從設計到落地的總的效率。主動思考階段的設計師在整個設計過程中需要頻繁的遇到問題,并陷入陷阱,然后持續的糾正方案,一步步推進,踩著荊棘摸到最終方案所在的那塊石頭。而被動思考階段的設計師只需要在知識庫中的成熟方案中選擇一條更加應景的路,多個方案已經擺在那里,而設計師只需要去考慮低維到高維的一系列影響因素,從基礎體驗,用戶習慣,再到業務和戰略上的布局,最終選擇全局視野下最正確的方案。

          第二點差距在于可能性,被動思考階段的設計師有精力和能力去思考如何把方案做到超標準,超出需求本身的要求,超出利益相關者的期待(如需求方和開發人員)。我們經常會講行業標準這個詞,作為一個設計方案的基礎判斷標準,但行業標準永遠不是上限。微信的撤回功能,從僅撤回到撤回后可編輯就是一次體驗上的超標方案。

          第三點則是打通上下游的能力,即涉及到上游的需求理解與轉化,詳細的設計項目還會涉及到用研類信息的接受與轉化,下游則涉及到開發還原的質量與效率問題。在有意識的關注設計全流程和生命周期的情況下,被動思考階段的設計師可以更輕松的管理設計并反饋到整個項目的開發周期上。


          想要從主動思考階段跨越到被動思考階段,我總結以下三個建議。

          從輸入到梳理

          首先是核心的底層設計能力方面,表面上是基礎能力與通用能力的的刻意學習鍛煉,而關鍵在于對知識體系的梳理。在我們初入職場逐漸積累設計經驗的過程中,一些典型的設計過程,流程,針對某個領域甚至模塊的典型解決方案,將其拆解匯總然后梳理分類,不論使用印象筆記等筆記產品,還是思維導圖等腦圖類產品,都能夠幫你實現這個目的。


          忍受立即獲得解決方案的誘惑

          其次,在真正開始做項目時,主動思考,刻意將個人知識庫梳理的信息與項目需求進行對照,主動回憶和驗證積累的方案,盡可能多的羅列場景,羅列可能性,不要被第一時間想到的方案所誘惑而止于此。設計師在遇到一個設計問題后,會第一時間想到的方案往往是最普通,未經思考的初步方案,但往往該方案可以一定程度上解決當前的問題。此時設計師需要強制自己從最簡單的方案中脫離,進一步思考,并大量的舉例、演繹,探索更多機會點,調動腦海中更多可能性的方案。每當想要就此停下時,反問自己,我能否做的更好,是否有更好的方案可以解決這個問題。


          視野和維度來源于廣泛閱讀、案例、及復盤

          被動思考階段的設計師橫跨了高級體驗設計師到設計專家這個范圍。抵達這個階段的設計師視野將拓展至整個企業機構,而不局限于設計團隊的個人的視野。除了強大的解決設計問題的能力,相較于普通設計師,他們往往有更高的思考維度,全局性的設計視野,此類中后設計生命周期中的經驗往往需要通過閱讀、項目實踐等多個方面持續輸入,然后復盤并沉淀為自己的經驗。

          因此這要求設計師廣泛的閱讀各類設計項目總結,參考實際案例,并在真實的項目中持續計劃、嘗試、驗證,然后復盤。需要脫離設計師基礎能力層面的視野,更多的關注解決問題的思路與流程,最終掌握的設計思路或能力可以稱之為通用性設計解決能力。 


          當然,上面所講的都是我從個人思考方式的轉變中總結出來的經驗,其目的是分享設計師應該如何思考?不同階段應該聚焦于哪些問題領域才能最大化提升思考方式的進階速度等問題,而不是在講設計師如何從初級進階到高級,進階到體驗專家(非設計師位階的進階)。因為不同企業對不同位階、不同專供方向的設計師有不同的具體要求,比如設計leader可能更傾向于業務的理解與把控度,設計推進,研發流程中不同團隊成員間的溝通合作等能力 。


          如果有關于此的疑問,我只能以我的理解解答,不論是什么位置的設計師,判斷其位置層次的標準必然是由上層的企業來制定的,而企業制定規則的出發點源于利益本身,換言之,你能獲得的位置和你能夠為團隊和企業貢獻的利益正相關,所以我們很容易理解,設計師的職業后期或者用于解決超級復雜的設計問題, 以對應的價值映襯其收入,偏具體設計能力層面,或者用于承擔全局性企業需求,如帶領設計團隊支撐某個業務線,偏業務理解和統籌方面。


          從線性流程到循環往復的迭代過程

          我們回顧一個努力的設計打工仔的職業生涯,首先,一個新手設計師從純粹執行的無思考階段,進階到主動思考階段,當他的基礎設計能力不斷進階后,開始拓展視野,思考業務,并在大量的項目鍛煉中形成自己的一套成熟的設計方法論,從設計思考流程到具體的設計流程,從而進階到被動思考階段。但這是一個理想化的描述,真實情況是,設計師會在這三個階段中循環往復,而甚至有些設計師可能會在前兩個階段循環往復。

          人都有惰性,你我都如此。在主動設計思考階段,因為一次小長假,因為種種原因,我們可能會退步回無思考的階段。持續性學習是一件 令人興奮的事,也是一件需要莫大毅力的事情。技巧經驗會隨著時間消磨,這是設計師需要警惕的問題,因為這個行業就是如此,我們只能變化,只能持續不斷的學習。

          而當將經驗與成體系的思考范式內化后,設計師會養成核心的通用設計解決問題的能力。此時,設計師期去接觸一個新的領域,不再需要從0開始,而是可以使用自己積累的通用設計能力,來指導和規范化新的設計領域的需求,并快速融入該領域。而新的領域的經驗與視野會被納入你的整體設計理解中。

          從主動思考,到經驗內化,不斷脫離舒適區,納入新的設計領域、新的視野維度,在這個過程中使個人的通用設計能力螺旋進步。

           


          最佳啟動:消滅設計的不確定性


          我知道,我的讀者中有很大一批人都處于設計能力良莠不齊,沒有系統的設計思路與設計流程,介于初中級設計師之間的狀態。而當今國內的設計領域也是如此,初中級別的設計師完全飽和,而企業對高級體驗設計師又求而不得,這種人才斷層既有培訓爆火下的積弊,也和設計門檻與崗位收益相關,大環境無法改變,能改變的只有自身。

          在這里,我總結一個更簡單的設計思路,只要你按照該方法去執行和反思,應該會有很大的收獲。即從今天開始,對你所接到的每個設計需求都提出唯一一個標準——消滅不確定性?,F在停下來詢問自己,你接到的每個需求,對于你輸出的設計結果,你認為其最終效果是確定的嗎?換言之,你認為你的設計真的解決了該需求的問題了嗎?


          你只需要把你個需求設計的思考分為設計前和設計后。

          設計前請思考,我如何設計這個需求能確定以及肯定的解決這個問題,沒思考清楚前不要動手設計,想到第一個方案后也不要動手設計,繼續思考,延遲設計決策。

          如果你乍一想到的方案自己都認為模棱兩可,那不要執行設計。此時發揮主觀能動性去思考,我如何能夠獲得相關信息,來輔助我做出這個設計決策,我需要去參考一些競品?我需要列出目前存在的疑問點,或者我無法解決的問題點去詢問設計專家設計leader?或者我把場景,整體的體驗流、用戶操作流都列出來,然后繼續埋頭探索方案?

          千萬千萬不要在方案還沒想清楚前就開始設計,這將輸出無意義的方案,且浪費大量時間,千萬千萬不要在想到第一個方案后立即開始設計,這將不會給你帶來任何進步,以后遇到相同場景你也僅有一個可選方案,千萬千萬不要忽略競品忽略他人閉門造車。

          千萬千萬試著思考盡可能多的方案,乃至輸出多個方案(僅指體驗設計類,而不是視覺設計)。作為體驗設計師,必須鍛煉的技能是方案演繹能力,在腦海中演繹可能的方案,如果有精力則可以借助工具甚至把演繹過程記錄輸出。  如下方我進行的一個需求的方案演繹與思考。

          設計前保證方案確定性,第一關要能夠經受自己的邏輯考驗,當你探索多個方案后最終確定了一個符合業務場景,同時體驗良好的方案,作為設計師自己給該方案打上一個“確定”的標簽,此時再去執行并輸出,而這過程中的思路,從糾結到決策都是最終設計輸出的關鍵證明,既能提高設計說服力,又能鍛煉個人能力,而這正是初級設計師容易忽略的部分。


          設計后的確定性則是指,產品還原與產品驗證方面。產品還原度是設計稿的視覺確定性,確保開發還原的線上效果與設計一致,這不僅僅要靠開發的努力,更要有設計師的具體標注說明的輔助。驗證則是產品上線后的必要環節,不論是預先根據業務指標設定埋點,還是設計師通過各種途徑獲得用戶反饋,最終都要保證你所設計的產品體驗的確定性是達標的,確定解決了需求提到的問題,確定能滿足用戶需求。若沒有,則重復這個過程,重新思考然后設計。


          作為設計師,應該理解自己也能作為設計對象。在我看來,設計師就是遇到一個問題解決一個問題,遇到兩個解決兩個,直到面前再也沒有問題。所以當不清楚自己該如何設計,下一步該如何做時?你只需要思考,把解決當前的迷惑作為一個需求,去思考,深入思考,列出所有可能性,不管是百度還是詢問同事查閱資料,總歸在思考后,你會有所收獲。 


          結語

          最后,我們一直在思考,在定義,到底什么是設計?

          我自己一直遵循的理念是——設計解決問題,形式追隨功能。

          而有人說設計是做選擇(決策),有人說設計是永遠做正確的事情。

          事實上這些說法都有其正確性,也都有各自的評價標準,因為場景,趨勢,市場各種因素都在發展變化, 設計最終要兼顧場景兼顧各種利益相關者,在正確的時間做正確的選擇并最終做到正確的事情。

          解決問題有多個方案 ,設計師需要在其中做出抉擇,選擇最佳方案,最佳方案如何判斷的?對當下場景,對主流用戶,對更多利益相關者來講是更正確的選擇。那它就是最終方案。

          當設計被置于真實的環境,真實的市場下 實際上其傾向性和評價標準一直在發展變化從最初重視覺到重體驗再到重商業。設計傾向性一直在變就像設計潮流,唯一不變的是設計師面對復雜的場景和問題時一如既往的優雅的解決問題的思路,并幫助設計師讓世界變的更美好。



          文章來源:UI中國     作者:AI-玲玲



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


          日歷

          鏈接

          個人資料

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

          存檔

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