首頁

Feed流設(shè)計:那些容易被忽略的圖片適配知識

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

在產(chǎn)品設(shè)計中,大家很容易跟著產(chǎn)品原型走而忽略了一些設(shè)計上的細節(jié)問題。本文筆者總結(jié)了在Feed流中容易被設(shè)計師忽略的,卻最容易出現(xiàn)問題的幾種圖片適配方式。
我們每天被淹沒在各種Feed流中,感覺它的設(shè)計是如此簡單,只需設(shè)計一個卡片,然后復制粘貼整個界面就大功告成了。
但是,大家很容易忽略圖片適配的問題,比如:微信朋友圈你無法保證用戶發(fā)幾張圖片,也無法預估圖片的比例,那么就需要我們對它設(shè)定相應的規(guī)則。
下面我總結(jié)了最易出現(xiàn)問題的大圖布局、宮格布局、拼圖布局的圖片適配方式。
大圖布局也就是不管用戶上傳幾張圖片,F(xiàn)eed流中以一張大圖進行展現(xiàn),點擊詳情或通過滑動才能查看其他圖片。大圖布局的圖片適配方式一般有兩種:一種是展示圖片比例固定;另一種是隨圖片而變化。
不管用戶上傳的是橫圖還是豎圖,其展示圖片的比例都固定。采用該適配方式圖片占用空間小,可提高用戶的閱讀效率,因此,當你的產(chǎn)品目的想要提高用戶的閱讀效率時可以使用,比如字里行間。
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
當用戶上傳不同比例的圖片時,圖片展示寬度為屏幕寬度,而圖片的展示高度根據(jù)確定的寬度等比例縮放。采用該適配方式能將圖片信息表達完善,圖片占用空間大,適合圖片質(zhì)量高,用戶以圖片瀏覽為主的產(chǎn)品。
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
需要注意的是:采用該方式需要設(shè)置閾值,當圖片的高度超過一定數(shù)值,高度就不在增加以閾值為準,當圖片的高度小于一定數(shù)值,高度不在減小,以閾值為準。
宮格式布局也就是用戶上傳的圖片會適配到一個個的方塊中,宮格布局的形式多種多樣可以是九宮格、五宮格、三宮格,下面以較為復雜的九宮格的適配為例。
九宮格的適配未對屏幕進行區(qū)分,但對只上傳一張圖片進行了特殊的處理,二張或二張以上直接以最小邊為方塊的寬,然后等比例縮放,圖片的具體適配方案如下:
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
當圖片為三張時,3、5位置對調(diào),排成一行:1、2、3。2)當圖片為兩張時,直接將圖片適配到1、2格子。
當圖片為1張時,如果0.5 < = 寬 / 高 <= 2 時,被限定在1 – 4格子的范圍大?。òㄩg距),也就是凡是寬高比在這個范圍時,最長的那邊暫兩個格子加間距。
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
當圖片為1張時,寬 / 高 > 2的圖片(如全景圖),最多占三欄,高最多占一欄(包括間距大小)
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
單張圖片,寬 / 高 < 0.5(如微博長圖),高最多占二欄,寬度最小占二欄1/3(包括間距)
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
這種布局方式是將幾個圖片拼成一個矩形,樣式新穎類似雜志的排版,因此也叫雜志式布局,不過因為其對圖片的要求較高,因此多應用在圖片社交中,如in。
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
下面,我總結(jié)了宮格布局的規(guī)則,在設(shè)計時你可以不用把每種情況都設(shè)計完,只要把不同圖片適配的方案發(fā)給開發(fā)即可,他們會選用相應的規(guī)則。
Feed流中容易被忽略的圖片適配知識
Feed流中容易被忽略的圖片適配知識
大家在設(shè)計時,很容易跟著產(chǎn)品原型走,從而忽略一些小設(shè)計。
尤其是對于新手設(shè)計師來說,更容易考慮不全面,因此建議大家在看到一些干貨的文章,就收集起來,以后在工作中遇到也能夠很快的找到文章,從而就可以規(guī)避這些問題,少走彎路。

藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

整理!點贊設(shè)計分類。

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 點贊設(shè)計的分享!

 微信圖片_20190321162040.jpg微信圖片_20190321162058.jpg微信圖片_20190321162101.jpg微信圖片_20190321162104.jpg微信圖片_20190321162113.jpg微信圖片_20190321162117.jpg微信圖片_20190321162120.jpg微信圖片_20190321162122.jpg微信圖片_20190321162125.jpg微信圖片_20190321162139.jpg微信圖片_20190321162143.jpg微信圖片_20190321162145.jpg微信圖片_20190321162148.jpg微信圖片_20190321162154.jpg微信圖片_20190321162157.jpg微信圖片_20190321162200.jpg微信圖片_20190321162204.jpg

藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

交互設(shè)計中的“所見即所得”原則

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

交互設(shè)計中的“所見即所得”原則


“所見即所得”原則我記得在之前的文章中就提到過,但是沒有詳細說明。最近在體驗一些產(chǎn)品時,發(fā)現(xiàn)很多交互設(shè)計上的坑都可以歸納到“所見非所得”上。




所見非所得




我們可以首先來看一下“所見非所得”的案例:上周寄件去北京,在填寫收件人信息時候,發(fā)現(xiàn)了一個“智能填寫”的功能很有意思。所謂“智能填寫”就是OCR識別技術(shù),系統(tǒng)可以識別圖片上的地址。例如,你的收件人地址正好是身份證上的住址,那么你就可以上傳身份證照片,系統(tǒng)直接識別照片上的地址而不需要手動去輸入。


Image title


用戶具體的操作流程是:




1 拍攝/上傳照片;




點擊“上傳圖片”按鈕,用戶可以選擇拍攝或者上傳相冊里的照片,框選合適的識別區(qū)域;




2 系統(tǒng)識別并展示結(jié)果;




系統(tǒng)會自動識別圖片中的地址信息,并且在輸入框中展示,如果有識別錯誤的地方,用戶可以手動編輯修改;




3 用戶確認;




用戶對地址信息確認無誤了,點擊“智能填寫”按鈕,輸入框里的地址信息會自動回填到地址欄;


Image title


了解了大致流程,我們來看一下兩款競品。產(chǎn)品A和B都提供了“智能填寫”的功能,但是在交互設(shè)計上存在差異。產(chǎn)品A,當用戶上傳完圖片才會出現(xiàn)“智能填寫”按鈕;產(chǎn)品B是全程展示“智能填寫”按鈕的。我個人更加偏愛產(chǎn)品A的處理模式,因為當用戶都沒有上傳圖片時,給用戶展示“智能填寫”按鈕是沒有任何意義的,這里的“智能填寫”雖然可見但是不可得,用戶也不能點擊。當然有人會說,雖然不可點擊,但是展示了也沒什么問題吧?當然有問題,它會給用戶帶來兩個痛點:




