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





          章節一:為什么要堅持國際化設計?



          堅持走國際化設計的背景

          出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺,國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式,使得成熟的經驗可以快速運用到國外,從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】,想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的

          那有什么好的方法和理論能夠讓設計提前著落,為業務帶來一線用戶信息和設計價值呢?接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計,讓自己的設計價值有理可依


          *以下內容與公司無關,更多的是基于筆者國際化工作經驗的復盤,如有錯誤,歡迎指正(Salute~)



          寫在前面

          首先我們要知道,一套通用的設計標準很難在多個國家吃的開,從而拿到用戶信任

          我們先來看個案例,這個是日本UBER司機端和日本滴滴司機端對比

          最明顯的區別在于,滴滴國際化在日本業務和Global業務這塊,司機端采用的是移動端(global)+平板端(日本),而UBER則是一套方案解決全球問題,可能有些人會問,一套設計不是成本更低,效率更高么,為什么非要制作兩套。這就要從決策成本的角度去考慮問題,而日本市場相對于滴滴其他地區市場有著完全不同的因素,涉及到了資本,使用場景,市場地位,用戶畫像等多方因素決定,這時的【成本與效率】已經無法排在做與不做的第一位了,接下來我們通過兩張照片來看下日本司機的接駕場景

          通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣?是不是明顯發現他們的年紀相對的更大一些?會穿制服佩戴白手套? 那年紀更大是不是意味著司機的視力會相對于中年人有所下降,白手套是否會影響他操作屏幕交互,那針對這么不同用戶群體是否需要單獨設計呢?最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢?


          那我再來舉兩個例子來看看,我們來看看針對日本本地化做的特殊設計細節在哪些方面?



          案例一:針對司機群體老齡化設計———大屏幕設計:

          日本屬于老齡化國家,司機平均年齡更是在50歲以上,高齡人群的視力相比于青年處于退化階段,因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情,UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計,更大的屏幕降低了司機誤操作可能性的同時,也能將字體放大,盡可能讓司機方便識別



          案例二:針對日本司機人文的設計———語音接單

          “日本服務業發達,體現在服務的細節。出租車司機出于對客戶的尊重,都會戴上白手套。但是在帶著手套的時候,司機很難去點擊屏幕進行操作,而且在行車過程中,觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為,于是開發了語音接單的功能??紤]到司機群體的年紀特征,我們選用了在日本相對普及又好識別的“了解しました(りょかいしました)”進行快速語音接單,在新版本上線后,司機可以通過屏中屏的方式去學習語音接單功能,只有他完全掌握這個功能才會為他完全展現,如果司機因為自身原因無法很好地說出那句話,我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計


          (圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠)




          國際化設計的思維框架

          通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】

          怎么樣讓國際化的設計有法可依,我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景,那一個場景由哪幾個方面組成,簡單來說是由【業務】+【用戶】組成,這并不難理解,我們作為產品設計師,首先是背靠業務,解決公司的商業訴求,給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中,我們會將商業訴求和用戶價值進行一個有效的結合,從而滿足雙方,但是還不夠,因為一個場景還依賴客觀的條件,比如時間和空間維度,最終也會影響整體的質量,我們將所有的因素通過包含關系展示出來

          接下來我們往細的方向進行拆解,【業務】根據公司行業,階段的不同以及基礎能力的不同,呈現的點也不盡相同。最核心的點在于當前所屬階段,是1.0階段力求生存下來,還是說2.0和競品之間產生差異化,還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同,對于1.0階段來說,更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭,通過差異化(殺手級)的功能形態獲取更多的搖擺用戶

          不同的賽道,業務不同,打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢?我們先來列舉些具象的特征:

          【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成,但是光有畫像基礎并不精確,因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下,用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】,最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里,獲得用戶認可,特別是在20年后,疫情的爆發導致設計師無法到前線進行真實有效的實地探測,那么加強合作以及對齊目標,為業務拿結果將是重中之重,接下來,我將對于每個影響【用戶】的因子進行舉例講解








          章節二:如何快速了解你服務的用戶



          做任何的設計都離不開用戶畫像,而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

          可能你知道,在給拉美客戶做單的時候他們會要求你的界面顏色亮麗,看起來更加奔放,而在給亞洲客戶做單的時候則會相反,整體看起來更加約束。但是你能清楚的知道背后的原因么?如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像,去支撐你的設計。答案是有的,他就是【霍夫斯泰德文化維度理論】


          霍夫斯泰德文化維度理論(Hofstede's cultural dimensions theory)是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序,能將一群人與其他人區分開來。通過研究,他將不同文化間的差異歸納為5個基本的文化價值觀維度


          百科連接:霍夫斯泰德理論詳情 (<-點擊快速查看)

          完全不懂的可以看看上面的鏈接,我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

          了解完霍夫斯泰德理論以后我們該如何去使用呢?我們先從拉美用戶和日本用戶的差異對比開始

          通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】,差值比例達到了46和44.

          接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例,去理解背后的原因



          男性化與女性化(Masculinity versus Femininity)

          日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現;而日本男主外女主內,62%的女性在第一個孩子之后選擇辭職,也是男性氣質的另一表現.

          在日本想要成為一個出租車司機,就要在5年之內不能有任何違規,某些地方還會有特殊的考試,這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后,才能被評為A級或者AA級別的出租車,雖然這僅僅只是一張小貼紙,但是他也代表著一個出租車司機的榮譽。在這一方面,也體現日本社會的男性氣質的確定性。

          相比較日本,巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心,也是其社會的核心價值觀。對于一個家庭而言,家人共同用餐的時間是非常重要的,還有星期天的燒烤活動,能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事,甚至無法聯系上他們:)



          長期取向與短期取向(Long-term versus Short-term)

          日本人將生命視為一個非常短暫的時刻,所以調查發現日本人普遍相信宿命論,他們鼓勵節儉和現代教育的努力,作為為未來做準備的一種方式。

          巴西相較于日本經濟落后,人民的收入水平普遍不高,很多司機收入僅僅能夠維持一家的支出,很難有結余,在巴西工資會按照周維度支付,以保證一家人的生活開支能夠承擔。

          針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡,允許司機隨時提現且提現速度遠遠大于了當地的其他銀行(48小時),那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中,我們將錢包打造長了本地生活平臺,我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為,原本需要走到線下便利店的服務被我們搬到了線上,更是大大的方便了使用99卡的群體。未來呢,我們將加大加多權益,達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值,同時我們也給業務帶來了價值,更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口

          (99與當地銀行合作的線上本地生活功能-99Pay)



          不確定性的規避(Uncertainty Avoidance)

          日本地處自然災害頻發地帶,沒有豐富的自然資源,生存條件不太好,所以日本人有很強的危機意識,學會了為任何不確定的情況做好預防措施,對待事情也希望有明確性

          而巴西雖然處于平原,沒有自然災害,但是因為社會安全因素,整個社會對于社恐事件還是有較強烈的危機意識,所以司機會更加關注接送流程中是否會前往不安全地區,以及乘客的質量

          (日本司機的真實駕駛場景)


          費用收取的正確與否也是服務體驗優秀的表現,日本司機會用計步器進行計價,如果涉及到了其他的費用則會使用單獨的計算器進行精確計算,這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執,那從這個環節來看,司機為了規避【計算錯誤的可能】而預備了計算器,減少了差體驗的可能


          在巴西,滴滴如果對司機派單如果過遠會或者是危險地區會進行提示,允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護,那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師,是不是意味著可以把危險地區的派單做的更加醒目,讓司機能夠更快識別,更快決策,而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強,讓司乘都能更加快捷第一時間選擇自助服務









          章節三:繞不開的硬邊界



          法律法規的約束

          每個國家的發展階段不同,對于隱私重視程度不同,因此針對不同地區的海外市場,作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案,這一點格外需要注意,不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的,因此在空投其他國家之前需要了解是否立法關于隱私相關的法律,如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

          LGPD和GPDR風控合規

          簡單來說就是要做到信息安全,保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣,各種權限,各種信息默認保留和上傳。但是隨著各國的重視,個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD,在歐洲有GPDR


          GDPR 是(The European General Data Protection Regulation )的縮寫,即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過,在?2018?年?5?月開始強制實施的規定。

          GDPR 意義在于推動強制執行隱私條例,規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準;另一方面,對于自身的數據,也給予了用戶更大處理權。也就是說在18年生效之后,如果再有歐洲任何公司App不對用戶的數據進行合規處理,擅自收集信息就將會受到嚴懲



          智能硬件的普及度以及新舊

          硬件的普及率以及新舊差異也同樣影響著本地化設計,通過調研和外界公布的數據我們得知,在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展,但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配,這樣做是為了最好的進行向下兼容,從而保證所有用戶都能夠使用。同樣,如果你在給發展中國家做設計,那么復雜的動效和高清晰解析的大圖最好是不要去做的

          (網上后臺數據展示截圖)



          當地的網絡環境和下載速度及物流環境

          拉美國家,基建水平滯后,網絡下載的速率波動較大,且存在不穩定的情況,以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難


          舉個例子,司機端的歷史列表如果存在400條記錄,如果司機有訴求想刷新查看更多的訂單,是一次性下拉刷新展示全部好呢?還是一次性展示50條好呢?還是一次性展示20條呢?


          答案是一次性展示20條是最穩妥的選擇,因為網絡的不穩定性,一次性加載太多數據會導致過長時間,而網絡不穩定極有可能導致下載失敗,并且一次性下載太多數據可能并不符合司機查詢的最初訴求,反而浪費司機的寶貴流量,最終會引擎流量消耗過快引發進線,這里的決策是損失一些用戶的體驗去保障司機的收入,但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜,因此我們可以嘗試使用一次性加載全部的數據,這樣能讓體驗感受更好

          (99信用卡的申請權益展示/激活流程頁面)


          再舉個例子,拉美物流相對沒那么發達,且因為政治/經濟局勢的不穩定性,導致物流包裹存在無法送達的情況,如果收件人不知曉當前的狀態而超出了等待的預期,那么他就會進線詢問。那在這個場景我們有什么更好的辦法?是否可以透傳更多的包裹進度方便收件人查看,再者再將用戶導流到客服自助而非進線?這樣的好處一來體驗的鏈路完善了,讓司機可以找到自助的出口,二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大?從而探索新的業務,發現新的機會點








          章節四:生活習慣和歷史文化遺留帶來的本地化策略



          收入/支出方式占比反映了一個群體的現狀

          聊這個話題前我們先將選擇的范圍進行收縮,聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出,難有結余。這也導致司機會選擇雙開(同時使用UBER接單或者其他競品)或者進行其他賺錢的方法,如果整個群體都是這樣的情況下,那么司機的忠誠度(這里指的忠誠度不是貶義詞,而是每周的出車時長)必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題


          我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類,基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類,物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么,我們是不是可以豐富收入以外的獎勵形式,提供活動獎勵或者權益的折扣,又或者嘗試下小額貸款,那這些是不是可以給用戶帶來價值點呢?


          精神層面我們是不是也有發揮的空間,對于補貼,往往是有限的。那如何做到持續長期刺激司機群體?如果一個乘客對于司機進行了表揚和小費的激勵,是不是可以給司機帶來更大的信心去服務好乘客,那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵,讓司機存在足夠的擁有感和成就感,讓司機群體也能感受到平臺對他們的看重。如果勛章可以,那等級是不是也是成就之一呢?



          現金與線上支付普及與思考

          不同的國家線上和現金的支付比例大不相同,這里受經濟環境和政治環境影響較大。總的來說習慣了線上支付的習慣后就很難回到現金支付的環境,因為確實更加方便便利。一個國家大量使用現金支付的情況下,往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊,在與當地的銀行和機構進行合作,增加卡和賬戶的滲透率。然后通過做權益和服務,滿足用戶的生活訴求,從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活




          文字的適配/i18n翻譯的本地化(不同地區/國家語言精準翻譯,拒絕里語/文字長度折行問題)

          這里我們需要提到一個概念,i18n(其來源是英文單詞 internationalization的首末字符i和n,18為中間的字符數)是“國際化”的簡稱。在資訊領域,國際化(i18n)指讓產品(出版物,軟件,硬件等)無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說,在不修改內部代碼的情況下,能根據不同語言及地區顯示相應的界面。 在全球化的時代,國際化尤為重要,因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n(“本地化”的簡稱)


          了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺,所有的本地化設計在經過研發代碼實現后,都會進過他們去對文案進行翻譯校對,最終變成當地人可以理解的話術落地到界面上,從而進行本地化的空投,但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字,而西語和葡語是英文的1.25倍到1.5倍之間,而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯,還需要把控字符長度,避免折行和省略問題


          我們來看下下面這個例子


          (不嚴謹的快速翻譯,只是為了更方便的展示不同文化下的文字長度)


          不同國家的語言不同,文字也不同,則會存在單詞,句子長度/行高的差異。如果一個產品在初期沒有做好適配的話,到后期替換當地語言的時候極有可能出現文字溢出的問題,這也是為什么在做海外設計的時候最好拿當地的語言進行設計,能初篩出一些細小的問題 ,避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題



          中東國家客戶的產品需要注意適配

          如果你服務中東客戶,務必需要呈現出當地的閱讀排版方式(尊重本地化設計)具體的適配細節這里就不過多說了,網上搜索【RTL適配方法】即可

          (Material Design中的RTL適配)



          縮寫是否合適(日期/業內專屬名詞)- 時間格式/貨幣符號/聯系方式/地址等

          格式也是做國際化中一個非常常見且體現專業度的地方,不同國家的時間展示方式不同,會影響用戶的閱讀,舉個例子“03/08/2019”,如果在A國理解是2019年3月8號,在其他國家復用是會存在理解成2019年8月3號的,更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通,保障閱讀的習慣和當地一致,那貨幣符號/地址等也應該遵守當地的習慣去展示,通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認,將格式記錄下來,最后與研發根據上線的國家展示不同的格式









          總結

          因為時間倉促,無法面面俱到的將每個點都進行舉例論證,盡可能把我認為重要的點都提了出來。理解了這篇文章并不代表看懂看明白就能做好國際化,它更像是一個方法論,幫助沒做過國際化業務的同學能夠快速理解當地的用戶和業務的打法


          希望我的文章能夠拋磚引玉,給大家一些靈感,也希望更多朋友能夠將國際化的經驗分享給設計的朋友們。讓我們一起把中國互聯網國際化的業務做到越來越好


          最后引用我一老哥的話進行收尾“更好的國際化就是以更好的本地化思維去看待,去理解它們。而不是僅僅以一個理性的角度去看待。要站在用戶的角度去看,永遠不要輕易地相信自己的理解

          文章來源:站酷  作者:大寶蛋

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


          設計師要懂的用戶習慣

          ui設計分享達人


          前言:


          前些天對用戶習慣進行了總結,這兩天重新優化了一遍。我們在互聯網產品的設計過程中,有時會聽到一個詞:用戶習慣。設計師希望嘗試更多新穎的交互方式、視覺效果,卻常常容易被其他人挑刺指出不符合用戶習慣,建立在用戶習慣上的創新才是好的體驗。


          盡管設計師經常將用戶習慣掛在嘴邊,但是卻很難有人說出用戶習慣究竟是什么?我們如何判斷所做的設計是否符合用戶習慣?用戶習慣是否始終不能打破?道理我都懂,就是不會做,實際上確實是這樣,因為很大程度上取決于設計師對用戶習慣的理解深度。


          用戶習慣本身很難被量化,但是不代表就是一個模糊的概念,你仍然能從用戶反饋、操作行為數據對比等分析中一窺究竟,用戶習慣是可以隨著設計師的學習、經驗、眼界等的提升而提升的。



          什么是用戶習慣?


          心理學上認為,習慣是人在一定情境下自動化地去進行某種動作的需要或傾向?;蛘哒f,習慣是人在一定情境中所形成的相對穩定的、自動化的一種行為方式。 習慣形成是學習的結果、是條件反射的建立、鞏固并臻至自動化的結果。

           

          所以,習慣有兩大特點:


          需要注意的是,“長期”本身是是沒有明確時間界限的,更強調多次的重復。這里的習慣,側重于描述“習得性”,即人們通過經歷、學習、刻意練習等方式形成的,所以這種習慣理論上是可以被改變的。


          此外,習慣還有一種潛藏特性,區別于上面描述的“習得性”,是天生的、物種特有的行為模式。比如人空腹狀態下,聞到香的食物會產生強烈食欲。這種特性習慣是刻在基因里的,幾乎無法被改變。



          試想,我們在使用 App 時,是否遇到過因為習慣的問題而感覺到不適應的場景?


          舉個最常見的例子,Windows 與 Mac 系統的軟件關閉方式。使用 Windows 的電腦時,我們形成了關閉操作在右上角的自然習慣。后來開始使用 Mac 電腦,關閉方式都在左上角,在一段時間內,每次關閉時都感覺到格外不習慣。而 Mac 的關閉方式沒有比 Windows 產生顯而易見體驗升級,改變操作習慣成本高,部分用戶可能會認為 Mac 的關閉操作不好用。


          當然,假如最開始接觸的是 Mac 電腦,再使用 Windows 電腦,也會自然認為 Windows 不好用,這是先入為主的觀念,一旦產生習慣,改變習慣將產生一定的學習成本。

           


          用戶習慣的產生


          設計師需要思考用戶行為的本質,而盡量減少主觀判斷。產品是給人使用的,所以了解人們的行為特征很重要,而只要涉及到對人本身的了解,就是極其復雜的,人類對自身的行為特征了解遠遠不足,但這不妨礙我們以現有知識去做一些分析和判斷。


          用戶行為習慣的產生,與記憶的特點有很大關聯,我們可以把記憶劃分為外顯記憶和內隱記憶。


          外顯記憶大家比較習慣和容易感知到,比如我們在學校學習時背誦的課文、公式法則等,可以用語言、文字等顯性方式描述出來的記憶。


          內隱記憶也叫非陳述性記憶,我們無法用行為描述而又確實存在,比如騎單車,學會之后很難會遺忘。剛開始學習時,會需要意識的介入,經過多次練習,行為會逐漸“自動化”,比如學習開車時,我們會注意力很集中,而習慣開車后,可以一邊開車一邊聊天。

          我們平時說的肌肉記憶、條件反射也和內隱記憶息息相關,而且一旦形成,不太容易改變。需要注意的是,肌肉記憶只是一種簡單描述,負責此記憶的是小腦,其實肌肉沒有記憶。


          所以有時候,我們感覺體驗某個 App 時,會習慣性在某頁面尋找某功能,或者覺得體驗和其他 App 有區別,都可能是內隱記憶的用戶習慣引起的。舉個例子,某天你剛使用一個沒用過的 App ,這時你想要找設置功能,那你大概率會不自覺的點擊 App 的最后一個主 Tab (如“我的”),因為大部分 App 的設置功能都在這個場景,用戶自然也就形成了習慣。


          這里我且采用由心理學家基思·斯坦諾維奇(Keith Stanovich)和理查德·韋斯特(Richard West)率先提出的術語,用以說明大腦中的兩套系統,即系統 1 和系統 2。


          ·系統1的運行是無意識且快速的,不怎么費腦力,沒有感覺,完全處于自主控制狀態,也叫快系統。

          ·系統2將注意力轉移到需要費腦力的大腦活動上來,例如復雜的運算。系統2的運行通常與行為、選擇和專注等主觀體驗相關聯,也叫慢系統。


          而這兩個系統,是可以互相轉化的,慢系統通過刻意練習,把新的習慣注入快系統,而這時快系統就是習慣的表現,這樣快系統可以在日常生活中完成大部分工作,這就是我們常聽說的熟能生巧,習慣經常能幫我們節省思考的精力,這又讓慢系統進一步通過刻意練習,向快系統不斷注入更多好習慣。


          舉個例子,你剛用一個 App 時,可能需要先體驗一下你要的功能在 App 的哪個位置,但你用久之后,就會不假思索地找到它。就像你用微信,最常用的功能可能是回復信息、看朋友圈,所以一定會形成習慣。但是假如有人讓你找一下微信里面“生活服務”的入口,你可能會先想一下可能出現在什么入口,這就是因為平時比較少用導致的。假如你常用這些入口,也會形成習慣,下次要使用這些功能的時候,就能夠快速找到。



          避免改變用戶習慣


          1、挑戰用戶習慣的風險


          既然說到用戶習慣的特點是“長期養成”且“不易改變”,那么挑戰用戶習慣一定會造成不適,甚至引起強烈反感。幾年前 Ins 的 logo 改版,將 logo 由擬物化改成了扁平化,顏色也發生了變化。暫且拋開視覺效果不說,從用戶視覺記憶上,已經習慣了下圖左側的效果,而右側新版效果很難與左側產生記憶上的關聯。


          許多用戶反饋桌面上找不到這個應用、許多用戶吐槽很丑甚至不想再使用。所以我們比較容易理解,為什么有時候 App 改版容易反而引起用戶的反感,這很大程度上是用戶習慣的影響。



          2、如何避免挑戰用戶習慣


          產品的用戶是誰?


          了解產品的用戶是誰、用戶的行為特點是什么。不同產品由于定位不同,所以用戶群體也不相同,用戶群體的不同自然代表用戶行為特點的不同。如果設計師知道用戶群體,但是不清楚具體行為習慣特征,可以嘗試讓你身邊的用戶幫你體驗。


          舉個例子,B 站的整體用戶畫像相對而言更偏年輕化,所以產品設計上,無論是代表形象、UI 風格、交互體驗都更顯年輕化。而“小年糕”小程序的用戶群體主要為中老年人,所以設計上不會顯得很年輕,而是以操作明確、字號偏大、去除多余信息為主。


          關注競品的體驗


          關注主流產品的用戶體驗很重要,這些競品的操作往往代表用戶的習慣操作(或被培養出來的習慣操作)。大多數情況下,你需要了解競品能做到什么程度,用戶容易將習慣從一個場景帶到另外一個相似場景。


          比如點外賣,有的用戶可能會下載美團和餓了么,盡管平臺不同,但是在用戶習慣中,操作模式是相似的,所以如果你要讓用戶的體驗不突兀,那就往往遵循相似的操作邏輯。當然這些不是為了讓一個產品去抄另外一個產品,而是要追尋更好的使用體驗,你的產品比競品體驗更優,就更能吸引用戶的青睞。


          了解人類的行為/閱讀模式


          每個人本身都會具有相對穩定的行為、操作、信息閱讀習慣,我們能見到的體驗好的產品,都是符合用戶的基本行為習慣、信息閱讀習慣的,要想了解這些習慣,需要了解深層次的交互行為特征。


          從操作而言,需要了解用戶與界面交互的行為習慣,比如用戶的操作(手勢操作、信息布局如何才能便于操作),比如尼爾森可用性原則等。


          從信息閱讀角度而言,需要考慮人們眼睛觀察事物的規律,比如格式塔原理:接近性原則、相似性原則、連續性原則、閉合性原則、主體/背景原則、簡單對稱性原則、共同命運原則。


          了解平臺設計規范


          就移動互聯網產品的領域而言,大家都是與手機互動,目前手機系統的兩大平臺:iOS 和 Android 也都各自有提供關于人機界面設計有清晰的指導,尤其是 Android 的 Material Design ,對于設計師快速了解設計規范、設計原則有很大作用。


          iOS 與 Android 的人機界面規范鏈接:

          iOS:https://developer.apple.com/

          Android:https://material.io/



          培養新的用戶習慣


          1、何時培養新的用戶習慣?


          我們提到挑戰用戶習慣會有風險,但用戶習慣并非是永遠不可改變的,有時我們需要培養新的用戶習慣,也就是大家常說的“教育用戶”,否則世界可能一直很難進步。


          移動互聯網興起之前,大家都是線下打車,但是滴滴打車顛覆了傳統線下打車的用戶習慣;以前大家都是現金支付,但是微信支付顛覆了現金支付的用戶習慣。


          《設計心理學》里面有這么一段話:“如果用新的方式做一件事只比原來好一點,那么最好與以前保持一致。如果必須做出改變,那么每個人都得改變。新舊混雜的系統會讓每個人困惑。當新的做事方式明顯優于舊的方式,那么因改變而帶來的價值會超越改變本身所帶來的困難。不能因為某樣東西與眾不同就認為它不好。如果我們故步自封,我們將永遠不會進步。”


          改變的價值大于改變的困難


          這里的價值包括但不限于用戶價值、商業價值(短期價值、長期價值)等,當新習慣會需要用戶改變舊習慣時,這個設計帶來的價值有多大,值不值得讓老用戶付出學習成本。有時候,明知改變會引起用戶的強烈抵觸,仍然改變用戶習慣,可能因為改變的價值大于改變的困難。


          剛才提到的 ins 的例子中,有的人不知道 ins 為什么要改版,創新咨詢公司 IDEO 的溝通設計主管 Remy Jauffret 說:“當品牌、組織超越了最初的商業意圖,或擴展業務提供不同的產品,或領導希望吸引新的客戶,這些情況都可能需要新的品牌視覺。變化總是大家不舒服,然后又平息,我認為時間才是檢驗真理的唯一標準?!?


          改變帶來明顯的體驗升級


          我們在設計中,有時候會遇到自己的產品某個功能體驗比較差,但是延續了很久,而市面上其他同類產品在相同功能的體驗上已經做的很好,我們可以往主流交互體驗上改版嗎?這時需要權衡改變之后是否能帶來明顯的體驗升級,還是說對于用戶來說是不痛不癢的變化,可改可不改?


          以安卓為例,在幾年前,安卓手機的底部有 3 個實體鍵,后面手機更新迭代,變成了虛擬三鍵設計,因此底部存在3個不同功能的熱區。而在 Android 4.0 設計規范中,為了避免底部標簽欄與已經存在的底部虛擬鍵產生交互上的沖突,安卓明確說明了不要使用底部標簽欄。


          但這種規則,在使用體驗上、開發者的適配上都發生了問題,用戶更接受 iOS 的體驗,后面谷歌在 Material Design 中,允許了底部標簽欄的存在。這相當于和原來的用戶習慣不一致,但卻帶來了更好的用戶體驗。



          2、如何培養新的用戶習慣?


          這里結合上癮模型的觸發、行為、多變的酬賞、投入進行闡述,這四個步驟是一個循環,當用戶越沉迷于這個循環,說明你的產品對用戶的吸引力越強,用戶習慣也就越強,這里會側重于從培養用戶習慣的角度進行拆解。



          觸發:外部觸發和內部觸發 


          外部觸發說白了就是加強產品曝光,讓用戶一下子就能想起你。舉個例子,“充電五分鐘”下一句是什么?你大概率會想到“通話兩小時”,這種經過外部的長期觸發,最終已經轉變成了內部的習慣,會讓你記憶深刻。


          外部觸發的類型主要有4類,通過將信息滲透進用戶生活,吸引他們采取下一步行動:


          付費型觸發:做廣告、搜索引擎推廣都是付費型觸發,爭取新用戶;

          回饋型觸發:公關和媒體等領域的觸發,比如對產品做正面報道、推薦等;

          人際型觸發:熟人之間的口碑傳播是一種極其有效的外部觸發,可以為產品帶來“病毒式增長”;

          自主型觸發:以驅動用戶重復某種行為作為重點,讓用戶形成習慣,比如新聞訂閱、每天早晨的鬧鐘等。


          內部觸發是用戶心理產生的使用動機,內在情緒驅動自己去使用一款產品。


          當某個產品與你的思想、情感或者是原本已有的常規活動發生密切關聯的時候,那一定是內部觸發在起作用。對于習慣刷朋友圈的人來說,拿起手機就不會自覺打開微信;對于習慣刷微博的人來說,拿起手機就會刷起微博,甚至自己都沒有意識到。一再重復這種場景,會用戶就會對此形成一種穩定的聯系,進而形成習慣。


          行動


          斯坦福大學福格博士曾提出“福格公式”,福格行為模型可以用公式來呈現,即 B = MAT。B 代表行為,M 代表動機,A 代表能力,T 代表觸發。只有動機、能力 、觸發三者皆備,才能跨過“行動線”。


          觸發:即上面所提到的外部觸發與內部觸發。


          動機:動機決定你是否愿意采取行動。福格博士認為,驅使我們采取行動的核心動機主要是三種:追求快樂,逃避痛苦;追求希望,逃避恐懼;追求認同,逃避排斥。


          能力:這里要詳述的是能力,所謂習慣,是指人們在幾乎無意識的情況下做出的舉動。一種行為的復雜程度越低,無論是體力上的還是腦力上的,被人們重復的可能性就越大。越簡單的操作成本,記憶成本越低,越容易形成用戶習慣。


          舉個例子,刷抖音就是用戶行為成本極低的場景,你在刷抖音時,不需要多余的交互行為,切換視頻甚至不需要點擊,只需要向上滑動。除開抖音算法的精準推薦不說,從交互層面而言,也是足夠簡單并且形成習慣了。


          如果改變會打破認知習慣,要讓用戶能快速了解新設計的使用方式。最好的方式是能夠讓用戶快速與已其他競品的操作習慣產生關聯。比如采用其他主流應用成熟的交互方式。


          如果改版會很大程度上改變用戶行為,也可以考慮嘗試以下的方式。


          · 改版操作指引:這種方式較為常見,但是仍應注意避免繁瑣的操作指引,切勿把操作指引當作體驗差時的解決方案。


          · 兼容多種用戶習慣:這種方式可以讓不同用戶選擇適合自己的交互方式,最大程度考慮到所有用戶,但同時也可能造成了功能冗雜的情況。比如安卓底部三大金剛鍵,后面手機全面屏時代,新增了全面屏手勢??紤]到安卓老用戶的使用習慣,三大金剛鍵(底部虛擬按鍵)始終被保留下來;


          · 允許切換新舊版本:這種方式一般是改版變化過大,用戶一時間不容易接受新的體驗方式,常見于網站,如站酷早期的大改版,但是僅適用于過渡期。


          當然,除上述方式外,肯定還有一些其他讓改變行為習慣更舒服的方式,這里不一一列舉。


          多變的酬賞


          多變酬賞主要表現為:社交酬賞,獵物酬賞,自我酬賞。這幾種酬賞會加強用戶對產品的使用習慣。


          社交酬賞:人們從產品中通過與他人的互動而獲取的人際獎勵,比如被認同、重視、喜愛等。比如人們喜歡發朋友圈、微博等,期望得到回饋,某種程度上都是為了獲得社交酬賞。

          獵物酬賞:人們從產品中獲得的具體資源或信息。比如瀏覽信息流,豐富的信息流內容為用戶提供了資訊,比如刷抖音,人們追求視頻的新鮮感、追求內容的豐富性都是屬于獵物酬賞。

          自我酬賞:人們從產品中體驗到的操控感、成就感和終結感。在目標驅動下,我們會去克服障礙,即便僅僅是因為這個過程能帶來滿足感。就像你玩游戲,希望贏過對面,或者期待將游戲玩通關,本質上屬于自我酬賞。


          投入


          如果希望繼續培養用戶習慣,與產品產生更緊密的聯系,就需要鼓勵用戶進行一些投入,以增加他們使用產品的可能性。行動只是用戶使用的第一步,促使用戶對產品的投入,才會真正增強用戶與產品之間的聯系,形成更強的用戶習慣。但是如果用戶自身沒有投入,即替換成本低,那么隨時都可能有被其他產品取代。


          舉個例子,移動互聯網時期,微信早早入局,人們的關系鏈都在微信里面沉淀,即人們越使用微信,關系鏈沉淀越多,就越難以更換其他產品,所以兩年前想要挑戰微信的多閃、馬桶 MT 和聊天寶這三款社交 App 不可避免的失敗了。


          用戶越愿意投入,就證明用戶粘性越高,在此過程中,用戶習慣也會不斷加強。



          結語:


          現階段,人人大談用戶習慣,但是用戶習慣不以自身為標準,而是需要考慮產品用戶的行為特征,以及人們在使用產品時更加深層的、甚至用戶本身都沒有發現的習慣,這就需要設計師對習慣的產生、習慣的判斷、習慣的培養有深入的認識。


          一般情況下,產品不適合貿然改變用戶習慣,但是在有特殊需要的情況下,還是不可避免的改變產品的用戶使用習慣,當然我們需要如何讓用戶更加容易接受。大多數產品,都希望用戶能夠形成對自己產品的習慣,所以需要了解用戶如何對產品產生習慣、加強習慣,使產品擁有更強的吸引力,但是良好、正向的用戶習慣一定是基于用戶體驗的。


          文章來源:站酷 作者:熱風_

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



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

          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個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


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


          我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發還原只會說往左移動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年提出,也稱「復雜度守恒定律」。

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


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


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


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

          刪除、組織、隱藏

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


          簡化交互設計

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


          算法解放“生產力”

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


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



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

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


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


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


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


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

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

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

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



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

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


          自動檢測提示

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


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


          消除可能的失誤

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


          將失誤降至最低

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


          視覺暗示

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


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


          為用戶犯的錯買單

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


          范圍限制

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


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



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

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


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


          △頁面的中主按鈕更突出


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



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

          通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下,要求得越少的那個就越好,越有價值”。


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


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

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

          組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“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設計分享達人





          前言

          前人早已總結了讓動畫生動的技巧,早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則,該法則也是受用至今。法則雖是針對傳統動畫而制定,但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。


          目錄

          1)動畫原則介紹

          2)結合案例應用原則

          3)流程方法論沉淀

          4)結語








          01: 擠壓與伸展

          擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調物體的質感、重量、速度。擠壓和拉伸會給予物體運動時具備質量感和體積感的錯覺。例如當一個皮球正在進行下落運動,在運動過程中讓皮球體積產生一定拉伸來表現它的速度感,皮球落地后則因力的作用產生擠壓變形。






          技巧建議

          擠壓與伸展的幅度影響著物體的質感、重量。設計師們可根據物體的質感去決定擠壓伸展的幅度。動畫雖存在夸張性,但對于物體擠壓拉伸的體積盡可能保持視覺統一,避免較大的體積誤差導致運動的突兀。











          02: 預期動作

          預期動作可告知觀者物體運動即將發生,增強觀者的場景代入感,使運動更加生動真實。如果我們去除前期的預備過程物體所呈現的運動感知像是突然被前方磁鐵所吸引。






          技巧建議

          預期動作可對觀者視線進行引導,設計師可以根據預期動作所引導的方向來銜接鏡頭/場景的轉場。反之預期動作也可以用來欺騙觀眾,當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。








          03: 演出方式

          每個角色/運動元素在運動過程中都會流露出獨特的態度和氣質。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節奏以及舞臺的編排技巧,傳遞貼合角色/元素氣質的動態感知。








          04: 持續動作與關鍵動作

          在現今動畫工作流程中,考慮到流程效率及技巧利弊,我們可以使用兩者相互結合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式(類似AE)。在動畫設計前進行基本運動的關鍵動作提煉,再進行細化,一層層的遞進。底層的關鍵運動越完善,在后續添加細節時才不會耗費大量時間調整。而對于持續動作(逐幀動畫)的技巧,我們可以利用它處理一些復雜效果例如(涉及到運動空間的變化、形狀上的靈動變化等)。






          1)持續動作(Frame by Frame)

          逐幀動畫。

          優點:自由且流暢的動態。

          缺點:難以把控時間長短、體積大小。


          2)關鍵動作(Key Frame)

          關鍵幀動畫。

          優點:清晰、可靠、規范。

          缺點:修改成本略高。









          05: 跟隨與重疊動作

          跟隨動作指的是元素運動結束后不會立刻停止,會因為質量、慣性等因素,元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發生,主體與附屬部分的運動會因質感、外力等因素產生不同的速率。






          技巧建議

          1)表達運動的力量、速度感

          當一個人跳躍的時候,自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感,利用好跟隨與重疊動作,可以更好地表現角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候,跟隨與重疊的物體運動幅度大,反之則運動幅度小。









          06: 緩動

          真實世界的運動遵循著緩動運動的規律,而并非勻速運動。根據物體運動情況、動態質感去編排元素合適的運動速率。關于運動的速率編排相關內容,可以看看過往的文章-《動效的質感》。








          07: 弧形運動

          仔細觀察可發現自然界中的運動多為弧形運動的組合,而勻速運動只存在于機械運動中。






          技巧建議

          1) 弧形運動路徑

          角色動畫:

          在人物運動過程中使用弧形運動增添角色動畫表現力。比如當人物抬頭或轉頭時,通過弧度的變化映射人物的情感,是充滿好奇心的還是沮喪的。


          交互動效:

          在交互動效中,弧形運動路徑會給予觀者運動表現力較年輕活潑的感知隱喻。設計師可根據品牌調性及產品屬性去選擇運動路徑類型。









          08: 附屬動作

          當主體在運動時,設計師可通過附屬物運動來輔助表達主體運動氣質。比如人物敲門時,捏緊拳頭的敲(代表生氣)與翹起蘭花指敲的(代表精致)區別。








          09: 時間控制

          在上篇文章其實我們有提到影響動效質感的原因之一就是時間,控制好物體的運動時間也是表現良好動畫節奏感的關鍵。








          技巧建議

          1) 時間偏差(角色動畫側)

          使用「時間偏差」的技巧,可以讓你的動畫更加生動。因為受力、質感等因素影響,主體運動時附屬部分的運動不會同時發生。比如當人物正在打哈欠時,首先是從嘴巴發力,再擴散至五官眉毛。






          2) 時間偏差(體驗動效側)

          為保持動效的連續性以及營造自然流暢的交互體驗,適當的使用時間偏差,可避免動效元素變化過程出現空檔期,提升信息傳遞效率減少認知負荷。








          10: 夸張

          通過夸張手法增添動畫表現張力,加強運動元素的吸引力令動畫更有代入感和戲劇性。








          11: 多維表現

          動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果,提升畫面表現力。








          12: 吸引力

          一部好的動畫作品一定會有令人吸引的人事物,比如動態氣質或視覺風格等它們都能很好的吸引觀眾。除此之外,如何講好一個故事,通過趣味幽默的故事表達手法也可以增添動畫的吸引力。








          原則歸類

          通過對十二大基本原則的學習,我將技巧分為以下兩大類:設計技巧和表演技巧。

          設計技巧:動畫設計的技法,增添動畫細節令動畫表現更生動自然。

          表演技巧:舞臺表演的技巧,提升動畫舞臺全局的表現力。












          結合案例

          接下來我們結合上述所提及的動畫原則,根據實際案例進行結合應用。一起來探討下當接到動效設計需求時,我們需要思考哪些點?才能使我們的動效表現力更上一層樓。








          腳本背景

          假設在項目中我們需要對設計元素(豬豬存錢罐)添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態/動作表現會更貼合元素性格??紤]到豬豬的可愛屬性,采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。








          動態分析

          將腳本確定后,我們在腦海里已經有大概的運動畫面。但在進入動效設計前,還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。








          應用技巧

          在添加動畫細節前,我分享下在項目中經常用到的兩個技巧。


          1) 實現擠壓與伸展的多種形式

          實現擠壓與伸展的方式有很多種,最常見的是直接改變物體的縮放比例或形狀路徑來實現。但在設計項目中我們往往會遇到非矢量的設計元素,利用xxx可實現圖層的彎曲扭曲等變形效果。






          2) 考慮運動物體質感

          質地堅硬的物體受外力的影響較小,質地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作(抖動)。在處理這類抖動的效果除了使用常規的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節令物體運動更為生動自然。








          差異對比

          當我們去除這些動畫原則后,再去作對比明顯的感知差異就出來了。








          經驗沉淀

          根據過往項目經驗,我總結了動效/動畫設計的流程思路。從業務目標的分析到動畫腳本的確定,層層遞進。前期的目標和框架確定后,之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧,將自身動畫的表現力提升一個檔次。








          結語

          隨著動畫/動效的落地方式愈來愈完善,像Lottie、svga等新型的動畫落地形式所帶來的高品質畫面呈現。設計師們不能滿足于動畫僅僅只是動那么簡單,如何去塑造生動的動畫形象還有不少我們需要考慮的細節。恰好前人總結了相應的原則技巧,幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外,近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節。其中部分技巧并不局限于角色動畫的設計中,下期文章我將分享關于角色動畫的知識沉淀內容。





          文章來源:站酷  作者:Fiasc1

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


          我們對2021年的用戶體驗有何期待?

          ui設計分享達人

          用戶體驗設計是一個動態領域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間;他們的思考方式和表現方式也發生了不同。

          本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


          語音介面

          我們在2020年UX狀態預測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設計中最熱門的趨勢之一。可以肯定地說,明年不應忽略它。

          毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術的迅速發展使品牌別無選擇,只能在其產品中包含基于語音的功能。

          已經有許多企業為廣泛的VUI實施奠定了基礎。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



          簡約的UI

          極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉化網站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。

          但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色,設計元素和明亮的組合,但UX設計人員仍然有很大的發揮空間。此外,元素的功能最為重要,正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




          內容,消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦,這意味著網站所有者應努力使自己的UX文字簡潔明了。


          負空間

          負空間是用戶體驗設計的一種大趨勢,它已經脫離了對簡約UI的市場需求。簡而言之,負空間是頁面布局中對象周圍(宏空間)或對象內部(微空間)的空白區域。它已經成為獨立的設計元素,在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。






          留出一定的空間,在設計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負空間的主要功能是整理網頁,以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。




          負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

          不完美的元素

          在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性,設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西,從手繪對象到構圖或頁面的不尋常元素。







          通常,不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應用這種UX趨勢,則必須記住一個關鍵規則:必須保持平衡。如果你做得過多,那是行不通的。



          同態

          中性風格是UI設計中其他兩種大規模方法(擬態和平面設計)的組合,它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。

          幾十年前,當需要使用超現實元素來創建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

          同質性兼顧了兩者的優點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是,它努力實現淺色和微妙對比度的“柔和”外觀。



          在過去大約一年的時間里,同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法,但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。



          3D元素和視差

          視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是,我們仍然觀察到這些用戶體驗趨勢正在逐步普及。

          首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。




          另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時,網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象,您可以創建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


           



            

          不對稱

          隨著我們設備屏幕的變寬,UI / UX設計中出現了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術和網頁設計中與極簡主義相反的一種風格。但是,如果與其他殘酷的設計元素分開使用,它可以使您的網站看起來有趣,同時使它保持微妙和優雅。


          不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現,例如破碎的網格,重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




          但是,請務必記住,非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進,并幫助品牌強調重要信息。

          動畫制作

          今天,當我們在互聯網上進入隨機網站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行,并且使用頻率不斷增長。

          除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命,使它們更具個性。



          如果要在用戶界面設計中使用這種軟件開發趨勢,那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的,有價值的和平穩的。

          信息架構

          信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計(UCD)的基本要素,旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起,構建有效,有用且一致的信息體系結構是UCD流程的必不可少的階段。



          為了創建一個實用的信息體系結構,UX設計人員需要對產品的目標受眾,其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此,在設計過程的線框階段始終必須考慮用戶的目標,清晰的導航和內容表示(包括盲點監視)。

          最后的想法

          我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高,它們也可以使您的產品在視覺上對目標受眾更具吸引力。

          文章來源:站酷  作者:ZZiUP

          藍藍設計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鍵。或者,他們可以從自動建議列表中選擇建議,也可以在最后輸入字符串。

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

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

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

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



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


          這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標,則除非與初始站點進行交互的收益確實很高,否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子,如果用戶真的想購買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放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫?,F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          用戶體驗地圖如何落地

          資深UI設計者


          用戶的體驗感對于一個產品來說,是至關重要的。一個好的產品能夠充分照顧到用戶的感受,從而擁有大批的忠實用戶。用戶體驗地圖是幫助產品設計者站在用戶維度思考體驗優化,提升用戶體驗的重要工具。

          那么,應該如何打造用戶體驗地圖及如何落地呢?我們在本文給出了解答。(本文對用戶調研、用戶行為路徑、使用場景等也做出了詳細解析)

          undefined



          1.1 定義用戶體驗地圖


          用戶體驗地圖,是從用戶的視角出發,去理解用戶、產品或者服務交互的一個重要的設計工具。

          它以可視化的形式,來表現一個用戶使用產品或接受服務的體驗情況,來發現用戶在整個體驗過程中的問題點與情緒點,從中提取出產品的優化點。

          對于1-∞的產品來說,用戶體驗地圖是用戶增長策略的一部分,是產品優化的重要工具。



          1.2 拆解用戶體驗地圖


          用戶體驗地圖一般由以下幾個部分組成:


          用戶體驗地圖的組成部分大同小異,可以根據自身分析內容增加或簡化。小伙伴可以保存這張空白模板,直接拿去填內容哦~




          我們給出了簡潔明了的回答:


          背靠著中國鐵路總局,12306在基礎票務預訂服務上有著得天獨厚的優勢,但基于用戶日益增加的多樣化需求,以及越來越多的用戶愿意為優質體驗買單,競爭激烈的OTA們日益精進,與官方12306形成鮮明對比,本次優化就圍繞12306流失最多的年輕用戶群體展開。




          本文以12306為例,主要針對購票流程(核心功能),提升交互易用性和用戶體驗,演示用戶體驗地圖如何落地。首先我們來看一下用戶體驗地圖的原型模板。

          (上圖建議保存)


          根據地圖原型的ABC區域,分別對應著A區的用戶特征與需求,B區是用戶行為、思考、情緒,以及C區的總結分析。A區+B區得出C區,A和B都基于用戶,所以,了解用戶——是梳理用戶使用問題的基礎和第一步。

          經過我們團隊的經驗總結,得到繪制前的流程步驟如下圖,下文會拆分步驟一一講解。



          3.1 了解用戶


          體驗地圖的“用戶”不是主觀腦補出來的,而是通過定性調研和基于數據支撐所得出的,所以收集用戶的信息是十分必要的。

          以下我們通過用戶群體數據和問卷調研數據(包括用戶畫像)來確定用戶模型。


          3.1.1 用戶群體

          本文根據以上數據,僅鎖定一線城市的主要用戶群體,也就是高線年輕人群的購票流程優化。



          3.1.2 問卷調查

          籠統的“對某類用戶使用產品的情況調研”是無法提供有價值的調研內容的,調研目的一定是顆粒度可細化的存在。


          12306平臺的下單耗時長,年輕用戶流失率上升,對官方軟件槽點頗多,品牌影響較為負面。本次調研,主要針對年輕用戶在平臺的購票路徑,分析該用戶群體,在下單過程中的操作節點與關注點,探索用戶流失與差評的原因。


          我們把社會屬性相關的樣本數據按不同維度歸類,劃分用戶人群。比如按年齡、行業、職位等維度的典型特征,可以將12306APP的主要用戶劃分為:在校學生、企業白領、自由職業。


          再加以問卷結果描述,得到了高線年輕產品使用者的虛擬畫像。


          在列問卷內容時,要注意12306是火車購票工具類軟件,用戶目的明確——剛性需求,所以問卷無需過多挖掘需求,而是鎖定調研目的,研究APP體驗本身,精準投放顆粒度較細的具體問題。如下:


          團隊花了2天時間,總共發了335份問卷,回收率80%,拿到了268份。圖表較多就不詳細展示過程了,重在方法。


          根據統計結果,我們最終總結出了下列重點問卷結論:


          把這些痛點、滿意點,包括用戶實際接觸的界面或功能模塊,都歸納記錄下來,方便后續將這些痛點進行優化改進。




          3.2 確定用戶體驗場景


          保存以上部分的相關數據和結論,我們已經了解了用戶(進入角色),接下來要確定用戶體驗場景了(模擬人生)。


          3.2.1 用戶行為路徑


          在做使用場景前,先通過產品設計者視角梳理出產品目前的用戶行為路徑,這個步驟的主要目的是找出復雜節點,降低操作成本。


          它需要我們對操作流程進行拆解,將一個流程拆解成幾個階段,階段又可以拆解成具體的操作節點。這樣一來,我們可以分析每個動作節點存在的必要性。

          undefined


          根據上圖的4步法,第一步——我們在確認主流程的情況下,羅列所有操作節點

          一定不能怕麻煩,用戶所有的動作節點都要羅列。


          然后我們要找出復雜的操作節點,也就是可以優化用戶操作的節點,當然也不能主觀地“我覺得”,用交互量化的方法可以快速幫助我們找到問題點:


          1. 把每個操作交互定一個數值,即為操作成本。越是高階越是隱藏的交互手勢越復雜,所謂的“交互成本”也越高。這里我們規則為:


          2. 通過簡單的加減計算,就可以直觀地看到復雜節點在哪里。


          3. 通過計算,我們能夠直觀地看到用戶操作最繁雜的部分集中于“選擇站點城市”“車次查詢”“選擇乘車人”這三個操作流程中。此時,重新審視這幾項繁雜操作節點,讓用戶在更少的步驟內完成操作是我們的目標,能一次點擊完成的操作絕不讓用戶點擊兩次。


          4.降低操作成本,可以從2個方面入手優化:對于復雜的節點,降低操作難度,用簡單的操作替換復雜的;對于可有可無的節點,大膽地刪除,減少操作步驟。

          (由于精力有限,這塊內容暫時不過多展開,因為還涉及很多知識點,以后慢慢講解。當然,感興趣的同學也可以自行查找資料,或在文章下方評論交流哦~)



          3.2.2 用戶使用場景

          明確了目標用戶后,接下來需要我們發揮共情能力,代入用戶視角走查產品。

          從“帶著需求”來(我要買車票),到“完成目標”(買到票)走的核心場景路徑,梳理出來粗顆粒度的故事場景 。


          【舉個栗子】:

          場景的梳理,先從顆粒度大的骨干場景出發,舉個栗子:假如我們起床到公司這個場景,可以回想一下,在整個過程中我們經歷了哪些大的階段?


          ——經歷了:起床—洗漱—出門—路上—到達。


          基于大的階段,我們可以繼續拆分出顆粒度較小的二級故事場景,比如“洗漱”還可以拆解:換衣服—刷牙—洗臉—梳頭。


          拿到實例中,12306的購票流程是:查詢車次—篩選車次—填寫乘車信息—提交訂單付款—買到票了

          切忌在使用場景時流程顆粒度過細,忽略用戶使用目的。


          【加餐知識點】

          這里先講解一下,場景設計主要分為2類:一是挖掘需求,挖掘用戶使用目的及動機;二是研究需求,在已有需求上深入研究和優化。


          12306是從1-∞的出行工具類產品,用戶的使用目的非常明確——買車票,因此使用場景一定是圍繞【研究需求】展開。

          運用4W1H場景分析法,我們得到用戶使用場景:


          在已經了解用戶和確認了用戶使用場景的基礎上,根據以上得到的結論和機會點等資料,開始繪制用戶體驗地圖。




          3.3 繪制用戶體驗地圖


          文章開頭拆解的組成內容還記得嗎?

          現在召集團隊不同崗位的人員,共同努力填補網格空白處。最好從上到下從左到右開始,不用強求全部填滿,因為用戶體驗地圖并不是一錘定音的,它是不斷分析和反復更新迭代的。

          我們得到了用戶體驗地圖成品:



          用戶體驗地圖是產品用戶增長的策略工具之一,繪制完成后根據地圖針對用戶體驗情緒與機會點探索解決方案。


          4.1后續工作安排


          繪制好體驗地圖后,工作并沒有結束,還有2項重要的工作:

          • 優化機會點:展開頭腦風暴,討論是否能有最佳方案,來滿足用戶的目標,提升用戶滿意度、優化體驗

          • 安排后續工作:按照情緒曲線、機會點價值大小,梳理優先級,安排后續工作 



          4.2探索優化方案


          然后根據用戶體驗地圖,按照用戶情緒的低(解決痛點)、高(放大爽點)、中(思考分析),分別探索優化。


          把所有問題點按照上述分類,首先解決用戶情緒最焦慮的痛點問題,其次思考是否能把情緒高點繼續優化到極致,讓用戶更嗨,而用戶情緒平緩的地方,要研究分析,繼續思考優化空間。




          · 中轉功能操作繁瑣,推薦方案不夠智能——減少交互步驟+增加智能方案推薦

          · 視覺層級冗雜、票價信息不直觀——F型分析法優化+增加票價顯示

          · 列表頁排序算法升級(與產品開發相關,不做案例展示) 


          優化點:中轉方案的優化

          我們增加了智能方案推薦,并把中轉車次與直達車次劃在同一頁面,優先展示直達車次。極大地增加了用戶操作的易用性,可直觀對比,減少頁面跳轉和加載等待時間。


          通過多稿權重對比,在信息層級、功能突顯和視覺樣式中,擇優選擇了最終稿。


          復雜節點降低操作成本,切換動效能直觀看出閱讀效率和易用性的提高。



          優化點:視覺層級優化

          通過F型視覺模型十字交叉法梳理了信息層級,極大的提高了閱讀效率。


          日期選擇由展開點按切換改為滑動切換,提高屏幕利用率的同時,更方便用戶操作。





          優化點:增加目的地天氣提醒

          ——情感化設計,魅力型功能,讓嗨點更嗨。





          情緒中線以下,都有優化空間。比如,

          • 添加乘車人操作重復、耽誤搶票——默認常用已選+頁內抽屜拉起

          • 篩選功能視覺較弱、觸點易錯——增加視覺識別與觸點面積

          • ……


          這是一部分可以不斷思考打磨的空間,雖然緊要程度低于用戶情緒低點,但是花時間將產品從滿足80%的用戶到滿足99%的用戶,即使在大多數人看來是一種性價比很低的行為,但卻是提升用戶體驗的絕佳方式。這也是大廠產品體驗良好的原因。




          歸納與總結


          文章有點長,感謝閱讀。下面概括了一些文中的方法論知識點,方便讀者回顧。



          寫在后面


          市面上有很多關于產品體驗地圖的文章,但多數是基于已有產品的劣勢去直接繪制地圖,繪制地圖并不是目的,繪制好體驗地圖之后怎么分析優化才是目的,用戶體驗地圖本身只是一個可視化工具。我們努力去剖析過程、記錄方法論,希望初學者能夠知其然并知其所以然。



          文章來源:站酷   作者:挖設

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

          日歷

          鏈接

          個人資料

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

          存檔

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