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

          首頁

          百度APP是如何進行視頻沉浸式設計的?

          seo達人



          前言

          沉浸式體驗是讓人專注在當前的目標,全身心投入并感到愉悅和滿足,從而忽略時間的流逝。應用到界面上則是更強調聚焦內容,減少不必要的打擾。本次研究與實踐針對視頻場景中視頻所呈現的畫面,通過精細化的設計,在多樣化的手機屏幕中呈現時,能夠帶給用戶更為沉浸的視頻觀看體驗。

           

          百度APP是如何進行視頻沉浸式設計的?

          視頻播放器中視頻畫面當然是最主要的內容,以此作為突破點進行思考:

          • 最大化畫面視野:通過改變視頻畫面本身的大小,減少頁面“留白”,讓用戶更聚焦視頻畫面,觀看視頻時更專注。
          • 最佳視線觀看位置:將不同高度的視頻按照頁面結構去布局視頻畫面,通過畫面避讓狀態欄、頂底bar結構的方式,使畫面更加整潔,減少元素混亂帶來的干擾,同時整體位置偏上展示,視線落點更加舒適。
          • 觀看體驗連續性:視頻瀏覽過程中,非必要不打斷視頻瀏覽,在進行如查看評論、臨時退出播放器等行為時,保證視頻播放的連貫性,方便用戶多操作。

          圖片

           

           

          一、最大化視頻畫面視野

          01、視頻畫面裁剪 

          隨著時代的發展,為提升消費者對手機的操作體驗,智能手機逐漸多元化,手機屏幕尺寸迭代更快、更加豐富多樣。手機作為視頻很重要的生產端,手機屏幕尺寸的多樣化影響到產出視頻尺寸的多樣化,同時用戶可通過視頻編輯工具任意編輯視頻尺寸,最終生產的視頻尺寸比例自由度非常高。據不完全統計視頻平臺中視頻尺寸達22萬多種,用戶使用機型近300種,在視頻尺寸多樣性及視頻展現媒介多樣性的現狀下需要兼容性更強的裁剪及展現規則才能帶給用戶更好的觀看體驗。我們要做的就是將不可控的視頻資源和不可控的瀏覽視頻設備設計為可控的視覺展示效果,并最大化視頻畫面。減少環境干擾,給用戶帶來沉浸式感官體驗。

          視頻寬撐滿手機屏寬后,將視頻尺寸分為四類:

          圖片

          1) 視頻高度>手機屏高

          視頻畫面寬度撐滿屏幕后,視頻整體居中于屏幕,居中裁剪視頻多余畫面。注:不允許畫面高度撐滿屏幕,寬度自適應導致畫面左右留黑效果。

          2) 視頻高度=手機屏高視頻居中于屏幕,剛好填滿屏幕,不需要裁剪處理。

          圖片

          3) 1:1<視頻高度<手機屏高

          此類尺寸較復雜、難處理,于是將限制裁剪面積和展示位置相結合,保證裁剪面積和位置可控。結合視頻平臺資源尺寸和業務目標來確認理想展示效果,反推定義最大裁剪面積,根據顯示位置多次判斷視頻放大后是否符合既定裁剪面積,最終確定當前視頻的顯示方式。同時支持根據不同視頻業務進行個性化定制,并且將裁剪面積云控處理,根據業務內不同時期的訴求限制比例來靈活調整展示效果,雙端也可分端定義數值;橫向協同及迭代成本極低,便于快速上線驗證效果。

          圖片圖片

          4) 橫版視頻(高寬比≤1:1)

          橫版視頻在手機屏幕中面積占比較小,畫面可識別度和飽滿度稍有欠缺,輕微擴大畫面視野,畫面瀏覽更加清晰有沖擊力。以不影響內容理解為前提,根據自身平臺視頻尺寸占比及視頻內容特點規定固定比例或比例范圍適度放大。

          圖片

          錦上添花,引入文字內容識別

          為避免因裁剪規則而裁剪到視頻關鍵文字對視頻內容獲取有障礙的問題,發揮百度強大的AI技術優勢,引入文字識別技術及視覺展現規則,進一步提升視頻展現樣式的可控性,同時能夠通過盡量少損失畫面達到畫面放大的效果,平衡畫面沉浸感和完整性的關系。左右文字被裁剪情況:文字左右設置安全距離,保證安全距離在屏幕內。如果安全區超出屏幕,則按照上方描述的裁剪規則進行退檔顯示(滿屏至不裁剪之間的檔位),直至文字不被裁剪。極端情況退檔至最后一檔,視頻畫面不裁剪。

          圖片

          橫版資源文字左右被裁剪情況:按照固定尺寸退檔

          圖片

          上下文字被裁剪情況:文字上下設置安全距離,保證安全距離在屏幕內。如果安全區超出屏幕,則按照上方裁剪規則進行滿屏至不裁剪之間的檔位進行退檔顯示,此情況只會從全屏一檔顯示退至二檔顯示。

          圖片

          裁剪面積、展示比例、文字安全距離等數據都通過云控的方式下發,靈活配置到不同業務中,保證裁剪規則一致的同時又能針對不同業務進行定制展現,也可快速調整并支持上線實驗,來驗證適合自己產品的展示效果。

           

          02、智能滿屏

          通過裁剪方式放大畫面視野之外,還通過讓用戶自主交互操作再次放大畫面視野,調整到自己喜歡的觀看視頻的方式。相較于上方默認裁剪放大,滿屏方式更加激進極致,畫面放大更多。開啟方式通過面板功能按鈕開啟智能滿屏外,增加便捷交互開啟手勢,用戶可雙指放大快速開啟。圖片

          由于滿屏是用戶主動操作放大行為,可以接受文字內容被裁剪,但也需要有節制的放大,避免帶來畫面裁剪過多視覺體驗不佳的問題。為了保證95%以上資源撐滿全屏,達到放大畫面視野極致體驗。同時最大畫面裁剪面積不超過一定比例(根據自身業務視頻資源判斷),將視頻資源細分為3類進行不同效果處理:1.可繼續放大至滿屏的視頻,則進行滿屏展現。2.不可繼續放大的視頻,如果繼續放大會導致裁剪畫面過多影響觀看完整度與觀看體驗,則保持上方提到的裁剪規則,不做另外處理。3.橫版視頻統一放大至固定尺寸,可根據自身業務資源進行放大尺寸的定義。

          圖片

           

          二、最佳視線觀看位置

          通過布局合理、舒適的畫面位置,也能提升瀏覽過程中用戶體驗的沉浸感。人的視覺中心一般會在物理中心的偏上方,于是在設計中我們將視頻畫面放在屏幕偏上的位置,用戶視線落點更加舒適,一般是用戶在瀏覽頁面時最先注意到的地方。同時視頻在頁面偏上的位置,能減少下方標題等信息過多對視頻畫面的遮擋。

          為了精細化處理不同比例的視頻資源,豎版視頻和橫版視頻根據頁面效果分別定義了最佳觀看展示位置。

          豎版視頻:高于1:1的視頻,按照頁面結構布局視頻畫面,避讓狀態欄、頂底bar操作,避免與頁面結構沖突帶來畫面凌亂不美觀的問題,同時能減少畫面參差帶來的干擾,增加沉浸瀏覽感受。

          圖片

          橫版視頻:等于矮于1:1的視頻,畫面按照屏幕高度比例展示在偏上的區域,高度比例可云控便于靈活調整。

          圖片

           

          三、觀看體驗連續性 

          01、視窗擠壓

          為了滿足用戶在視頻場景多角度信息獲取,在不打斷用戶視頻瀏覽的基礎上建設視窗擠壓交互體驗,提升觀看視頻的相對沉浸感。在視頻場景觀看評論時會彈起半屏面板,遮擋住視頻內容,導致用戶無法在瀏覽評論的同時觀看視頻內容。對短視頻重度用戶來說,對同時看評論和看視頻習慣的用戶有挑戰。通過視窗上移動擠壓功能,在瀏覽面板內容時不對視頻內容打斷,弱化面板內容給用戶帶來的影響。

          視窗高度固定,畫面寬高比越小畫面內容越小,觀看體驗不友好,所以豎版視頻對壓縮后的顯示尺寸進行干預,定義最小視頻畫面展示比例,盡量擴大畫面視野,保證觀看視頻的舒適度。

          圖片

          02、懸浮小窗 

          在不打斷用戶視頻瀏覽的基礎上還建設了懸浮小窗交互體驗,旨在為用戶提供完善優質的視頻消費體驗。用戶進行其它操作時仍保留視頻后臺播放,同時也能在屏幕角落觀看到縮略圖大小的視頻播放窗口,可以從任何頁面中觀看視頻,我們同時也保留了部分視頻基礎操作。觀看體驗連續性讓用戶對視頻有絕對的主控感,提升用戶使用體驗的滿意度。

          圖片

           

          寫在最后

          沉浸式體驗設計是幫助用戶減少畫面干擾,讓用戶專注于當前的視頻瀏覽,忽略時間的流逝進入心流狀態。我們通過放大畫面視野,增強畫面沖擊力的方式減少干擾,并解決在視頻畫面尺寸、手機屏幕分辨率極多的復雜情況下,保證畫面效果的穩定和可控,并且不會受阻于未來手機機型的擴充發展,普適性極強。同時通過視窗擠壓、懸浮小窗的交互體驗專注于當前的視頻瀏覽不被打斷,進一步提升視頻看播沉浸式體驗。后續我們將不斷探索視頻場景沉浸度提升方式,為用戶帶來更加舒適的觀看使用體驗。

          作者:百度APP用戶體驗

          轉載請注明:學UI網》百度APP是如何進行視頻沉浸式設計的?

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


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


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



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

          純純

          你是否有在聽別人說某某原理法則時一臉懵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的彈窗中只有一個“刪除”選項,沒有明顯的取消之類的途徑,那么用戶會覺得特別難受,感覺被強迫去刪除。如果當下有急需使用手機處理一些事情,那么這樣會把這種負面情緒給無限放大,讓用戶抓狂。


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


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




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


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


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


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


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


          按鈕越大越容易點擊

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


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

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


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

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


          適用邊界

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


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


          思考小結

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

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

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

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

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




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

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

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


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


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


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

          刪除、組織、隱藏

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


          簡化交互設計

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


          算法解放“生產力”

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


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



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

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


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


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


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


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

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

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

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



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

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


          自動檢測提示

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


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


          消除可能的失誤

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


          將失誤降至最低

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


          視覺暗示

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


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


          為用戶犯的錯買單

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


          范圍限制

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


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



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

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


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


          △頁面的中主按鈕更突出


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



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

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


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


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

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

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

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

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




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

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


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


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

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



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


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


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


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


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




          食之無味,棄之可惜

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


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


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

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



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


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


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


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


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




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

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


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


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


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

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


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


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


          思考總結

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

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

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



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


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


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


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


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


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



















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


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


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




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


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


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

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

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

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

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

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


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




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

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


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


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


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


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


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


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


          作者: 印跡_ 來源:站酷

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

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

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


          用動效創造可用性:動效設計的基本原理

          純純

          在筆者剛學習動效那會兒,因為執著于鉆研軟件技法,而忽略了動效的基本原理,導致作出了很多生硬的動效設計。和很多事情一樣,動效設計如果違背了自然規律,必定會損害產品的可用性。


          在用戶界面中,動效不僅僅是一種視覺裝飾,而是一種強大的力量,它可增強產品參與度并擴展設計交流的范圍。

          本文給大家介紹了十二項最基本的動效設計原理,這些都適合用于UX/UI設計項目中,是非常有用的運動原理,建議收藏反復食用。



          原理一:緩動 Easing

          緩動效果模擬了現實世界中對象隨時間加速或減速的方式,它適用于所有運動的元素。自然界中沒有東西是從一點呈線性地移動到另一點。現實中,物體在移動時往往會加速或減速。我們的大腦習慣于期待這種運動,因此在做動畫時,應利用此規律。自然的運動會讓用戶對你的應用感覺更舒適,從而產生更好的總體體驗。


          線性動畫

          沒有任何速度上的變化的的動畫稱為線性動畫,如坐標圖所示,運動的曲線成直線狀態。這種動畫效果往往顯得很僵硬,不自然,讓用戶覺得不協調。一般來說,應避免線性運動。



          緩出動畫

          運動的開頭速度很快,結尾處逐漸減速的動畫稱為緩出動畫。運動曲線呈拋物線狀態,緩出動畫最適合界面里面的動效,快速的入場給人反應很快的感覺。



          緩入動畫

          和緩出相反,緩入動畫是開頭慢結尾快,這就像自然落下的球體一樣,速度越來越快。但是,從交互的角度來看,緩入可能讓人感覺有點不自然,因為結尾很突然;在現實中移動的物體往往是減速,而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果,這會對網站或應用的響應速度給人的感覺產生負面影響。



          緩入緩出動畫

          把緩入和緩出曲線連接在一起,就是完整的緩入緩出動畫,它的運動過程可以想象一輛汽車從起步到停車的動作,可以實現比單純緩出更生動的效果。由于開頭慢、中間快和結尾慢,動畫將有更強的對比,會讓用戶感到愉悅。

          因此,緩動原理實際上是使動畫不再那么尖銳或生硬的過程。



          原理二:變形 Transformation


          變形是由一個形態變成另一個形態,這種形變是動畫里最引人注目的。通過元素形態的轉變,告知用戶元素的狀態或作用發生了改變。


          例如這個下載動畫,下載完成后變形為按鈕,其實是符合用戶預期的。這種無縫轉換,可以提高用戶的認知度,提

          升了動畫的連貫性。


          在動效中,利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的,通過物體運動的變形狀態就能很好的體現出來。





          原理三:克隆 Cloning


          當元素被克隆時,可表達出元素與元素之間的某種連續性。在此原理中,如何讓物體的出現和離開具有連續性、關系和過渡,是信息準確傳遞的關鍵。


          例如這個發布按鈕,點擊它會創建多個新對象,引導注意力,非常清晰的表達了他們之間的關系。


          還有這個運動健康頁面,在添加練習項目時,從主按鈕克隆生成一系列練習項目,選擇完成后原路返回。




          原理四:覆蓋 Overlay


          利用覆蓋原理能讓原本有限的空間得以延伸,用以顯示額外的可見元素,補償了用戶體驗中的單一統一視野或“客觀視圖”。覆蓋原理在UI設計中常用于列表橫滑,通過覆蓋,隱藏相關操作,以減少視覺上的干擾。


          在某種程度上,作為設計師,“層”的概念是顯而易見的,不言而喻。我們用層來設計,層的概念被深深地內化了。但是,我們必須小心區分“制作”和“使用”的過程。


          作為不斷參與“制作”過程的設計師,我們要非常熟悉我們正在設計的物體的所有部分(包括隱藏部分)。然而,作為用戶,那些不可見的部分是根據定義和實踐,在視覺和認知上隱藏的。




          原理五:偏移和延遲 Offset & Delay

          偏移和延遲原理是表明元素之間的層級與關系,在新元素入場時利用偏移和延遲讓信息或界面元素按照秩序進退場,定義對象關系和層次結構。


          在上面的示例中,浮動操作按鈕 (FAB) 轉換為頭部背景。數據圖表在時間的延遲下依次出現,暗示用戶這里的信息與其他元素之間的區別,吸引用戶注意力。




          原理六:遮罩 Masking


          遮罩是決定元素變化的結果是什么,通過暫時使對象顯示和隱藏,以連續無縫的方式轉換,保持了敘事流程的效果。雖然對象本身保持不變,但因為它有了邊界和位置,這兩個因素決定了對象是什么。


          例如這個轉動的咖啡杯,借助遮罩,通過改變logo的位置和吸管的朝向,造成杯子在自轉的假象。



          在上面的例子中,音樂封面改變了邊界形狀和位置,但沒有改變內容。轉換發生在用戶執行操作后激活,是相當巧妙的技巧。




          原理七:父子關系 Parenting


          父子關系是將界面元素關聯起來的重要原則,創建出空間和時間層次關系。它最適合作為“實時”互動,例如拖動列表順序時,其他信息會同步跟上。

          回想一下,很多元素屬性都可以創造這種聯動的繼承關系,例如不透明度、位置、旋轉、縮放、形狀、顏色等。




          原理八:數值變化 Value Change

          文本和數字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒有給它們帶來區別和嚴謹來評估它們在支持可用性方面的作用。


          數字和值表示現實中正在發生的事情,既可以發生在實時活動中,也可以發生在非實時活動中。它可能是時間、收入、速度、游戲得分等。當我們使用動態的數值變化時,它激活了一種“神經反饋”,用戶會覺得自己與這些數值有關聯的。如果這些值是靜態的,就感覺與現實的聯系會減少。



          數值的變化在各類金融理財和日歷APP中經常出現,數據的動態表達和交流可能會對數據的價值產生影響;如上圖中的數值的動態變化,讓用戶感知到自己可能有能力影響到數據,提升了參與活動的意愿。




          原理九:蒙層 Obscuration

          蒙層與原理四的覆蓋類似,只不過蒙層帶有透明屬性,它擋住了后面的信息,但又沒有全擋住。iOS中常見的毛玻璃效果就是如此,它讓用戶意識到正在操作的對象,還有另一個世界。拓展了Z軸的層次結構,補償用戶體驗中的單一視野。




          原理十:視差  Parallax

          當用戶滾動時,在視覺平面中創建空間層次結構。其目的是為了建立各元素的層級關系,移動速度更快的交互式元。對用戶來說顯得更接近,較慢的非交互式元素,會退回到背景顯得更遠,從而更好把內容和環境區分開來 。


          設計師可以利用時間本身來創建這些關系,告訴用戶界面中的哪些對象具有更高的優先級。用戶不僅認為界面對象現在具有超出視覺設計中確定的層次結構,而且現在可以利用這種層次結構,讓用戶意識到設計之前掌握用戶體驗內容。




          原理十一:多維 Dimensionality

          維度是將界面的元素多維化,使元素看起來像可翻轉的,可折疊的,浮動的??梢允共煌腢I元素實現無縫的過渡銜接,它通常以折紙維度、浮動維度和對象維度這三種方式來呈現。


          此外,維度原理克服了視覺平面中的分層悖論,其中缺乏深度的物體存在于同一平面上,但出現在其他物體的“前面”或“后面”。


          折紙維度可以被認為是“折疊”或“鉸鏈”的三維界面對象,它由多個元素組合成“折紙”結構,隱藏的物體在空間上仍然可以說是“存在”的,即使它們不可見。



          浮動維度為界面對象提供了空間起源和離開,使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實現的。


          對象維度會產生具有真實深度和形式的維度對象,可以看到,雖然在2D層,元素卻可以3D視角呈現真實的維度。




          原理十二:平移與縮放  Dolly & Zoom


          平移與縮放是電影概念,指的是與相機有關的對象的運動,以及畫面中圖像本身的大小從遠景平滑變化到特寫鏡頭(反之亦然)。

          在某些情況下,無法判斷對象是否正在縮放??赡苁窃谠?3D 空間中向著相機移動,也許是相機在向對象移動,又或者是對象自身在放大縮小。以下三個示例說明了可能的情況。



          鏡頭平移:被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止,而被攝物體進行遠離或接近鏡頭的前后移動。

          鏡頭縮放:鏡頭與被攝物體在位置上保持靜止,而被攝物自身進行縮放。

          縮放:是指視角和對象都沒有在空間上移動,而是物體本身在縮放(或者我們的視野正在縮小,從而導致圖像放大),這向觀看者傳達了附加界面對象在其他對象或場景“內部”的信息。



          移動還可以結合維度原則,從而產生更多空間和深度體驗,并向用戶傳達當前視圖“前面”或“后面”的其他區域或內容??s放允許無縫轉換 - 實時和非實時 - 支持可用性。在創建空間心智模型時,Dolly & Zoom Principle 中采用的這種無縫性非常強大。




          作者: 印跡_ 來源:站酷

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

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

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


          做好這幾處細節,你的排版才能更精致

          seo達人

          一、給標題搭配輔助文字

          標題的字號通常會比較大,這時如果給它搭配一個字號比較小、字體不一樣的副標題,或者是英文標題,那么就可以得到鮮明的大小對比和字體對比,甚至還可以有色彩對比、空間對比等。這么做可以增加標題的層級關系,使視覺更豐富,更生動。

          圖片

          ▲ 上圖的標題只有四個字,如果單獨排版會很單調,所以設計師把它與英文標題一起排版。如果你想要排版的效果比較時尚、活潑,可以將標題進行斷行、錯位處理,兩行或三行的標題比單行標題的層級更豐富、對比關系更多。

          圖片

          ▲ 上圖的標題搭配了一行字號更小、字重更細的副標題,由于上圖海報想要表現出比較高端的品質感,所以標題和副標題采用了同一種字體,也沒有加入太多的排版技巧。

          圖片

          ▲ 上圖的標題與活動時間和裝飾英文組合排列在一起,并且在排版時有明顯的大小對比、字體對比、顏色對比、點線面的對比等,使整個標題看起來有豐富的細節。

           

           

          二、賣點要有Icon

          絕大部分的產品海報或寶貝詳情頁上都會展現產品的賣點(核心優勢),這通常會是比較重要的信息,所以需要重點突出。不過突出的手法不一定要使用很大的的或者是對比很強的顏色,給賣點增加icon就是一個很常見、很有效的技巧,既可以通過icon把賣點信息與其他信息區別開,從而吸引讀者的目光,也能使畫面視覺更豐富、有更多細節。

          當然,icon設計本身也很關鍵,首先,要盡量使用一些大家比較熟、能一看就懂的圖形符號;其次,要盡量設計得細致一些,雖然會需要花一些時間,但這是值得的。

          圖片

          圖片

          另外,風格的統一也很重要,一方面是每個icon的風格要一致,不要有些硬朗、有些柔和,也不要有些很復雜、有些很簡單;另一方面是Icon的調性也要符合產品調性以及畫面的風格,這樣畫面的整體視覺才能更統一、更美觀。

          圖片

          比如,在上圖的兒童牙刷海報中,由于畫面部分采用了剪紙風格,所以賣點的icon也使用了剪紙風格。

           

          三、信息要分組

          版面中的信息一定要分組,不要全部排成一堆或者四分五裂地排列,否則都會加大閱讀和理解的難度,可以通過控制信息之間的間距來分組,也可以利用線、線框、色塊來分組。并且,信息分組還需要注意以下兩點:

          ? 視覺上要有主次,即每組信息版面空間占比不要太一致。

          ? 要符合閱讀及信息傳播的邏輯。有些設計師會為了好看而隨意把信息的順序打亂重組,這是本末倒置的行為。

          例如在下圖的海報中,設計師雖然將信息進行了分組,但是除了主體很突出以外,其他信息都太過平均了,再加上信息塊(包含文字組和圖片部分)特別多,所以導致排版很散。

          圖片

          而在優化后的方案中,把版面信息進行了重新分組和排列,視覺更整體、層級關系更鮮明。

          圖片

          下圖海報的排版也有幾個比較嚴重的問題:

          圖片

          ? 信息分組不合理。大部分文字信息都被圓形色塊打包成一個組,但里面很多信息的意義并不相同,其實不適合組合在一起;

          ? 文案的排版不符合邏輯。比如把“只選直徑…”這句文案放在最上面有點突然;再比如“首創一品黑蒜豬大蹄飯”其實是一句話,設計師卻把它拆開排列,而且順序是錯亂的;

          ? 排版太亂。雖然用了圓形色塊進行整合,但是在這一組新信息里,有的文字排成弧線、有的文字豎排、有的文字橫排、有的文字對齊排、有的文字錯位排,同一個信息塊里采用了太多不同的排版形式,而且組合得不好。

          修改過的方案則進行了合理的分組,信息排版也更符合閱讀理解的邏輯。

          圖片

          把標題和副標題分成一組排在左上角。在面積上是版面中的第二大視覺塊,信息一目了然且主次分明;

          ? 把價格、口感NO.1?“只選直徑…”這三個信息分成一個組,排在標題和副標題下方、產品的上方,符合正確的視覺流程和閱讀邏輯。而且該組文案與產品圖片進行疊加或繞排處理,既加強了文字與圖片的關聯,也使得文案與產品形成了一個大的整體。

          所以,設計師在做設計時,一定要閱讀文案、理解文案,看哪些信息可以劃分到一組排列,哪些信息應該要分開排列。

           

          四、視覺層級要分明

          只要不是同一句話或者同一類信息,那么都要區分它們的層級關系以及視覺呈現,哪怕這些信息被分在同一組。比如標題、副標題、小標題、正文、賣點、注解、價格等等,這些信息在視覺呈現上都要有所區分,并且區分得要盡量明顯一些,如果只是把字號加大一點、改變文字的顏色,那么可能會比較難把信息進行有效區隔,視覺上也會比較單調。

          所以,為了視覺上更美觀、更易閱讀,我們還可以通過改變字體、排版的方向、排列的位置,增加輔助元素(icon、色塊、線條、線框等)、裝飾效果(描邊、立體效果、扭曲效果、裁剪效果等)等等,創造出比較鮮明的對比以及視覺層級。

          圖片

          圖片

          另外需要注意的是,區隔信息的手法要與設計的風格和調性吻合,通常來說,高端、簡約的版面,所用的排版技巧和裝飾手法會比較少,視覺效果也不會太夸張;而如果是時尚類或者促銷類的設計,其用于區隔信息層級的手法可以盡量豐富、夸張一點。

          比如下圖是蘋果筆記本的banner設計,其每一行文字的視覺效果都有明顯的區別,但并沒有采用特別夸張的表現手法,字體和排版方向都是統一的。

          圖片

          圖片

          而下面這則貓糧的海報,其文字表現手法則要豐富很多,對比要更強。

          圖片

          圖片

           

          總結一下

          想要版式更加精致、更便于信息的傳播,我們需要處理好以下幾處細節:? 給標題搭配輔助文字;? 賣點要有Icon;? 信息要分組;? 視覺層級要分明。


          作者:蔥爺

          轉載請注明:學UI網》做好這幾處細節,你的排版才能更精致

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


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


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




          如何提升UI設計的高級感

          純純

          創建美觀、可用和高效的UI界面需要花費時間進行設計細節的打磨,本文從視覺和情感化設計兩個方面來說說如何提升UI設計的高級感。 


          1、視覺元素

          在互聯網產品日趨成熟的今天,你會發現所有的App越來越像,似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重,使得設計不精致,產品沒有氣質和品牌感。一個App設計是否精致,是否富有設計感,在于它的細節,這就意味著我們在進行設計的時候,要從細微之處著手,從多方面去鉆研如何創造出打動人心的UI設計。本節總結了12個簡單直觀的提升設計感的小細節,一起來學習。


          1.1 使用顏色深淺構建層次結構

          在對UI 文本進行樣式控制的時候,最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比,所營造的對比并不夠,嘗試結合色彩和字重來營造更好的對比效果。


          每種顏色都有一個視覺權重,這有助于在內容中建立層次結構。通過使用顏色的深淺,為元素賦予不同的重要性。如果可以的話,你甚至可以采用兩到三種顏色:

          • 主要內容使用深灰色(諸如標題,但是不要用純黑)

          • 次要內容使用灰色(比如商品介紹)

          • 輔助性內容采用淺灰色(比如發布日期)

          類似的,在UI設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

          • 大多數的文本采用正常的字重(400到500,具體取決于字體)

          • 對于需要強調的文字采用較重的字重(600到700,具體取決于字體)

          ▲主標題字重為600,其他標綠點的文字字重都為400



          應當盡量不要讓正文部分字重低于400,因為這一部分字體本身尺寸已經較小,低于400會使得可讀性不佳。如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。


          灰色文字在無彩/彩色背景下要分開處理

          不要在有色背景上使用灰色的文本,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不錯的淡化其視覺效果的做法。

          但是在彩色背景下,想要降低和背景色之間的對比,通常有兩種方法:

          一是降低白色文本的不透明度;二是讓文本逐步接近背景色,而不是改為灰色。

          ▲左圖設計師職位信息為白色文字降低不透明度,右圖為和背景同色相高明度的顏色



          其次當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍。通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。


          1.2 統一色調

          選擇一種基礎色,再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許,只需使用固定的色板,通過調整基礎色的飽和度和明度,利用這種簡單的方式為設計增加一致性。


          1.3 干凈的陰影

          陰影是UI設計中最常見的視覺表現手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。


          這種輕柔的陰影呈現出的干凈,增加了畫面的精致。如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,呈現出不精致的畫面感。

          陰影不一定是黑色的,還有一種擴算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調一致,因此呈現出十分融洽的畫面感。在UI設計中,這種手法不宜過多使用,否則呈現出的各種色彩搭配會讓人眼花繚亂。


          1.4 個性的圖標設計

          合格的設計師能夠繪制風格統一的圖標,而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時,為它的視覺表現力加入更多的創意呢?例如下面這組圖標設計,無論是在圖形上的創新,還是顏色搭配上都呈現出無與倫比的創意。


          標簽欄作為一個App的全局導航起著至關重要的作用,它的設計影響著整個產品的視覺風格。通常,大多數App都是使用iOS規范的設計樣式(默認灰色,選中填充品牌色),這樣的設計太普通,太常見了。要想讓標簽欄圖標設計精致和富有個性,可以豐富每一個選中態圖標的視覺表現,例如給圖標加上背景和表情,即顯得生動有趣,又增加了用戶的好感,給人留下深刻的印象。

          3D立體圖標設計是近幾年來的流行趨勢,看上去十分精致、華麗,但是看久了會讓人產生輕微的視覺疲勞,同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。


          1.5 Tab的設計感

          Tab是App設計中最常見的控件之一,它源自Material Design的設計規范?,F在很多iOS產品當中也開始使用這種導航欄樣式來進行設計,而原本屬于iOS規范當中的分段選擇器變得不那么常見了。

          在視覺表現形式上,Tab和標簽欄同樣也分為選中態和未選態,它的設計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單,卻越難設計出彩,要發揮極大的設計想象力,跳脫出設計規范的限制,才能找到完美的方案。例如蝦米音樂的Tab選中態是一段音頻波線,再配合文字的大小對比,一個富有設計感又符合產品特征的Tabs就被創造出來了。


          我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條,這樣就建立起視覺上的聯系,讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上,既讓界面視覺獨一無二,又進一步強化了用戶對品牌形象的認知。


          1.6 無框設計 去繁從簡

          在UI設計中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個元素的好辦法,但是它不是唯一的方法,使用過多會讓整個布局的設計感降低,或多或少都會干擾用戶瀏覽的視線,讓信息內容失去注意力,因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次,讓畫面變得干凈,整齊:


          使用陰影

          陰影同樣可以營造出邊界感,而且相比邊框分割線更加微妙,并不會顯得突兀,不會分散用戶的注意力,讓內容更聚焦。


          使用不同的背景色來區分

          通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試刪除分割線,因為你根本不需要它。


          增加額外的留白

          創建元素之間的分離效果,并不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。


          1.7 統一設計元素

          在App中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續到其他界面中,成為圖形或按鈕的外觀。這樣,整個界面就被統一的設計元素聯系起來了,給用戶始終如一的一致感。


          1.8 符合產品氣質的字體

          選擇符合產品氣質的字體,可以與產品的定位相吻合,傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數App 的設計需求。但會出現一個問題就是,系統字體的普適性并沒有什么特色,在一些特定的情境下就顯得收效甚微。例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字體后,整體感覺在氣勢上就變弱了很多。


          1.9 第三方圖標風格統一

          大多數App都支持三方登陸,他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口,這也是設計師最常忽略的內容,往往是直接將第三方圖標調整一致大小和擺放整齊位置,沒有針對它們再設計。一個設計精致的App不應漏過任何的細節,我們可以以自家App的圖標風格為依據,對第三方圖標進行優化設計。


          1.10 圖片中尋找色彩

          App中優美的圖文設計,能帶給用戶如沐春風的視覺享受,它非常重要。我們經??吹轿淖织B加在圖片背景上的設計樣式,為了減少復雜圖片背景對文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設計感。


          1.11 提高圖片質量

          圖片的質量影響著整個App的格調和用戶的情緒,高品質的圖片給人愉悅的視覺享受,產生美好的聯想。而低品質的圖片會瞬間拉低App的質感。在App設計中,一張漂亮的圖片從收集到上線,需要經過裁剪,調色等過程才能被使用。即使是普通的商品圖片,我們將它摳圖后調整成統一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺也會變得美觀、整潔。


          1.12 卡片式設計

          現在的UI界面設計中,卡片式設計已經是一種非常常見的設計形式,它有利于信息分層和整合,劃分出更加清晰的組織結構,實現復雜內容的簡化處理,提高空間利用率。同時卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢,也是提升設計品質感的良方。



          2、情感化設計

          心理學認為,情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時,使他產生情感的變化,那么產品便不再冷冰冰,他透過眼前的東西,看到的是設計師為了他的使用體驗,對每一個魔鬼細節的用心琢磨,人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈,有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心,使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面,這些簡單而美好的設計細節充滿了積極情緒,它是滿足產品的功能性和易用性之后,追求更高層次的目標。


          2.1 提示性文字

          語言是情感化設計最直接的利器,擬人化的對白相比冰冷的話語更能獲得用戶的好感,賦予產品的新的生命力。例如App那些push推送通知,因為用戶每天收到的PUSH實在是太多了,早已心如止水!這個時候,你就需要一條成本低、效率高的PUSH文案,去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣,讓人看到會心一笑。


          2.2 下拉刷新

          下拉刷新是用戶在App使用中經常進行的操作,常見的下拉刷新設計是圖標加文字的形式,這種設計簡單、直觀,但毫無設計感,不能引發用戶任何的情緒。


          下拉刷新是一種臨時狀態,豐富它的設計細節不會造成與產品界面的格格不入,相反,一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如uc頭條在下拉刷新時會蹦出一只奔跑的小鹿,暗示正在快馬加鞭的加載新內容,小鹿形象延續了品牌logo。作為資訊類產品,內容更新速度至關重要,奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感,瞬間就讓下拉刷新變得生動有趣。


          2.3 頭像設計

          個人中心頁與用戶信息密切相關,用戶的虛擬形象在這里得以展現,常見的設計是一個用戶頭像加登陸文字的形式,這種默認的頭像設計無法得到用戶的認同感。

          現在很多的產品已經放棄了死板的默認頭像,給用戶更多的選擇。賦予產品一些人格魅力,可以讓產品富有生命力,消除人機界面的冰冷交互,幫助用戶和產品建立友好的聯系。例如美團外賣和躺平,它們各自的身份都代表了產品的氣質和用戶的屬性,讓用戶產生一種身份的認同感。


          2.4 缺省頁化解負面情緒

          通常狀態是,當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式,這種簡陋的設計會給用戶心理造成很大的落差,陷入負面情緒中。情感化設計在此時就可發揮巨大的作用,它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大,根據產品屬性和品牌延展圖形,結合動效或插畫等情感化設計,可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景,讓用戶會心一笑,使產品充滿了趣味性。


          2.5 標簽欄微動效

          情感化設計變得越來越豐富,圖標設計上升至可以展示動畫效果。通過動效的使用,標簽欄切換變得不再死板。用戶在頻繁切換頁面時,不再覺得單調。精心設計的動態效果,能夠緩解用戶等待時焦躁的心情,從心理上縮短用戶等待時長,讓品牌更加深入人心。


          2.6 模擬用戶行為

          如果一個產品可以模擬用戶的行為,將用戶代入真實的情境中,用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化,播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。


          情感化設計可以拉近用戶與產品之間的距離,在更深的層面體現出對人性的關懷,為人們帶去情感上的愉悅和感動。洞悉用戶的行為,換位思考去滿足用戶的需求,情感交流就產生了。例如當你截屏了一張圖片,打開微信對話框時就會自動顯示這張圖片,提前預知了你發截圖的需求。

          再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣,因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時,你會發現影片詳情頁會有彩蛋提醒,告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息,就不必再為了不確定的彩蛋期待浪費時間啦。


          2.7 有趣的細節設計

          俗話說:有趣的靈魂萬里挑一,可見有趣是可以引發交流進而讓人們產生積極的情緒。 在UI設計中,有些有趣的設計是隱形的,需要用戶自己去發現,當用戶找到這顆彩蛋時,就會獲得一份喜悅和樂趣,增強用戶對產品的探知欲。例如在電腦端打開B站的鬼畜區長按這個返回圖標10秒左右,你會打開鬼畜區的新世界(⊙o⊙)(友情提示:記得戴上耳機或調小音量)其實長按「返回」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母,發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕!


          有些有趣的設計又是顯性的,目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員,不僅可以尊享豐富的影視資源,還能讓自己的ID在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕,讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性,一方面也豐富了彈幕區的多樣化,可謂一舉兩得了。


          總的來說:UI設計的“高級感”意味著在視覺層面要從細微之處著手,創造出精致富有設計感的畫面;另一方面要從情感化設計出發,使用戶與產品產生情感上的共鳴,獲得更高層次的使用體驗。

          作者: 印跡_ 來源:站酷

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

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

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



          AI & PS 夏日魔法篇

          seo達人

          話不多說,直接上手先吃瓜吧,哦不,做圖吧!學會這幾招,再也不要甲方爸爸提供渣渣圖片素材了。

           

           

          圖片

          這個案例我之前分享過小紅書,相信我,我不是想偷懶,我只是想把這個實用好技巧讓更多的小伙伴知道(一臉正經說的)。

          看過的小伙伴也不要急,畢竟后面還有 5 個案例都是船新未公開的版本!走過路過不要錯過!

           

          我們在 AI 里畫一個正方形選擇【效果】→【3D】→【凸出和斜角】得到一個正方體,然后選擇擴展,每個面填充白色透明→不透明的漸變。

          圖片

          畫一個藍白漸變色的背景,給夏日里一抹清涼的感覺~

          這個桃子是我用蘋果電腦自帶的【Apple Color Emoji】輸入法打出來的,也不一定用桃子,也可以別的喲~

          圖片

          (后面的步奏都是在 PS 里完成的哦~)把桃子放在立方體下面,合并【桃子】+【立方體】圖層,選擇【濾鏡】→【濾鏡庫】→【扭曲】→【玻璃】數值參考如下。

          圖片

          復制一個,調整大小節奏,再調整一下角度,按住【ctrl+alt+shift+E】鍵,得到一個合并可見圖層的新圖層。

          再復制一層(留用),選擇一個圖層【濾鏡】→【模糊】→【高斯模糊】,數值:【5】,選擇【濾鏡】→【濾鏡庫】→【扭曲】→【海洋玻璃】數值如下。

          圖片

          選擇之前復出來留用的那層置于頂層,圖層模式選擇【顏色加深】,透明度【30%】。

          圖片

          繼續細化,用圖案建立→填充的方式,加點細節,用混合方式做一個線條背景再加像素字點綴,其他文字環繞編排即可。

          圖片

          圖片

           

           

          圖片

          不知不覺來到了中午,夏日炎炎,我買了一根雪糕,這次的技巧可以說相當簡單,我速戰速決,畢竟我的雪糕是會融的……

          在 Ai 里畫一個矩形,調整圓角,選擇【效果】→【3D】→【凸出和斜角】數值如下:

          圖片

          擴展圖形,然后調整角度,除頂部部分的形狀合并,然后填充漸變色,復制多一個形狀,添加描邊。

          圖片

          把頂部的形狀復制兩個,排好填充顏色,然后選擇三個形狀【對象】→【混合】→【建立】,如果步數不夠,就選擇混合工具,按住【ALT】鍵,輸入合適步數即可。

          圖片

          同樣的方法做一個雪糕棒吧,然后把這幾個形狀組合在一起,就得到這根可口的雪糕啦!趕快吃起來,哦不,做起來吧!

          圖片

          根據文字的大小加入色塊編排可以增加版面的色彩層次,再來點路徑文字,活躍一下版面,加上其他文案,這張海報就完成啦!

          圖片 圖片

           

           

          這次技法以文字為主體,做一個夏日凍感的文字,選擇一個圓體的文字,在 PS 里轉成智能對象,選擇【濾鏡】→【模糊畫廊】→【路徑模糊】數值路徑如下:

          圖片

          添加一個蒙版,用畫筆把邊緣擦得虛一些。

          圖片

          然后新建一個文字圖層,改成描邊效果,然后轉成智能對象,復制上面智能濾鏡的效果到這個圖層,加入漸變,這個冰塊字就做好啦!

          圖片

          接著我們來做文字編排部分,傾斜的文字能夠增強畫面動感,豐富版面,再用【!】增強情緒張力,其他文字環繞編排即可。

          圖片 圖片

           

           

          圖片

          萬物皆可卷……而我選擇躺平,哦不,我選擇讓紙張自己卷,這次做一個簡單上手的紙張卷曲效果。

          先做兩組簡單的文字編排,調出符號面板,直接往里面拖即可。

          圖片

          選擇螺旋線工具,畫出線條,然后選擇【效果】→【3D】→【凸出和斜角】,數值如下:

          圖片

          先別點【確定】哦,點擊左邊的【貼圖】按鈕,進入貼圖頁面,選擇其中三個表面,選擇前面做好的符號圖樣,并調整大小,即可得到這個卷曲紙張的效果啦!

          圖片

          因為文字做了卷曲的效果后,閱讀性會降低,所以我們還是要重復排一遍文字,然后我們再加入背景漸變色豐富一下,再來點質感會更好,于是我打開了 PS,找了張褶皺的紙張紋理進行疊加,最后再加點雜色即可!

          圖片

           

           

          圖片

          卷完紙張,我們來卷文字吧!,天長地久有時盡,此卷綿綿無絕期……

          選擇一個高挑的字體,然后再畫一根線進行分割,得到如下圖四組圖形,并依次拖入符號面板:

          圖片

          畫一個矩形,調整圓角,然后選擇【效果】→【3D】→【凸出和斜角】,數值如下,點擊左邊的【貼圖】按鈕,進入貼圖頁面,選擇其中三個表面,選擇前面做好的符號圖樣,并調整大小,如圖所示,即可得到這個卷曲的文字效果。

          圖片

          得到圖形后,選擇擴展,可以看到有些錨點沒有完全吻合,手動調整一下即可,另一個圖形也用同樣的方法即可得到。

          圖片

          選擇圖形其中兩面替換顏色,再添加一些有趣的圖形,增強畫面的趣味。

          圖片

          加入趣味標題,與其他文字編排,這張海報也完成啦!

          圖片

          這次的案例到這也就告一段落了,說時遲那時快,萌萌又來一句:要不再來一張?此刻的我當然是歡(mian)天(wu)喜(biao)地(qing)說:好!

           

           

          圖片

          于是,我打開剛剛關閉的 PS,打出文字,柵格化后,選擇【濾鏡】→【模糊畫廊】→【移軸模糊】,調整路徑,讓文字上下邊緣有模糊的效果。

          圖片

          復制一層,然后選擇【涂抹工具】,用柔邊畫筆,強度選擇【70%】,沿著文字邊緣涂抹出想要的形狀即可。

          圖片

          新建一個漸變映射圖層,添加漸變色,就可以得到這個字體流動效果啦!

          圖片

          接著,同樣的秘方,我們來加點質感,找一張做舊紋理的背景,調整合適的圖層樣式效果即可。

          繼續添加細節,畫一些簡單的圖形豐富版面,用網格工具畫一個小網格,再加入一個酸性的手寫字裝飾一下

          圖片

          再加入簡單的文字編排,這個版面也就完成啦!


          作者:大熊

          轉載請注明:學UI網》AI & PS 夏日魔法篇

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


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


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



          交互設計 | 信息流提高轉化的策略

          純純

          起初由Facebook在社交行業重新定義為News Feed,現在被大量用在電商、社交、資訊類等領域。信息流突出卡片的信息,用戶可以無限制地下拉刷新,偏重于“沉浸式”的體驗,用戶可以在里面“逛”起來。 


          undefined




          那么問題來了,在處于這樣閑散的“逛”的狀態下,怎樣提高用戶的轉化率,讓用戶在Feeds中產生點擊行為?有如下幾點可以進行嘗試,拋出來相互探討。 



          一、“千人千面”機制的嘗試



          什么是“千人千面”?字面意思上說就是一千個人看到一千個面,每個人所看到的內容都不一樣,實現“ 個性化”定制。 

          舉一個場景,作為一個軟妹子,你的某寶Feeds呈現成這樣的,嗯,美妝、衣服和家居產品更多。 


          設想一下這樣的畫面,如果在你的Feeds列表里面推薦的是一些機械鍵盤和游戲裝備,那作為用戶,會心想“暈,這些東西又不能讓我變瘦變美,跟我啥關系?往下翻翻再看看有沒有什么可買的東西”。



          如果再滑個2~3屏還是這類似于“今年流行的POLO衫”等跟你沒關系的內容,那可能就沒耐心看下去,sorry,直接退出了。 


          而“千人千面”機制能解決這個問題,它要達到的目的就是, 對每個用戶而言,都是各自喜歡的內容。



          那么怎么做到千人千面? 
          1. 千人千面的影響基于用戶人群的標簽。標簽分得越細,流量就會被分割得越厲害,推薦也會更精準。針對具有標簽思維的同學來說,展現價值以及訪客價值利用率更高了。 

          舉個栗子,如果最近你要搬家,在某寶看行李打包帶,那么你可能被平臺分類為“搬家”這個標簽。如果再細一點,“打包帶”也可能為一個標簽。 

          那么在你的Feeds中就有可能呈現出既有打包帶,也有紙箱、膠帶、打包繩等這樣搬家常用的物品進行推薦,是不是很人性化?可能就在這些推薦內容中發現一些自己也沒想到但能好用的東西。 

          像這樣根據消費者的瀏覽記錄和購買習慣來制定個性化服務,通過對這些信息進行分析來給消費人群貼上標簽,從而達到 實現把產品精準推薦給消費者的目標 。精簡的信息能夠及時滿足消費群體的需求,幫助消費者快速找到感興趣的內容,由此帶來了極好的用戶體驗。



          2.千人千面的機制是推薦式的:一種基于C端消費者行為軌跡(比如用戶在頁面的瀏覽和點擊行為)和途徑反映的購物意圖進行匹配推薦,如上面所舉的“看行李打包帶”的栗子; 



          第二種:基于B端店鋪(即商家),進行在后臺設置的店鋪人群畫像(即在后臺設置一些選項,告訴平臺他的目標用戶是誰),平臺進行智能匹配推薦的。C端和B端的信息相互依存才構成了現在完整的Feeds“千人千面”推薦機制。 

          這個時候,交互設計師能夠做些什么事? 
          1.將信息流的卡片進行結構化和組件化。卡片信息即用來表達用戶的標簽信息的。定義好最整體的框架,以及各種信息缺失情況下的展示方式。稍安勿躁,如下圖,往下翻,在本文下一節進行詳細講解。 



          2.將用戶人群進行分層,然后和卡片信息進行匹配。用戶人群分層,有多種維度。最常用的是將用戶分為新客和老客,偶爾會有準新客、僵尸用戶、流失用戶3個層級的添加。但作為不同的產品、店鋪,甚至是在不同的地點,對新老客的定義都不一樣。 



          比方說在杭州某小區旁邊的奶茶店,老客可以定義為“方圓3公里以內一個月內在本店下過單的人”,新客可以定義為“方圓3公里以內從未在本店下單的用戶”。 

          如果這家店在各大外賣平臺上提供外賣功能,那么對老客人群標簽為“3公里以內”“下過單”,那么對老用戶可以采用折扣的形式,比方說老用戶下單88折等優惠信息進行吸引;新客的標簽為“3公里以內”、“未下過單”,那么對新用戶可以采用嘗鮮的方式,比方“新客1元嘗鮮價”等方式進行吸引。 

          這樣對用戶人群的分層決定了我們的信息是否準確以及有效。如果將新客定義為“方圓1公里以內從未在本店下單的用戶”,可能因距離太近而失去對稍遠一點顧客的覆蓋。 

          在工作中,這樣的人群定義一般是和產品經理、運營一起商議進行決定的。 

          二、利益點的透出

          利益點,即能夠影響C端用戶做決策的因素,這些因素對用戶來說都是有利的。這些利益點主要包括如下兩個方面。 
          1. 商品信息:滿減信息(比方說滿200減20、88VIP9.5折),促銷信息(比方說61狂歡)、訂單量、用戶評價、排行榜等。如下圖中各種標簽 



          2. 商戶信息:品牌標簽(比方說品牌、優質商家等)。商戶信息的透出,對追求品牌的用戶來說是個有利的促進因素。如下圖中商戶的“品牌”標簽。



          光有這樣的利益點也還不夠,設計師需要做的就是將這些信息進行表達,怎樣表達?設計方案將卡片進行結構化和組件化。什么是結構化和組件化?如之前的圖(某平臺的商品卡片結構)

          同一個卡片,保持相同的位置出現的內容性質相同,即結構化。如上圖商品媒體展示區,展示商品的信息,可以是圖片、視頻、直播等等多媒體的展示。 



          組件化是指,卡片信息可以不必全部完整,可以只支持其中的某些信息進行展示即可,沒有的可以進行隱藏。比方說滿減信息,如果商品暫時不打折,那這一塊就沒有信息,可以進行隱藏。如下圖 



          三、興趣點的試探



          當用戶一直在瀏覽遲遲不行動時,原因可能是沒看到自己感興趣的內容,那么策略可以再轉換一下。范圍由小到大可以分為如下三個層次。 

          1. 嘗試推薦同類商品的不同品牌。用品牌嘗試效果,如下圖。 



          在同類商品中還可以嘗試 榜單或者清單的方式進行進一步的促進。兩者都代表著品質和認可。 



          2.嘗試推薦不同類別的商品。

          為保持用戶在信息流中所看到的信息更豐富,可嘗試在信息流中除了推薦商戶標簽詞的內容,還會穿插一些其他內容的信息。 

          比方說你是個愛美達人,但同時也可能是個音樂愛好者,那么當在化妝品的信息流中,推薦一些當季新款耳機是不是很有吸引力。 

          再或者你是個鋼鐵直男,喜歡體育,同時也喜歡玩游戲,那在你的feed中同時出現這兩樣商品是不是一件很開心的事情? 

          3.相似內容的推薦。在瀏覽過程中,可根據用戶的瀏覽行為進行相似詞的推薦,如下圖。相似詞的推薦又分為2種,一種是直接推詞,另一種是根據用戶的點擊行為進行推薦內容,都能起到擴展內容的作用。如下圖。 





          總結來說,要提高Feeds的轉化率,邏輯如下。 


          1.做好信息的展示和匹配。將卡片結構化和組件化,并做好用戶分層進行利益點的匹配。 
          2.根據用戶的行為進行實時內容推薦的變化。

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

          作者:Sophia的玲瓏閣   來源:站酷

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

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

          提升屏效可實施性最強的4大方法

          純純

          一、什么是屏效?

          或許我們曾聽過這樣一個詞 “坪效”,它常拿來計算商場經營效益的指標, 指的是每平米可以產出多少營業額(營業額/專柜所占總坪數)。 

          類比下來,手機屏幕,也可以有這樣類似的計算公式,只是沒有專門定義過,通俗地講,即“每一像素可以帶來多少商業效益”。但確實在商業設計過程中,老板們越來越越來越關注這樣內容的表達效率。他們也許不會說"你這個屏效有點太低了"等這樣專業的術語,而是會說類似“你這個槽是不是太高了”等這樣類似的話 。 


          二、為什么要提高屏效?

          通過數據統計,一般用戶最有用的瀏覽區域為手機前3屏,如果更嚴格點來說是前2屏,在這個區域內,用戶的點擊次數和轉化率是最高的。如果在此區域內能夠表達更多的內容,對于產品來說,無非是最經濟的設計模式。不信隨便翻翻幾個APP,如下案例。 

          咱們的某寶,基本上第1屏就表達完所有內容,第二屏絕大部分也是feeds了; 


          考拉海購,前2屏表達內容,2屏之后全是feeds;


          小紅書更不用說了,第一屏就直接開始種草了;


          用戶在網絡上的注意力時間是1-3秒,如果在這個時間內你沒有吸引到用戶的話,那么他就很有可能把你略過。可想而知,在這樣爭奪互聯網用戶注意力的背景下,信息的高效性是多么重要。 

          三、如何提高屏效?

          1.用更小的面積表達同樣的內容。



          2.相同的屏幕內表達更多的內容。這同樣可以細拆為幾個方法。 
          ①利用滑動或者翻滾的效果,在同一個區域內進行內容的轉變;比如banner以及淘寶頭條這樣的表達方式; 

          ②巧用折疊與展開,進行非重點內容的隱藏;



          ③內容區域進行多層信息疊加,比方說Instagram的發布


          ④利用轉移的手法,將復雜的內容用新頁面進行承載,如下圖豆瓣


          3.利用好導航結構,同樣的屏幕可以表達相同等級的多種內容;


          4.做模式區分,在任務模式下隱藏不必要的信息。如美團外賣在滑動過程中會隱藏購物車。因為用戶當前聚焦的是瀏覽內容


          四、總結下來方法論就是

          時間、空間上的同時利用。時間上隨著用戶任務的進程進行當前任務的集中顯示,隱藏當前任務不需要的信息;空間上將手機屏幕當做一個立體空間,由多層空間進行展示利用。 



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


          作者:Sophia的玲瓏閣  來源:站酷

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

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

          B端設計之導航

          純純

          在B端產品做設計的時候,第一件事是決定界面的結構布局,導航放在哪成為一件亟需要考慮的事情。典型的,有橫向導航與縱向導航之分,拿ant design來舉例,如下面2張圖所示;


          兩者看起來都行,但選擇哪個,心理會有第一眼的直覺,但光有直覺不行,還得羅列個123出來,這樣展示方案的時候,才能服己服人。


          橫向導航


          | 橫向導航


          優點:

          1. 通常使用比較少的菜單,簡單,容易記憶;

          2. 位于頁面頂部,不占用橫向空間;

          3. 由于位于頂部,在視覺上更突出,更容易識別;

          4. 菜單選項之間視覺權重的區分更明顯,左邊最強右邊最弱;


          缺點:

          1. 擴展性有限,不能很好的承載大量和多層級菜單;

          2. 占用屏幕高度,特備是當固定于屏幕頂部時;

          3. 來回切換菜單選項時,橫向移動鼠標的距離更長,操作效率更低;


          縱向導航


          | 縱向導航:


          優點:

          1. 能夠承載的菜單項數量和層級更多,擴展性強;

          2. 不占用屏幕高度且可以收起,為內容提供更多空間;

          3. 在菜單間切換時鼠標移動距離短;

          4. 能夠更好地適應屏幕寬度較小的設備;


          缺點:

          1. 菜單數量多層級復雜時,不容易記憶;

          2. 菜單選項文字不宜過長,可能會截斷;

          3. 各菜單選項之間的視覺權重差別不明顯。


          他們都可以在已有的方向上進行擴展,如下圖


          橫向導航擴展


          但總體來說,單獨的橫向導航方式層級不能超過3層,多于3級就不利于用戶的閱讀和選擇


          縱向導航擴展


          相對于橫向縱向的拓展性強,不管多少級都可以一致往下加,但層級高過于3層,用戶對導航的分辨和記憶會明顯下降


          當然,有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求,他們有那么,根據以上特點,我們也可以有如下組合的形式。


          組合導航


          很明顯,這樣的組合導航,適用于一級導航不太多(做好少于5個)且內容權重差別很明顯,一級導航之后的導航內容和層級比較多且內容復雜。


          另外,如果嫌縱向導航占空間,則可以考慮將縱向導航做成可折疊收起的模式,適用于貼著瀏覽器的縱向導航。


          可折疊的縱向導航


          總結一下:

          1. 橫向導航易記憶、易看,各導航權重區分明顯,越靠左越重要,但切換效率慢; 2.縱向導航擴展性強,可折疊,各導航權重區分不明顯,切換效率更高;3.如果兩者都不能單獨滿足,可嘗試組合的形式。

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

            作者:Sophia的玲瓏閣  來源:站酷

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

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



          UI 中國首頁推薦作品集

          seo達人


          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
          圖片
           
           


          作者:黑馬青年

          轉載請注明:學UI網》UI 中國首頁推薦作品集


          日歷

          鏈接

          個人資料

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

          存檔

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