1) 增加了用戶的學習成本;




對于新用戶來說,產(chǎn)品A肯定更加容易上手。因為新用戶一進入這個頁面,只能看到上傳圖片的按鈕,用戶明白了我首先要上傳圖片。產(chǎn)品B是直接一股腦的把所有選項展示出來,用戶不知道這些選項之間的聯(lián)系和操作順序。




2) 阻斷正常操作流程;




給用戶展示了他們本不應該看到的元素,可能會阻斷正常的操作流程。用戶如果還沒上傳圖片,就點擊“智能填寫”按鈕會直接報錯,“所傳參數(shù)不能為空”,用戶哪里看懂這是什么意思。


Image title


之前在火車站取票,前面排隊的大嬸跟我說她的票取不了。我湊過去一看,發(fā)現(xiàn)她沒有關(guān)閉購買保險的彈框。因為這個彈框沒有蓋住底部“確認打印”按鈕,用戶誤以為還是可以點擊的,導致無法正常完成取票流程。


Image title


了解到這些痛點,那么如何才能在交互設(shè)計上實現(xiàn)“所見即所得”原則呢?我總結(jié)了兩個方法:限制和就近。




限制原則




了解限制原則,我們需要回答兩個問題:




1)為什么要限制?




因為多才要限制,多會帶來哪些壞處?內(nèi)容多,用戶處理不過來;選項多,用戶挑花了眼;時間多,優(yōu)惠券沒有有限期限制用戶懶得用。




2)限制什么?




限制用戶與界面交互的觸點。還是以智能填寫為例,當前界面有三個觸點:上傳圖片按鈕、輸入框、智能填寫按鈕。這三個觸點分別對應著步驟一、步驟二和步驟三。如果我們在步驟一的階段給用戶提供了步驟三的觸點,保不齊會有用戶嘗試去交互,這樣的無效操作會觸發(fā)報錯場景。所以當用戶處于一個線性的操作流程中,根據(jù)用戶所處的階段,分析用戶可能進行交互操作,提供交互觸點,保證用戶看到的觸點都是可交互的。




罔顧用戶的操作階段,一股腦的把所有觸點都提供給用戶。設(shè)計師倒是很省心,但是用戶卻會很糟心,他們需要花時間去判斷和分析每一個觸點的作用以及它們之間可能存在的聯(lián)系。這個工作應該由我們代勞,我們來分析用戶處于不同階段所需要的功能觸點。




舉個知乎的例子,知乎有一個“向知友提問”的功能。但是這個按鈕只會在用戶滑動搜索結(jié)果頁3屏后才會出現(xiàn),因為滑動了3屏,我們可以猜測用戶對當前的搜索結(jié)果不滿意,引導用戶去提問。


Image title


當然限制原則不僅僅是限制交互觸點,還可以應用到產(chǎn)品邏輯中,幫助用戶解決很多問題。我曾經(jīng)遇到過一個場景,公司上線了一款優(yōu)惠券,用戶點擊“立即領(lǐng)取”按鈕即可領(lǐng)取。但是有些用戶會被風控判定為了風險等級過高,導致領(lǐng)取失敗。對于這個報錯文案,我們改了好幾版,但是每次都會收到用戶的投訴。我們無法直接告訴用戶,你是因為風險等級過高導致無法領(lǐng)取,因為用戶風險等級過高是因為開通了某項業(yè)務(wù)。當時開通的時候,我們并未告知開通后會被判定為高風險用戶。所以為了不必要的麻煩,最好的辦法就是進行判斷前置,如果判斷用戶為高風險用戶那么就直接不展示該優(yōu)惠券。




就近原則




從上面的闡述中,我們可以發(fā)現(xiàn)“所見即所得”原則最根本的目的是為了節(jié)省用戶的操作時間,提升產(chǎn)品易用性。廣義的操作時間還應該包括了用戶對于反饋的感知時間,因為只有充分理解系統(tǒng)反饋的信息才能進行進一步的操作。如何幫助用戶快速的消化反饋的信息呢?因為反饋是系統(tǒng)對于用戶操作的回應,那么我們可以讓操作和反饋盡量的貼近一點,這就是就近原則。就近原則可以分為兩類:位置就近和形式就近。




1) 位置就近




所見即所得,這里的“所見”即代表著用戶的視線,而用戶的視線總是停留在上一個交互觸點附近。


Image title


例如,還是寄件的場景,要填寫發(fā)件人信息,我懶得重新填寫一遍地址,正好看到輸入框右邊有一個附近地址的功能。我點了一下,沒有反應,又點了幾下才發(fā)現(xiàn)底部出現(xiàn)了一個“附近地址”的列表。這里的交互觸點是“附近地址”的文字鏈接,我的視線也是停留在附近,沒有注意到下拉列表已經(jīng)出現(xiàn)在底部。操作和反饋完全不在同一視覺區(qū)域。




2)形式就近




形式就近,這里的形式特指反饋形式。目前最通用的反饋方式是彈框,彈框的弊端也就恰恰在于它的“通用”上。所有類型的反饋都可以用彈框來承載,用戶無法立刻感知到彈框所傳遞內(nèi)容是什么。既然反饋是系統(tǒng)對于用戶操作的回應,而用戶操作又是一個個交互觸點所觸發(fā)的。如果我們可以通過改變觸點自身形態(tài)的變化來完成信息的傳遞,用戶感知起來會更加容易。


Image title


舉個例子,用戶在輸入登錄密碼的時候,其觸點是輸入框。當用戶密碼輸入錯誤的時候,我們可以通過抖動輸入框的方式告知用戶輸入錯誤,這里抖動是現(xiàn)實生活中“搖頭”的映射,我們都知道搖頭代表著否定的意思,用戶不用看到彈框上的“密碼錯誤”幾個字也能明白密碼輸錯了。




總結(jié)




以上就是我對交互設(shè)計中“所見即所得”原則的總結(jié)和分析,如果你有不同的意見和看法,歡迎留言或者加群討論

 

藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

怎么樣豐富您的界面,價格頁簽的設(shè)計。

用心設(shè)計

微信圖片_20190228174510.gif微信圖片_20190228174544.jpg微信圖片_20190228174548.jpg微信圖片_20190228174528.gif微信圖片_20190228174600.jpg微信圖片_20190228174607.jpg微信圖片_20190228174537.jpg微信圖片_20190228174540.jpg微信圖片_20190228174551.jpg微信圖片_20190228174620.jpg微信圖片_20190228174617.jpg微信圖片_20190228174613.jpg微信圖片_20190228174557.jpg微信圖片_20190228174554.jpg微信圖片_20190228174623.jpg微信圖片_20190228174626.jpg微信圖片_20190228174629.jpg微信圖片_20190228174632.jpg微信圖片_20190228174635.jpg微信圖片_20190228174637.jpg

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

 

藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

這不是EDM,這只是郵件回執(zhí)。

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 回執(zhí)單的界面設(shè)計;

 微信圖片_20190228174510.gif微信圖片_20190228174528.gif微信圖片_20190228174537.jpg微信圖片_20190228174540.jpg微信圖片_20190228174544.jpg微信圖片_20190228174548.jpg微信圖片_20190228174551.jpg微信圖片_20190228174554.jpg微信圖片_20190228174557.jpg微信圖片_20190228174600.jpg微信圖片_20190228174607.jpg微信圖片_20190228174613.jpg微信圖片_20190228174617.jpg微信圖片_20190228174620.jpg微信圖片_20190228174623.jpg微信圖片_20190228174626.jpg微信圖片_20190228174629.jpg微信圖片_20190228174632.jpg微信圖片_20190228174635.jpg微信圖片_20190228174637.jpg

藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

界面沒層次,到底哪里出了問題?

ui設(shè)計分享達人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

剛?cè)胄械男率衷O(shè)計師容易出現(xiàn)一個問題,接到需求就開始設(shè)計,最后出現(xiàn)的界面和原型幾乎一模一樣,唯一的區(qū)別就是上了色,加了圖片和圖標,最后提交審核時老板反饋,“這個界面看上去太“平”了,你在這里加個背景色吧;這個圖標太小,你再放大一點;這個位置你在加點裝飾……”。


這主要原因還是界面沒層次導致的,雖然老板對設(shè)計不太清楚,但是關(guān)于業(yè)務(wù)邏輯我們的設(shè)計稿是否表達清楚,重點是否突出這個他最清楚了。


那么如何才能提高界面層次呢?我們可以從兩個方面入手,在設(shè)計前我們需要考慮突出內(nèi)容層次的方法;在設(shè)計中需要考慮突出視覺層次的方法。


目錄


一、突出內(nèi)容層次的方法

  • 將相關(guān)聯(lián)的元素進行組合

  • 確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面

  • 確認重要內(nèi)容,將其差異化設(shè)計

二、提高視覺層次的方法

  • 利用線、面、留白將模塊進行分割

  • 利用大小、投影、背景圖突出視覺層次

  • 利用顏色對比提高視覺感受

  • 利用文字對比提高界面的可閱讀性




一、突出內(nèi)容層次的方法


當一個界面信息量比較大時,層次感好的界面用戶進來能快速的獲得想要的信息,同時最終達到產(chǎn)品的目的。而層次感差的界面用戶看半天也不知道要做什么,看一會也就走了。因此良好的視覺層級是界面成功的關(guān)鍵。在設(shè)計前我們需要將相關(guān)聯(lián)的元素進行組合;確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面;確認重要內(nèi)容,并將其差異化設(shè)計。

1.將相關(guān)聯(lián)的元素進行組合

在設(shè)計前,產(chǎn)品原型圖已經(jīng)將我們的元素進行了分類組合,但是他們更多的是考慮邏輯、功能上的層次,而如何有一個清晰的內(nèi)容層次呢?設(shè)計師可以利用《格式塔心理學》中的接近性原則將相關(guān)聯(lián)的元素組合在一起,不相關(guān)的拉開距離,同時形成一定的規(guī)律和節(jié)奏,這樣會讓用戶閱讀起來更輕松。

       undefined     

需要注意的是,界面中的間距需要滿足一定的規(guī)律和節(jié)奏,比如模塊之間的間距大于標題到內(nèi)容的間距;在內(nèi)容中不相關(guān)聯(lián)的內(nèi)容間距大于相關(guān)聯(lián)的間距,如下圖所示。              

?undefined     

天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習慣;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容;最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。


京東金融的我的頁面用戶的資產(chǎn)信息排在最前面,他首先是遵循了用戶的瀏覽習慣,同時也是用戶想要看到的內(nèi)容,其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容,最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。

2.確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面

將相關(guān)聯(lián)的信息整理之后就需要確認模塊的優(yōu)先級了,由于用戶的瀏覽順序是自上而下的,因此我們需要將優(yōu)先級高的模塊放到前面。


那么優(yōu)先級如何判斷呢?大家可以從三個方面去考慮,第一是遵循用戶的瀏覽習慣;第二是用戶想看的內(nèi)容;第三是產(chǎn)品想要用戶看的內(nèi)容,如下圖所示。

       undefined     

天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習慣;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容;最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。


京東金融的我的頁面用戶的資產(chǎn)信息排在最前面,他首先是遵循了用戶的瀏覽習慣,同時也是用戶想要看到的內(nèi)容,其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容,最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。

3.確認重要內(nèi)容,將其差異化設(shè)計

在設(shè)計時我們需要知道,優(yōu)先級高的模塊不一定重要程度就高,因此我們還需要確認模塊的重要層級,同時利用背景、布局等方式進行差異化設(shè)計,用起用戶注意,如下圖所示。

       undefined     

網(wǎng)易嚴選中的新人專享禮和品牌制造商直供就采用了差異化設(shè)計,職工類模塊采用的是普通的宮格式布局,新人專享禮采用添加背景的方式,加深了模塊的縱深感,對比其他模塊更加突出。


大麥網(wǎng)中的特色模塊和其他模塊也采用了差異化設(shè)計,特色模塊采用拼圖的方式設(shè)計,其他模塊采用列表的方式進行設(shè)計,用戶進入頁面首先就能夠看到這個模塊,提高用戶接受信息的效率。


土豆視頻個人主頁的列表部分也采用了差異化設(shè)計,消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局,其他不常用的我的會員、客戶與反饋、設(shè)置采用列表式結(jié)構(gòu),這樣也能夠提高用戶操作速度。


二、提高視覺層次的方法


當然內(nèi)容層級確定了顯然不夠,我們還需要考慮突出界面的視覺層次,這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢?在設(shè)計中,我們可以利用線、面、留白將模塊進行分割;利用大小、投影、背景圖等突出視覺層次;利用顏色對比提高視覺感受;利用文字對比提高界面的可閱讀性。

1.利用線、面、留白將模塊進行分割

大家記得在設(shè)計前我們已經(jīng)對界面中相關(guān)聯(lián)的元素進行了組合,組合之后就可以利用線、面、留白的方式,將不相關(guān)聯(lián)的元素進行分割,提高界面的視覺層次,從而提高用戶的瀏覽和操作效率。

       undefined     

線分割:是最為基礎(chǔ)的分割方式,其優(yōu)勢是占用空間小、分割感弱,多用于列表、Feed流中。需要注意的是,分割線顏色設(shè)置需要非常淺,避免模塊之間強烈的分割感,比如橘子娛樂的列表就是采用若隱若現(xiàn)的線,讓列表中的內(nèi)容更規(guī)整。


