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

          首頁

          用戶體驗是玄學嗎?

          純純

          Part 01 - 用戶體驗和用戶體驗設計


          關于“用戶體驗”這個詞,很多剛入行的新人都覺得它玄之又玄,妙不可言。一方面是不知道他具體到底是什么,就好像那是一塊理想地,看不見也摸不著,另一方面呢糟糕的用戶體驗,作為用戶是能清晰感覺到它的存在。所以呢,在這里,會圍繞“用戶體驗”這個詞做一個科普性質的解釋和綜述,希望對初學者一些小小的幫助。



          1.1 什么是用戶體驗?

          用戶體驗的定義有很多種,我比較傾向的解釋是:

          “用戶體驗是人對于使用一個產品、系統、服務時的預期和反應?!?

          首先明確第一個概念,體驗是一個過程,生活中的一切皆是體驗,我們赤裸裸的來到這個世界,最后赤裸裸的離開,來人世走一遭就是來體驗來了。

          從廣義上來看,體驗的主體是人,客體可以是一切物體和事情,媒介是我們的感官;當我們的感官作用在一切事物上,會產生相應的心理行為,比如預期,比如反饋,比如情緒,著所有的一切一起作用,形成了用戶體驗過程。


          只要留心生活,你會發現用戶體驗無處不在。

          舉兩個例子:

          第一個是北京隨處可見的地鐵充值機,我經??吹接脩粽驹谀抢镢卤?,最主要的是他違背了用戶的操作習慣,插卡機器的的行為總會讓人聯想到APM機,而幾乎所有的APM機器卡都是插一半然后自動吸進去的,而北京地鐵卡是需要插到底,然后還需要用力按一下才能成功識別,跟多用戶懵逼在這一步,并沒有用力按,然后以為是機器壞了沒有識別。

          第二個例子是我工作的地方旁邊商場一樓有一個肯德基,它有兩個門可以進入,第一個門是在商場外臨街,第二個門是在商場內。

          我連續兩周的工作日每天早上9點半到10點在這家店吃早餐,發現一件很有趣的現象,由于工作人員的疏忽,商場內的門二經常會忘記打開,因為這個商場的負二樓和地鐵站連在一起,所有很多人地鐵到站的人群從地鐵站口出直接從商場內走向街道:

          在這些人群里,如果他們正巧有買早餐的需求,他們往往會從門2進,如果正巧由于工作人員的疏忽,門2沒開。按照常人的思維,哪怕門2沒開,那不還有一個門1么,用戶完全可以多走幾步出去從街道門1進入啊,應該不會太影響。如果你能得出這樣的結論,又碰巧你正好是互聯網的設計或者產品人員,那么你可能有“自我安慰型人格”。

          我吃早餐的兩周里做了一個統計,10個工作日里,每天在我吃早餐的這半個小時內,試圖推開門2卻發現打不開的,平均到每天有6位,按照每個人平均買一份早餐套餐15元錢來算,10天內,由于工作人員的失誤,這個門至少阻擋了至少900元營業額。


          回到剛剛那個“自我安慰”的思維,我發現,10天內被這個門阻擋的實際62位用戶里,真正出街道從街道門1再次進入的人,只有十七位。也就是說這個實驗中肯德基早餐用戶被最短路徑阻隔之后,再次選擇次路徑完成轉化的轉化率17/62(27%)。

          別急,還有更吃驚的數據:在被門2阻隔的62個人中,有17個是自身順路要往街道右邊走路過門1的。但是由于被門2阻隔,他們17個人當中,哪怕自身行走路徑要路過門1,選擇從門1進去的也只有7位,大概在11/17(64%)(判斷順路依據是他們吃完后從門1出門往右走)。


          再看一下肯德基這個例子的數據結論:

          被門2阻攔的62個人里,45人流失。

          其余17位選擇從門1再次進入,這17人里,本身就要順路經過門一的占11位,說明大概率只有順路才會進入完成轉化。


          這個例子說明什么呢?

          在替代品遍地都在的今天,不要試圖去挑戰用戶的體驗。


          當用戶看到肯德基的門2,他們產生的預期是馬上就可以推開享受一頓早餐,這時候由于門2打不開,使得用戶預期受挫。

          受挫用戶的第一反應并不是想解決辦法(表現在例子中就是尋找另一個門進入),而是放棄它。畢竟,沒有肯德基我還可以吃麥當勞,還有星巴克,還有面包店,各種各樣的選擇。


          這就是為什么互聯網行業把產品用戶體驗看得這么重要的原因,除了社交產品以外的用戶是很難有忠誠度的,你的產品難用,你不能給用戶更大的福利,用戶一旦發現別的產品做得比你好,用戶會馬上放棄你,轉而用別的替代品。


          上面的那個例子主要表達的是用戶預期受阻帶來的糟糕體驗導致用戶流失。其實整個用戶體驗的過程當中,是有很多很的因素相互制約,協同作用的:


          戶體驗本身一個很龐雜繁復的系統;在一個過程內,用戶對整個過程中的元素的預期和反應(情感和生物反應)構成了整個用戶體驗系統。這里面包含了很多很多的旁支,比如人的感知、人的經驗系統和使用場景決定了人對于單個體驗的預期,而如果超過預期會帶來驚喜,促使用戶正向評價,也促使用戶再次體驗。比如人感知和體驗中客體呈現的意符決定了人的行為等等…


          用戶體驗最初的時候它只是用于表征易用性方面,而現在,它的概念更多的表現在情感的一個分支,包含設計情感互動和評估情緒 。因為人的情緒是很難拿捏的,面對不同教育背景不同生活經歷的用戶,我們最初其實很難歸納出到底什么樣的設計是具有好的用戶體驗。


          好的用戶體驗各有各的優點,但是,糟糕的用戶體驗卻很容易被歸納和識別出來。


          設計師們不斷的在識別和總結糟糕的體驗問題,慢慢在優化這些問題的過程中積累經驗,其實也慢慢的有了一些關于用戶體驗的方法論形成,這種方法論作用于各個設計行業,工業設計、服裝設計、奢侈品、廣告、互聯網產品設計各個行業產生的方法論其實不盡相同。




          1.2 什么是用戶體驗設計?


          說起設計(Design)這個詞,那就厲害了 ,作為設計師的你聽說過解釋肯定有很多種,而我個人對”設計“的理解是:設計是一種”約束條件下,解決問題的可行的辦法“。而對于用戶體驗設計而言,早期的時候,我們僅能夠基于經驗主義去完成一些設計,這時候專家的作用會被放大,因為專家提出的不要這樣、不要那樣,往往會成為指導性方案:


          但是隨著發展,不斷地有人站出來嘗試描述和定義用戶體驗的邊界,比如:


          隨著探索者越來越多,我們最終也是大致能夠夠了出用戶體驗設計的定義范圍:既然體驗是一個過程,那么狹義的,用戶體驗設計實際上是通過改善和優化用戶與產品交互過程,從而提升用戶的滿意度的過程。


          這里有兩個要點:


          1、用戶體驗設計的目標是逐步不斷提升用戶滿意度,前面兩有個定語:“逐步“、”不斷”,對于用戶而言,永遠沒有所謂“最滿意”的說法,只有“相較于上一次體驗更滿意”.所以除非定義一種可量化的終極滿意度模型作為指標參照,否則用戶體驗設計是一個永遠都有優化空間的過程。


          2、用戶體驗設計是圍繞過程的設計,在互聯網行業中,這個過程主要指用戶與產品(app、PC端,客戶端、VR等)的交互過程中,所以下文重點討論的是在互聯網行業中的用戶體驗設計。



          Part 02 - 用戶體驗設計是一個崗位嗎?


          以2018年2月為時間節點的目前來說,用戶體驗設計不是一個崗位,現階段來看,它更像是一個協同目標,每個公司的所有設計師(UI/視覺/交互),用研人員,包括開發人員其實工作的目標都是為了逐步提升自己公司產品的用戶體驗。


          雖然用戶體驗設計目前還不是一個崗位,但是它正在趨向于成為一個崗位。要解釋這一點,我們還是要從用戶體驗的定義說開去,還記得用戶體驗設計是什么嗎?用戶體驗設計是通過改善和優化用戶與產品交互過程,從而提升用戶的滿意度的過程。


          既然要改善和優化用戶與產品交互過程,那把這個句子拆分開來,大概需要的知識儲備有:

          1、從主語的角度看:首先你要了解用戶吧?用戶是人,要提升人的滿意度,對人感到心理滿足的機制是不是需要了解?


          2、從客體的角度看:客體是產品,在互聯網行業表現為手機(app)、pad(app)、PC(軟件)和VR設備等等。這些產品是我們著重需要關注的點,比如一個app中視覺信息的呈現,app的信息架構、app的交互設計、app的可用性和易用性等等,都是需要考慮的。


          3、既然是用戶與產品交互過程,是不是要知道人和產品(手機、app、PC)到底是如何交互的?每一次的點擊,滑動對于用戶來看心理應該是怎樣,產品的每一次反饋都意味著什么?


          吶,你現在來看,其實我們互聯網行業現在劃分的UI/視覺/交互/用研,甚至往廣了說包括產品/開發/測試,工作內容都是構成用戶體驗的要素,它需要的知識面特別特別廣,對人的綜合素質要求很高,所以目前來看,用戶體驗還不能是一個崗位,但是很多大公司,比如騰訊阿里,他們期待設計師能夠變成有更大洞察和對業務、人性有更多了解的全方位人才,而不是一個只會畫圖的美工,所以說未來,用戶體驗設計師可能會變成一個title,但是可以預料的是,用戶體驗涵蓋的這么多方面知識,每個人都是有側重和專長的:可能有些人就是很喜歡視覺設計和UI設計,那他們在精研這部分的同時,相應的懂一些交互方面的知識,這就算是優秀的偏視覺方向的用戶體驗設計師;那視覺表現很差的人能不能算優秀設計師呢?當然可以,比如他是心理學或者HCI(人機交互設計)的研究生,對人和用戶心理有自己獨特的認識,再加上精通定性和定量研究方法,對數據有獨特的敏感,那他未來可能是用戶研究方向的用戶體驗設計師。


          只不過我們現在因為崗位固化,大多數公司,每個人的工作職責僅限于那一塊,你是做視覺/UI的,那就好好畫界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么職位就做什么職位的事情,從來不越界,這樣其實是不利于人的發展的,那我們追求上進的設計師們只能自己下來多看書,多去做研究,私下來多花時間修煉自己的內功心法,才能讓自己立于不敗之地。


          用戶體驗設計發展到今天,目前包含了最大的三個有模糊邊界的模塊是用戶研究、交互設計、視覺設計?,F在絕大多數互聯網公司也都是按照以上這三個模塊去設置崗位的,這樣有一個很大的問題其實是不利于設計師的發展。


          阿里巴巴1688的設計總監汪方進關于這三個崗位,有這樣的一番評述:

          比如交互崗位,如果對接的是一位能力較強的PD,他們可能把交互稿定了七八成,交互設計師完善后交付給視覺設計師,而對接的視覺設計師又有一些交互Sense,他也許把交互稿又改了改,那么這個過程下來,交互設計師的內容,還能保留多少呢?我所說的這種情況,可能也是當下我們交互設計師同學所面臨的痛。

          而視覺設計師又是怎樣的現狀呢?視覺設計師拿到交互稿后,在交互稿的基礎上美化潤色一下,自主發揮空間不太大。從我們集團總體情況來看,視覺設計師的(P級)成長是比較慢的,因為我們講求論述自身設計的價值是什么,但把視覺從整體中剝離出來,視覺設計師設計的某一個頁面,具體能帶來多少商業價值?視覺設計師很難去論述這點。


          關于用研、視覺、交互這三個模塊,我也想分開來談談,希望能對目前剛入行或者入行不久感到迷茫的小伙伴有所幫助。



          Part 03 - 用戶研究


          上面我們說到,用研、交互、視覺這三個模塊構成了一個用戶體驗設計的能力維度,要搞清楚這三個維度,我們不妨先看看業界最出名的一張用戶體驗要素圖:

          我們一般把最下面戰略層的部分分解開,其中除了產品和公司戰略之外,關于用戶需求的定義交給用研(用戶研究)人員去完成。


          關于用戶研究,如果是一個從0到1的產品,產品初期是需要對產品用戶進行定位劃分和用戶畫像,就是我的這個產品是為了解決什么樣的用戶的什么需求的,這些用戶的屬性是怎樣的,他們具有什么樣的特質和顏色、他們一般使用產品的情景是如何的?


          這里需要注意的是,如果你不是一位有用研經驗的人去第一次嘗試做用研,需要留心我們很容易落入理想化用戶設計的陷阱。再客觀的站在用戶角度去思考,去設計也會有主觀和流于表面的情況出現。我們不能想當然的按照理想情景去思考用戶需求,用戶需求是復雜的,再加上企業自己的,以及各部門的需求紛繁,所以一般在產品迭代的過程中新的功能很容易陷入想當然的“用戶就是需要啊”的思維之中。所以對于成熟的產品來說,需要劃分核心主流和普通用戶并分別畫像。關于用戶畫像的方法有很多很多,大家可以去隨意搜索在這里就不細談了。


          還有如果是一個初次開展用戶研究的同學做用戶研究的時候,可以掌握幾種常見的方法,訪談法,焦點小組,易用性測試,問卷調查這些方法各有利弊,最重要的是找到當前情境下解決問題且行之有效的方案,比如訪談或者焦點小組,精心整理問題并邀請公司的一些員工或者核心用戶進行訪談并全程錄音,在結束后認真提煉訪談中多次被用戶提到的關鍵詞,從關鍵詞中按維度抽象整理出用戶的需要,是訪談的核心價值。并且輸出文檔,賦予思考,再以此作為整個設計改版的核心依托,讓里面用戶提到的關鍵詞在設計頁面中體現,這才是有效的設計。


          關于用戶研究的常用方法,具體推薦給大家兩本大部頭的書,大家感興趣或者不知道自己感不感興趣,可以去看看《設計調研》和《洞察用戶體驗方法與實踐》 第二版。



          Part 04 - 交互設計 


          交互設計的輸出物是產品原型,也就是你們看到的線框圖。那線框圖是怎么產生的呢?這個需要從產品經理那邊對功能梳理開始。

          一般大一點的有交互團隊的公司,比如新浪微博啊之類的,他們的產品經理的工作重點會更加focus在功能本身到底是不是用戶所需要的,而經過產品提出來的需求文檔,一般只有功能需求List和他們的優先級,如果遇到要畫圖說明的,也就是簡略的幾一個草圖。

          這時候,交互設計師會根據產品的提出的功能需求List去進行整理和區分:

          這里整理和區分的方法是合并,拆分和歸納。

          比如功能A是可以拆分成更細顆粒度的需求A1和A2的,其中A1和A2又碰巧屬于不同的已有的兩個功能區塊,那么就可以把他們拆分到不同的功能線上,如果某些功能發現他們有同樣的屬性,那是不是考慮把他們整合在一起?


          這樣整合完了需求,再按照優先/重要的二維表格去劃分,最后得到一個需求量表:

          然后我們根據這樣的版本需求量表優先級和重要性,有的放矢的去設計功能入口和信息架構,就會游刃有余:


          而一般復雜產品新增功能的時候,往往要考量很多因素,不能一味的去做功能堆砌,還是需要把不重要的功能隱藏或轉移,突出重要的功能,再把一些同屬性的功能入口組織在一起并列,這些都是在原型之前需要思考的問題。再往下,那就是根據一個一個的信息去設計產品低保證原型圖,那就沒啥好說的了,你們看到的原型圖幾乎都差不多,但是至于你們的交互設計師的原型是不是按照我上面步驟一步一步推演出來的,那就要打個問號了,這可能是區分一般交互設計師和高級一點的交互設計師的一種辦法。(如果你見到聽到功能就開始畫低保真的交互,那…)



          如果你以為交互設計師就是畫個原型,那你就錯了,交互設計師切記不要淪為產品助理……其實在真個UX體系中,交互設計師承擔的是最重要也是最核心的一個環節,那就是優化用戶路徑(即優化流量路徑)。


          什么叫優化用戶路徑呢,舉個例子,全民k歌是一款唱歌的app,那用戶最核心的功能就是在上面唱歌,而關于唱歌,大概有獨唱、合唱兩種維度。比如現在,我作為普通用戶,想要去完成獨唱一首歌的行為。這種行為從用戶路徑上看就是用戶從任何頁面到唱歌詳情頁。那么到底有多少條路?既是說,到底有多少個頁面可以跳轉到唱歌詳情頁?然后你會發現,其實能跳到唱歌詳情頁的,除了清唱那種獨特的方法以外,其他的都是要通過伴奏詳情頁跳轉,那么問題又來了,到底有多少個頁面可以跳轉到伴奏詳情頁呢?

          就這樣,去窮舉所有的用戶路徑,然后看看這些路徑過程中有沒有一些冗余操作是可以刪減的:


          窮舉所有用戶路徑,看看有沒有哪一跳是可以被優化的(以唱吧為例



          這里面有很大很大的學問,如果展開說的話可能是一個幾萬字都說不清楚的篇幅。

          總之,一個好的app一定是功能和產品形態足夠扁平簡單。

          要讓產品形態足夠扁平簡單,就需要根據app的形態去整理和梳理交互層級,針對流量問題進行具體的分流設計:

          比如當我們看到一個200wpv的頁面,下屬三個平行按鈕分別只有40w、12w和3wpv,刨除場景問題之外,從交互出發那是不是我們可以設計一個內頁的segment組件去完成三個內頁的滑動跳轉、降低操作成本呢?

          比如淘寶這樣:

          又或者說,我們是不是可以未一個pv較低卻承載功能較大的頁面另外設置另多個入口呢?

          比如像外賣產品這樣:

          最后的最后,交互設計的工作產出就是原型了,既然都思考妥當了,畫個圖就就沒啥好說的了...



          Part 05 - UI設計



          再往后,交互設計師會把原型給到UI設計師,UI設計師的工作范圍大家想必很了解,就是把低保真的原型變成高保真的設計稿。


          在這里再啰嗦一遍?。?


          UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!

          UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!

          UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!


          重要的事情說三遍!


          我們唱吧UED最近一直在招人。

          看UI的簡歷,然后發現一個很大的問題是,我發現UI設計師的簡歷真的是千奇百怪五花八門,有那種插畫畫的很好的,有那種第一眼上來就是一個很立體的3D建模渲染震撼到你的,也有那種大漸變dribbble風給你一種好像很厲害的樣子的,但是這些都不重要,如果一個界面上的內容信息沒有主次區分,或者展現得沒有層級對比,再花哨的東西都沒有用。


          關于UI需要掌握的比如格式塔啊之類的東西已經有太多人說了,在這里就不贅述,具體也可以看我的文章《形式與內容的關系 -  app的視覺美成因分析》


          UI設計其實都不是鬧著玩的工作,也絕對不是純主觀感性的工作,判斷一個UI界面的好壞可以通過易用性和易讀性測試、瞇眼測試的方法檢驗,判斷一個產品交互設計的優劣也可以從易用性測試和用戶反饋中得出線索,判斷哪種交互手段和信息架構更為可行通過ab test的方法得出結論,這一些的一些設計它都是一個有著科學的方法論作為指導的。


          希望從此之后大家審視產品的時候不要以UI美丑這種最低級的主觀因素去思考(當然UI的一致性和美觀度很重要),但是更多的,要想想更深層次功能布局和信息架構,以及產品打的人群上往更加宏觀和抽象的高胃度進行思考。


          文章來源:站酷   作者:Seany

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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




          從交互維度量化用戶體驗

          純純

          和大家分享一些在產品和交互設計中的一些自己的方法。



          Part - I 什么是交互

          狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產品,環境,服務等等,且不論交互客體是什么,只要主體是人,人和客體去進行交互的時候,一定是人帶著心理預期施加一個行為,然后客體會根據這個行為給與一個反饋(沒有反饋本質也是一個反饋),而人會根據這個反饋是否符合預期去進行心理修正。如下圖所示,這就是我理解的最小交互模型:

          當時我舉的例子是用翻頁器去控制ppt翻頁:


          如上圖所示,拆解這一套交互行為:

          當我我點擊翻頁器的“下一頁”按鈕,我點擊行為附帶的心理預期是“PPT翻往下一頁”,然后我點擊的時候,遙控器塑膠按鈕給到我手指一個物理反饋,證明我按下的行為已經完成了,這是“輸出端(我的手)的交互與反饋”,這時候遙控器接收到按鈕指令,把指令通過紅外線傳輸到USB接收器上,接收器把指令傳到PC端然后完成翻頁動作,再通過大屏幕傳到我的眼(輸入端)中,我就可以確認這一次交互反饋是符合預期的。BTW這里有一點想要補充:設備對設備(上圖中黑色箭頭),也屬于廣義的交互,只不過現階段大家研究的交互設計都是狹義的,人為主體的交互。


          在我們日用科技產品的早期,有兩個東西是無法跳過的,那就是按鍵手機和PC電腦:


          他們幾乎是同步在發展的,而這兩個產品的交互行為基本上延續到了觸屏手機時代,所以為了弄明白觸屏手機的交互,這兩個產品是值得講一講的。


          先看按鍵手機(就是我們小時候用的非智能手機):

          在按鍵手機中,最讓用戶困惑的其實是按鍵和屏幕之間存在一個映射關系,而不同廠商缺乏一個統一的規范,各家映射規則不一樣。大家是否還記得當年的手機說明書那可以說是相當厚,因為說明書必須要給用戶建構一個心理模型;比如上圖,點擊左上角和右上角那兩個“-”按鈕,其實一一對應的是屏幕左下角的“Goto”和右下角的“Names”。這個一一對應關系作為今天的用戶來看應該是很平常而且很易懂的,但是當年沒用過手機的人,需要花很長時間閱讀說明書,才能夠明白物理按鍵和屏幕上的映射關系,這就是觸屏手機很難用的地方,也是很反人性的地方。因為作為用戶來說,心智上,我們當然希望所觸即所得。

          再來看PC,作為和按鍵手機差不多一起出現的載體形式,人們操作PC端人是通過媒介(也就是鼠標+鍵盤)輸入的,其實本質上也是我們通過鼠標在桌面上滑動x-y區域對應到電腦桌面上指針的移動來創造屏幕中x-y的映射關系,然后鍵盤上幾十個鍵配合輸入完成操作。


          大家發現了么,上述的兩種設備其實本身就是在制造一種一一對應的映射關系去完成交互行為,這兩種載體從出身開始就還是需要很大交互成本的。

          隨著科技的發展,觸屏感應技術推出了之后,印象中觸屏手機就是兩三年時間就摧枯拉朽的淘汰了按鍵手機,本質上是干掉了一一對應的交互映射,所按即所得:

          觸屏手機出現之后,交互專家們不禁要問一個問題了:

          手和觸摸屏到底有多少種交互方式?

          答案是有很多種:

          越是高階越是隱藏的交互手勢越復雜,所謂的“交互成本”也越高,比如錘子三指滑動換屏保那種,就是利用了高階交互便捷實現邊界功能。那這么看起來,iOS也好還是所有的安卓手機都好,從用戶端而言,就是組合交互手勢,讓信息更好的傳達而已。那么同理,在App中也是一樣,如果我們了解了每一個交互行為的用戶心理預期,對設計工作而言就能做到有的放矢:


          我們以“單擊”和“滑動”這兩個最簡單的交互行為舉例。

          所謂單擊手機屏幕,用戶其實最核心的是有兩個預期:

          第一是選中一個元素,比如Radio組件。第二是邏輯上的Next,比如點了一件衣服,應該Next到衣服的詳情;點了付款,應該出現付款流程,點了返回,應該back到上一路徑點等等。


          劃動交互也是一樣的,用戶在一塊手機屏幕上單指劃劃劃,用戶內心的預期其實也不復雜,最核心的預期也就兩點:

          第一是查看屏幕外的線索(前提是設計師給用戶留下線索了或者是這個UI組件長得就是可以劃動的樣子)第二是查看相鄰標簽的內容,或者查看同一個標簽下的相鄰元素,比如iOS的segment controlle組件就是典型例子:


          當我們了解了這些之后,我們在實際的設計工作中就可以根據上面這些理論來合理選擇UI組件去呈現對應的信息了。




          Part - II 從交互維度合理選擇UI組件

          我們在設計工作中,選擇UI組件,本質上就是選擇信息的呈現形式。

          每一個常見的UI界面和UI組件,都一定也滿足上面所說的最小交互模型:



          在這里我舉一些例子說明。

          第一個例子:同樣的內容,選擇不同的UI組件呈現,給用戶呈現的是完全不同的產品結構:

          大家看下面這張圖:


          這兩個UI模塊擺在大家面前,大家應該能清晰的感受到,左邊是一個segment控制下面內容的UI;而右邊是一個所有內容列表的集合頁,只不過通過tab聚類了而已。

          第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制tag的字數;然后由于右邊的tag占據了推薦貼的位置,導致推薦貼可能沒有左邊的那種展現形式更加醒目。但是相對的,圖右的優勢在于,由于豎向排列tag可以讓一個屏幕顯示更多的tag,可以讓用戶更方便的定位內容,比如外賣產品之所以用右邊這種形式是因為力求一屏展示更多的菜,而且外賣產品的左側tag一般是一家店鋪的菜的品類,用戶下滑菜品配合點擊品類,點完即走,很方便(京東和淘寶電商類平臺也是類似的)。

          但是比如今日頭條,新聞類客戶端只能采用左邊的這種形式,因為新聞類客戶端是需要用戶長時間沉浸的,比如用戶選中一個“體育”的tag之后一般要沉浸的看好久好久,用戶需要沉浸在這個tag下的內容中,那這個時候顯然用右邊這種設計方式讓tag常駐屏幕左側是不合適的。


          再來看第二個例子,就是UI應該會隨著內容而進行調整和優化:


          這里舉一個唱吧的例子,唱吧從7.0到8.6之間做了三次改版,大家可以看到,唱吧團隊幾乎是損失了屏幕效率來加大了間隔和突出了歌名,這是為什么呢?

          這是因為頁面承載的關鍵任務不同,大家對比著7.0時候和8.6時候的UI樣式,正好是今天快手和唱吧的對比:

          大家會發現,其實這個頁面,快手和唱吧承載的內容都是消費轉化,都希望用戶點擊進去消費內容,但是兩款產品做了截然不同的UI風格,原因是什么呢?

          快手在這個頁面,其實承載的關鍵任務是:“迅速讓用戶找到感興趣的點”,它這么設計的本質原因是因為它的截圖可以幫助用戶判斷內容本身,比如第一張圖是一個人在打高爾夫,右邊是一個工人,然后第二排左邊是一個游戲的鏡頭,右邊是一個傳遞正能量,大家可以很方便的通過圖片識別里面的內容,用戶更沉浸更聚焦的去選自己喜歡的點擊進入消費就可以了。但是唱吧的視頻截圖其實是不能識別里面內容的,大家可以看到,第一張圖是一個妹子,第二場圖是一個妹子,第三張圖還是一個妹子,那用戶點擊進去的動力在哪兒了?除了這個照片長相之外,更多的其實是文字決定的,是這個人唱的這首歌的歌曲名是不是我喜歡的,或者是這個演唱者的的歌手等級。

          所以基于這種跟深層次的邏輯,唱吧和快手兩款產品的這個頁面都是為了促進消費轉化,但是UI長相上完全不同。


          我們看第三個例子:


          同樣組件下,選擇不同的交互方式,也會使得效果完全不同,比如現在有一個UI頁面,主要由一個tab(iOS叫segment controlled)組件控制下面的內容,樣子張這樣:


          我先假定一個前提:這個app中的這個組件不支持橫劃,只支持點擊切換。

          好了,現在我假設這是一款已經穩定運營了一年的產品,為了說明問題,我假設一個理想數據:

          假設每天有20W的uv訪問這個頁面,其中分流情況是:

          10Wuv消費“推薦”下的內容

          2Wuv消費“生活”下的內容

          1Wuv消費“段子”下的內容

          3Wuv消費“美女”下的內容

          4Wuv消費“游戲”下的內容


          這時候,為了優化交互行為,有一天決定把這個tab組件從不可橫向劃動改成可以劃動的(并且告訴用戶這里可以滑動了喲~),然后給你一次機會重新排列這五個tab順序,你會怎么做呢?最簡單的辦法當然是把五個tab按照用戶消費意愿逐一排列,即:“推薦、游戲、美女、生活、段子”。

          這樣排列當然沒有任何問題,但是還有沒有更優解呢?我給出的解決辦法是這樣的,大家評判一下:

          按照用戶的消費量,“游戲”是消費量第二的一個tab,毫無疑問我會把它排在第二項,這樣可以刺激用戶劃動行為,然后“美女”是消費量第三的,我會把他放在第四位,這時候我會把“段子”和“生活”這兩個消費率最低的tab分AB test做兩個版本放在第三和第五位拿去測,以判斷之前的“段子”和“生活”是由于自身內容不夠優質,還是之前交互成本太低導致的數據較差:



          最后我們來看第四個例子:


          比如一個app,他的UI張如下圖所示的這個樣子


          現在假設在運營和市場團隊不做任何努力的情況下,單從產品交互的角度,能不能優化上面這個版塊的點擊率?

          首先我們來分析一下頁面架構:

          如果我們認為,不管是點擊右上角的“>”,還是點擊留個圓形入口都算完成轉化的話,我們現在的這個紅色的UI組件,入口位置一共有7個。根據長尾理論,如果我們把這個圓形入口從6個擴展到比如九個,是不是一定對轉化率有正向影響?答案并不一定:

          為什么呢?因為主要是這樣的改動會帶來一個未知的泳道橫劃交互,它會產生一定的影響,如下圖所示:

          用戶看到這個泳道之后可能出現三種行為:

          a.“用戶完全不滑動”——那入口就從7個變成了7.5個,別的沒有變量影響。

          b.“用戶滑動看完了之后,點擊某一個或者左上角的“>”進入”——這是我們想要的轉化

          c.“用戶滑動看了這些圓形入口之后松手,就是不點擊進去”——這是我們不愿意看到的結果

          想到這里,那為什么我們不能讓用戶直接滑動之后松手就跳轉呢?


          想到這里,所以優化方案如下圖所示,給與用戶一個x軸區間,滑動手勢操過那個區間則告訴用戶你現在松手默認跳轉,用戶不愿意跳轉也可以回劃,只要不足這個x區間就給與用戶自主選擇的機會:


          我之前在上家工作的時候,我們把6個圓形入口變成了10個,然后用這個“松手跳轉”的交互把單元模塊的穿透率從21%提升到了31%,這是一個實戰當中的真實例子。


          當然了,請大家再思考這樣的一個問題:


          一個頁面的流量就這么大,一個地方漲了11%,那勢必別的地方就會相應的損失11%。一般情況下app首頁承擔著80%以上的分流工作,根據流量漏斗來看的話每一次引流都會導致其他模塊的數據下降,所以設計師們應該要根據運營策略和公司大的產品OKR來合理選用合適的交互組件,以達到想要的目的,還是那句話:“小孩兒才分對錯,大人只看利弊?!?




          Part - III 從交互的維度量化用戶體驗

          移動互聯網產品設計中,尤其是在中國的app產品,有兩大分歧陣營:

          “扁平”陣營表示了,我們需要產品足夠扁平,最好就是三次交互可以觸達所有app界面:

          “簡潔”陣營也表示了,我們需要頁面信息足夠簡潔,最好一個頁面只完成一個核心任務:



          雙發你來我往,誰也說服不了誰,如下圖所示,“簡潔”陣營反駁“扁平”陣營說:你們一點都不遵守席客定律,層級扁平是扁平了,但是相應的頁面信息變得越來越多,給用戶呈現的干擾就越來越多,用戶做出決定的時間也越來越多,所以你們“扁平黨”都是辣雞。這時候“扁平”陣營也找到了反駁的論點,他們說你看你頁面足夠簡潔了,但是頁面層級就很深啊,交互成本這么高,每一次都伴隨流失,可用性這么差,你們還有理了?所以“簡潔黨”你們才是辣雞!


          中國的互聯網產品,很難做到既簡潔又扁平,這個問題的根源在于永遠有那么多信息需要呈現,永遠有那么多功能需要添加,這個是中國的激烈市場競爭導致的,并不是說中國的產品就不如國外的好(我的哥哥之前在Facebook現在Airbnb工作,他經常感嘆道國外的互聯網產品到中國來真的都得死...)我想要討論的是,面對中國現在互聯網產品市場現狀, 如果一款產品非要你站隊上面兩派陣營,你會選哪一派?我現在的選擇是“扁平黨”,因為用戶面臨一款眼花繚亂的app,如果是經常使用,缺功能布局信息架構很少改動的前提下,早晚也會習慣和適應的,但是如果一些核心的東西不能第一時間暴露在用戶眼中,很有可能用戶就不知道你有這種功能。這個就是為什么我們設計經常會說這個產品經理傻逼吧,怎么什么東西都想展現出來,這一堆東西找個入口集合收起來頁面多干凈多清爽多好看呀~~我早年間也是和諸位一樣的觀點,但是現在我越來越覺得,界面清爽了,你的大功能feature因為設計隱藏沒有被發現,不是設計開發測試都白做了么,說好的ROI在哪里?


          我們大家都是互聯網從業者,不管看到這篇文章的你是一位設計、產品、還是開發、測試、運營人員,我們都明白用戶體驗這個詞是由N多維度綜合而成的一個過程性評價,它和方方面面都有關系。



          那既然是這么專業且牽連甚廣的一個名詞,我們真的就沒有辦法去量化評價它了嗎?

          永遠不要忘記,用戶體驗是個過程,而我們每個人也都是用戶本身。在這里我提供一種普通用戶維度的比較好用的用戶體驗評估方法是“窮舉分析用戶行為路徑”。


          比如你是一款外賣產品的設計師,那么用戶在不同產品模塊下定一個外賣的流程路徑大概有多少種,都窮舉出來。比如你是一款在線演唱類的產品設計師,那么用戶在產品中完成一首歌需要的用戶路徑到底有多少條,窮舉所有路徑之后一一優化,讓路徑變得更加扁平,或許是一個最“笨”但是有效的方案,怎么優化呢?用淘寶消息頁舉個例子:


          淘寶消息頁上面有“交易物流”、“通知”、“互動”三個tab,這時候我們假設一個用戶三個按鈕下面都有消息,用戶想要看完這三個消息大概需要幾次交互?答案是至少6次:“點擊第一個進去 - 返回 - 點擊第二個進去 - 返回 - 點擊第三個進去 - 返回”,這樣的交互顯得呆板且冗長,淘寶團隊巧妙的把三個內頁集合成一個頁面的三個tab形式,大大縮短的交互成本,這就是所謂的“把用戶路徑變得更扁平”:


          大家在使用很多產品的過程中,多多留心就會發現原來細節里面總有魔鬼。


          文章來源:站酷   作者:Seany

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


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

          純純

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


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



          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營銷工具化


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


          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.沒有規律且過多的配色

          讓界面或者插畫看起來非常混亂。一般來說顏色的使用也需要有側重點,所以我們常用的方法是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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          圖標設計,你需要了解這些...

          純純

          目錄

          • 圖標風格匯總

          • 圖標設計流程

          • 案例講解

          • 圖標資源輸出



          01 常見圖標風格匯總

          • 線性

          • 面型

          • 線面



          1、線性

          • 單色

          • 雙色

          • 漸變

          • 不透明度

          • 一筆成形

          • 斷點



          1.1單色

          單色線性擁有簡潔、清晰的特性,在視覺層級上較低,適用于基礎功能圖標。b端較為常見,移動端常見在設置頁面或導航欄通知、分享等圖標設計上。 


          1.2雙色

          雙色線性在單色的基礎上豐富配色,解決了單色線性原本過于單調的問題,在提升趣味性的同時,也將視覺層級進行了提高,同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化,需要考慮是否符合產品風格及主流目標用戶審美。 



          1.3漸變

          線性漸變還可以在用色上進行區分,簡潔的用色可以給人帶來科技、炫酷感,在車載ui中較常見。豐富的漸變配色則更適合運營入口設計,有著年輕化、熱烈的氛圍。 



          1.4不透明度

          線性雙色可以和不透明度風格進行很好的比較,前者視覺更跳躍,個性更鮮明。而后者在使用時普適性更強,即豐富配色細節,又避免視覺過于跳躍(可以把它理解為同類色配色)。所以在大多數使用場景下,不透明度風格都是一個很好選擇。 



          1.5斷點

          斷點風格有線性單色&雙色該有的個性,并且在線性雙色基礎上繼續提升趣味性,使用需要注意產品目標人群年齡段。 



          1.6一筆成型

          該風格設計感和個性都極強,很考驗設計師對造型繪制的把控,功底不夠就很容易導致設計后出現識別問題。所以設計難度較大,且延展性較弱,難以表達復雜語義,使用需謹慎。



          2、面性

          • 單色

          • 雙色

          • 不透明度

          • 晶白

          • 磨砂玻璃

          • 等軸側(2.5d)

          • 漸變

          • 新擬態

          • 輕質感

          • 明暗質感

          • 寫實

          • 抽象

          • 卡通插畫

          • 像素風格



          面性與線性的區別在于前置視覺面積更大,整體視覺層級比線性高。下面部分和線性風格重疊的內容就不贅述。




          2.1單色



          2.2雙色



          2.3不透明度

          面型不透明度風格,通過調節前后不透明度可以帶來較強的空間感,使用場景較廣泛。



          2.4晶白

          晶白嚴格來說也算質感圖標(白色質感)的一種,常見于品類圖標設計,通過透明度、投影、漸變等參數調節,使整體立體感和空間感都很強。



          2.5磨砂玻璃

          又叫毛玻璃風格,是通過背景模糊,或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受,但由于容易與淺色背景相融,造成對比度不足難以識別的問題,所以在使用中需要注意無障設計。



          2.6等軸側

          也叫2.5d,有很強的趣味性,及識別度,適合重要入口或運營設計。但這類風格較為卡通,且表現花哨。使用需要注意應用場景及目標人群年齡段,避免干擾信息閱讀和不符和產品風格。



          2.7漸變

          這類風格可以很好的吸引用戶注意力,在電商、美食類產品中較常見,主要注意配色干凈協調。



          2.8新擬態(Neumorphism)

          新擬態圖標色彩相對單一,與背景融合度較高,通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大,再有這類風格與背景對比較弱,無障設計問題較大。



          2.9輕質感

          通過大量漸變、投影來表現立體感,整體風格偏年輕化,常見在教育類產品中,使用注意配色干凈和諧。



          2.10明暗質感

          通過調節同一色相不同明度、飽和度來營造前后空間感,整體風格統一。


          2.11寫實

          這類圖標特點很明顯,有極高的識別度,目前美團外賣品類區入口就是該風格,整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。



          2.12抽象

          通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術(裝飾)價值更大,不追求識別度,美觀即可。



          2.13卡通插畫

          這類風格既可以做圖標又可以做空狀態插圖,設計美觀有特色即可。



          2.14像素風格

          這類移動端界面較少見,目前只在一個海外電商產品(Jollychic)中看過,還有就是一些像素游戲中,比如「泰拉瑞亞」、「我的世界」。



          3、線面

          • 線面

          • 描邊插畫



          3.1線面

          和線性雙色圖標類似,趣味性較強,具備個性化特點,可以做Tab選中狀態。 



          3.2描邊插畫

          類似卡通插畫,在卡通插畫基礎上加入描邊。同樣顏色,在一些特定的前后交接處利用線條做區分,算是多一種設計表現形式,同樣美觀有特色即可。 




          4性格

          • 粗線

          • 細線

          • 圓角

          • 直角



          4.1粗線

          力量感、穩重、男性等感受



          4.2細線

          品質感、精致、女性化 



          4.3圓角

          安全、親和、年輕



          4.4直角

          嚴謹、正式、果斷利落 

          由于圖標風格繁多,所以以上列舉并不包含所有圖標風格。



          02 圖標設計流程

          • 明確語義

          • 關鍵詞詳解發散

          • 確定風格

          • 提取造型

          • 創意輸出



          1、明確語義

          圖標存在的目的是起引導作用,在豐富頁面視覺的同時,幫助用戶更快的獲取信息(當然圖標的使用意義還有很多)。設計師在將文字翻譯成圖標前,必須先理解其文字含義。因為最終呈現的圖標,需要用戶一眼能準確反翻譯其中含義(藝術抽象、裝飾類圖標除外)。

          在C端設計中,以Tab為例,一些常見文案:首頁、分類、發現、我的,這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說,目前在做一款網站搭建工具,后臺常會需要設計組件及對應的圖標,比如:滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標,在一定程度上會比較難精準傳達文案。



          2、關鍵詞詳解發散

          這一步有點類似情緒版使用,但不同的是:我們需要將確定的詞(A)進行詳細解釋,再將解釋文案中關鍵的詞語進行發散,得出一系列相關聯的詞(A1、A2、A3…)。有時間還可以根據這些詞找到對應的圖片,再看在這些相關聯的圖片中,有哪些細節可以傳遞最開始我們確定的那個詞(A)的意思。



          3、確定風格

          我們可以借助情緒版,根據產品定位和目標用戶描述,再結合應用場景,在目前已有的風格中找到符合產品氣質,符合當前模塊視覺層級的圖標風格。

          前面我們已經了解了目前常見的圖標風格有三大類:線性、面型、線面,其中還有很多細分,比如在線性中又分粗線(沉穩、力量)、細線(品質)、曲線(女性化),還有圓角、直角,每種類型所傳遞的感受都不同。在創意前期,我們將每個點合理進行隨機組合(如下圖)即可創造一種更新穎的風格。



          4、提取造型

          經過關鍵詞詳解發散,其實我們已經獲得了很細節點,接下來將這些細節點進行合理融合后,就可以得到代表同一語義但形式各異的基礎圖標樣式(此時還只是想法階段,可以通過手繪方式記錄組合形式,不用特別精細化)。




          5、創意輸出

          在設計執行前我們需要先了解兩個大知識點: 
          • 圖標設計規范

          • 圖標設計注意點


          5.1圖標設計規范

          • 常見圖標尺寸

          • 圖標盒子使用


          5.1.1、常見圖標尺寸

          在界面圖標設計中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



          5.1.2、圖標盒子使用

          什么是圖標盒子?其作用是什么?

          圖標盒子即圖標約束網格,來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。



          5.2圖標設計注意事項

          • 簡潔美觀

          • 易于識別

          • 細節統一

          • 像素對齊

          • 視覺大小一致

          • 飽滿透氣

          • 融入品牌基因



          1、簡潔美觀

          圖標是否美觀,會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中,通常會盡量減少不必要的細節,降低圖標復雜度,來幫助用戶快速識別。當然圖標也有豐富細節的做法,常見在一些重要運營入口上。



          2、易于識別

          識別度的問題,在最前面明確語義中就有提到過,這里就不贅述。



          3、細節統一

          在細節中包含:表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等(不同風格圖標的細節不同,這里只是列舉部分),上述細節在系列圖標中都應保持一致。



          4、像素對齊

          在圖標繪制中,需盡量避免坐標位置xy或寬高參數出現小數點,以此保證最終導出的圖標是清晰的。



          5、視覺大小一致

          由于不同圖標外輪廓不同,就會導致哪怕在物理大小上相同的圖標(假設都是24x24),但視覺上可能還是會給人大小不一致的感受,因此我們需要借助前面提到的圖標盒子進行約束調整。


          6、飽滿透氣

          圖標的飽滿透氣,不一定需要加入很多筆畫(描邊、裝飾等)細節。而是盡可能在形成風格的同時,簡化能影響識別度的關鍵筆畫,通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。


          以如下途牛_我的頁面_功能區圖標為例:

          圖中標紅圖標就存在飽滿度不足,及內部較擁擠的情況,第一感受是看起來不舒適,品質感比較低。除此外,還存在如下問題:


          • 圖標大小很明顯不一致

          • 設計語言不統一,有圓角有直角

          • 圖標風格不一致,有透明度+分割形式(我的保單)、有純透明度形式(專屬顧問、我的收藏)、還有其余單色實心形式



          7、融入品牌基因

          在圖標中融入品牌基因可以有效的提升產品品牌感,作為高階設計師必備技能之一,常見提取維度:

          • 顏色

          • 設計語言

          • Logo輪廓 


          以我之前的豆果美食項目為例,提取到如下細節:

          顏色:提取黃色、綠色兩類顏色 
          曲率(設計語言):品牌Logo走線順滑、自然、圓潤,個性鮮明 
          分離(設計語言):黃色區域與綠色區域雖不相交,但存在聯系。(分離間留白) 


          根據提取到的基因,最終得到如下兩套風格不同,但語言相同且都具備品牌感的圖標。


          Logo輪廓:在圖標中融入品牌logo外輪廓(Google Play),或根據logo輪廓結合應用特性進行延展(Microsoft)。



          03案例展示

          就以途牛為例,對我的頁面功能圖標進行優化。 


          1、明確語義

          根據文案進行詳細翻譯,幫助我們充分理解文案。



          2、關鍵詞詳解發散

          以「專屬顧問」為例:

          釋義:有專門的知識或經驗,受聘為機關團體或單獨個人提供專門咨詢的人。

          提取釋義中關鍵信息,生成關鍵詞:專業專人,再根據關鍵形容詞發散一系列具象名詞。



          3、確定風格

          根據產品調性和模塊視覺層級以及考慮延展性,初步確定如下風格組合起來是比較適合:


          線性:雙色、不透明度、斷點 
          面性:單色、雙色、不透明度、輕質感、明暗質感 
          線面:線面 


          在實際查看中,發現Tab的風格為單色+不透明度+斷點風格。

          為了和Tab拉開差異,最終確定以如下風格進行組合表現比較符合產品調性:

          線性:雙色

          面性:單色、雙色、不透明度、輕質感、明暗質感

          線面:線面



          4、提取造型

          通過手繪或大腦想象進行造型構思,這里我就不展示手繪過程(行吧,我承認就是畫的太丑了不敢放)。



          5、設計執行

          由于不同風格對圖標造型構思有所影響,且圖標類型很多,不同特點組合起來樣式更多。案例精力有限,所以只以線性雙色風格做演示,希望大家靈活使用。


          這一步就是將手繪圖形矢量化,在矢量化創意過程中,我們可能會對手繪的圖形進一步簡化細節或新增造型,這都很正常。只需注意在整個繪制過程中遵循圖標設計規范,以及注意圖標設計注意事項即可。

          圖標盒子使用


          創意輸出


          Tips

          在繪制造型時需注意,圖標文案詳解中的關鍵詞也有優先級,以如下「禮品卡」圖標為例,是表達禮品的意思多?還是表達卡的意思多?這個會影響圖標中相關元素的面積大小。站在商業角度看可能會更傾向于方案2,突出禮品,來吸引用戶。站在入口文案清晰傳達的角度,可能我會更傾向于方案1。 

          1or2?


          最后對專屬客服進行多風格嘗試,最終效果如下:


          附上部分繪制過程中的淘汰稿:



          04圖標資源輸出

          在將圖標輸出給前端前,需要溝通好使用何種格式,目前常用圖標格式分為兩大類: 


          矢量格式

          • SVG:縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態,減少重復上傳。


          位圖格式

          • PNG:支持透明格式

          • JPG:兼容性強,適合大尺寸高飽和度圖像

          • GIF:動態圖標使用,缺點是透明情況下邊緣容易出現鋸齒。



          這里主要介紹靜態圖標中,svg格式在工作中如何輸出給前端同學使用(借助iconfont)。


          svg圖標交接方式:

          1、圖標資源優化

          在iconfont官方繪制指南中有描述,在導出前需要按如下規則優化圖標資源:



          2、選中圖標導出svg格式

          以Figma為例,優化圖標資源后,選中圖標將輸出格式選擇為導出svg。



          3、上傳iconfont

          在資源管理下,選擇需要上傳的位置。


          選擇上傳圖標 



          4、選擇顏色提交模式

          去除顏色并提交:適合單色圖標,去除顏色提交可以方便前端使用代碼修改參數,減少不同狀態圖標重復上傳。

          保存顏色并提交:適合多色圖標(注意:在單色情況下,選擇保留顏色提交,前端則無法通過代碼修改圖標顏色)。



          最后當我們把圖標都上傳好后,就可以將前端同學拉入團隊項目中開心進行玩耍。



          好了,以上就是本篇要分享的全部內容,希望對各位有所幫助。



          文章來源:站酷 作者:幺零三

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          別光抄了,信息卡片應該這樣設計!

          純純

          工作中我們經常會接到一些信息卡片的設計需求,在早期很長一段時間里都困擾著我。和大多數剛入門的小白一樣,當接觸到這類需求的時候,下意識就是打開自己的的Eagle,找合適的參考,去借鑒排版布局。但是其實最后只知道參考這樣做好看,對于作者的設計思路并不清楚。后面我嘗試去總結其中的規律,也得出了自己的一些設計思路。





          02 這里講的信息卡片是什么?

          讓我們先看下各類App中,一些比較不錯的信息卡片長什么樣:




          03 一個信息卡片包含什么內容?

          • 圖片

          • 圖標

          • 文字

          • 標簽

          • 按鈕

          • 布局



          1圖片 】

          圖片理解很簡單,就是該卡片想表達的信息主體,可以是商品、風景、插畫等,PGC內容圖片通常由運營把控,UGC內容為用戶自行上傳。雖然上線后實際上傳的圖片,對于設計來說沒有太多關系,但在設計稿中還是需要嚴格控制圖片質量。(一定程度上也能提高過稿率)

          圖片挑選需要注意如下:

          • 高清無碼

          • 主體突出且簡潔

          • 配圖與文字信息相關聯

          • 多圖片情況下,視線保持同一水平線或同一角度



          2【 圖標 】

          圖標的出現有以下幾類:品牌特定logo、特殊字段圖形化(如性別、定位、點贊、VIP、關閉等等,將字段圖形化后可以減少該組件內的文本信息,方便設計排版的同時提升整體閱讀體驗)、氛圍點綴(主要在于豐富卡片,提升設計感來吸引用戶注意)

          圖標設計需要注意如下:

          • 清晰度:品牌圖標避免過小,導致難以分辨。

          • 識別度:字段圖形化后一定需要確保擁有足夠的識別度,盡量在大眾認知范圍內。比如“+”可以代表添加和關注、“x”代表關閉,“大拇指”和“愛心”代表點贊、“皇冠”代表VIP等等。

          • 風格一致:氛圍點綴圖標在配色上,需要保證與產品調性一致,或在色彩情緒上,與該模塊傳遞的感受一致。還有一些細節,比如線性圖標描邊粗細,圓頭還是方頭端點,這類盡量保持一致(當然也可根據情況演變新的風格,但注意風格種類不宜過多)



          3【 文字 】

          文字即對圖片的描述信息,通常分為:標題、正文、輔助信息、優惠信息、數據信息(評分、價格、點贊評論數等) 

          文字信息處理需要注意如下:

          • 對比:需明確頁面信息權重,突出重點,便于有效傳遞信息。移動端常見對比方式:特殊字體對比、字號差對比、色彩對比、修飾元素(點線面)點綴對比。重點需要注意,避免在一個卡片中,采用過多不同大小字號和顏色去表現信息層級,盡量使層級精簡與規范。

          • 對齊:保證卡片內信息之間存在某種視覺聯系,信息結構清晰。對齊方式分類:左對齊(符合左到右的閱讀習慣,閱讀體驗最佳)、右對齊(閱讀類文本比較少見,一般是為了將分好組的信息填充卡片四角)、居中對齊(居中傳遞嚴肅、正式感,在移動端中較少見,適合信息較少的情況下使用)

          • 親密性:將信息通過留白、分割線、色塊等方式來成組劃分,避免信息散亂。



          4【 標簽 】

          標簽指活動通知、產品賣點、重要時間、優惠信息等這類需要突出的內容,標簽按視覺層級由高到底依次劃分為:異型標簽、色塊型標簽、描邊型標簽3大類。 


          標簽處理需要注意如下:

          • 視覺層級:一個卡片內可能出現不同類型的標簽,比如同時有活動通知、優惠信息、產品關鍵詞,這個時候就需要了解各類信息重要層級,正確選擇標簽形式(異型、色塊、描邊),幫助用戶快速抓住產品重點。

          • 極限場景:標簽內字段不宜過長,需要考慮最大寬度,進行合理布局。(牽扯到屏效比)

          • 呼吸感:合理定義標簽內部文字與底板的上下左右間距,避免擁擠。

          • 設計感:標簽多數是帶有活動屬性,在設計手法上可以嘗試破型設計,還可以嘗試加入一些小圖標、紋理,一方面營造活動氛圍,提升產品品質感。一方面圖標具有一定語義,可輔助用戶識別。(適合單個特殊標簽添加,而不是一類標簽,因為多個一樣的標簽配上圖標同時展示太亂)

          • 對比度:在色塊標簽中需要重點注意,通常色塊標簽又分以下3類:有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字,在挑選顏色時需注意文字與底板對比足夠清晰,減少閱讀障礙。



          5【 按鈕 】

          按鈕是卡片上最重要的元素之一(部分卡片也可能沒有),作為一個行動點,Ta的作用在于吸引用戶點擊。按鈕在表現形式上和標簽一致,我們最常見的有彩色底板+白色文字、消色底板+消色文字、描邊框+文字(有彩色描邊或有彩色字)。 


          按鈕和標簽在處理上很相似,可參照標簽。



          6【 布局 】

          布局指上述所有圖片、圖標、字段等信息,在卡片內的排布方式,常見布局方式:上下布局、左右布局、居中布局。 


          信息布局需要注意如下:

          • 拓展性:卡片中字段的長短對布局的影響較大,字段較長且多的情況下需要的占用的空間更多,所以常見是上下布局。

          • 屏效比:上述拓展性與屏效比的關聯緊密,在卡片中,為了保證一行文字最大顯示,通常文字都是單獨一行,避免左右存在元素占用文字橫向空間。但單獨一行就意味著增加了卡片高度,雖然單個卡片內文字顯示多了,但整個一屏中展示內容變少。為了便于理解上面這段話,這里我們可以看到淘寶這個案例,淘寶的推薦卡片中信息很多,在遇到文案很長的情況下,為了平衡上面講的這個問題,使用到了如下較少見的布局方式。

          • 合理性:在列表式左右布局中,是選擇左文右圖,還是左圖右文。這需要看產品類型,在新聞資訊類產品中常見是左文右圖,而在美食、電商類產品中是左圖右文。再有在信息布局上也應符合人眼左到右,上到下的閱讀習慣。



          04 如何做好一個信息卡片?

          • 明確產品類型

          • 明確應用場景

          • 了解目標用戶

          • 劃分信息權重

          • 同類信息歸組

          • 增強信息對比

          • 設計細節表現

          • 確定最終布局


          1【 明確產品類型 】

          產品類型不同主要對布局產生影響。

          • 以文字為主的產品,比如前面講到的新聞資訊類,通常采用左文右圖的布局。

          • 以圖片為主的產品,比如美食、電商類,通常采用左圖右文或上圖下文。 

          原因:新聞資訊類,吸引用戶產生點擊的并不是因為圖片,而是具體的標題,通過標題用戶才能了解更多關于該卡片的信息。而美食、電商類產品則相反,這類產品圖片比文字更吸引人。



          2【 明確應用場景 】

          在我之前一號店改版中提到,信息卡片可以分為列表式和卡片式兩大類,對應的優缺點如下: 


          卡片式:在卡片式中圖片是設計的重中之重。這是因為人是視覺動物,在卡片式設計中使用高質量的圖片能瞬間抓住用戶的眼球??ㄆ皆O計實現了圖文的完美結合,能給用戶呈現良好的視覺效果。

          應用場景:

          • 圖片為主,需要利用圖片給用戶帶來良好的視覺沖擊,提升瀏覽過程中的趣味性,從而吸引用戶長時間瀏覽。

          • 適合隨機推薦的內容,不適合進行查找。

          • 豐富內容展示,適合元素較多情況,可以讓各種形式的元素保持井然有序。


          列表式:信息集合一般是簡單的圖文組合(小圖+標題)或純文本信息。由于列表垂直排列每一行內容,相對卡片式,在同樣大的屏幕中可以展示更多內容,可供用戶閱讀信息更多,新聞類和數據類應用更青睞于這種設計。


          應用場景: 
          • 信息直白,用戶無需點擊查看,即能盡可能了解內容信息,適合快速查找。

          • 文本重要程度高于圖片,需要靠標題吸引用戶點擊。

          • 小屏幕應用場景。




          3【 明確目標用戶】

          目標受眾的屬性,對信息權重的劃分影響很大,比如對價格敏感的用戶,優惠信息的視覺層級就需要抬高。為了便于理解下面的案例,這里我定義的就是對價格敏感性用戶。



          4【 劃分信息層級 】

          定義了目標用戶后,將卡片內所有元素羅列出來,并借助四象限分析的方法,對各個元素的權重進行劃分。



          5【 同類信息分組 】

          將同類信息分組,便于后面確定元素之間的親密性關系。



          6【 增強信息對比 】

          前面我們借助四象限,將信息重要程度進行了劃分。接下來對元素之間親密性和對比進行處理,設計用戶瀏覽視線,在該過程中對案例中的元素進行如下處理:

          • 圖片:這里圖片及比例保持不變

          • 圖標:將原版會員圖標+字段的方式更改為圖標,原因有兩個:1、會員圖標+字段的方式占用了較多的橫向空間,導致標題字段信息展示減少,同時還導致用戶在閱讀完標題后,閱讀下一行內容時視覺錯行嚴重(會員圖標+字段過長導致)。2、由于會員圖標代表會員內容,這是絕大對數產品對用戶有過的教育,所以這里重設了會員圖標并單獨展示。

          • 字體:對標題字體進行加粗,(16pt,Medium),價格字體加大加粗(24pt,Medium),劃線價加粗(12pt,Medium),按鈕文字&活動標簽文字(14pt,Medium)精簡其他輔助信息層級(12pt,Regular)

          • 標簽:優惠信息標簽由0.5pt改為1pt,提升視覺層級。活動標簽為色塊降低不透明度+有彩色文字。

          • 按鈕:由于標簽為描邊樣式,為了拉開差異,突出按鈕,所以將按鈕改為實心色塊。


          做完上面這些后,可能大部分人覺得到這就可以了,但其實我們還可以再增加設計細節,這也是你與其他設計師拉開差距的地方。



          7【 設計細節表現 】

          由于案例不同,增加細節的方式不同,所以需要具體案例具體分析。在本次案例中,我通過新增圖標設計以達到豐富卡片細節的作用。在活動標簽中新增小喇叭圖標,來增強活動氛圍、增強信息視覺上的互動性、增強代入感。在按鈕中新增時鐘圖標,配合預約文案,讓用戶預知操作后可能的結果,并且提升按鈕視覺層級、提升點擊欲望。



          8【 確定最終布局 】

          在布局中主要考慮兩個點:

          1、合理性&拓展性

          由于該卡片的應用場景為推薦列表,所以這里保持原有的上下布局,遵從人眼閱讀習慣。

          2、屏效比

          將活動標簽選擇放置在圖片與底板分割處,好處有: 
          • 借助這個方式,使圖文內容過渡順暢,閱讀體驗更佳。

          • 盡可能減少了標簽對產品圖的遮擋。

          • 壓縮卡片高度,最終達到提升屏效的目的。



          解決部分人可能存在的疑惑:


          Q1: 3張設計稿中活動標簽為什么進行修改?

          :稿1到稿2,活動標簽樣式修改,位置調整,對應不同的用戶,對于價格敏感性用戶,顯然稿2更能刺激他們點擊。稿2到稿3,對標簽樣式再次進行加強。稿3到稿4,考慮該應用場景是在推薦列表中,為了避免出現多個同類型活動的卡片,導致過亂,所以修改了設計樣式。


          Q2:在稿3到稿4中優惠標簽這一排內容,和預約按鈕這一排內容,上下調整的原因是什么?

          :1、將文字區域看做一塊完整的矩形區域,稿3整體看起來更完整,而稿2像是右下缺了一個角。2、在信息閱讀順序設計上,稿3的處理是優先讓用戶看到優惠相關信息,更加迎合價格敏感性用戶的需求。


          Q3:你認為最終稿還有優化空間嗎?

          :這個案例,是我截圖與我司相關App的。我認為如果可以,還需要再了解目標用戶畫像,了解用戶真正在意的信息是那些,這些都會對最終方案產生影響,也只有知道這些才能得出最合適的哪個方案。這里我定義的是對價格敏感的用戶,基于這類用戶來說,我認為最終方案是合適的

          文章來源:站酷 作者:幺零三

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          設計師如何高效溝通需求

          ui設計分享達人

          前言

          ——————————

          溝通是為了完成設定的目標,把信息、思想和感情,在個人和群體之間傳遞,并達成協議的過程。溝通目的一般分為:說明事物、表達感情、建立關系、達成目標。


          需求溝通是設計師和團隊圍繞需求目標,信息傳遞的過程,是設計師展開設計工作的起點,貫穿整個設計過程,溝通質量直接影響設計和項目質量。但因溝通復雜性、開放性,對很多新手設計師來說,在需求溝通過程中,可能會碰到一些共同的溝通問題,比如前期需求不明確導致設計頻繁修改、產品和體驗發生沖突時無法說服產品、溝通過程中陷入情緒爭吵、溝通中雞同鴨講等等。


          針對這些問題,本文嘗試梳理需求溝通過程中幾種典型場景和方法,以期幫助新手設計師快速識別需求溝通中的常見問題;提升溝通效率,快速達成共識;掌握溝通竅門,更精準高效的產出需求。


          本文主要分成2個部分,第1部分主要聚焦在需求溝通過程中的不同階段,面對的典型溝通問題和解決方案;第2部分主要介紹溝通中一些常見的技巧和方法。



          Chapter 1

          ——————————

          需求溝通的目標和方法


          1.1 設計師在不同需求階段的溝通目標

          通常設計師在處理需求的流程大致可以分成4個部分:了解需求->分析需求->探索方案->實現方案。在不同的階段,設計師要解決的核心問題不同:


          了解需求階段,設計師和產品針對需求目標進行討論,并和團隊就產品目標達成共識;


          分析需求階段,設計師和產品針對產品策略合理性進行討論,并提出體驗訴求;


          探索方案階段,設計師探索設計方案,并和產品就商業目標和體驗目標達成平衡;


          實現方案階段,設計師和產品協調優先級,調整方案,確保方案最大程度實現還原;




          1.2 如何更好的了解需求,明確目標,達成共識

          在了解需求階段,設計師需要了解需求來源、背景、要解決的問題和目標??偨Y來看需求可大致分為2類:一類是需求目標較明確,產品有明確要解決的問題,如提升產品體驗、滿足某個用戶明確需求、完成某個產品目標;一類是需求目標較模糊,比如挖掘用戶潛在需求,探索新的業務方向。



          對于目標較明確的需求,在了解需求背景、解決標準、需求邊界、限制條件和責任人等問題后,即可進入需求分析,策略討論階段。


          但對于方向探索類需求,如何協助產品探索目標,和團隊達成關于目標的共識,是這階段的溝通重點。以一個創業的項目為例,產品想做一個圖片社區,原因是目前國內沒有頭部圖片社區。還原項目初期的溝通過程如下:



          在產品的催促和時間壓力下,設計并沒有圍繞產品定位、用戶群、產品目標進行充分討論,也沒有和團隊成員達成共識。在這種情況下,選擇跟隨產品的節奏,陷入了被動執行。由于前期并沒有針對需求進行細致的推敲討論,方案的輸出過程變成了試錯的過程。產品方向修改頻繁,這種被動的溝通方式,導致整個團隊目標感不清晰、理解混亂。



          經過反思和問題總結,設計師發起了主動溝通,運用設計方法協助產品明確需求,提升方向說服力,探索如何就目標和團隊達成共識。首先,需要和產品明確用戶群,并尋找用研協助,或發起快速訪談了解用戶;其次,組織團隊相關成員發起關于產品目標的討論,圍繞產品決策人給出的產品初步方向,團隊成員每人寫下對產品的期待,提煉總結團隊成員的想法,提煉總結產品目標再次,根據用戶訪談材料,利用親和圖法,提取關鍵詞,從用戶訴求中洞察提煉用戶目標。最終,產品目標得以明確,團隊也取得了關于目標的共識,同時通過快速demo,來驗證優化,項目得以順利進行。




          1.3 如何更好的分析需求,確保產品策略合理性

          在了解需求背景、用戶群體,明確了需求目標后,進入需求分析階段,通常產品會給一個商業假設:假如做了xxxx,用戶就會xxxxx,產品可以達成xxxx目標。以一個需求為例子:產品想做一個任務體系,通過福利吸引用戶做任務,從而拉動產品活躍。


          如果設計師完全按產品給的商業假設輸出,方案產出過程貌似很順利,但可能隱藏了很多問題。以本需求為例,產品的商業假設邏輯是:用戶被福利吸引->用戶為拿到福利做任務->用戶獲得福利->產品完成目標訴求;


          但這個假設是正確的嗎?設計師的價值就在于,這個時候要能找出產品假設中的問題。通過對用戶的了解和洞察,還原用戶的實際使用過程可能會發生的問題。找到這些關鍵問題并通過和產品溝通協調解決掉這些問題,才能順利實現產品目標。


          通過對用戶實際參與過程的分析,用戶在看到任務獎勵后,實際需要權衡的內容很多,如福利吸引力夠不夠大、有沒有關系親密的好友可邀請、好友要完成的任務難度大不大?分析需求過程關鍵就是找到這些問題的對應策略,強化用戶參與的動力,降低參與難度。




          1.4方案探索階段,如何平衡商業和體驗訴求

          在方案輸出階段,設計師和產品最常發生的爭執是商業目標和體驗之間的沖突。產品為了達成商業目標,很多時候希望把達成商業目標的手段做的很強;



          當發生圍繞商業目標和體驗問題,誰都無法說服對方的情境時,設計師該如何溝通呢?


          首先,作為設計師要擺正溝通立場,理解商業化是任何產品的根本目標,體驗也是實現商業化手段之一,我們反對的不是商業化,而是簡單粗暴的商業化方式,商業化的前提是對目標用戶有足夠的了解和盈利模式的清晰判斷。


          其次,應能夠識別對于曝光越多越好,越直接越有效的這種思維方式,通常是一種鳥槍法的投機心理。在沒有更巧妙的解決方式時,最節省力氣的做法就是提升曝光等方式達成目標。


          當發生爭執時,如果僅僅站在設計立場上,用設計理論說服對方,通常效果有限。嘗試找到產品實現商業化目標背后的邏輯,不要用手段代替目的,探索更好的實現商業化方式的可能性,比如嘗試在合適的路徑上推薦,或探索用戶更容易接受的內容形式。




          1.5 方案實現階段,如何協調優先級,推動方案最大程度還原

          在方案實現階段,很多時候由于時間緊張,產品僅完成最核心功能,部分體驗相關功能一直無法得到優化。


          通常如果方案產品認可,但推進意愿不高時,可能的原因是:1.當前方案不是核心KPI,產品要優先保證對kpi影響最大部分完成;2.投入產出比不劃算,方案在產品看來投入的人力/時間/資源過大,并不值得;3.方案改動可能引發數據風險,產品并無法確保改動一定能帶來數據的成長;4.資源緊張,產品也很想實現方案,但項目時間/人力/資源真的很緊張。



          這種情況下,首先,要和產品夠分溝通他們的疑慮和擔心,到底是哪類問題;其次,從心態上也不用急于一時,做好長期推動的準備;還有,充分優化方案,消除產品疑慮,尋找合適時機進行推動。在項目逐漸迭代的過程中,對需要推動體驗優化點持續關注,盡可能放大方案價值,結合新的需求點,思考能否從價值拓展角度,如提升品牌價值、擴展性等角度提升方案說服力;同時,從縮小成本和打消產品疑慮角度,做足準備,推動方案。



          Chapter 2

          ——————————

          溝通技巧的問題

          溝通的過程是一個信息螺旋傳遞的過程,表達者的信息傳遞到接收者時,因為背景、環境、理解能力、傳遞完整度等差異,接收者僅能接收部分信息,而接收者在理解消化后,再將自己的信息傳遞出去,這個過程循環往復,會導致兩個最常見的溝通問題:目標偏離以及信息衰減。學習適當的溝通技巧,可以有效減緩目標偏離和信息衰減。


          2.1 如何防止溝通目標偏離

          要防止溝通目標偏離,首先要理解什么會導致目標偏離?1.目標不清晰,比如本來想找產品聊下某功能體驗不合理,但因為產品一直說項目時間緊,被傾訴了一通苦水后,忘記了本來要溝通的問題,轉移到了其他話題上,最后不了了之;2.缺乏同理心,比如當發生爭執時雙方不能互換角度,產品一直在說實現目標手段和現階段問題難點,設計在說體驗問題和設計規范,雙方互不妥協,陷入爭吵;3.陷入情緒,表達觀點時陷入情緒化的爭執。


          針對這三個會導致溝通目標偏離的問題,可使用以下技巧:


          ① 設定溝通目標并保持關注:在每次溝通前想清楚自己的目標和底線,嘗試用全局視角分析自己設定目標的合理性;在溝通過程中要經常反思當前溝通的問題是否已偏離了目標,對達成目標是否有幫助;發現目標偏離可嘗試改變節奏,思考接下來說什么有助于達成目標;


          ② 換位思考:能夠傾聽對方的問題和困難,嘗試尋找解決問題的辦法,而不是一直表達訴求,無助于問題的解決和推進;


          ③ 控制/傾聽情緒:美國心理學家埃利斯創建的ABC情緒理論,拆解了事件發生和情緒之間的關系,指出事件的發生并不是導致情緒的直接原因,我們持有的信念才是。因此在溝通中不要加入太多內心戲,過度解讀事件。比如產品讓設計反復改稿時,可能會解讀為產品在故意刁難,嘗試了解反復修改背后的原因,可能對解決問題更有幫助。



          2.2 如何減少溝通過程的信息損耗

          溝通過程中表達者的模糊表達和接收者的理解偏差,會導致溝通過程中的信息損耗。比如經常會聽見產品有以下類似的表達:“設計稿盡快輸出”、“頁面太結構化了,想要更社交化一點”、“能不能做得更有創意一點,更有趣點”當出現這些類似的溝通語句時,可以嘗試通過具體化方式,進行確認。



          對于可能會出現理解偏差的問題,重要的信息用自己的語言組織后再次確認“你的意思是xxxx嗎?”;重要的溝通后,可梳理溝通記錄,企業微信同步周知確認;方案的溝通過程可以快速畫草稿確認;盡可能的減少因為理解不一致導致的溝通問題。



          總結

          在需求溝通過程中,我們要對不同階段的溝通目標有清晰的認識,圍繞目標進行充分準備,運用設計方法了解用戶、了解產品核心訴求,做到知己知彼,才能進行有效的溝通。


          在溝通過程中保持對目標的關注,始終牢記溝通是為了解決問題服務的。適當學習溝通技巧較少溝通過程中的信息損耗。


          溝通是解決問題,共同協作的重要方式。如果你覺得自己不善于溝通,可能要反思下溝通前是否想清楚自己的溝通目標,對于解決問題的過程、方法是否熟悉,準備是否充分?當我們能做到知己知彼、胸有丘壑時,溝通可能就變得簡單起來。


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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          設計趨勢ISUX報告-數字內容營銷篇

          ui設計分享達人

          背景

          數字營銷是指借助于互聯網營銷方式,幫助業務方和消費者建立觸達渠道,實現業務的商業目標達成。按業務類型分為線下產品的數字廣告和數字內容(APP、影音、動漫、游戲等)線上推廣分發。本文主要聚焦在數字內容線上推廣分發上,嘗試從用戶獲取渠道、體驗方式、內容感知、新技術帶來的變化等幾個方面,為相關從業者梳理數字內容流行的營銷方式,以期提供一些啟發和借鑒。


          近年來用戶內容消費呈碎片化、視頻化,多元化趨勢。短視頻內容強勢崛起,這種方式可以讓用戶更輕松、更深度消費內容。在各類營銷類型中,短視頻逐漸成為推廣的重要方式,不僅在實體產品電商領域,日益成為重要的銷售方式,在數字產品的推廣上,也發揮越來越重要的作用。漫威在短視頻平臺注冊虛構報社賬號宣傳《蜘蛛俠:英雄無歸》電影,獲得海量關注和點贊。


          說唱歌手Lil Nas X用《Old Town Road》做BGM在短視頻平臺發起的牛仔挑戰(#Yeehaw challenge),使這首歌曲通過短視頻成為了全球爆款。這首歌在美國地區的流媒體播放量超過了25億次,在Billboard排行榜保持了19周的冠軍。



          美國創作型歌手兼唱片制作人 Charlie Puth 嘗試在短視頻平臺上發布一些旋律,發起了標簽挑戰 #writethelyrics,邀請粉絲們為旋律填詞,這個標簽累計視頻觀看量達到38億次。



          在游戲領域,短視頻/直播內容也正成為分發重要形式。短視頻巨頭已深入游戲腹地,2020年移動游戲用戶與短視頻用戶重合率達82.5%,近六成移動游戲用戶會用短視頻主動搜索游戲內容。短視頻在和游戲內容結合上有先天優勢,消費門檻低,體驗更沉浸,同時也可以快速獲取其他玩家的感受。除此外,對于游戲制作和發行方來說,這里也是通過內容創作獲取用戶的良好渠道。



          游戲依托賽事直播、KOL直播,聚集了大量高質玩家,相較于傳統分發方式,直播具備互動性、真實性、及時性等三大特點。KOL主播可以將游戲最直觀的展現在玩家面前,更可以利用高人氣迅速提升游戲熱度。Facebook gaming現在采用直播feeds的方式進行游戲的推廣,使玩家對游戲體驗感受更直觀。




          黑客帝國4在官網為用戶提供了一段可交互的宣傳視頻,根據用戶的選擇不同,觸發不同類型結局。讓用戶更有代入感和掌控感。有種“我”開啟了一段故事,也更容易帶來體驗上的驚喜感。



          洛杉磯流行藝術家 BIIANCO 為其單曲That’s what friends are for制作了互動音樂視頻,以互動游戲的方式讓觀眾進行多次選擇,探索屬于自己的故事。



          在游戲類內容宣傳上,為讓玩家更直接、更低成本的體驗到游戲的玩法和特點。借助2D、3D以及交互視頻素材高度還原游戲的真實場景,音效、視覺、玩法互動與游戲本身無異,將原有的游戲體驗前置,讓用戶在短暫的廣告展示時間中快速明白游戲的核心機制。




          2021年音頻內容呈爆炸式增長,播客這種很早就有的形式,在今年煥發了蓬勃生機。因為疫情原因,音頻內容呈爆發式增長,相較于其他數字內容表達方式,音頻覆蓋了更多互動場景,用戶可以在通勤、運動和打掃房子的時候在車里播放。


          21年初熱播的《流金歲月》不僅霸屏熱播熱榜,更首次將營銷可能性轉化到“看不見的”聲音領域,最終聯手十多家播客參與多方面討論了女性、友誼、成長等話題,精細化傳播,也讓更多電臺參與創作討論,最終“我的「流金歲月」”主題內容實現了全平臺百萬級的總播放量。


          Beats 就聯合播客《大內密談》推出了一檔名為「一首歌的誕生」的系列節目,主播相征會在節目中和各位音樂聊一聊他們的某一首歌從譜曲、寫詞到錄制的全過程。2021年,《大內密談》連續7年獲得Apple Podcasts年度精選播,擁有400多萬忠實聽眾,單期節目收聽量超過400萬次。




          影音、游戲聯動明星、品牌、知名IP、傳統文化產業、線下活動等等具有影響力的合作方進行戰略合作,擴大雙方影響力。如英雄聯盟和LV的跨界聯動,這款由LV設計的史上最昂貴、最奢侈的游戲皮膚,還未推出就捕獲了無數LOL玩家的心,在讓玩家興奮不已之余,還引發了“這款皮膚究竟有多貴”的討論。



          自2017年騰訊和敦煌研究院達成戰略合作以來,王者榮耀飛天及九色鹿主題皮膚、QQ音樂“古樂重聲”音樂會、敦煌詩巾、“云游敦煌”小程序和敦煌動畫劇陸續推出。三年間,累計超過2.5億人次參與了“數字供養人”,超過4000萬年輕人在王者榮耀中遇見了敦煌飛天,“云游敦煌”小程序目前已接待超過3700萬人次線上游客,40多萬用戶設計了自己專屬的敦煌絲巾,24萬用戶在騰訊公益平臺為敦煌石窟保護項目捐款,15萬用戶在線用聲音演繹敦煌動畫劇。



          2021年底熱劇《風起洛陽》聯動洛陽市文化單位正式發布“華夏古城宇宙”的全新概念,并宣布“華夏古城宇宙” 首發洛陽IP中的劇集《風起洛陽》、紀錄片《神都洛陽》、動畫片《風起洛陽之神機少年》,帶領觀眾開啟探索華夏文明的旅程。




          1)內容二創,形成粉絲傳播文化

          影視劇宣發期,通過話題互動或設置傳播內容,讓用戶創作內容進行傳播,如《魷魚游戲》引發自發傳播的摳糖挑戰也引起更多受眾注意激發用戶觀看。



          游戲也會在上線后逐步積攢口碑和玩家數量,官方在制作游戲時和后期推廣上會提供一些方便傳播的核心素材,由游戲粉絲玩家群體自發進行二次創作產生的UGC內容,也會引發大眾關注。很多玩家會圍繞游戲內容創作出新奇舞蹈、仿妝、COS、攻略、同人剪輯、漫畫等,提供廣泛的話題和討論度。例如《CS:GO》,它通過一條開箱視頻引爆短視頻平臺,打破了消費用戶的圈層,從游戲用戶到泛娛樂用戶,最終令游戲內箱子的價格從0.8元漲至2元,極大地促進了消費。



          2)打造慶典活動,激發用戶共情

          通過大型慶典活動,讓用戶共情,形成記憶共享,將志同道合的人聚在一起,形成文化傳播。如英雄聯盟每年都會舉辦盛大的全球總決賽開幕慶典,并加入一些讓人印象深刻的游戲元素。




          相較于通過中心化推薦方式向用戶展示廣告內容,新的趨勢是廣告主利用用戶社交關系鏈,在facebook、微信、QQ等社交平臺進行分享傳播。通過社交流量的傳播內容,讓受眾覺得更貼近自己,也更可信。相較于其他數字內容,在游戲分發上私域流量日益重要,很多頭部社交渠道在嘗試如何更好的通過私域流量帶動游戲分發。

          1)通過社交動態通知觸達

          Facebook游戲智能助手會在玩家的對手參與游戲后,通過Facebook與Messenger提示對方繼續玩游戲,這種方式可以吸引玩家快速回歸玩過的游戲;同時在首頁好友動態中可以看到好友的游戲邀請動態和相關戰績,對游戲有較高的流量傳播;游戲的高活玩家也可以通過邀請好友對戰或分享游戲活動等方式進行裂變傳播;



          2)線上社區深度觸達

          Discord建立起玩家之間互推、互鑒,玩家與開發者間直接互動的社區平臺;社區內的種子玩家可以更直接地與開發者接觸,讓自己的聲音被聽到;同時他們也是優質的渠道傳播者,將優質的討論內容、游戲動態進行分享,讓渠道轉化效率更高;



          同時Discord可以創建「臨時」游戲語音頻道,可以讓其他成員看到頻道內成員正在玩的游戲;玩家也可以將游戲實況傳輸到服務器,在語音頻道邀請朋友共同觀看自己的游戲“現場直播”,讓玩家的朋友在沙發上重現游戲的感覺;



          3)利用核心玩家作為推廣資源觸達

          游戲開發者利用多圈層KOL的優勢,引導他們產出與游戲相關的UGC,OGC內容,形成話題熱議,從而觸達到目標用戶,這種方式可以增強游戲影響力,甚至產生出圈的效果;比如Youtube通過扶持優秀的內容創作者,通過他們的粉絲圈或者社交關系進行游戲推廣。



          2021年初爆火出圈的社交產品clubhouse,也是在早起利用名人明星和圈子的力量,通過采用邀請制的方式吸引了高質量的種子用戶,帶動app的影響力,提升其在世界產品和科技圈的熱度。




          相較于傳統的機器人客服,機器人進化出了新能力,在數字內容推廣上展現新前景。在Discord中,由第三方機構提供各種數字內容服務能力的機器人,如將Patchbot機器人添加到頻道后,可以將用戶喜歡的游戲資訊/功能更新及時推送到頻道中,讓玩家獲取信息更及時;



          在Discord和Telegram聊天群組中,有很多提供數字產品服務能力的機器人,為群中小伙伴定期推送和主動獲取影音資源。




          隨著元宇宙、區塊鏈技術的火爆,數字內容也展現了不同以往的展示和推廣方式。2021作為元宇宙爆發年,向我們展示了未來的一角。通過虛實結合的互動體驗,數字營銷不再局限于單一的文字/畫面,而是通過多體感的交互,讓用戶全方位的體驗數字內容,為獵奇的互聯網用戶打開了數字營銷新篇章。


          1)虛擬偶像成數字內容推廣重要方式

          2021年,隨著元宇宙基建的推進和爆款案例的頻出,虛擬偶像也迎來了新一波發展高潮,引得不少音樂公司紛紛入局。19歲的加州虛擬網紅Lil Miquela代表了Z時代的社群偶像,她在instagram,youtube,discord等平臺分享自己的時尚穿搭,與名人或朋友的合影及生活想法,甚至她還在Spotify發布了自己的15首單曲。打造了跨平臺的Vmodel身份。



          韓國虛擬模特Rozy,不僅在社交網絡分享自己的穿搭生活,還如同常人一樣,營造看電影的真實體驗,她的代言產品不僅涉及線下美妝,還為線上購物網站,電影等數字產品內容做宣傳推廣;




          2)虛擬演唱會打造多感官音樂體驗

          賈斯汀 比伯舉行了一場由真實動作捕捉的線上虛擬演唱會,比伯在演唱《Peaches》、《Hold On》等人氣單曲的同時,觀看直播的觀眾可以根據場景與比伯進行線上互動:場景切換到田野時,觀眾可以點擊不同顏色的花朵,讓田野生出花朵形狀的流光;



          切換到街頭場景時,觀眾可以把聊天內容或愛心發送到比伯周圍;



          這種虛擬演唱會的形式將全球的粉絲連接在一起,在虛擬場地形成萬人互動的沉浸式音樂體驗。寶可夢25周年,聯合說唱歌手Post Malone推出了自己的虛擬音樂會,馬龍在這次虛擬演唱中共演唱了《Psycho》、《Circles》、《Only Wanna Be With You》、《Congratulations》四首單曲,在虛擬世界中與知名寶可夢一起完成表演;也為新發售的《寶可夢:晶燦鉆石/明亮珍珠》起到宣傳作用;



          3)利用虛擬社區打造游戲/影視宣發新方式

          Decentraland提供了去中心化的社交世界,用戶可以創建自己的虛擬形象,在不同的游戲場館進行切換,為游戲品牌起到了更好的宣傳作用;同時Dcentraland提供了虛擬土地售賣,用戶或開發者購買土地后,通過制作3D場景,發布自己設計的各種產品或服務,這些場景也可以使用VR終端來體驗,用戶或開發者可以發揮無限的想象力進行宣傳創作。



          韓國劇集《魷魚游戲》熱播后,劇集中的游戲關卡在羅布樂思公司的游戲社區被“1:1”還原,其中的游戲“1、2、3”木頭人進入推薦排行榜,吸引了眾多觀眾成為玩家,也讓很多玩家去奈飛追劇,擴大了該影視資源的影響力。



          4)區塊鏈及NFT技術賦予數字內容流通新方式

          伴隨著區塊鏈技術的發發展,有的游戲分發公司也在嘗試通過區塊鏈技術進行游戲發行。如Ultra試圖打造一個基于區塊鏈的游戲發行平臺,通過通證經濟實現更加合理的利益分配。對游戲玩家來說,可以在下載完成前就盡情享受新買的游戲,并在玩游戲時繼續下載缺失的數據。玩家可以自主選擇是否允許游戲內彈出廣告,觀看廣告可獲得通證獎勵,邀請朋友、參與測試和策劃游戲也可獲得相應通證獎勵。因此,游戲玩家既可以即時玩獨家游戲,又可以通過多種方式賺取通證獎勵。



          NFT實現了虛擬物品的資產化與流通化,賦予了數字藏品/游戲/影音等內容的虛擬價值;藝術品數字資產化將拓展影視相關內容的產品鏈,因被賦予獨特的價值,使得其可以通過交易完成變現。2021年10月11日,王家衛首個NFT作品《花樣年華——一剎那》以428.4萬港元價格成交,同時創下王家衛個人作品與亞洲電影NFT作品拍賣價格新高。



          總結

          伴隨著用戶數字內容消費習慣的變化,數字內容呈現方式、渠道和分發方式都在發生變化。可以看到在未來,數字內容制作方和發行方,需要為用戶提供更多元的方式深度進行體驗,同時承載數字內容的平臺也逐步由傳統的中心化渠道向私域流量轉移。作為數字內容發行方,如何有效且長線輸出高品質內容,構建內容壁壘,探索更有吸引力的表現形式、縮短和用戶的溝通渠道,是未來需要深入思考的。

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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          簡單又不簡單的“設置”場景設計

          ui設計分享達人

          一、隨處可見的齒輪


          以一個小小的齒輪(或者扳手)形象登場,“設置”在幾乎所有產品中都是不可回避的模塊,他允許用戶在彈性范圍內自定義產品,來更好地適應實際需求。

          在一些產品團隊的眼里,“設置”或許是一件非常簡單的事情,因為大多設置模塊的使用頻次低,無關核心業務。所以當內容看似非常簡單明確時,“設置”甚至會不經設計,由開發直接上手就干。但這樣簡單處理的結果被擺到用戶面前時,各種糟糕的體驗就紛至沓來了。找不到設置入口、不知道該如何設置的用戶吐槽屢見不鮮。所以說,“設置”,說簡單也不簡單。


          下面我們就從用戶場景出發,深入挖掘設計邏輯,重新認識這個隨處可見的小齒輪。




          二、“設置”的用戶場景


          調研發現,不同性質、體量的產品,“設置”模塊的功能設計存在著不小的差異。

          ToC產品一般會提供關于用戶自身使用習慣的設置,如界面語言、皮膚主題等。而對于ToB產品來說,除了部分與ToC產品重疊的用戶個性化設置內容外,往往還有作用于整個平臺、全體用戶的系統設置權限,當然他們的可見用戶并不是全體成員。


          從上述對功能的簡單描述可以初見,“設置”模塊的目標用戶也不會是一成不變的

          拿我們日常高頻使用的瀏覽器產品來說,設置是開放給全體用戶的功能模塊,但它的使用頻次很低,如一些關于性能、證書的配置,即使是瀏覽器的熟練使用者也可能對它很陌生。也就是說,哪怕是產品的高級用戶,也可能是“設置”模塊的新手用戶。

          而以技術導向的工具型產品為典例,繁雜的系統設置是產品為了滿足不同客戶間、復雜多變的業務規格,在系統中留出的彈性空間。在這個需求場景中,與產品對話的用戶一般是系統管理員或技術支持人員等,他們對系統方方面面的經驗認知都很充足,甚至系統設置就是其主要工作模塊。所以,對于這類用戶場景下的“設置”模塊,“高效操作、成功結果”是至關重要的設計目標。因為高級用戶往往不追求很強的互動性,更希望跳過流程和步驟,直接切入功能得到理想結果。


          面向不同的目標用戶,自然有不同的設計邏輯,本文接下來的內容,或有共同之處,但更側重于面向第二種情況的思考。




          三、“設置”的設計邏輯


          思考“設置”的用戶場景,使得設計邏輯的探討更加有據可依。簡單來看,“設置”的設計可以從三個環節切入:

          • 設置前:如何向用戶展示設置內容

          • 設置中:如何設計用戶的輸入交互

          • 設置后:如何保存生效或發生錯誤的處理


          接下來我也將從這三個環節發散思考,從信息架構、展示編輯、默認值、幫助說明以及保存等多個方面來談談我對“設置”的一些看法。



          (1)做好內容的信息架構

          成熟的“設置”模塊,必然擁有良好的信息架構。這不僅是指“設置”內部的導航設計,同時也包括“設置”在整個產品的層級安排。這些導航、層級的確定,則會受內容信息體量、功能重要程度等影響。

          首先,在“設置”內部規劃一個合理且清晰的導航,需要在信息的深度和廣度之間做好平衡。平衡架構的天然敵人少不了信息量冗雜這個令人頭疼的問題。無論是在單個層級中內容過多,還是層級本身過多,都會給用戶的快速定位帶來考驗。而通過調研發現,如Google、Salesforce等產品都選擇在復雜的“設置”模塊引入了全局搜索來幫助用戶緩解查找某一功能的壓力。

          信息量冗雜帶來的考驗還有那些零散的、彼此關聯不強的設置項。對他們的架構安排,很容易因為不知道怎么組織,便一股腦地塞進諸如“通用”、“高級”等的模糊分類中,不過這可謂是十足的懶人設計。想要搞定這些難搞的信息,設計者需要對設置內容有更深入的研究和理解,搞清楚它改變了什么、會影響什么以及后續是否會拓展更多關聯設置,等等。

          還有一個值得思考的細節:對于豐富多樣的設置項來說,是將他們散落到直接影響的功能模塊中合適,還是匯總于一個設置模塊中更合適呢?或許在不同的場景里答案并不一致,我覺得這需要綜合考慮該設置項的放權角色、配置頻率、配置影響等因素。



          (2)設置內容的展示與編輯

          完成“設置”模塊的基本架構后,就該將目光投向那些具體的設置項了。就常見的設置內容而言,根據其適合的展示形式進行簡單的抽象,主要分為以下兩種:

          1、適合以表單形式組織的內容:一般是具有獨立影響又擁有相同特征標簽的單條數據被整合到一個分組下進行展示與配置

          2、適合以表格形式組織的內容:一般是具有相同固定結構的數據集需要進行統一管理,包括組層面的增刪等

          為每一個內容選擇最合適的展示形式(當然也并不僅是上述兩種),這個選擇大多時候并不困難,因為“設置”場景的目標導向往往比較明確、直接。當然也不排除部分復雜場景的存在,這就需要我們多花些心思,以用戶更易理解的展示形式完成功能性的表達。

          在“設置”模塊,展示與編輯的聯系非常緊密。直接編輯和解鎖后編輯的選擇,主要取決于用戶進入頁面的常規訴求是查看確認還是編輯修改,以及這些設置內容的改動容錯性是否良好,等等。



          (3)默認值與幫助說明里的用戶體驗

          在本文討論的“設置”場景中,每一個更改都可能對整個平臺乃至全體用戶產生影響。通過調研,我們發現多數用戶對于默認值的沿用性不低。故,對于那些需要默認值的設置項,選擇一個合適的默認值是值得審慎對待的問題。

          了解用戶習慣和業務需求是解題的關鍵。什么樣的默認值最貼合用戶的使用習慣,什么樣的默認值能以最佳狀態滿足業務需求。例如,我們的堡壘機產品一般將日志保留時間的默認值設為365天,便是考慮到了用戶習慣與產品性能的微妙平衡。

          除了默認值的設計,恰到好處的幫助說明也可以讓設置的用戶體驗變得更好。

          我時??吹健霸O計的目標應該是完全刪除說明文字”之類的論述,這好像正契合了簡約至上、不要讓用戶思考等當下流行的宗旨。但,正如尼爾森十大原則的最后一條“人性化幫助原則”也指出,幫助和使用文檔是有必要的。

          結合“設置”的自身的特點:這是一個對產品進行底層配置(相對其他模塊而言)的控制模塊,對用戶的認知與學習能力有著不低的門檻要求。也就是說,設置的內容對于用戶是有一定難度的。我們需要更多考慮內容的幫助說明是否充足,不要想當然覺得用戶能夠理解。

          所以,不難想象,設置模塊的說明概率會遠高于產品的主體功能模塊。進一步探究幫助說明的設計:從形式來說,它可以是文案、配圖甚至是一個視頻講解;從強度來說,它可以一次性出現、常駐于頁面或是直接跳轉幫助文檔等。大多數用戶并不希望在設置模塊獲得探索的樂趣,所以無論如何設計,幫助其快速完成任務是我們在設計“設置”時非常重要的一個追求。



          (4)二次提交與即時生效

          “保存了嗎”這不僅是每個設計師在電腦卡機時候會問自己的問題,也是用戶在完成一系列配置操作后的疑惑。這就牽扯到了設置何時生效的問題。最常見的交互方案有兩種:

          1、每一項配置都即時生效

          2、整個表單統一提交后生效

          那么,哪一種方式更好?我繼續嘗試從業務需求和用戶習慣兩個方面入手:

          “設置”模塊的操作往往牽一發而動全身,試錯成本其實是非常大的。之前聽產品經理說過一個銀行客戶因為修改了某個小小配置項,而造成了巨大實際損失的例子。所以,在這樣一個控制中樞般地位的模塊中,即時生效的選用必須謹慎評估操作風險,減少用戶輕易出錯的機會。

          同時,由于即時生效和表單提交這兩種交互方式都非常常見,用戶天然存在一種認知壓力,也就是上面提到的“保存了嗎”的不確定。所以,我們需要通過設計,讓用戶快速且準確地知道當前頁面采用的是何種保存交互。

          從調研和自身經驗得出,以下幾點都是比較好的思路:

          1、實時的操作反饋可以幫助用戶判斷是否生效

          2、盡量控制設置內容在一屏以內,這樣無論是否設計統一提交的按鈕(或者更改后出現),用戶都可以輕易感知

          3、將統一提交的按鈕以懸浮方式明顯地駐于頁面底部,減輕內容超出一屏時的認知壓力

          4、慎重處理如開關、按鈕、滑塊等帶有很強“即時生效”隱喻的控件




          四、簡單也不簡單的“設置”


          對于很多產品產品而言,“設置”是點擊率不高的輔助模塊。由開發人員直接上手,設置項很容易就變成機器語言的直譯、迭代順序下的鋪陳,而用戶是否可以接受這種簡單粗暴的處理,就成了阿甘手中的那盒巧克力。

          從關于“設置”的論述以小見大,哪怕是看似簡單的角落,也存在著不簡單的設計邏輯。我一直覺得,設計對于商業的價值在于推動溝通,即保證產品與用戶的對話“時刻”流暢。所以,不要草率處置那些不起眼的邊緣模塊或簡單功能的設計。

          文章來源:站酷 作者:齊治設計

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          競品分析,如何助力設計洞察

          ui設計分享達人

          設計本身是建立在對用戶、場景、問題的深刻洞察之上,而競品分析是設計師耳熟能詳的設計思維及方法。在自身的階段性成長中,競品分析也為久喬及工作帶來了顯著的增益。

          關于競品分析,大家聊了太多的“如何做”,而我想和大家聊聊“為什么做”。深究競品分析存在的意義,在實踐中設計思路及側重點將更清晰明確,游刃有魚。



          1.  遵循用戶認知


          競品分析能夠幫助產品設計,遵循存在已久的用戶心智模型和產品實現模型——啟發于 《雅各布定律》。


          1.1  看似陌生的《雅各布定律》


          《雅各布定律》由尼爾森十大原則的創立者、尼爾森諾曼集團的創始人之一,雅各布·尼爾森(Jakob Nielsen)提出。

          他認為雅各布定律更像是一種自然規律,只是在描述一個事實,而這個事實就是用戶在其他千千萬萬個網站(產品)上積累經驗,學會如何使用網站,當一個網站跟其他網站一致的時候用戶會立刻知道該如何操作,但如果違反了雅各布定律,那么用戶會毫不猶豫地離開。

          簡而言之,產品設計需要盡可能降低用戶的學習成本,依據用戶存在已久的用戶心里模型及產品實現模型,進行任務和流程設計。

          因為用戶已經將大部分時間花在行業頭部的產品,這意味如果你希望他們能夠愉悅并持續的使用你的產品,那么你的產品需要跟別人的有相同的操作方法和使用模式。


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



          1.2  潛移默化的影響


          遵循用戶認知,對互聯網產品有著潛移默化的影響,也印證了尼爾森的《雅各布定律》。這些“影響”在競品中隨處可見,并且符合設計原則及心理學。


          1)一致的概念模型


          同類型產品給用戶的心理暗示趨于一致,相近的產品實現模型,讓用戶快速理解產品是如何工作的。


          「 社交App合理的概念模型,將會暗示用戶如何發展好友關系:精準搜索 → 發送好友申請→ 建立好友關系 → 即時聊天 → 關注動態... 」


          用戶深受行業頭部產品,實現模型的教育,建立了認知及行為習慣。所以我們會發現,行業誕生的新產品及迭代的頭部產品遵循著一致的概念模型,規避重新教育用戶的成本。



          2)一致的交互示能


          我們在不同類型的產品上都進行順暢的操作,是因為產品向我們示意了一致的可交互能力,簡稱“示能”。


          「 文字末位帶有箭頭,表示可點擊查看更多信息;圖片帶有數字角標,暗示我們可以左右滑動切換... 」


          保證產品示能與行業競品一致,為用戶沉浸式體驗建立基礎,避免用戶使用時產生疑惑二次思考。



          3)一致的頁面映射


          當頁面映射關系是用戶所熟悉的,已存在的認知便可讓用戶觸達目標,免去學習成本。


          「 協同軟件的消息頁面,頁面結構及功能分布大同小異,明確地傳遞各元素之間的映射關系:選中聊天列表的對象,右側會出現對應的聊天窗口,窗口下方的輸入框可以發送新的消息?!?



          4)一致的視覺意符


          主要體現在產品表現層的視覺符號,傳達給用戶的意義一致。


          「 小紅點表示有未處理的信息;“筆”代表可填寫或修改。」




          2.  打破思維邊界


          為自身產品尋求體驗及商業的更多可能,打破既定的思維,是競品分析的關鍵。圍繞不同類型的競品,直接競品及間接競品,設計師的分析側重點及借鑒取舍也有所不同。


          2.1  取長補短


          對于產品目標、核心功能、用戶群體高度一致的直接競品,設計師在明確目標后,梳理核心功能設計與競品之間存在的差異,取長補短。

          剖析競品體驗層比自身產品出色的原因是什么,如何更好地解決用戶的痛點;當然也需要反觀自身產品存在優勢的關鍵,能否通過數據、反饋再進一步拉開差距。以及如何規避短處...


          「 2月登頂免費社交榜的“啫喱”App,通過創造的潮玩虛擬形象的新型社交產品,可進行各類有趣的虛擬形象互動。同樣布局虛擬社交的大廠,字節跳動也推出了“派對島”App,潮玩形象可結合實景化的實時線上活動社區,可以說是各有千秋。

          二者便是典型的直接競品,將會不斷的迭代,共同期待他們相互的“取長補短”吧!」



          2.2  尋找跳板


          由于互聯網的信息透明,直接競品趨于同質化,給與設計師的啟發也有限。因此,將目光轉向間接競品是非常有必要的。

          尋找產品目標、用戶群體相近但存在差異,但業務場景及功能也有一定相似性的競品,作為思維的跳板,或許能為止步不前的現狀注入靈感。


          「 Chrome 最近上新的插件 Jam,這款插件可以在直接網頁上打標記、錄制gif、評論,并且和項目管理工具 Linaer 打通,可及時將信息同步給項目人員,提高項目協作效率。

          在企業協作平臺中,視頻會議、線上協作等協同產品的在線標記功能,完全可以對“Jam”這款插件進行分析,來實現對于關鍵內容的信息傳遞流程和用戶體驗的提升!」



          2.3  擁抱變化


          盡管有些產品在業務及用戶上與自身產品沒有重合,但是在行業理念、實現技術、交互行為層面,極具前瞻性。在合適的時機,嘗試將前沿的“變化”,融入自身產品,轉化為產品設計的亮點。當然這取決于設計師平時對科技、行業的關注及積累。


          「 21年飛書妙計上線,令人眼前一亮:飛書可將會議中的音視頻內容,實時生成文本形式的會議紀要!

          ToB業務中,多人交流協作的場景,比如客戶接洽、人選面試,如果相關業務功能加持音視頻自動轉文字的能力,用戶記錄內容的體驗及效率想必也會有所提升。」




          3.  驗證設計思路


          借助競品分析,能夠幫助設計師發散思維、尋找設計突破點。在設計思路聚焦的環節,我們也能通過競品分析進行驗證。


          3.1  源于五要素


          資源允許的情況下,設計師可以基于《用戶體驗要素》中的五要素:戰略層、范圍層、結構層、框架層、表現層,對競品進行全方面的競品分析。

          戰略層分析主要圍繞“為什么開發產品”,我們可以了解競品的產品目標、用戶需求,以及二者結合的商業目標。為了達成最大化商業效益,競品進行了哪些成功的業務、商業化設計。

          自家產品的戰略層目標,與競品的是否有共同點或者相似性。如果有,已制定的設計策略與競品成功的解決方案是否存在差異,能否解決產品目標及用戶需求,在競品分析中能得到初步驗證。


          「 鼓勵“先進團隊,先用飛書”的企業協作平臺,飛書桌面端在團隊切換后數據隔離展示。也正因如此,左側導航在常用功能區下方,預留特定區域便于用戶快捷切換團隊,提高效率;

          然而釘釘桌面端在同一個信息容器,展示多團隊的協作信息(如即時通訊),將團隊切換的功能入口隱藏至二級菜單,盡管有“串場”風險,還是將更多的空間留給常用功能,“讓工作學習更簡單”。

          顯然二者的差異化設計,歸根于各自的戰略層考慮,用于達成特定的產品目標和用戶需求?!?


          范圍層等其他幾個要素,都能夠驗證相應的設計思路。



          3.2  考證可行性


          為了提高團隊產研效率及商業效率,設計創新或借鑒都會相對謹慎,避免沉沒成本。

          所以在一些資源相對緊張的項目中,為了及時驗證多個設計方案的可行性,可對競品類似的功能設計進行分析,再結合現有的資源(排期、開發投入),從多個設計方案中確定解決方案。


          「 在系統表單設計中,提交前用戶存在多次編輯的訴求。為了給用戶提供更靈活高效的體驗,關于表單的保存,我們團隊預想了3個,在用戶體驗、技術實現上有較大的差異的設計方向:

          • 1)用戶主動觸發保存

          • 2)用戶離開詢問保存

          • 3)系統自動實時保存

          顯然自動實時保存的體驗最佳,也是團隊傾向推動的方向。但B端系統中的使用相對少見,考慮用戶的學習成本及技術實現,落地及項目收益存疑。

          但發現間接競品,云文檔(語雀、飛書文檔、印象筆記)的內容實時保存功能,非常貼近我們的體驗預設。

          最終敲定方向 1,圍繞用戶構建自動保存的體驗認知。間接云文檔的實現方式做降級處理,數據僅僅保存在前端瀏覽器緩存,而不是像云文檔一樣直接存儲至云端服務器。項目落地設計目標,并沒有暫用過多的開發資源,項目也如期推進。」


          文章來源:站酷 作者:久喬_9Joe
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          用戶體驗設計發展簡史你知道嗎?

          seo達人



          history-of-ux

          是什么讓你選擇這家餐館?剛進去的時候,餐館給你的第一印象是什么?服務員是否讓你在等候一陣子之后領你去合適的座位?菜單放在桌子上的什么位置?瀏覽體驗如何?你點了哪些菜?上菜的速度夠快么?味道地道么?服務員夠不夠勤快體貼?你是否還想去這家餐館吃?

          所有的這些問題都關乎你對于這家餐館印象的好壞,也直指這家餐館的用戶體驗本身。

          當然,我們通常所說的用戶體驗(UX)所針對的對象大多是數字和科技產品或服務。這也就意味著,用戶體驗設計本身至少有著進一步提升的可能性。

          現如今,用戶體驗設計已經成為了一門重要的學科,快速地發展,并且擁有極大的成長空間。雖然這是一門擁有多學科背景的新興學科,但是向上追溯它的發展歷程之時,我們會發現早在文藝復興時期之前它就已經存在了。

          在爭論用戶體驗設計會帶領我們走向何方這種大命題之前,回顧一下用戶體驗設計發展史上的精彩瞬間,應該能給我們許多啟發。

          公元1430左右:達芬奇的“廚房噩夢”

          Michael Gelb 在他的著作《如何像達芬奇一樣思考》(How to Think like Leonardo da Vinci)中講述了米蘭公爵委托達芬奇為高端宴會設計專屬廚房的故事。這位偉大的藝術大師將他一貫的創造性天賦運用在這次廚房設計中,他將技術和用戶體驗設計融入到整個廚房的細節里面,比如傳送帶輸送食物,也首次在廚房的安全設計中加入了噴水滅火系統。

          davinci

          有意思的是,達芬奇的設計很多開創性的設計一樣,不足也非常明顯。傳送帶是純人工操作,工作不太正常,更麻煩的問題出在噴水滅火系統上,失靈的設計捎帶手毀了不少食物。

          當然,雖然達芬奇的這次嘗試令廚房化身為噩夢,但是作為用戶體驗設計的早期實踐,卻有著無比重要的歷史意義。

          20世紀初:Taylorism 和工業革命

          Henry_Ford_and_Barney_Oldfield_with_Old_999_1902

          作為最早的管理顧問之一,機械工程師 Frederick Winslow Taylor 撰寫了《科學管理原理》一文,深刻地影響了工程效率領域的研究。隨著Henry Ford的福特汽車實現大規模生產,Taylor和他的支持者們也逐漸完善出了勞動者和工具之間高效協同交互的早期模式。

          1948:豐田人性化的生產系統

          toyota-commemorative

          和福特一樣,豐田不僅在設計和生產效率上非常重視,而且對于人工輸出效率也非常關心。生產過程中裝配工人受到了更多的重視,幾乎不亞于對技術的關注。精益生產模式的巨大成功,使得人與技術之間的交互得到了更多的重視。

          1955:Dreyfuss ,為人的設計

          美國著名工業設計師Henry Dreyfuss 在這一年寫下了著名的設計書《為人的設計》(Designing for People)。

          dreyfuss-01-458-2

          在書中,他寫道:

          當產品和用戶之間的連接點變成了摩擦點,那么工業設計師的設計就是失敗的。

          相反,如果產品能讓人們感覺更安全,更舒適,更樂于購買,更加高效,甚至只是讓人們單純地更加快樂,那么此處的設計師是成功的。

          隨著人與產品的接觸越來越多,他在書中所講述的許多設計規則,被大家越來越多地引用。

          1966:迪士尼和開心效應

          Magic_Kingdom_Construction_08-19711

          在迪士尼世界早期建設階段,Walt Disney 在公告中是這樣描述它的:“…它(迪士尼世界)會成為一個堅持使用最新的技術改善人們生活的地方…”他的想象力和技術的結合,為全世界所有人帶來了無限的開心和喜悅,并激勵著設計師們(尤其是用戶體驗設計師)前行。

          1970s:施樂PARC和個人電腦

          pa_alto2

          作為施樂最出名的研究機構,PARC為隨后大范圍普及的個人電腦的設計型態和交互邏輯定下了基調。Bob Taylor,作為一名訓練有素的心理學家和工程師,帶領著他的團隊構建出了人機交互領域最重要也是最普及的工具,包括圖形化界面(GUI)和鼠標。(隨后喬布斯和蓋茨先后訪問了PARC,參考了施樂之星的設計,為今天的蘋果和微軟開辟了通向未來的道路。)

          1995: Don Norman,第一個用戶體驗專家

          身為電氣工程師和認知科學家的Don Norman加盟蘋果公司之后,幫助這家傳奇企業對他們以人為核心的產品線進行研究和設計。而他的職位則被命名為“用戶體驗架構師”(User Experience Architect),這也是首個用戶體驗職位。

          11484403695_e95d161896_b

          在這個階段,Don Norman 還撰寫了經典的設計書《設計心理學》(The Design of Everyday Things),直到今天它依然是設計師的必讀書。

          2007: iPhone

          2007年MacWorld上,喬布斯發布了iPhone,稱其為“跨越式產品”,并承諾它會比市面上任何智能手機都要易用。隨后,iPhone不僅兌現了喬布斯的承諾,而且徹底改變了智能設備領域的格局,蘋果公司再一次登頂,成為世界上最成功的公司之一。

          only-starter-iphone-jobs-pic-131004

          iPhone的絕妙之處在于,它融合了當前最卓越的軟件和硬件系統,借助革命性的電容觸摸屏而非傳統的物理鍵盤來同用戶進行交互??梢哉f,初代的iPhone所提供的用戶體驗,遠遠優于同時代的任何手機。

          這也在無意中讓智能設備的軟硬件研發和相關領域將重心放到用戶體驗上來。蘋果公司強調他們是通過提供出色的用戶體驗贏得市場成功和無上榮譽,其他人自然而然就跟隨這他們的腳步前進。

          用戶體驗的未來

          用戶體驗設計發展史上的每一個重要里程碑,都源自技術和人性的碰撞?;ヂ摼W和新興技術正在越來越多的介入我們的生活,我們可以遇見到用戶體驗設計會來接下來的日子里,一日千里地發展前進。只是這種發展也越來越多地需要專業技能,跨領域協作,多學科實踐,比如用戶研究、圖形設計、客戶支持、軟件開發等等等等。根據 indeed.com 網站的統計數據,在用戶體驗設計告訴發展的今天,單過去的15天里,就有超過6000個相關職位的招聘需求發布在網上。

          the-disciplines-of-user-experience-design_51029d505f014_w587

          互聯網不再單純的局限于我們的筆記本電腦和智能手機,可穿戴設備,智能汽車和智能醫療設備也都會接入網絡。全球互聯的時代賦予專業的用戶體驗從業者更重大的責任,用戶體驗設計也不再局限于屏幕和像素,超出外形,關乎生活每個細節的用戶體驗設計無時無刻無處不存在。

          所以,不論你是達芬奇還是福特,是泰勒還是喬布斯,你都擁有著無限的可能性和海量的機會,改善用戶體驗,創造更美好的世界。


           

          文章來源:優設
          優設譯者:@陳子木

          轉載請注明:學UI網》用戶體驗設計發展簡史你知道嗎?

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

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

          存檔

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