面分割:也可叫背景欄分割,其優(yōu)勢是占用空間小、可操作性高,同時能夠更好的區(qū)分不同模塊之間的關(guān)系,多用于模塊和模塊之間的分割,比如轉(zhuǎn)轉(zhuǎn)個人主頁的模塊采用面分割瀏覽性更強。


留白分割:是iOS11發(fā)布之后興起的以留白或間距的方式進行分割,其優(yōu)勢是無強烈的分割感,界面清爽,多用于比較有規(guī)律或以大圖為主的模塊之間的分割,比如轉(zhuǎn)轉(zhuǎn)主頁下方的賣二手還錢、買實惠好貨等,其內(nèi)容部分都較為規(guī)則,采用該方式較為合適。

2.利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次,我們還可以通過投影、大小、布局等增加界面的對比,從而突出重要信息。

       undefined     

投影:是界面對比較常用的一種方式,其優(yōu)勢是提升界面的空間感,改變視覺次序,通過投影大小的變化還可營造不同的空間關(guān)系,多用于卡片風格的設(shè)計中,比如Keep均是采用卡片風格的設(shè)計,添加投影后讓界面視覺層次更突出了。


大小:是大眾最為熟知的對比方式,其優(yōu)勢是通過大小對比能夠很快的拉開視覺層次,同時能夠很好的引導用戶瀏覽路徑,比如ofo黃色的大按鈕遠遠都能看見,該頁面就一個目的掃碼用車。


背景圖:往往不如投影和大小常用,但是它的使用可以將模塊從其他樣式中年凸現(xiàn)出來,多用于banner、推薦等重要模塊中,比如美圖秀秀的推薦模塊,該模塊可以說是美圖的核心模塊。

3.利用顏色對比提高視覺感受

顏色是最容易感知到的對比方式,通過顏色我們可以明確哪些是重要信息,在使用中我們可以通過色相、明暗、飽和度上進行對比,其多用在按鈕、重要信息、導航、背景板中。

       undefined     

自如首頁上的租房、服務(wù)、旅行采用對比色進行強調(diào)對比,進入頁面用戶就能夠清楚這三塊是是界面的核心功能,同時引導用戶關(guān)注右側(cè)的具體服務(wù)信息。


淘票票首頁中的按鈕、引導提示、標簽欄選中均用了紅色進行強調(diào)對比,很容易引起用戶的注意,讓用戶看一眼就知道如何操作。


招商銀行首頁中的話題PK采用對比色進行強調(diào)對比,很容易引起用戶操作的興趣。

4.利用文字對比提高界面的可閱讀性

文字的層次感往往和字體大小和明暗有關(guān),其中字體大小是提高文字信息層級的重要手段,在文字排版中如果文字之間的層次不清晰,那么一定是大小的對比不夠,在UI中字體大小對比往往在4-8px較為適合,如下圖所示。

       undefined     

當字體大小對比適合之后就需要通過通過字體的明暗突出主要信息,弱化次要信息,從而提高界面的可閱讀性,如下圖所示。

       undefined     

在UI設(shè)計中我們往往都設(shè)定了字體規(guī)范,這樣不僅能夠達到設(shè)計統(tǒng)一,同時也有很好的對比性,常用字號為40, 36, 32,28,24, 22(px),比如優(yōu)酷的星球頁面,通過字體大小,顏色深淺的對比,讓用戶首先看到重要信息,弱化次要信息。

            

三、總結(jié)


在界面設(shè)計中為了降低用戶的理解成本,突出重點內(nèi)容,讓用戶使用起來舒適,就需要有個清晰的內(nèi)容層次和視覺層次。

在設(shè)計前我們需要考慮將相關(guān)聯(lián)的元素進行組合;確認內(nèi)容優(yōu)先級,將優(yōu)先級高的放在前面;確認重要內(nèi)容,將其差異化設(shè)計。

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

 

官方揭秘!飛豬首頁2018完整改版背后的設(shè)計過程回顧

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

飛豬首頁在這兩年,經(jīng)歷過無數(shù)次大大小小的改造。而在2018年7-8月,我們對飛豬首頁進行了尤為重要的,一次較為完整的改頭換面。這篇文章,包含了飛豬首頁歷次改版的回顧。我們也想和大家分享一下,2018年,我們這次完整改造背后的思考。

飛豬首頁的歷史

我在2015年畢業(yè)后,就來到了飛豬。其實當時還沒有飛豬的概念,那時候的 app 叫「阿里旅行·去啊」,后來了解到我們還有過「淘寶旅行」、「阿里旅行」、「去啊」等這些曾用名。

說起名字還有個故事。我剛工作那會打Uber,司機們都特熱情,打車能和你聊一路。

有個司機問我:「你是在阿里哪個部門工作呀?」,我就說:「去啊」。司機很激動,馬上說:「哦哦,我知道,那個去哪兒網(wǎng),頭像是綠色駱駝的那個!我老婆手機里就裝了一個!」

我連忙說:「不是的不是的,我們叫去啊,不叫去哪兒。我們也叫阿里旅行,或者淘寶旅行,你知道吧…」

然后我們討論了一路「去啊」和「去哪兒」的區(qū)別。

雖然直到我下車,我也不知道司機老哥有沒有弄明白。

這個事其實很有代表性。在當時,旅行市場最大的品牌就兩個,攜程和去哪兒。雖然市場上還有同程、窮游、螞蜂窩、驢媽媽、藝龍等旅行相關(guān)的app,但我們就叫「去啊」,其實已經(jīng)暴露了我們的目的(并不是為了讓大家想下「去哪兒」的時候,不小心下載了「去啊」),而是我們當時的目標就是要做一個對標OTA 的旅行預訂工具。

這時候我們的首頁和他們比起來,簡直滿分。當然,我指的是相似度,滿分。

這其實就是飛豬的起源版本首頁。在這里我們可以看到巨大的機票、酒店這樣的旅行類目預訂的入口,其實就是為了讓用戶有「預訂」的認知。

直到有一天,產(chǎn)品經(jīng)理在壓榨設(shè)計師出圖,我隱約聽到「我們是平臺,不是OTA」這樣的說法。那個設(shè)計師熬掉好幾根頭發(fā)之后,方案確定了,我們便有了下面這個版本的首頁。

我們看到,這個版本的首頁看起來不像攜程了,更像是當時的淘寶。那個產(chǎn)品經(jīng)理把他的 iphone5s 擦得锃亮,非常興奮地給我展示:「你看,這個首頁,改得太棒了!比以前好多了!」

其實以我當時的聰明才智,真沒看出來。但后來想想,這個改版其實是一次覺醒。這個改版意味著,我們要在平臺的業(yè)務(wù)模式下,在機票酒店這樣的預訂心智之外,找到自己的特色。

而這種差異化的思維模式影響了接下來一年多的首頁設(shè)計。

剛開始接首頁時,我們嘗試從內(nèi)容進行突破,將商品羅列升級為旅行內(nèi)容。

同時,在品牌升級為飛豬之后,我們嘗試為用戶提供更個性的服務(wù),基于用戶可能想去、準備出發(fā)、正在旅行等不同階段,設(shè)計了「目的地個性化」模塊,讓有不同需求的用戶可以看到不一樣的目的地、玩法、商品。

后來我們新起了場景化項目,有個業(yè)務(wù)小組產(chǎn)出了全球第一站、周邊好去處這兩個出境、周邊的導購場景。

并且我們將首頁所有的信息都進行了個性化處理,讓每個人每天可以看到不一樣的內(nèi)容。

當然,首頁的樣式看起來越來越美好了,但我們?nèi)匀徊粷M意。

歷史版本首頁的問題

上面這些版本的首頁,有一個共性:我們一直圍繞著業(yè)務(wù)的布局,在首頁上設(shè)計業(yè)務(wù)模塊。比如下面的這些模塊:

而體現(xiàn)在數(shù)據(jù)上,也有這么幾個共性:

  • 用戶最主要的點擊發(fā)生在頭部類目預訂;
  • 用戶在頁面中尾部的點擊非常低;
  • 用戶可能看到了頁面中尾部,但仍不點擊。

用一句話來總結(jié),就是用戶對排列業(yè)務(wù)模塊搭出的首頁沒有建立認知。

2018年4月開始,我們著手對飛豬首頁進行一輪整體的改版。在改版之前,我們首先需要對之前首頁進行一次全面的體檢。

在這里,我們使用 NLP 理解層次,來深入理解飛豬首頁到底發(fā)生了什么。

簡單介紹一下 NLP 理解層次:我們一般可以通過6個層次理解事物,由低到高分別是:環(huán)境、行為、能力、BVR(信念/價值觀/原則)、身份、精神。這套框架幾乎可以幫我們分析理解一切問題。

△ 用NLP分析問題背后的原因

1. 環(huán)境:飛豬業(yè)務(wù)主導的環(huán)境

飛豬的整體環(huán)境核心是以業(yè)務(wù)為導向的,設(shè)計的大部分工作是屬于支持性質(zhì)的。在首頁工作中,我們做得更主動一些,常給一些提案,也可以算作是共創(chuàng)。但核心的決策權(quán)是屬于業(yè)務(wù)和產(chǎn)品的,所以這就導致,飛豬最后上線的東西,往往優(yōu)先考慮的是業(yè)務(wù)的重要性。

2. 行為:首頁根據(jù)業(yè)務(wù)調(diào)整不斷改版

我們始終在跟蹤首頁的數(shù)據(jù),并根據(jù)數(shù)據(jù)的變化、業(yè)務(wù)的傾向性對首頁進行日常的調(diào)整。

3. 能力:設(shè)想的場景沒有做好,維度少/內(nèi)容欠佳

我們希望做場景化,其實是很好的想法。但業(yè)務(wù)前期只嘗試了周邊、出境兩個場景,這很難匹配旅行用戶各種各樣的偏好。

同時,飛豬在生產(chǎn)高質(zhì)量內(nèi)容的方面做得不夠,產(chǎn)出的內(nèi)容沒有讓用戶產(chǎn)生興趣。

4. BVR:內(nèi)容數(shù)量>內(nèi)容質(zhì)量

因為飛豬的內(nèi)容起步晚,在起步初期的目標是提高內(nèi)容的數(shù)量,而非生產(chǎn)高質(zhì)量的爆款文章。所以當后續(xù)我們需要用到內(nèi)容時,常常擔心取到一些充數(shù)的質(zhì)量不高的內(nèi)容。

5. 身份:售賣平臺

飛豬以往的定位仍然是旅行商品預訂平臺,這也會在一定程度上,導致我們不會在提升內(nèi)容質(zhì)量上投入太多。

6. 精神:?

這個層面我只能說我個人的理解:我希望飛豬能讓旅行者享受更多旅行的快樂。

2018年飛豬首頁做的改變和突破

通過分析我們發(fā)現(xiàn),飛豬的身份定位,對我們設(shè)計產(chǎn)品會有從表及里的深度影響。如果我們定位是旅行預訂工具,必然只能做出小的創(chuàng)新。所以如果要做大改變,首先要定義飛豬的新身份。

而恰巧,2018年飛豬迎來了新的品牌定義──「全球fun肆玩」。我們開始從旅行預訂平臺進行更大膽的轉(zhuǎn)型,試圖建立新的在線旅游生態(tài)。

在這個身份轉(zhuǎn)變的契機下,我們在2018年對首頁進行了升級。

1. 矯正目標

飛豬的新目標叫「全球fun肆玩」,關(guān)鍵在fun。我們需要通過設(shè)計,激發(fā)用戶旅行的欲望。

2. 重構(gòu)框架

舊版飛豬的框架依然是圍繞業(yè)務(wù)架構(gòu)建立的。而在這次改版中,我們希望基于每一個普通旅行者的視角,來建立新的首頁框架。

在建立框架之前,我們需要挖掘的是,旅行是什么?

有人說旅行是機酒火汽的預訂,其實不是。我理解的旅行指的是人,花一段時間,離開現(xiàn)在的位置,去感受快樂。其中包含了角色、目的、地點、時間4個關(guān)鍵的因素。而取決于角色的不同,每個人在旅行上作出的決定也是不同的,所以「人」是旅行真正的內(nèi)在因素。

而我們認知里零散的旅行方式,如:跟團游、自由行、親子游、出境游、周邊游只是被內(nèi)在因素對旅行產(chǎn)生影響的結(jié)果。

而偏偏旅行還要求我們產(chǎn)生玩的想法,留出足夠的時間,從一個地方去另一個地方。當定機票酒店已經(jīng)不再是個難題的時候,我們決策困難的原因更多是在自身:我不知道自己想要什么樣的旅行。

所以我們解析了用戶的旅行特性,發(fā)現(xiàn)每個用戶喜歡的內(nèi)容、商品,都是不同,且是特色鮮明的。所以我們的核心需要做到的,就是讓這些無數(shù)的普通人,都能感知自己的內(nèi)在,并找到和自己內(nèi)在適合的旅行方式。而直接放商品、內(nèi)容都讓用戶難以理解。所以我們選擇了更理想的方式來讓用戶理解自己的內(nèi)在──主題。

我對主題這兩個字的定義是:一句話描述你想要的旅行。這句話可以是:情侶最愛去、國內(nèi)必玩地、舌尖上的中國、隱居西子湖畔等等和你匹配的點。

我們初步將主題組織成了靈感、計劃、商品三個維度,希望能在玩什么、什么時間去、買什么等旅行決策上,對用戶由內(nèi)而外地產(chǎn)生幫助。

3. 培養(yǎng)能力

在搭建好了框架后,我們需要的就是更好的承接能力。核心考驗的就是內(nèi)容的生產(chǎn)和算法的組織。

為了讓用戶看到更好的內(nèi)容,我們使用了新的后臺,可以通過算法,動態(tài)選出具有相似主題的無數(shù)商品,搭建頻道,并進行投放,做到千人千面。

在內(nèi)容質(zhì)量上,我們還將繼續(xù)尋找突破口,進行新的升級。

飛豬2018的首頁,我們也在視覺上打破傳統(tǒng),做了很多突破。

突破空間 – 打破「屏效比」的偽命題

在移動端設(shè)計的時候,設(shè)計師往往被要求利用屏幕的空間。

而業(yè)務(wù)方和 PD 也非常機智,總能有一些金點子,例如:「區(qū)塊再矮一點」、「文字再小一點」、「給我多放幾排」、「一排再給我多放幾個」。

在這樣的訴求下,我們的界面設(shè)計常常會失去很多留白空間,導致信息密度會很大。而太大的信息密度反而會影響用戶的閱讀欲望,甚至降低用戶的閱讀效率。

而隨著設(shè)計影響力的增加,大家認識到了一個更美的、更能討人喜歡的界面,不是什么都放上來的界面。

圖片 – 大圖凸顯內(nèi)容品質(zhì)

由于以往對空間利用的苛刻,我們的圖片常常會被壓縮得很窄、很矮,有時甚至無法形成系統(tǒng)的圖片比例。而在解決了空間的問題后,我們可以按照1 : 1、16 : 9、4 : 3這樣的標準比例來設(shè)計圖片坑位的大小。這些比例能更好地幫助用戶閱讀圖片的內(nèi)容。

文字 – 不是裝飾,更不僅是內(nèi)容

隨著iOS11的推出,大標題對設(shè)計已經(jīng)產(chǎn)生了較大的影響力。我們在設(shè)計首頁時就做了大膽的嘗試,使用簡短有力的大標題和留白作為每個模塊的區(qū)隔,讓用戶的視線可以從一個模塊自然地過渡到下一個模塊。

同時,我們盡量保證內(nèi)容是簡短有力的,這樣就可以用更大的字號,減少用戶閱讀的成本。

色彩 – 來自于旅行的顏色

以往在猜你喜歡中,我們的標簽都是用黃色或者黑色底,蓋在圖上來做的。但這會影響圖片的品質(zhì),同時較小的標簽文字蓋在圖上,其實并不適合用戶閱讀。

所以我們優(yōu)化了方案,讓小文字和圖片不要重疊,提升了文字的閱讀性。同時通過改變標簽文字的顏色,讓標簽成為了商品卡片的點綴。

未來的首頁

我們回顧了飛豬首頁的設(shè)計歷史,并看到了2018年我們的探索。這背后伴隨的是行業(yè)、市場、用戶的變化,提醒著我們需要把產(chǎn)品設(shè)計得更優(yōu)秀,來面對無盡的挑戰(zhàn)。

2018年飛豬首頁的改版,也代表著首頁設(shè)計模式的轉(zhuǎn)變,從業(yè)務(wù)爭奪入口轉(zhuǎn)型為基于用戶體驗,設(shè)計師、產(chǎn)品經(jīng)理、業(yè)務(wù)方、技術(shù)團隊協(xié)同作戰(zhàn)的模式。

而作為設(shè)計師,更需要始終圍繞著用戶,在桎梏中跳舞,做出好體驗的設(shè)計。

2018飛豬首頁的改版只是開始,飛豬才剛剛轉(zhuǎn)型,未來我們將更加緊密地圍繞用戶,提供質(zhì)的服務(wù)。

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

 

用迪士尼動畫原則,提升UI動效體驗

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

迪士尼動畫的12條原則是設(shè)計師必須要掌握的經(jīng)典指導性原則,是由Ollie Johnston和Frank Thomas在他們的書《The Illusion of Life》中提出來的觀點(譯者注:這本書在豆瓣的評分有9.3分,值得一看)。這些原則最初是用來為動畫片這種傳統(tǒng)的形式設(shè)計的,然而,這些原則也同樣適用于UI設(shè)計。所以,我想在這里做一個有趣的嘗試,看能否將這些動畫原則聯(lián)系起來。

用迪士尼動畫原則,提升UI動效體驗

一、擠壓和拉伸

在動畫中,擠壓和拉伸代表了物體的重力,質(zhì)量,重量和靈活性。舉例來說,當一個彈球在它撞擊地面時會發(fā)生形態(tài)變化,就是擠壓和拉伸。

在界面中,擠壓和拉伸很容易就聯(lián)想到按鈕。當一個按鈕被按下時,就可以理解為受到了擠壓,通過控制按鈕的擠壓和拉伸,我們可以很輕易的做好一個按鈕的交互動畫。除了按鈕之外,這種原則也可以應用于UI中的任何交互元素上。

按鈕在交互時的擠壓和拉伸

擠壓和拉伸被應用于側(cè)邊欄

二、預期動作

讓觀眾能預先知道接下來將會發(fā)生什么,它是先于下一步會發(fā)生的動作。舉例來說,迪士尼動畫里經(jīng)常有從高空往下跳躍時會先彎曲膝蓋再跳、正在跑步的人要停止跑步前會逐漸變慢步伐等等。

在界面中,懸停狀態(tài)就是很好的例子。當我們把鼠標懸停在元素上時,元素會提供反饋,表明它是可以點擊的,并且在點擊時,又會有一些別的反饋。

懸停的交互通常會暗示這個按鈕是可以點的

在有水平滾動界面里,通常在交互時會顯示下一個元素的部分內(nèi)容。這其實是一個很好的例子,因為它是在告知用戶下一步的一些信息。

三、時間節(jié)奏

在傳統(tǒng)動畫中,時間會決定關(guān)鍵幀的繪制方式。幀數(shù)越多,動畫就越流暢,同時也更慢,時間能夠給動畫賦予情緒和性格。

時間的節(jié)奏感是任何動畫的基礎(chǔ),速度在元素編排中起著非常重要的作用。速度太慢,用戶會不耐煩,速度太快,用戶又會錯過一些內(nèi)容。一般來說,大多數(shù)UI動畫在200-600ms之間,其中懸停和反饋交互時長大約為300ms,精細的轉(zhuǎn)場動畫大約在500ms。也可以去參考谷歌的動畫規(guī)范(https://material.io/design/motion/speed.html#duration),里面非常詳細的解釋了每種動畫類型的持續(xù)時間。

一些設(shè)計系統(tǒng),如Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把運動的節(jié)奏感視為一個很重要的方面,并為每種類型的過渡都制定了嚴格的規(guī)范。

右邊的過渡動畫顯得太過于漫長,繁瑣。

四、漸快與漸慢

在現(xiàn)實世界中,大多數(shù)物體都遵循著緩動運動規(guī)律。也就是說,物體的運動并不會瞬間開始或瞬間結(jié)束,就像一個物體自由落體,也是一開始很慢后面才變會變快。

左側(cè)的卡片是沒有緩動的,右側(cè)的是帶有緩動的,看起來會自然很多。

給UI中的元素加上緩動會讓它看起來更加自然,緩動和節(jié)奏感都是可以有效的提升動畫的品質(zhì)。

五、呈現(xiàn)方式

舞臺中的表演需要合適的編排才會精彩。也就是說,對象在場景中如何擺放,每個動畫又如何出現(xiàn),關(guān)乎演出的質(zhì)量。通過這種編排,能夠?qū)⒆⒁饬σ蜃钪匾慕巧?

在界面中,呈現(xiàn)方式能夠決定元素的位置,以及在交互時,它應該如何編排才能將用戶的注意力引向預期的元素。

比如現(xiàn)在有一個基于興趣的音樂APP,對這個應用來說,最重要的事就是讓動畫引導用戶選擇他們所喜歡的音樂。因此,有必要將類似的操作與其他元素分開編排,有目的的引導用戶。

六、弧形軌跡

一個從高處拋出的小球,運動軌跡會做拋物線軌跡運動,弧線能使物體的運動更加自然。

在界面中,沿著對角線的元素沿著弧線軌跡將會使運動變得更加自然。當需要凸顯出元素的運動路徑時,多嘗試使用弧線軌跡。

通過對比,能夠發(fā)現(xiàn)右側(cè)的弧線運動軌跡會比左側(cè)的直線運動軌跡顯得更加自然。

七、附屬動作

在動畫中,次要動作能夠起到烘托主要動作,比如動畫中的角色在走路時,頭部的晃動就是次要動作,卻能夠讓角色行走顯得更加自然。

在界面中,次要操作能夠起到強化關(guān)鍵動作,當元素需要向用戶提供反饋時,這個方法非常管用。所有的微交互都是基于這個附屬動作原理。

按鈕邊上的粒子效果強化了主按鈕的點擊效果

八、夸張和吸引力

場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。

在界面中,重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設(shè)計規(guī)范中的FAB按鈕就是一個很好的例子,F(xiàn)AB按鈕在不動的時候也比較能引起注意,因為它通常會帶有比較鮮明的顏色,并且是獨立懸浮在界面元素之上的。當它被點擊時,F(xiàn)AB的動畫被放大,把整個界面都占滿,使得它完全占據(jù)用戶的注意力。

FAB 夸張的交互形式

對于支付這么重要功能的按鈕,通過夸張的動效引起用戶的注意

九、跟隨動作和重疊動作

想象一只兔子從高處跳下來,當兔子開始起跳時,它的耳朵動作會與身體動作發(fā)生錯位。然后當它著陸時,它的身體停下來了,但是耳朵還在動。前者稱之為跟隨動作,后者被稱為重疊動作。其原理說的就是:沒有任何一種物體會突然停止,物體的運動是一個部分接著另一個部分的。

在界面中,可以使元素在停止之前超過它們原本的位置,使得元素運動更加自然。(譯者注:大白話就是我們常說的回彈效果。)

界面有一定的回彈,會顯得更加自然。

當界面滾動時,文字會跟隨圖片的運動,圖片與文字以不同的速度運動會更加自然。(譯者注:像是被拖著走的那種感覺)

總結(jié)

界面中的每一次交互都必須在適當?shù)膱鼍爸芯脑O(shè)計,讓整個體驗更具沉靜感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗更加協(xié)調(diào)自然。

這些原則正在以不同的形式應用于當今的數(shù)字產(chǎn)品中,值得敬畏的是,30年前設(shè)計的一套規(guī)則到今天仍然適用。

藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

10個記憶深刻的產(chǎn)品設(shè)計神細節(jié)!

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

在互聯(lián)網(wǎng)快速發(fā)展的進程中,越來越多人將個人財產(chǎn)、隱私、數(shù)據(jù),以及心理安全都存放在產(chǎn)品平臺上。這么一來,想要產(chǎn)品獲得用戶芳心,讓用戶用得放心,不僅要為用戶提供安全可靠的保障系統(tǒng),也要將安全氛圍顯化傳達給用戶。那么,可以從哪些方面著手設(shè)計產(chǎn)品,提升用戶安全感呢?下面一些案例,會從新的角度給你靈感。

上期回顧:《每月更新!10個記憶深刻的產(chǎn)品設(shè)計神細節(jié)》

1、ZEPETO是如何做到強制用戶注冊,卻不讓人反感的?

很多時候我們可能只是心血來潮想嘗試一下某款app,并沒有注冊帳號長期使用的打算。所以每當打開的應用,如果出現(xiàn)強制要求注冊,才能開啟使用的情況,真的會對產(chǎn)品的體驗好感全無,甚至怕麻煩放棄使用。一些產(chǎn)品會提供「游客」身份試用簡版「會員」享全部功能的選擇給新用戶,這無疑是一種體驗不錯的方案。

但如果受限于功能使用,或者就是要提高產(chǎn)品的用戶量,必須引導注冊,該如何減少用戶的反感情緒呢?

最近爆紅的ZEPETO的登錄界面就很值得借鑒。用「制作ZEPETO」和「已有ZEPETO」的文案,替代生硬的「登錄」與「注冊」。相同的功能設(shè)計,但因文案傳達情緒的不同給人帶來不一樣的感受。

「制作ZEPETO」幾個字不僅直白地說明了產(chǎn)品意圖,還悄悄將「注冊」轉(zhuǎn)化成了用戶制作ZEPETO過程的一部分,無形中降低了用戶對強制性注冊的心理防備。

2、「抖音」的另類溫馨提示,規(guī)避責任和風險

為了吸引粉絲,短視頻的作者會爭相模仿,一些觀眾用戶也會因為有趣去體驗嘗試,但很多視頻里的體驗和動作都是存在安全隱患的。為了規(guī)避風險,「抖音」里某些視頻的下方會提示:「效果未知,請勿輕易嘗試」或者「該行為存在危險,請勿輕易模仿」。

如果刷「抖音」時長超過五小時,也會提示看視頻時長并提醒用戶注意適當休息。這些小提示的出現(xiàn),都是出于對用戶健康安全著想與負責的引導,也是產(chǎn)品團隊規(guī)避責任與風險的方式。

3、好的用戶提示能給用戶增加「安全感」

用戶在進行語音交互時,想取消當前操作的概率非常大。如果系統(tǒng)按照錯誤的指令執(zhí)行,會給用戶帶來挫敗感。「支付寶」的語音交互會根據(jù)用戶當前的手勢進行操作提醒,以減少用戶的學習成本。

不存在干擾或打斷用戶操作行為進行的強制性,又能給予用戶對當前操作進行修正的機會。讓用戶輕松勝任操作,利用「控制錯覺」打破用戶對不熟悉操作的顧慮與恐懼感。

4、適當?shù)摹腹ぞ咛崾尽?能增加用戶的期待感

對于大多數(shù)團隊來說,敏捷開發(fā)時間短任務(wù)重,在有限時間內(nèi)并不能把所有功能都上線?!肝⑿拧箞F隊在訂閱號里,添加了未開發(fā)功能提示。

當用戶長按文章時會出現(xiàn)toast提示,用特定的交互與簡要文字說明提示用戶「功能正在開發(fā)未上線」。

「工具提示」往往出現(xiàn)在新用戶引導流程,但微信團隊將它用在了未完成開發(fā)功能的提示上,讓用戶對之后上線的功能產(chǎn)生期待感。

5、怎樣向用戶傳達隱性的安全感?

在支付寶的「我的」頁面中,「總資產(chǎn)」的后面會顯示綠色的「賬戶安全保障中」的文案。同樣的,「財富」頁面的「總資產(chǎn)」項后面也會顯示「保障中」的微文案。不斷出現(xiàn)強調(diào)資金安全性的文案,其實是支付寶在通過細節(jié)設(shè)計提升用戶在使用產(chǎn)品期間的安全感。因為當涉及金錢交易時,用戶都是極其慎重與不安的。

所以產(chǎn)品不僅要為用戶提供安全可靠的保障系統(tǒng),也要將不可見的安全氛圍顯性化傳達給用戶。通過界面細節(jié),比如文案展示出產(chǎn)品的安全性,能借助心理暗示的作用緩解用戶內(nèi)心的不安情緒,增強對產(chǎn)品的信任感。

6、「即刻」讓社區(qū)不友善言論自動變萌的魔法是什么?

「即刻」app對于用戶評論的審核機制十分具有萌點:如果用戶在發(fā)表評論的內(nèi)容中,包含不友善或具有人生攻擊的詞句,系統(tǒng)會自動彈出模態(tài)彈窗,提醒用戶修改留言。如果用戶依舊不愿修改言論并堅持發(fā)布,評論內(nèi)容是可以發(fā)布成功的,但言論中包含的不符合平臺規(guī)定的字眼會被系統(tǒng)強制修改。

比如在發(fā)布的評論中包含具有攻擊性的詞語「智障」,發(fā)布成功后會被系統(tǒng)修改為「大笨蛋」。沒有強行阻斷用戶的評論行為對用戶造成評論失敗的挫敗感,又巧妙化解了不友善言論的發(fā)布,維護了社區(qū)的和諧。將所有負面甚至不文明的言論全都自動過濾強行變萌,設(shè)計出這個審核功能的小哥哥或小姐姐一定有著一顆敏感又溫柔的心吧~

7、也許你都不知道,自己會有「恐懼癥」

「恐懼癥」是一種以恐懼癥狀為主要臨床表現(xiàn)的精神類疾病,指對特定的人、物或場景有按耐不住的焦慮、緊張甚至是恐懼的心理。如果在「百度」搜索含有「密集恐懼癥」、「深??謶职Y」等類似關(guān)鍵詞的圖片,會在呈現(xiàn)完整加載結(jié)果前出現(xiàn)遮罩遮蔽圖片,并用文案提醒用戶圖片可能引起不適請自行選擇是否繼續(xù)查看。

由于無法確保瀏覽內(nèi)容的用戶是否具有相關(guān)病癥,強制性阻斷操作給予提醒并將是否繼續(xù)的選擇權(quán)交與用戶,算是對用戶的使用體驗很用心的考量了吧。

8、替用戶做決定,不一定是壞事

對于上班族而言,每天吃什么簡直是個世紀難題。面對海量的店家及不同的組合優(yōu)惠,常常挑花了眼,還是無從下手。如果你也存在這樣的問題,不如來試試「美團外賣」新推出的「滿減神器」吧。

針對店家的優(yōu)惠特點,系統(tǒng)會提前幫你羅列出最佳的優(yōu)惠選擇。不僅會標注出各個套餐近期購買的人數(shù),還會優(yōu)先推薦「高回頭率」的套餐選擇。解決了選擇困難的痛點,讓用戶吃得實惠又省心。

9、轉(zhuǎn)賬也終于有「后悔藥」可以吃了

「支付寶」與「微信」早在幾年前就推出了「延時到賬」功能,但由于入口隱藏較深使用的人并不多。更重要的是即便中途發(fā)現(xiàn)被騙,也無法立馬撤銷交易,一旦延遲轉(zhuǎn)賬超時錢,還是會直接打到對方賬戶。而這一次新版「支付寶」聯(lián)合警方優(yōu)化了反詐騙的流程,對「延時到賬」功能的升級可謂是真正解決了轉(zhuǎn)賬安全的痛點。

對于選擇「延時到賬」的用戶,如果在到賬前發(fā)現(xiàn)被騙,雖無法自行撤回款項但只要上傳報警的相關(guān)憑證,這筆轉(zhuǎn)賬就會被臨時凍結(jié)。一旦警方判定被詐騙的情況屬實,用戶的轉(zhuǎn)賬就能原路返回轉(zhuǎn)出帳號了。更貼心的是,即便用戶沒有進行「延時轉(zhuǎn)賬」操作,當「支付寶」的風控系統(tǒng)識別到轉(zhuǎn)賬存在風險(比如對收款方賬戶的交易歷史行為存疑)會自動提醒用戶進行「延時轉(zhuǎn)賬」。

10、美團外賣上線「加密號碼」,讓訂餐更安心

今天在用「美團外賣」與商家進行聯(lián)系時,發(fā)現(xiàn)了一個「加密號碼」的彈窗。當你確認聯(lián)系商家后,會出現(xiàn)語音提示:「美團外賣保護你的隱私,商家將不會知道你的號碼」。這個小細節(jié)很贊是因為在保護了用戶隱私的同時也通過語音提示在用戶心中強化了平臺的安全性與貼心。

以前如果用戶給商家差評了,很有可能會接到不少商家的騷擾電話,造成不好的產(chǎn)品使用體驗。因此團隊設(shè)計了「加密號碼」的功能,加強了用戶隱私的保護,讓聯(lián)系商家變得更安心無負擔。

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

 

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