国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

身為一個ui設計師,為什么我連一個卡片設計都設計不好!

天宇

 
在ui設計中,卡片是不可避免需要用到的東西。那么什么是卡片?卡片有哪些類型?
本次就以此問題為出發點,為大家詳細介紹ui設計中的卡片設計。
 
 
一、設計基礎
在開始設計之前,我們需要先了解卡片的定義、特點以及應用原則。
 
 
1.卡片的定義:
卡片設計是一種界面設計模式,其作用是使用卡片來作為界面信息展示的基本單元。卡片設計通過將信息分割成獨立的、可管理的部分,使整個界面看起來更加簡潔,讓用戶能夠更容易在瀏覽時理解內容,找到自己需要的信息及商品。
 
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
2.卡片的特點:
在ui的設計卡片的過程中,我們要合理的將卡片的特點發揮出來,卡片主要有三個特點。
 
 
01.瓷片信息模塊化:
ui卡片的作用是將信息呈現為獨立的卡片單元,方便用戶理解和管理信息。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
02.視覺吸引力:
視覺吸引力,顧名思義就是通過精心設計的視覺元素和顏色,讓用戶眼前一亮吸引用戶注意,以此提升用戶的使用體驗。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.強交互性:
一個合格的ui卡片在設計時需要具有豐富的交互功能,如點擊、滑動等和用戶實現“交流”的操作,增強信息傳達效果和用戶滿意度。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
 
3.卡片的應用原則:
在應用卡片時,我們要按照卡片的應用原則來保證卡片不會在運用時出現違和感。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
01.一致性:
保持卡片的一致性,包括樣式布局和交互方式。
 
02.信息層級:
信息的重要性和層級設計讓重要的信息更加顯眼。
 
03.簡潔清晰:
卡片內容簡潔明了,用戶易于理解和消化。
 
04.可交互性:
提供一定的交互功能,增加用戶的使用體驗。
 
05.響應式設計:
適應不同的設備和屏幕尺寸,確保好的顯示效果。
 
06.視覺吸引力:
通過顏色和設計吸引人的視覺效果。
 
 
 
 
二、卡片分類
正所謂人以類聚,物以群分。卡片也可以分為不同的類型,大致來分,卡片可以分為三個類型。
 
 
 
1.封面卡片:
一本書,好的封面就可以吸引讀者。封面卡片作為用戶接觸到的第一個卡片,自然是非常重要。
 
封面卡片可以根據不同的項目軟件來改變,比方實景類,如商品、風景等;或者是影視類,如動漫、影視、直播等。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
2.普通卡片:
普通卡片比較常用的三種設計形式分別為圓角卡片、破形卡片、多張重疊。這樣設計可以形成差異化,增加設計感。
 
 
 
01.圓角卡片:
一般普通的卡片大多數為直角,而圓角卡片的出現則是為了適用不同的屏幕,同時圓角的大小不一,可以增強視覺沖擊力,形成差異化,吸引注意力。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
02.破形卡片:
破形卡片是在界面中,用不規則的形狀做出來的卡片,能夠更好的突出重要信息。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.多張疊加:
在設計過程中,如果想要卡片看起來更加立體,設計感更強可以用到多張疊加。這樣一來,整個卡片的層次感也更加強烈。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
 
 
 
 
 
3.真實物體轉化成的卡片:
在設計過程中,設計師可以根據現實中存在的物體將其轉化成卡片。通過這樣的轉變,可以讓用戶有更加真實的使用體驗。
 
 
01.優惠券類卡片:
在日常生活中,優惠券隨處可見,人們對于優惠券的作用也心知肚明。那么將優惠券轉化成卡片,則能讓用戶更直觀的體驗到優惠力度。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
02.銀行卡類卡片:
當今社會銀行卡幾乎是每個成年人必備的物品,將銀行卡轉化成卡片,用戶在使用手機銀行時會多一點舒心。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.音樂類卡片:
將現實中的cd唱片轉化成卡片,能夠讓用戶有更好的體驗。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
總的來說,將現實中習以為常的物品轉化為卡片,能夠更好的和用戶產生共情。
天下沒有不散的宴席,來到這里,又到了再見的時候。
 
今天的卡片分享就到此結束,為了下一次的重逢不在遙遠,關注我,下次再見!



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

為什么我沒有這樣的設計思維呢?

天宇

設計能力的強弱取決于設計思維,技能操作層面的不足可以通過反復訓練,在短時間內即可彌補;而設計思維需要通過長時間的熏陶,還要找對學習的方法和途徑。很多設計師工作五年甚至十年,但是設計能力依然比較普通,很大程度上還是設計思維能力的缺失。
 
我們也可以通過體驗和分析優秀的案例來提升,學習優秀設計師的設計思路和處理技巧,以此來強化自我專業思維。今天黑馬哥繼續給大家分享一些優秀的設計案例,希望可以助力提高大家的設計思維。
為什么我沒有這樣的設計思維呢?
 
 
 
 
體驗目錄
 
一、不一樣的返回設計
二、可以切換大小的設計布局
三、做減法的設計表達
四、品牌動態渲染春節氛圍
五、品牌插畫表現界面置底
六、動態刷新紅包設計
七、涂鴉風格的流程設計
八、情感化閃屏設計
九、圖標設計的翻轉動效
十、蛇年主題圖標設計
 
 
 
一、不一樣的返回設計
 
進入層級界面可以通過返回回到上一級操作場景,通常都是以箭頭圖標、返回文字組合設計或者獨立設計。
 
最近在體驗喵喵記賬 App 時,其返回設計以“門”作為創意元素,進入層級界面時門會打開,點擊返回時會有關門的動作。以開關門的方式表達進入和返回狀態,形象化的表達了不一樣的返回設計,呈現出不同的設計解決方案。
為什么我沒有這樣的設計思維呢?
 
 
 
 
二、可以切換大小的設計布局
 
為了滿足更多用戶的體驗需求,設計布局的靈活性變得越來越重要,需要提供多種選擇便于操作。
 
在藏書館 App 中,針對書庫分類的展示設計,用戶可以通過點擊切換呈現不同大小的樣式。文字和書籍封面圖都會隨著切換而縮放,方便滿足不同用戶的瀏覽需求,提升用戶對產品的操作體驗度。
為什么我沒有這樣的設計思維呢?
 
 
 
 
三、做減法的設計表達
 
隨著互聯網環境的發展,提供給大家的產品選擇越來越豐富,而產品設計也從最初的功能性服務擴展到綜合性服務。功能變得越來越多,商業氛圍也十分濃厚,有種眼花繚亂的感覺。
 
最近在使用美團外賣柜小程序時,其簡約的設計印象深刻。存取功能一目了然,沒有多余的設計干擾體驗,操作指引也是簡單易懂。有時候減法的設計才是最好的用戶體驗,與其布局一堆功能或者服務,反而增加了用戶的操作成本。
為什么我沒有這樣的設計思維呢?
 
 
 
 
四、品牌動態渲染春節氛圍
 
春節氛圍感營造對于品牌來說至關重要,是渲染春節主題和增強用戶親和力的關鍵,營造方式也是豐富多樣。
 
其中夸克 App 通過品牌 LOGO 結合春節主題進行動態設計,不僅突出春節氛圍,動效過渡也非常流暢。夸克經常會以品牌動態化的形式表現節日或者特殊活動主題,設計融合性處理得十分細致。
為什么我沒有這樣的設計思維呢?
 
 
 
 
五、品牌插畫表現界面置底
 
界面設計過程中,對于到達底部的處理方式通常有品牌表達、公司名稱、版權信息、情感化內容表達等。
 
最近在體驗我要做計劃 App 時,界面設計底部以品牌 IP 形式的插畫進行表達,不僅符合整體設計風格,也使得界面設計更有趣味性。整個產品設計也以插畫風格為主,是一個很有個性化的產品。
為什么我沒有這樣的設計思維呢?
 
 
 
 
六、動態刷新紅包設計
 
結合刷新設計賦予更多功能或者服務,已經成為二層樓設計的首選。
 
最近在體驗美團外賣時,首頁下拉刷新會出現紅包樣式的動效表達,隨著下拉的程度不同,紅包金額會隨之增加或者減少。動態刷新紅包設計更能吸引用戶繼續體驗,進而進入二層樓參與活動,趣味性的表達方式很有吸引力,也以此方式促進了用戶參與感。
為什么我沒有這樣的設計思維呢?
 
 
為什么我沒有這樣的設計思維呢?
 
 
 
 
七、涂鴉風格的流程設計
 
隨著同質化設計的現象,產品設計也在不斷嘗試更具差異化的風格。結合插畫風格表達界面設計,變得越來越普及。
 
在我要做計劃 App 設計中,整體風格以涂鴉插畫風為主,完善做計劃流程設計也以涂鴉風格進行設計。不僅風格特征更突出,也能吸引用戶的關注度,促進完善計劃流程。
為什么我沒有這樣的設計思維呢?
 
 
 
 
八、情感化閃屏設計
 
閃屏設計分為品牌感方向和營銷廣告等方向,其中閃屏廣告較為常見,不過也有品牌啟動頁和閃屏廣告相結合的方式。
 
閃屏設計的形式也非常多樣,其中情感化的方向以 IP 形象和情感故事性插畫為主。比如喜馬拉雅閃屏設計便以 IP 形象的各種動態化形式呈現,畫面非固定表達形式,每次重新打開都會有所不同,IP 動態也非常俏皮可愛。
為什么我沒有這樣的設計思維呢?
 
 
 
 
九、圖標設計的翻轉動效
 
圖標動效的運用非常普及,以往見過的案例都是動效的形式表達圖標的不同形式感,但是圖標的含義不會受到影響。
 
最近在體驗盒馬 App 時,首頁金剛區圖標以翻轉動效進行表達,既突出春節氛圍也賦予圖標兩層含義。在保留圖標本身功能含義的同時,通過翻轉另一面表達出不同的意思,也是一個新的圖標動效表達思維。
為什么我沒有這樣的設計思維呢?
 
 
 
 
十、蛇年主題圖標設計
 
蛇年春節主題設計在產品中的運用很豐富,其中在圖標設計中的運用是最普遍的,廣泛運用于應用圖標、金剛區圖標、底部標簽欄圖標和其他功能圖標等。
 
圖標設計的運用形式很多,比如蛇年主題文案嵌入、生肖蛇相關元素設計、春節元素設計等。表現形式以立體質感居多,配色以突出春節氛圍為主。
為什么我沒有這樣的設計思維呢?
 
 
 
小結
 
設計思維除了依靠自身專業基礎以外,通過不斷學習分析優秀的案例也能不斷提升,希望本期的案例分享可以帶給大家更多靈感。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDc0OA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

在你的設計中營造“愉悅感”

天宇

引言:
當我們談及用戶體驗的時候,“
愉悅
”這個詞是最常聽到的一個形容詞。讓用戶愛上一個產品,“愉悅”的用戶體驗就是核心要素,這也是設計力圖達到的效果。
在一個產品的體驗中,使用戶在情感上感到愉悅的時間節點是不固定的(large or small),合理的設計能夠滿足用戶在情感上的需求。
恰到好處的成就感和讓人感到驚喜的細節能夠喚起人們內心的幸福。
我們總會對那些體現著愉悅性的設計細節贊賞有加
我們總會對那些體現著愉悅性的設計細節贊賞有加
 
分享目錄:
一、深度愉悅與表面愉悅
二、了解 Kano 模型
三、只有滿足基本期望才能讓用戶產生愉悅情感
四、時機
五、負面效應
六、總結
 
一、深度愉悅與表面愉悅
愉悅分類
愉悅分類
 
從根本上來說,創造卓越的用戶體驗是獲得深度愉悅的先決條件。
而現在僅僅聚焦于產品功能、實用性和特色已經遠遠不夠了,我們要在這之上考慮更多東西。為了能夠在市場上實現差異化并進行自我提升來超越競爭對手,我們需要專注于提升用戶滿足感、興奮感與參與感。這事先就應該被考慮進設計過程中,而不應該擱置到過程結束之后再考慮。
這對于整個體驗是非常特別的部分,就像招牌菜的秘方,故事的反轉。
  1.  
    深度愉悅是你創造終身客戶價值的方式。
  2.  
    深度愉悅是你讓你的產品融入用戶日常生活的方式。
  3.  
    深度愉悅是你與客戶建立心理安全的方式。
 
在你的設計中營造“愉悅感”
 
 
二、了解 Kano 模型
東京理工大學狩野紀昭(Noriaki Kano)教授于1979年發表了《質量的保健因素和激勵因素》,并與1984年1月18日正式發表《魅力質量與必備質量》,標志著KANO模式的確立。
因為在互聯網圈內貼合度很高,可以對需求進行分類、優先排序。也就變成了產品經理的方法論之一。
五大需求類型
五大需求類型
 
1、基本型需求
基本型需求也稱為必備性需求、理所當然需求,是用戶對企業提供的產品或服務因素的基本要求。它是用戶認為產品“必須有”的屬性或功能,當基本性需求滿足時,用戶不一定會很滿意;但如果沒有被滿足,用戶就會很不滿意。
對于這類需求,企業的做法就是注重不要在這方面失分,不斷地調查和了解用戶需求,并通過合適的方法在產品中體現這些要求。
2、期望型需求
期望型需求也稱為意愿型需求。是指用戶的滿意狀況與需求程度成比例關系的需求,即這類需求做的越好,用戶的滿意度就會越高。雖然期望型需求沒有基本型需求那樣苛刻,要求提供的產品或服務比較優秀,在互聯網圈內,也成為“癢點”,即體現企業競爭能力的表現。企業能通過這類需求來提升產品的獨特性與質量,超過競爭對手。
3、魅力型需求
魅力型需求也稱興奮型需求,是指提供給用戶的完全出乎意料的產品功能或服務,使用戶產生驚喜感的需求。雖然沒有這個功能不受影響,但是提供之后會讓用戶非常的興奮和滿意。與期望型需求區別之處在于,魅力型需求是指數型的曲線,而期望型需求是線性曲線。
4、無差異型需求
無差異型需求是指就是你有沒有這個功能用戶都不太在意,對用戶沒有影響。
5、魅力型需求
反向型需求又稱逆向型需求,指引起強烈不滿的、導致滿意度降低的需求功能。提供了反向型需求反而會使用戶滿意度降低。
KANO模型-四象限圖
KANO模型-四象限圖
 
Kano發現,如果你不滿足基本需求,客戶就不會對體驗和性能感到滿意,而愉悅感則毫無意義。他還指出,隨著時間的推移和曝光度的提高,愉悅感可以成為性能需求,而性能需求可以成為基本需求。 想想 Twitter 的下拉刷新模式,或者 Slack 或 Discord 中的斜線命令。這些功能已經從令人興奮的功能迅速轉變為基礎的UI模式,當它們不存在(或無法按預期工作)時,會讓人不滿意。
 
 
三、只有滿足基本期望才能讓用戶產生愉悅情感
我們把 “令人沮喪”和 “令人愉悅”作為一個維度的兩端來評估一個設計。而這個維度的中點,意味著設計既不令人感到沮喪但也不令人感到愉悅,它還好,它可以正常運行,它能用,它實用,它并沒有令人難忘或者脫穎而出。它提供的是表現一般 平平無奇的用戶體驗。
把一個設計從令人沮喪移動到維度的中點, 意味著我們需要了解我們的用戶并達到他們的預期和需求。要去掉任何能夠讓用戶產生“難用”和“困惑”的因素,解決導致處理工作任務變慢。
Aaron Walter-用戶需求的5個等級
Aaron Walter-用戶需求的5個等級
 
1、解決用戶的失敗操作
我們經常會遇到類似的問題,項目里的每一個人都急于想設計出“理想”的視覺界面。然而,想要達到所謂的“完美”效果,往往癡人說夢。我們都知道,人與人之間存在極大的差異,即使我們的產品功能再完美,用戶在使用產品的時候,哪怕只是遇到一個小小的障礙或斷層,就會對產品的印象大打折扣。因此,我們應該將重點關注在解決用戶的痛點,這一點很重要,可以讓我們避免陷入“理想”設計和“完美”產品的漩渦之中,可以將影響面降到最低。
 
2.簡化用戶的復雜操作
過度密集是設計的最大阻礙。過多的元素會讓用戶感受到困擾,極大破壞用戶體驗。過度密集的設計涉及到界面中元素的數量,也涉及到視覺特征的多樣性。過多的顏色和形狀組合肯定會產生混亂。堅持美學的連貫、整體表達,形成讓用戶易于理解的設計語言。
互聯網 30 年,桌面和移動界面的解決方案都已經標準化。符合用戶習慣,就能夠加速產品的學習周期。例如,用戶習慣右上角看到個人資料或登錄按鈕。移動端搜索欄應該在列表的頂部。
這個規則不僅適用于單個界面元素以及元素的位置,也適用于整個頁面或功能。如果忽略這些用戶行為模式,出乎尋常的設計可能會延長用戶的學習曲線,通常也會導致失敗。
所有界面元素都可以根據用戶的優先級來定位。考慮界面元素在用戶執行任務時的作用,通過強調不同視覺的手法,我們可以在每一屏中確定界面元素的優先級。字體、顏色、形狀、圖標。這能夠幫助用戶遵循流程和界面邏輯行動。適當的將界面分區,這能夠幫助用戶劃分關鍵場景。
當用戶使用產品時,就會在腦海中構建一張心智地圖。能夠及時的提示用戶操作某些特定的場景,提示尋找某些信息和服務等等。
 
四、時機
引起用戶愉悅的體驗一般都會由一個特殊場景或者特定的客戶觸點觸發,比如等待時間、消費數據、升級過程等等。然而沒有一種通用觸發情緒手段適用于所有情況。我們所在的市場競爭激烈,我們要尋找新的方式使自己在一眾競爭者中脫穎而出,同時為用戶增加價值是我們一直努力的目標。我們都在為同一個目標而努力,即創造有意義的設計和用戶體驗來和產品建立深層聯系。
讓用戶看到意料之外的結果能讓沮喪的情緒轉化成愉悅
有許多種方法和途徑可以激活產品的“情緒愉悅”。而 第一步通常都是花費時間去真正了解用戶痛點——找出什么對用戶來講很重要,并找機會填補這些空缺。
1、品牌個性
在眾多不同的行業中,你需要一個能讓你的產品在眾多同類產品里 脫穎而出的品牌命名。
2、微互動
關注用戶的情緒在 UI 交互中有非常重要的作用。我們都知道產品中的 微動畫 有多么重要,我們可以利用這些動畫來回應人們在屏幕前做出的反應。
在你的設計中營造“愉悅感”
 
 
在開發產品時,把 UI 界面體驗變得 更感性,讓用戶覺得屏幕另一端運行程序的是 真實的人類 而不是冰冷的計算機。在用戶完成一項個人目標時給予他們 獎勵。例如,即便用戶的收件箱沒有新增郵件時,可以利用動畫讓用戶在體驗上有更多的 參與感 。
觸感反饋就能體現應用軟件在用戶進行界面操作時給予了積極反饋。這樣的舉動會讓頁面加載時間變得更加有趣,不那么難以忍受。
Twitter 為用戶改進了下滑刷新界面。就是這樣簡單而有效的產品反饋,讓其他數千款 app 都不約而同地使用了同種交互語言,因為這讓數據刷新體驗更加流暢。
在你的設計中營造“愉悅感”
 
 
3、在用戶沒有抱有期待時提供幫助
讓用戶感到愉悅的瞬間并不需要高度可視化元素或動畫。我們的目的是尋找這樣一個機會,當他們沒有意識到或者沒有期待被幫助時,給予用戶幫助。在這個案例中,正要輸入繁雜冗長的 Wi-fi 密碼時,界面跳出了“分享密碼”的彈窗。這一舉動使用戶分享私密信息變得更安全,更簡單,同時用戶體驗變得更輕松。
蘋果:分享Wi-Fi密碼
蘋果:分享Wi-Fi密碼
 
4、實時追蹤反饋
實時追蹤反饋是另一個行業變革技術應用。
Uber 的司機分享應用讓用戶在等車的同時,了解更多當前情景里的實時信息,例如你的司機是誰、接車車型、該司機的乘客評價等。有了這個功能,用戶會認為自己有被很好的關心到。據我們了解,很多公司也在他們的應用產品上使用了這一策略和服務。現在你可以在手機上看到你訂的披薩外賣已經走到哪里,大概什么時候會被送到。
在你的設計中營造“愉悅感”
 
 
5、自動填充
驗證碼發送后可以選擇自動填入,不需要手動輸入操作。
這是另外一個用戶無需輸入完整信息就可以達到目的,從而讓用戶的生活變得更加輕松的設計。
在你的設計中營造“愉悅感”
 
 
五、采取行動
設計能夠愉悅用戶體驗的關鍵是什么呢?
我該如何在我的產品或者服務上實現這些呢?
愉悅用戶情緒需要為體驗中的某一關鍵時刻而設計,但是功能性又是放在第一位的。在設計過程中,你需要仔細并系統地處理用戶情緒,而不是事后才考慮到這一點。
 
1、做好調研,從情緒板開始入手:
從外部和內部尋找靈感,不要局限于類似的產品,靈感可以以任何形式出現。
2、確定你所定義產品的使用案例:
找出你的產品能夠讓人感到意料之外驚喜的時刻。在建立的這種情感聯系里,你的產品可以在哪些方面獲利?
3、專注于一個目標,細節很重要:
讓自己專注在一件事上,或者一個時刻。如果你同時想實現很多事,結果可能就是和愉悅用戶背道而馳,還可能導致一屏信息過載,并且會讓你的用戶處于認知超載的狀態。
你可以從以下 3 個層次入手對用戶的情感做出反饋:
  •  
    本能層
    (外觀,視覺語言,基調)
  •  
    行為層
    (如何運作,表現,回應)
  •  
    反思層
    (如何解釋和理解)
4、傳達意義即輸出結果:
為情緒愉悅而設計的意義就是為了達成某一目的。你應該為了意義(達成目的)而做設計,二者應該是因果關系而非包含關系。這里的意義比情感更有力量,超越了本身的價值。
5、設計和演示:
和產品設計的其他過程一樣,我們應該不停的測試、設計、測試、設計。讓“愉悅情緒驅動的設計”變得有意義,就是一個不斷迭代的過程,需要持續不斷的實驗和改進。
 
六、負面效應
當然,具有愉悅性的事物在某些情況下同樣會帶來負面效應。某些笑話可能冒犯到他人,溫馨的廣告可能誤導部分觀眾,即便是可愛的音效也會因為運用不當而使人抓狂。
在UX領域,我們總會對那些體現著愉悅性的設計細節贊賞有加;而另一方面,對其負面效應的了解也將有助于我們更好、更全面的掌握這一設計原則,避開陷阱。
1、增加認知負荷與交互成本
一旦運用不當,意在愉悅用戶的界面元素反而可能破壞可用性,增加界面的認知負荷及交互成本。
在你的設計中營造“愉悅感”
 
 
這是一個第一次見會被驚艷到,但實際上用起來可能沒這么好的配色網站,界面排版視覺上非常舒服。
當隨機換顏色的時候,背景會適配顏色變化,且有一個顏色漸變過度的效果。網站有個“顏色動態”的開關,點開后顏色數據旋轉,由于中心旋轉的緣故,使用時會產生眩暈、不適的感受。
過度追求視效及愉悅性,置可用性而不顧,窮極所能在每一個元素當中體現著“設計感”,最終結果便是信息難以獲取,操作難以進行。
視覺表現層面的愉悅性可以為產品賦予生命與性格,使品牌形象更加生動飽滿。然而一旦處理不當,愉悅性反而會破壞產品最基本的可用性,阻礙用戶獲取信息、完成任務。
2、審美疲勞
“驚喜”是構建愉悅體驗的關鍵要素。新鮮的、不期而遇的美好事物總會讓人感到開心。
通常情況下,愉悅感都會隨著時間而漸漸淡化,你能想到的最為精彩出奇的細節表現也只會在最初的一段時間內給人以新鮮感,而維系的方式似乎只有在情感化的方向上一遍又一遍的重設計。
3、愉悅的定義是主觀的
見過那些試圖融入幽默元素的出錯頁面?本質上講,這種做法相當于在很壞的狀況下通過開玩笑來緩解尷尬。通常,在人們試圖獲取信息、保存數據或完成任務卻遭遇意外狀況而導致失敗的時候,任何帶有“搞笑”味道的反饋信息都會顯得缺乏同情心,用戶很可能感到被冒犯,甚至因此被激怒。
此外,“愉悅”的定義也因人而異。在一部分人看來十分新鮮有趣的東西,對另一部分人可能會很糟。普遍適用的愉悅標準幾乎是不存在的,“情感化”是一個復雜地帶,良好的設計初衷未必如愿帶來正面的結果。
令人不適的缺省設計
令人不適的缺省設計
 
4、安全的愉悅性策略
對愉悅性的負面效應了解后,我們知道,挑戰和風險確實存在,但這并不意味著你需要徹底規避這個概念,關鍵在于識別一些適合承載愉悅體驗的時間點。
在那些用戶不常見到的界面當中嘗試愉悅性元素是最為安全的
譬如:
  •  
    app啟動頁面
  •  
    帳號設置成功頁面
  •  
    新功能游歷
  •  
    用戶初次完成某個重要操作之后的反饋頁面
  •  
    空狀態頁面
這些狀態通常只會被體驗一次,情境都以正面情緒為主,無需擔心反復無趣或是惱人一類的問題。
所以我們時常在新手引導流程當中看到一些有意思的表現形式,例如改版后的Google Sites。這類產品環境當中的多數頁面都很簡單直白,高度聚焦于任務,沒有多余的元素干擾流程,只有在這些“一次性”的環節當中給人以驚喜,通過引發情感共鳴來促進信息的傳遞。
在你的設計中營造“愉悅感”
 
 
當下對于愉悅性的運用方式大家都在摸索,因為這是一個很主觀的概念,任何絕對化的規則都難以成立。 對于如此抽象和感性的概念,恐怕每個人心中都會有著不同的定義。
 
七、總結
永遠不要低估“愉悅”在優化用戶體驗方面能夠發揮的作用。我們應該對它持有積極的態度并找到機會讓“用戶情感愉悅”在我們的產品里發揮作用。同時我們要牢記,制造“愉悅”情緒的根本是,我們要為用戶提供從未期待過的獎勵,而不是僅僅是為用戶開發一個產品。
我們的最終目標一直都是功能性、穩定性、實用性,而追求“愉悅”并不應該成為限制這些目標的枷鎖。每一個要實現的目標都應該能夠相互銜接融洽互不干擾。我們需要移除科技術語,遵循自然語言,在產品里添加“有趣”“幽默”的特性,最重要的一點:你的設計和產品需要別有用心。
不要一味的注重產品的功能,同時還要考慮用戶的情緒。我們需要為用戶提供一個有趣味性的使用體驗。
在你的設計中營造“愉悅感”
 
 
 


作者:拒不背鍋女士
鏈接:https://www.zcool.com.cn/article/ZMTY0NzExNg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

這些提升用戶體驗的小技巧,你知道嗎?

天宇

為了幫助大家更輕松地提升設計水平,這里整理了一些簡單實用的小貼士。希望這些小技巧不僅能夠助力您優化當前的設計項目,還能在未來的設計之旅中為您提供參考價值。
 
 
 
21.將不相關的字段隱藏
在設計表單時,建議不要一次性展示所有信息和步驟,而是在用戶真正需要的時候再呈現,這樣可以更好地管理復雜性。如果用戶一打開表單就看到大量的內容,可能會感到壓力很大,甚至會放棄填寫。
因此,我們可以隱藏那些不相關的信息,去掉不必要的字段。通過合理地簡化表單內容,可以減輕用戶的心理負擔,確保只有在他們需要的時候才顯示必要的信息,從而減少他們在填寫其他表單項時的干擾。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
22.統一風格的圖片更有高級感
在選擇圖片時,我們的目標是實用性和一致性,而不是過分追求華麗的效果。如果只是一味地追求美觀,可能會導致圖片風格各異,從而破壞整體的視覺統一性,影響用戶的體驗。因此,設計師在挑選圖片時,需要對風格進行精確的把控,或者在后期進行適當的處理,以確保所有圖片都能呈現出一致的視覺效果。
圖片的風格對整個App的整體感覺和用戶的情緒有著重要的影響。風格一致的圖片不僅能帶來愉悅的視覺享受,還能激發美好的聯想。我們可以從以下幾個方面來控制圖片的風格:
● 類型:如位圖、插畫或形狀;
● 視角:如平視、仰視或俯視;
● 背景:如簡約、復雜或純色;
● 呈現區域:如堆積、局部或特寫;
● 構圖:如中心、水平線、對稱或對角線。
此外,還有很多其他抽象的方式來調整圖片,雖然這些方法不是絕對的,但我們可以通過多角度的嘗試,力求讓每一張圖片都達到最佳的視覺效果。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
23.在中性色中融入色相
在上一期的內容中,我們探討了如何設置中性色。當飽和度(S值)為0時,通過調整亮度(B值)4到5個等級,可以很好地表達信息的層次結構。這種方法雖然有助于保證設計不出錯,并能滿足最基本的需求,但在追求更高層次創意的設計項目中,可能會顯得有些單一。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
在更為成熟和全面的產品中,設計師們往往不會僅僅依靠純灰色作為唯一的中性色調。通常會在基礎的灰色調中加入一些微妙的色相變化。這樣做不僅可以讓整體視覺效果更加豐富,而且還能有效避免畫面因過于依賴灰色而顯得僵硬或缺乏活力。
常用的方法是在中性色中融入少量藍色調。藍色能夠傳遞出一種平靜、穩重的感覺,給界面帶來柔和而不突兀的變化,同時保持良好的清晰度。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
需要注意的是,在加入新色相時,我們的目標是創造顏色間的細微差別,幾乎達到難以察覺的程度,而不是讓這些差異成為用戶注意力的焦點,這樣才更有利于提升界面的整體質感。因此,對于較淺的顏色來說,所添加的色相強度應當控制得很低,反之,顏色越深則添加的色相越多,類似下面的這種曲線:
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
24.第三方圖標風格應保持一致
大多數應用程序都支持通過第三方平臺登錄,這種方式可以顯著降低用戶在登錄注冊時所需花費的時間成本。這種便捷的登錄方式一般在登錄頁面的底部提供多個(如微信、QQ、微博等)圖標入口。然而,很多設計師會忽略一個細節,就是直接將第三方平臺提供的官方圖標,簡單地調整大小使之統一,然后整齊排列在一起,并沒有進一步針對整體視覺效果進行專門的設計優化。
對于追求高品質用戶體驗的產品來說,任何不起眼的小細節都不應該被忽略。在處理第三方圖標時,應以自己產品的圖標風格為基礎,對所使用的第三方登錄圖標進行重新設計或適當調整。這不僅能夠確保整個界面風格的一致性,提升美觀度,還能增強品牌識別度,讓用戶在整個使用過程中感受到更加連貫且專業的體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
25.可視化密碼比輸入兩次更直觀
為了提升您的使用體驗,并確保密碼的安全性,可以讓用戶在輸入密碼時自由選擇顯示或隱藏密碼內容。這種方式替代了傳統的雙次輸入驗證方式,尤其有助于創建有效的密碼。用戶可以直接看到自己設置的密碼是否滿足安全標準,同時也減少了因重復輸入而造成的錯誤。
另外,系統應當明確地展示密碼的具體要求,并為用戶提供即時反饋,幫助他們了解如何構建更安全的密碼。例如,在用戶開始輸入密碼時,界面下方可以實時更新密碼強度(如弱、中等、強)及已滿足的安全條件(比如長度、包含數字/符號/大小寫字母等)。這樣做不僅能讓用戶更好地理解什么是好的密碼實踐,還能激勵他們遵循這些建議,從而提高賬號的整體安全性。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
26.使用合適的表單錄入控件
在設計表單時,選擇合適的輸入控件可以幫助用戶更好地理解每個字段需要填寫的信息量。
  •  
    能通過選擇來完成的操作就不要讓用戶手動輸入,這樣不僅方便了用戶操作,也減少了錯誤的發生。
  •  
    對于那些內容較短的輸入項,比如姓名或電話號碼,可使用單行輸入框,前提是確保讓所有輸入的內容都能清晰可見。
  •  
    像評論、反饋或這種可能包含較多文字的地方,應使用多行文本框。這樣用戶能更輕松地查看和編輯文本內容。同時,我們還可以通過一些視覺提示,例如滾動瀏覽、輸入框右下角的高度調整等,這樣更便于用戶操作。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
27.提供解決方案助力轉化
在UI設計過程中,當用戶嘗試進行某項操作時,因未滿足特定條件或出現操作失誤而無法繼續,這可能會對轉化率產生負面影響。為了改善這種情況,在設計時可以采取更加貼心的做法:明確告知用戶為何無法進入下一步,并提供具體的解決建議。這樣做對于提升轉化率非常有幫助。
比如,在用戶打算用賬戶余額購買服務的情況下,如果僅僅提示“余額不足”,用戶可能會感到困惑,甚至需要多次嘗試不同的路徑來完成充值和購買過程。一個更佳的解決方案是直接向用戶展示當前賬戶余額,并提供快速充值鏈接。這樣一來,用戶可以直接通過這個鏈接輕松完成充值,隨后順利購買所需服務。這樣的設計不僅簡化了操作流程,也大大提升了用戶體驗的流暢度。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
28.標簽欄的高級感
大多數標簽欄設計都傾向于簡潔風格,主要通過選中和未選中的狀態來區分不同的選項。狀態的變化依靠文字顏色的變換或在選中的標簽下方添加一個小橫條來實現。盡管這樣的設計看起來簡單,但要想讓它脫穎而出卻并不容易。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
很多產品從其品牌的獨特性中汲取靈感,利用品牌作為用戶熟悉且喜愛的形象作為設計的基礎,這樣做不僅能夠建立一種視覺上的連貫性,讓用戶感受到內外一致的美好體驗,同時也能加深他們對品牌形象的記憶。除此之外,加入一些有趣味性的圖案也是一個不錯的選擇,它們能以獨特的方式吸引用戶的注意力,為用戶提供更加愉悅的視覺感受。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
29.合理的規范輸入格式
在表單設計過程中,雖然大多數輸入項可以采用通用的處理方式,無需特別干預,但一些特殊類型的表單項,設定合理的格式約束顯得尤為重要。這樣做不僅有助于系統更準確地收集數據,還能有效減少用戶填寫錯誤的可能性,提升整體數據質量。
對于某些特定信息如地址、手機號碼以及銀行卡號等,可通過技術手段自動為這些長串文字自動添加分隔符,如空格或短橫線,這樣做能夠使信息更加直觀易讀,便于用戶檢查自己所填內容是否正確無誤;同時,也使得后續的數據處理工作變得更加簡單高效。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
30.頁面加載中,提前展示布局
在眾多產品中,用戶界面的數據或內容在完全加載之前通常僅顯示空白頁面。這種處理方式可能導致用戶困惑,因為他們無法確定當前狀態是正在加載、已加載完畢但無內容可展示,還是遇到了錯誤。
實際上,用戶界面的布局往往是相對固定的。因此,在實際內容加載完成前,提前向用戶展示界面的基本結構是一種更為友好的設計策略。因為在等待數據加載的過程中,用戶能夠預覽即將呈現的內容框架,從而減少了不確定性帶來的焦慮感。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
此外,這一做法符合人機交互設計中的一個重要原則——系統狀態可見性。根據該原則,產品應當清晰地告知用戶當前發生了什么,并提供足夠的反饋信息以幫助其理解系統的現狀及后續步驟。通過預先展示UI布局,應用程序不僅表明了正在處理請求的狀態,還為用戶構建了一個對未來操作環境的心理預期模型,進而提升了用戶體驗的整體滿意度與效率。
 
 
31.表單頁內容過長,適當進行分頁
在對表單內容進行了精簡處理后,依然顯得很長,應該避免一次性向用戶展示所有信息。過長的表單不僅會增加用戶的填寫時間,還可能引發用戶的困惑與不滿情緒,最終導致放棄填寫。為此,建議根據邏輯關系及屬性將表單項合理地分配到多個頁面中,且清晰展示整個流程進度情況。這樣可以使用戶感受到填寫過程更加簡便流暢,同時也能幫助他們更好地理解整個表單結構,從而專注于當前的任務。
值得注意的是,在采用分頁策略時,需謹慎平衡分頁的數量與步驟的復雜度。過度細分會無謂地增加操作環節,反而可能引起用戶的反感,進而產生新的問題。因此,在規劃分頁方案時,應當綜合考慮簡潔性和易用性原則,確保最終方案既能有效簡化任務又能保持良好的用戶體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
32.有時候,背景色比分割線更顯高級感
在過去,設計師們常常使用線條來清晰地劃分不同組件之間的界限。然而,在當今流行的扁平化設計理念中,這樣的做法有時會讓頁面顯得有些擁擠,并且缺乏層次感。一個非常有效的替代方案是為相鄰元素選擇僅有細微差異的背景色來進行區分。這種方式不僅能保持界面的整體美觀與簡潔,還能夠讓用戶更加自然流暢地識別出不同的信息區域。這樣在確保了內容的可讀性和易用性的同時,也能為用戶提供更加舒適的視覺體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
33.適當加大觸控熱區
你是否有過這樣的體驗:在使用某個應用程序或網站時,對著界面上的按鈕一頓亂點,卻發現要么完全沒有反應,要么系統反饋特別慢。你可能會懷疑是手機卡頓了或者網絡連接不穩定,感覺非常糟糕。其實,很多時候這種情況并不是因為設備性能差或網絡問題,而是用戶界面設計上存在一些小缺陷。
設計師們都知道,在進行UI設計時面臨著一個挑戰:如何在美觀性和實用性之間找到最佳平衡點?特別是對于像按鈕、超鏈接以及單選/復選框這樣的交互元素來說,它們的實際顯示大小往往很難達到人類手指接觸區域的理想尺寸。如果這些控件設計得太小,用戶就很難準確點擊到目標位置,導致操作效率降低甚至失敗。
從視覺效果考慮,當某些功能性組件需要保持較小外觀時,我們可以確保可觸發區域足夠大。這樣即使用戶視線不那么集中,也能輕松完成任務,避免因誤觸或其他原因造成的不便。值得注意的是,無論該元素本身看起來有多小,它所關聯的觸控熱區都不應低于標準值。例如,在iOS平臺上,推薦的最小可點擊區域大小為44x44 pt;而Android操作系統中,則建議至少保持48x48 pt。這樣保持了界面的美觀性,還能大大提升用戶的操作體驗。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
34.為圖片添加色彩層營造氛圍感
在圖片上添加色彩層或將其轉換為單一色調,可以創造出類似黑白照片的效果,這樣能顯著增強圖像中物體或人物的形態感。通過簡化色彩,觀眾的注意力更容易集中在圖像的核心內容上,從而提升了視覺主體的表現力。
此外,選擇不同的單色調不僅能突出主題,還能有效營造特定的情感氛圍。比如,藍色調可能會給人帶來一種寧靜、平和的感覺;而暖色調如紅色或橙色,則可能激發溫暖、活力甚至是緊張的情緒。通過精心挑選和運用色彩,我們可以極大地豐富視覺語言,提高圖像傳遞信息的能力。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
35.使用前端驗證,提升信息的有效性
前端驗證是一種在用戶輸入信息時即時檢查數據有效性的方法,無需將數據發送到服務器。這項技術基于預先設定的規則,在用戶離開輸入框時自動啟動,能夠快速檢測諸如格式、長度或類型是否正確等問題。這樣做的好處在于,它能夠在用戶完成整個表單之前就發現并指出潛在錯誤,從而提升了用戶體驗和數據準確性,避免了等到最后提交才發現問題所帶來的不便。
在設置前端驗證時,請記得不要過早開始校驗過程,以免造成持續不斷的錯誤提示,給用戶帶來困擾。最佳實踐是在用戶完全填寫完當前項之后再進行驗證。這樣做既能保證及時給出反饋,又能避免因頻繁出現提示而打斷用戶的操作流程,讓整個體驗更加順暢愉快。
02期 | 這些提升用戶體驗的小技巧,你知道嗎?
 
 
 
 
結語
創造既美觀又高效且易于使用的UI界面確實需要投入不少時間和精力,還可能要經歷多次的迭代與改進。不過,正是通過這一系列細致入微的調整過程,我們才能打磨出一款讓客戶、用戶以及我們自己都感到滿意的優秀作品。



作者:大漠飛鷹CYSJ
鏈接:https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

 

 

 

快速提升設計氣質的7個版式技巧

天宇

掌握一些有效的技巧,有時能事半功倍。

排版的技巧有很多,而且隨著設計的發展,每過一段時間都會有一些新的技巧流行起來,蔥爺今天要給大家分享的這7個技巧,也是近幾年比較流行,且容易上手、容易出效果的排版技巧。

 

比如給英文或者中文標題選擇一個筆畫很粗的無襯線字體,然后在它上面加一個或幾個比較潦草、筆畫較細的手寫英文單詞,就能得到一個很不錯的效果。

 

由于識別性不高,手寫的英文單詞最好是無關緊要的,主要是為了起裝飾作用。
在此基礎上還可以進行色彩搭配,而且顏色對比最好要鮮明一點,這樣就建立起了強烈的粗細對比、大小對比、剛柔對比、色彩對比等。適合在海報設計、畫冊設計、網頁設計中使用。

undefined

 

 

 

你是不是常常發現自己設計好的版面太過規矩,或者有點空、缺乏細節?而增加一個用英文排成的圓圈就可以解決很多類似的問題。

 

 

因為這個圓圈文字能與版面中的圖片以及其他文字塊形成輪廓對比、面和線的對比、曲和直的對比等。為了讓其不太孤立和單調,最好最好把它疊加在圖片或其他文字上面。
組成圓圈的文字字體可以是襯線體、無襯線體或者手寫體,但字號不宜太大,精致、秀氣一點比較好看。

 

 

在正常的排版中我們都知道,字間距和行距都不能太大,而且間距要比行距小,而在文字比較少、版面比較空的情況下,我們可以把一些不是很重要且字數比較少的文字,采用大間距、大行距的方式排版。

 

 

這么做等于是把單詞或者句子拆成了整齊排列的一組“點”,這樣它就能與版面的其它元素形成點、線、面的對比,可以增強版面的設計感,而且能覆蓋比較大的空間,起到裝飾的作用。

 

 

這是類似于攝影中雙重曝光的技巧,只不過把外輪廓圖形換成了文字,所以這既是一個排版技巧,也是一種設計形式。
為了效果比較好,用于填充圖片的文字通常是字號較大、筆畫較粗、字數較少的標題文字,圖片也要選擇質感好、顏值高的,如果是具象的圖片則要盡量保證重要部分的完整性和識別性。

 

 

 

 

 

不是說要把文字做立體字,而是把文字按照一定的結構進行組合,或者把文字變形處理,從而達到三維效果。
由于文字常見的狀態是扁平的,所以當打破文字這種常規的狀態,將其圖形化、賦予三維效果時,就會具有很強烈的視覺沖擊。在使用這一技巧時要注意文字的識別性。

undefined

這一技巧同樣也適用于標題排版,字體同樣要選擇筆畫較粗的無襯線體,而且字號要大,描邊字與無描邊字的字號要統一或者比較接近。
這種效果比較好的原因是,描邊文字與無描邊文字組合在一起,可創造出鮮明的線面對比、虛實對比、輕重對比。為了保證文字的識別性,文字的描邊不要太細,也別太粗。

undefined

在圖片為人物、動物,或者產品的設計中,可以把最主要、或者質量最好的一張圖片去底,并且拉大,然后再搭配1-2張比較小的方形圖片,這樣就能形成鮮明的大小對比和輪廓對比,效果也是不錯的。
這種排版方式在網頁設計和畫冊設計中很常見。

 

 

 

 

總結

 

怎么樣?以上的7個版式小技巧還不錯吧,趕緊去試一試。你們可能也發現了,其實它們都是巧妙運用了設計中的對比原則,比如大小對比、粗細對比、點線面、平面與立體對比、輪廓對比、虛實對比等等。所以熟練掌握對比非常重要,你也可以在對比的基礎上,嘗試出很多有趣、好看的排版技巧和設計形式。



作者:蔥爺
鏈接:https://www.zcool.com.cn/article/ZMTE0NTUwMA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

UI 場景中的 Banner 布局樣式探索

天宇

今天給大家探討關于產品設計中的布局樣式分析,希望通過本文的梳理和大家一起做一次探索,解析優秀案例的經驗。

 

 

Banner 對于設計師來說并不陌生,更多的還是在于視覺表現的環節,作為視覺設計師來說是重點培養的能力之一。今天給大家探討的關于 UI 場景中的 Banner 布局樣式,并非是視覺層面的探索,而是關于產品設計中的布局樣式分析。

 

在產品中出現 Banner 圖是比較常見的基礎功能,除了在其視覺創意層面不斷探索精進以外,UI 層面的樣式布局也在不斷嘗試更多不同的表現,希望通過本文的梳理和大家一起做一次探索,解析優秀案例的經驗。

 

 

 

分享目錄

 

一、Banner 視覺層表現類別

二、Banner 布局樣式分析

三、移動端線上案例分析

四、總結

 

 

 

一、Banner 視覺層表現類別

 

Banner 在 UI 場景中通常伴隨著輪播的形式展示,所以也經常稱之為輪播圖,這也是導航的一種形式之一,也有輪播導航的功能。在產品中出現可以帶給用戶平臺需要重點傳播的內容,比如活動信息和官宣咨詢等。

 

為了能引起用戶更高的關注度,Banner 在視覺層的表現上面也在不斷的創新。除了 Banner 設計創意、構圖、配色等視覺層面發揮以外,在表現類別上面我分為靜態、動態、視頻、分層視差等。

 

 

 

1.1 靜態 Banner 展示

靜態的輪播圖是最常見的,無論是設計效率還是技術落地都是最為便利的。Banner 畫面為靜態的圖片格式,在產品中分為單圖和多圖,單圖是靜態的展示形式,多圖可以自動輪播和手動滑動切換。

 

 

 

1.2 動態 Banner 展示

動態表現的 Banner 相較于靜態而言更能引起用戶的關注度,強化信息重點,在一些重點元素和行動按鈕等地方實行動態表現。

 

如果采用動態的形式表現,通常為單圖的居多。動態表現可以引起高關注度,但是如果過多也會形成互相干擾,反而削弱了關注度。

 

在這個信息爆炸的互聯網環境中,產品設計師都在不斷的嘗試如何更快、更準地獲得用戶的關注度。微動效無疑是一個不錯的選擇,無論是在功能交互還是視覺表現層面,都隨處可見。

 

 

 

1.3 視頻嵌入展示

視頻廣告由來已久,隨著短視頻的走熱,視頻嵌入到輪播廣告中逐漸增多。較多的表現形式為默認出現在首個 Banner 中,伴隨著倒計時出現,也可以關閉播放。此類廣告為了降低用戶在未知場景中的使用干擾,通常為靜音模式,帶給用戶更加友好的體驗。

 

也有一些產品欄目采用多個視頻輪播的形式,這個應用場景相對較少,一些影視產品偶爾運用。

 

 

 

1.4 分層視差效果展示

為了帶給用戶不一樣的視覺呈現和互動體驗,也逐漸出現一些打破常規表現形式的輪播廣告。分層視差效果是其中變化較大的一種,有輪播疊加的視差、3D翻轉、元素和背景分離視差等。

 

元素或者背景之間的運動差異必將引起用戶高度的關注,帶來提高關注度的目的。產品設計師也在不斷嘗試更多分層視差的效果,帶給用戶不一樣的廣告體驗。

 

 

 

小結

Banner 在視覺表現層的創新有助于提高用戶對內容的關注度,作為產品設計師我們都在不斷的嘗試更多可能性,除了在創意布局和色彩構成等方面發揮以外,表現形式的差異也是至關重要。

 

 

 

二、Banner 布局樣式分析

 

鎖定了 Banner 的視覺表現形式以后,我們來分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多,比如 Banner 比例、大小、通欄、分欄、孤立還是背景對比等。

 

首先我們來看看通欄和分欄的差別,這個因素會影響 Banner 所能呈現的大小。常規理解都覺得 Banner 越大越好,如果考慮到產品內容布局和信息層級區分方面,也會注意到整個界面布局的舒適度。所以,界面整體的風格和布局樣式也會影響 Banner 布局樣式,需要融合而非格格不入。

 

 

如果遇到一些界面布局頭部采用深色,在布局 Banner 的時候為了讓空間感更強,也會讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動色值,變動色值會根據輪播圖的色彩來定義背景色值,這樣的設計解決方案不僅融合度高且空間感強。

 

關于 Banner 的比例是很多產品設計師不斷探索的方向,比例影響高度值的控制。界面布局內容量的不同影響高度值的不同,根據內容自定義也是可行的方法之一。也有設計師會根據斐波那契數列計算,推薦出寬高比例有 8:5、8:3、8:2、8:1 等,在計算的過程中我們通常取能被 4 整除的數值。

 

我們將 Banner 的寬度值定義為:W,高度值定義為:H,比值關系用:Y( Y 為 5/8、3/8、2/8、1/8 等)。得出計算公式:H=W*Y,得出來的值取能被 4 整數的數值即可。這只是其中一種計算形式,設計師也可以根據具體布局情況進行自定義,設計不是一層不變的方法論,而是做適合具體情況的解決方案。

 

 

關于布局樣式的分析遠不止此,拋磚引玉,經驗總結只是一個起步,探索與創新才能突破更多可能性。

 

 

 

三、移動端線上案例分析

 

經驗總結很大程度上都會根據已有的優秀案例進行分析,立足于成功案例之上才能更切實際。通過大量的產品體驗日記,梳理出同屬性的不同解決方案,下面便為大家推薦一些上線案例分析。

 

 

3.1 常規形式運用最為普及

Banner 圖的運用組合元素為圖片層和輪播點,通過不同的滑動交互形式來形成不一樣的變化。常見的都是單純的 Banner 圖、輪播點、滑動切換組合,圖片本身以直角或者圓角、通欄或者分欄來呈現,這個需要結合整體的風格來定;輪播點的形式比較多樣,也有不顯示輪播點的形式,以顯示待輪播圖片來替代。

 

 

比如騰訊視頻、愛奇藝、優酷、芒果TV等常用的影視類 App 中,就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風格,愛奇藝通欄顯示和輪播點配合,優酷圓角風格配合輪播點,芒果TV通欄呈現融合背景且營造前后空間感。

 

 

 

3.2 自然而流暢的縮放切換

除了在圖片層和輪播點進行設計發揮以外,Banner 圖的切換交互也是一種探索的方向,自然而流暢的交互形式能帶給用戶舒適的體驗。比如 MOO 音樂采用縮放過度的形式來進行 Banner 輪播,這種自然而流暢的形式,給人一種非常舒適的操作體驗。

 

 

 

3.3 背景色隨著 Banner 輪播而變化

界面頭部視覺表現為了提高用戶關注度,利用深色表現更能體現空間感和襯托 Banner 效果。通常為品牌色進行襯托,也有很多產品會利用 Banner 進行取色,作為背景色的選擇范圍,這樣更具融合性和視覺表現差異。背景色隨著 Banner 輪播而變化,是比較普遍的一種設計方案,視覺體驗感很好。

 

 

 

3.4 以進度條的形式表達輪播控制

Banner 圖的輪播控制常規的做法是以點的形式呈現或者左右兩側露出待輪播 Banner,最近在淘票票 App 中發現了一種新的表達,以進度條的形式呈現,非常直觀的讓用戶可以判斷出還有多少 Banner 處于待輪播狀態。這樣的表現形式也和觀影時視頻的進度一致,不僅匹配了產品屬性,也能更加直觀的呈現輪播效果,帶給用戶全新的體驗。

 

 

 

3.5 模擬舞臺背景呈現輪播 Banner

在界面布局中空間感的營造可以讓信息對比更加明顯,考拉海購就將 Banner 作為背景來搭建一個具有空間感的舞臺,使得整個界面延伸出更強的深度空間感。Banner 輪播默認以淡入淡出的形式,也可以手動滑動輪播,區別電商產品同質化表現,帶給用戶不一樣的視覺感官體驗。

 

 

 

3.6 異形廣告,打破常規視覺呈現

有時候方方正正的布局讓人感覺受到了一定的束縛,也有一些產品在 Banner 呈現的形式上面不斷打破邊界的束縛,異形廣告的運用逐漸變得頻繁。最簡單的異形廣告是在畫面本身突破束縛,整體的結構布局還是在固定的造型里面,比如騰訊動漫 App 推薦板塊的輪播 Banner。

 

 

除了在 Banner 設計本身進行突破束縛以外,也有在造型上面進行變化的,比如膠囊形狀,也稱之為膠囊廣告;在邊界分割上面除了直線以外,也有采用弧形分割或者特殊形狀分割等。

 

 

 

3.7 微動效增強用戶關注度

動效在產品設計中已經運用非常頻繁,在 Banner 圖的設計中也會有所涉及,相較于靜態的呈現方式來說更能引起用戶的關注度。為了不帶給用戶過多的信息干擾,通常都是單圖呈現,這樣也能將焦點強化。

 

 

通常都是個別元素進行微動效,來體現動感效果,在主 Banner 中相對少見,次級和異形廣告中運用廣泛。

 

 

 

3.8 視頻廣告嵌入,不破壞只融合

視頻廣告的運用是比較常見的,在保持原有 Banner 布局不變的情況下嵌入到結構中,引起用戶的關注度。通常為自動播放的形式,為了降低用戶在未知場景中的使用干擾,默認靜音模式。有倒計時的伴隨著關閉操作,也有一些提供重播的操作,播放結束自動翻頁。

 

 

除了單個視頻嵌入以外,也有 Banner 全部采用短視頻的方式,不過相對較少。

 

 

 

3.9 卡片疊加滑動提升輪播空間感

在探索手勢操作上面,便捷度、流暢度、體驗感都是至關重要的。滑動 Banner 過程中的體驗感能帶給用戶對于當前內容的關注程度,便于操作的同時能引起用戶的好奇心更是重中之重。

 

蝦米音樂的樂庫便是結合了眾多設計思考,卡片疊加帶來視覺呈現的空間感,手勢滑動流暢自然,主題文案隨著滑動而變化顯示或者隱藏,帶給用戶更加友好的選擇體驗。

 

 

 

3.10 主題元素分層視差帶來輪播新玩法

為了提高用戶對輪播廣告的關注度,突破已有的表現形式是設計師不斷思考的方向。

 

自如 App 端的做法引起了我的關注,將主題元素和背景層進行分離,主題元素進行輪播的同時背景層漸隱呈現。不一樣的視覺表現和輪播形式,帶來了 Banner 輪播形式的新玩法。

 

 

 

 

四、總結

 

Banner 在很多產品中是較為常見的元素存在,UI 場景中的 Banner 布局樣式探索是為了在進行結構布局的時候,我們可以嘗試出更多不一樣的解決方案。一個好的體驗也許只是一個細節的探索,如果能在每一個功能設計的時候都能把控每一個細節,必能帶給用戶更好的使用體驗。

 

本文雖然不是講解如何設計 Banner 圖本身,但是關于 Banner 的布局形式、造型特征、內容表達形式等在產品設計中的運用,也是起到非常關鍵的因素。希望通過這種形式的梳理,可以帶給你更多的幫助。

 

文中案例來源于日常的產品體驗日記整理,將具備同屬性的內容進行歸類梳理,形成可指導的設計建議是一種探索思考的過程。希望這個思路可以拋磚引玉,和大家一起探索產品設計中更多用戶體驗和感官體驗的設計解決方案。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTE4Njc2MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

我見過總結最好的UI動效設計法則!

天宇

研究主題:提升動效可用性

研究對象:12條UX動效應用法則

“作為UX/UI設計師,我該如何適當在UX設計中加入動效?”,我總結了一些經驗法則,可以很好地回答這個問題。在過去5年里,我的UI動畫工作室發表的教程,非常幸運可以在40多個國家/地區,以及數百個頂級品牌設計咨詢公司中指導UX/UI設計師們。

研究UX/UI動效超過15年后,我得出了一個結論——其實有12個規律方法來幫助提升UX動效設計。我將這些機會稱為“ 12條UX動效應用法則”,它們可以通過多種創新方式進行疊加和組合使用。

我將宣言分成5部分:

-強調動效的主題;

-實時與非實時交互;

-提升動效可用性的4種方法;

-原理,技術,特性和價值;

-12條UX動效應用法則。

動效并不是UI動畫!

設計人員通常將用戶界面中的運動主題理解為“ UI動畫”(實際上不是),所以我覺得在開始說12條原則前,有必要為大家普及下基礎。

 

設計人員通常將“ UI動畫”視為是讓用戶體驗更愉悅的東西,實際上并沒有增加太多價值。因此,UI動畫通常被視為UX的后兒子。另外,用戶界面動效,它被認為屬于迪士尼的12條動畫原理范疇,我在自己的《UI Animation Principles — Disney is Dead》一文中進行了反駁。

 

在我的宣言中,我將證明UI動畫原則與“ 12 UX in Motion Principles”的關系,就像是建筑構造和建筑風格一樣,是各自獨立的。或者這樣理解,一個建筑結構被物理建造后才會實際存在(施工后),但是原則理論卻能指導物理建造。

 

動畫就是工具,而原則是用來指導工具使用的,因此,原則理論對設計師的影響力更大。實際上,多數設計師經常在UX設計中,將“ UI動畫”視為一種更高級的設計形式。

 

實時與非實時交互

區分“狀態”和“作用”很重要,UX中的大多元素是靜態的,例如設計組件。用戶體驗中的行為基本上是暫時的,是基于動作的。一個元素是被隱藏的,或正在被隱藏。如果是后者,動效的引入就可以很好地提升可用性。

 

另外,可以將交互的時間都視為實時或非實時發生。實時是指用戶直接與用戶界面中的對象進行交互。非實時意味著對象行為是事后交互的:它在用戶操作之后發生,并且是過渡的。

 

 

這是一個重要的區別。實時交互也可以被認為是“直接操縱”,因為用戶正在直接和界面對象進行交互。用戶使用界面時,界面行為正在發生。非實時交互僅在來自用戶的輸入之后發生,并且具有將用戶短暫鎖定在用戶體驗之外的作用,直到轉換完成。認知這些差異性,會在我們學習12項原則時發揮幫助作用。

 

提升動效應用性的4種方法

這4點代表判斷用戶體驗可用性時的依據:

 

-預期值

分兩個方面——設計為用戶帶來的感受,以及實際呈現效果。換句話說,作為設計師,我們希望最大程度地減少用戶期望與他們體驗之間的差距。

 

-連續性

既代表用戶流程,也代表用戶體驗的“一致性”。可以從“內部連續性”(場景內的連續性)和“內部連續性”(構成整個用戶體驗的一系列場景內的連續性)的角度來考慮。

 

-敘述性

是用戶體驗中事件的線性進展,一系列微妙的變化和動作串聯在一起是,就構成了用戶體驗流程。

 

-關聯性

指導用戶理解和決策界面中組件之間的關系。

 

原理、技術、特性和量值

泰勒·韋恩(Tyler Waye)寫道:“原理……是產生各種技術的基本前提和功能規則。無論發生什么,這些要素都保持一致。”我們可以設想一個層次結構,其中“原則”在頂部,“技術”在第二,接下來是“內容”,“量值”在最底部。可以將技術視為把原則實際執行的一種呈現手法,類似于我們常說的“設計風格”。

 

“屬性”是特定對象的參數,這些參數會被動畫化以創建該技術。這些包括(但不限于)位置,不透明度,比例,旋轉,錨點,顏色,筆劃寬度,形狀等。“量值”是實際的數字屬性值,它們會隨時間變化以創建所謂的“動畫”。

 

比如,設計一個飛機降落的動效,我們可以使用“模糊原理”,模糊和不透明度調至25px和70%。現在我們有了一些可以使用的工具。更重要的是,這些語言工具與任何特定的原型工具無關。

 

12條UX動效應用法則

緩動,偏移和延遲與定時有關;處理與對象關系有關;變換,數值變化,遮罩,疊加和復制都與對象連續性有關;視差與時間層次有關。模糊度,維度和滑動變焦都與空間連續性有關。

 

原則1:緩動

發生即時事件時,對象行為符合用戶期望。

 

 

所有(實時或非實時)的動效都非常緩和。這種設計輕松搭建了一種自然舒適的氛圍,也有一種連續感。順便提一句,迪士尼將其稱為“慢進慢出”。

 

 

左側示例的線性運動,看起來很好像糟糕。第一個示例沒有很強的動效,但呈現出來的也很流暢。以上三個示例都有確切的幀數,并且演示的時間相同,唯一的區別是動效的緩和程度。

 

作為關注可用性的設計師,除了美學之外,我們還需要多提出質疑,哪個示例更能提升可用性?我在這里介紹的情況是緩動固有的特點。在適當緩動情況下,用戶會感覺動作本身是無縫的并且在很大程度上是不可見的,這是一件好事,因為它不會分散注意力。線性運動明顯可見,并且感覺不完整且分散注意力。

 

我們再來看右邊的示例,它也不并不是天衣無縫的。實際上,它具有明顯的“設計”感,我們會注意到物體是如何著陸的,但與左側線性運動示例相比,它仍然感覺“更正確”。

 

我想向您開放的是一個輕松的運動世界。作為設計師,您實際上可以在項目中創建和實現無限的“緩動”。所有這些放松都有自己的期望響應,它們會在用戶中觸發。

 

原理2:偏移和延遲

引入新元素和場景時,定義對象關系和層次結構。

 

 

“偏移與延遲”受迪斯尼動畫原理影響,本例中為“跟隨并重疊動作”。

但是,重要的是要注意,方法雖然類似,但目的和結果卻不同。迪斯尼的《原理》可產生“更具吸引力的動畫”,而《UI動畫》的原理則可產生更多可用的體驗。

 

這一原則的效用在于,它通過“告訴”用戶界面中對象的性質,預先為用戶設置成功的條件。上面參考中的敘述是頂部的兩個對象是一組,而底部則是分開的。頂部的兩個對象可以是非交互的圖像和文本,而底部的對象可以是按鈕。

 

甚至在用戶注冊這些對象是什么之前,設計人員就已經通過運動告知這些對象是“分離的”。

 

Credit: InVision

 

在上圖示例中,懸浮按鈕(FAB)轉換成了包含三個按鈕的標題導航元素。由于按鈕在時間上彼此“偏移”,因此最終通過“分離”來提升可用性。換句話說,設計人員是在利用時間本身來說(甚至在用戶注冊對象之前)對象是分開的。這可以讓用戶完全獨立于視覺設計,了解界面中對象的特性。

 

以下是一個示例:

 

Credit: Jordi Verdu

 

在上面的例子中,靜態視覺設計告訴我們在背景上有圖標。假設這些圖標都是彼此獨立的,并且做著不同的事情。

 

圖標被分組為行,并且表現得像單個對象。它們的標題同樣被分組為行,并且表現得像單個對象。動效告訴用戶這些界面元素不是她的眼睛所看到的。在這種情況下,我們可以說界面中對象的時間行為并沒有提升可用性。

原則3:創建關聯性

與多個對象進行交互時,創建空間和時間層次關系。

 

 

這是一項強大的原理,可“關聯”用戶界面中的對象。在上面的示例中,頂部或“子級”對象的“ scale”和“ position”屬性作為底部或“父級”對象的“ position”屬性的父級。

 

處理對象屬性與其他對象屬性的鏈接,創建對象關系和層次結構。

還可以使設計人員更好地協調用戶界面中的時間,同時與用戶交流對象關系的本質。回想一下,對象的“屬性”包括以下內容:“比例”,“不透明度”,“位置”,“旋轉”,“形狀”,“顏色”,“值”等。這些屬性中的任何一個都可以鏈接到其他任何屬性,以在用戶體驗中創造協同作用。

 

Credit: Andrew J Lee, Frank Rapacciuolo

 

在左側示例中,“表情”元素的“ y軸”是圓形指示器,也是“ x軸”的父級。當圓形指示器元素沿水平軸移動時,其“子級”元素沿水平和垂直方向移動(同時被遮罩)。此功能最好可以“實時”互動,當用戶直接操作界面對象時,設計人員通過動效與用戶溝通,將其聯系起來。

 

創建關聯有3種形式:“直接關聯”(請參見上面的兩個“延遲”示例,“反向”示例,請參見下文)。

 

 

延遲和反向

原則4:變換

對象實用程序更改時,創建連續的敘述流狀態。

 

 

關于運動原理“轉換”中的UX的文章已經很多。在某些方面,它是動畫原理中最明顯和最深刻的部分。

 

轉換是最容易識別的,主要是因為它效果很突出。我們注意到,“提交”按鈕將形狀更改為徑向進度條,最后再次將形狀更改為確認復選標記。它完整的展示了一個功能,并引起了用戶注意。

 

Credit: Colin Garven

 

變換所做的是無縫地將用戶轉換為不同的UX狀態或“是”(如這是一個按鈕,這是一個放射狀的進度條,這是一個復選標記),引導成所需的結果。通過這些功能空間將用戶吸引到了最終目的地。

 

轉換的作用是將用戶體驗中的關鍵時刻從認知上“分塊”為一系列無縫且連續的事件。這種無縫性可以提高用戶的感知度,留存率和任務成功率。

原則5:量值變化

當量值主體發生變化時,創建動態且連續的敘事關系。

 

 

基于文本的界面對象(即數字和文本)可以更改其值。這是那些“難以捉摸的明顯”概念之一。

 

 

文本和數字更改非常常見,以至于它們繞過我們,而我們卻沒有給他們帶來區別和嚴謹性,以評估它們在提升可用性方面的作用。

 

那么,當值改變時用戶會經歷什么?在用戶體驗中,運動中的12個用戶體驗原則是提升可用性的機會。這里的三個機會是將用戶與數據背后的現實,代理的概念以及價值本身的動態性質聯系起來。

 

讓我們看一下用戶儀表板的示例。

 

 

當數字值未進行加載時,用戶看到的數字對象是靜態的。它們就像涂漆的標志,顯示時速限制為55英里/小時。

 

數字和值表示現實中正在發生的事情。現實可能是時間,收入,游戲得分,業務指標,健身跟蹤等。我們通過運動來區分的是“量值主體”是動態的,而這些量值反映的是該動態價值集中的某些東西。

 

這種關系不僅會被視覺上包含價值的靜態對象所迷失,而且還會失去另一個更深層次的機會。

 

 

Credit: Barthelemy Chalvet, Gal Shir, Unknown

原則6:遮罩

當通過顯示或隱藏對象或組的哪一部分確定實用程序時,在接口對象或對象組中創建連續性。

 

 

遮蓋對象的行為可以被認為是遮蓋對象形狀與效果之間的關系。

因為設計師們熟悉靜態設計中的遮蓋,我們有必要同UX運動原理“屏蔽”做區分,因為它是以一個行為動作發生,而不是作為一個狀態。

 

通過暫時使用對象的顯示和隱藏區域,效用以連續和無縫的方式轉換。這也具有保留敘述流的效果。

 

Credit: Anish Chandran

 

在示例中,頁眉變成相冊時會更改邊界形狀和位置,但不會更改內容。既改變了圖像的效果,同時將內容保留在蒙版中——這是個相當巧妙的技巧。這是非實時發生的,是一種過渡,在用戶執行某個操作后即被激活。

 

請記住,UI動畫原理是暫時出現的,并通過連續性、敘述、關系和期望來提升可用性。在上述參考中,對象本身不變,但也具有邊界和位置,這兩個因素最決定設計的樣子。

原則7:覆蓋

當分層對象依賴于位置時,在視覺平地中創建與空間的關系。

 

 

疊加層通過允許用戶利用平地排序屬性,來克服非空間層次結構的缺乏,從而提升可用性。為了使飛機稍微降落,Overlay允許設計人員使用運動來傳達與位置有關的對象,這些對象存在于非3D空間中其他對象的后面或前面。

 

Credit: Bady, Javi Pérez

 

在左側的示例中,前景對象向右滑動以顯示其他背景對象的位置。在右側的示例中,整個場景向下滑動以顯示其他內容和選項(同時使用“偏移與延遲原理”傳達對象的個性)。在一定程度上,作為設計師,“層次”的概念是如此明顯以至于不言而喻。

原則8:克隆

當新對象出現和分開時,創建連續性、關系和敘述。

 

 

在當前場景中(以及從當前對象中)創建新對象時,以敘述方式說明它們的外觀非常重要。在此宣言中,我強烈主張為對象的起源和離開創建敘事框架的重要性。

 

簡單的不透明褪色往往無法達到此效果。遮罩,克隆和維度是三種基于可用性的方法,可以產生很棒的使用體驗。

 

Credit: Jakub Antalík, Jakub Antalík, Unknown

原則9:模糊

允許用戶在空間上定位自己與對象或場景的關系,而非在視覺層次。

 

 

與“蒙版運動原理”中的UX相似,“模糊化”既作為靜態現象又作為暫時現象存在。這可能會使沒有時間思考經驗的設計師(即瞬間之間的瞬間)感到困惑。設計人員通常按屏幕設計或按任務設計。認為遮蔽是被遮蓋的行為,而不是被遮蓋的狀態。靜態設計表示被遮蓋的狀態,引入時間可以使我們了解物體被遮擋的行為。

 

Credit: Virgil Pana, Apple

 

從以上兩個示例中,我們可以看到,看起來像透明對象或疊加層的遮擋也是一種涉及時間上多個屬性的交互。各種常見的技術包括模糊效果和降低整體對象透明度,使用戶知道她正在操作的其他非主要內容,即在主要對象層次結構“之后”存在的世界。

原則10:視差

用戶滾動時,在視覺平面中創建空間層次結構。

 

 

作為運動原理中的UX,“視差”描述了以不同速率運動的不同界面對象。

使用視差,用戶可以在保持設計完整性的同時專注于主要動作和內容。背景元素會為用戶在知覺和認知上“消失”。

 

Credit: Austin Neill, Michael Sevilla

 

 

這對用戶的影響是,在使用期間清楚地定義各種對象關系。前景對象或移動“快速”的對象在用戶面前顯示的“更近”。同樣,背景物體或“移動較慢”的物體也被視為“離得更遠”。

 

設計人員可以使用時間本身來創建這些關系,以告訴用戶界面中哪些對象具有更高的優先級。因此,將背景或非交互式元素進一步“推后”是有意義的。

原則11:維度

當新對象出現和離開時,提供空間敘事框架。

 

 

對用戶體驗至關重要的是連續性現象以及位置感。維度提供了一種強大的邏輯方式來克服用戶覺得平庸的體驗。人類非常善于使用空間框架在現實世界和數字體驗中導航。提供空間維度的出現及消失的參考點,有助于增強用戶對于位置的感知。

 

此外,維度原則克服了視覺平面中的分層悖論,出現在其他對象的“前面”或“后面”。維度以三種方式呈現:折紙維度,浮動維度和對象維度。折紙的維數可以用“折疊”或“鉸接”式的三維界面對象來考慮。

 

折紙維度示例

 

由于將多個對象組合為“折紙”結構,因此即使看不見隱藏對象,在空間上仍可以說它們“存在”。這有效地將用戶體驗呈現為連續的空間事件,用戶可以在交互模型本身以及界面對象本身完成操作。

 

浮動維度為接口對象提供了空間的起源和偏離,使交互模型直觀且具有很強的敘事性。

 

浮動維數示例

 

在上面的示例中,維度是通過使用3D“卡片”來實現的。這提供了支持視覺設計的強大敘事框架。通過“翻轉”卡片來擴展敘述,以訪問其他內容和交互性。

 

維度是一種強大的引入新元素的方法,可以最小地降低突發性。維度系數會讓交互對象具有更模擬真實感。

 

對象維數示例

 

多個2D層在3D空間中排列形成真實尺寸的對象,它們的維度是在實時和非實時過渡時刻顯示的。物體維數指使用者在不可見的空間位置上產生對物體效用的敏銳意識。

原則12:Dolly&Zoom

在導航界面對象和空間時保持連續性和空間敘述。

 

 

移動(Dolly)和變焦(Zoom)是電影概念,指的是與相機有關的對象的運動,并且圖像本身在幀中的大小從遠攝到近攝平滑地變化(反之亦然)。

 

在某些情況下,無法判斷對象是否正在縮放,它是否正在朝3D空間中的相機移動或相機是否朝著3D空間中的對象移動,以下三個示例說明了可能的情況。

 

圖層是在搖動,縮放還是在移動相機?

 

將“移動”和“縮放”的實例視為獨立的,因為它們涉及連續變換,并且滿足運動原理中用戶體驗的要求:它們通過運動來提升可用性。

 

左邊的兩個圖像是鏡頭滑動縮放,而右邊的圖像變焦縮放

 

多莉(Dolly)是一個電影術語,適用于推進或遠離對象的相機運動(它也適用于水平“跟蹤”運動,但在可用性方面不那么重要)。

 

Credit: Apple

 

在UX中,在空間上,此運動指的是觀察者視角的變化,也可能是指在對象更改位置時保持靜態的視角。多莉原理通過連續性和敘述性,來無縫過度對象目標。多莉還可以結合“尺寸原則”,從而獲得更多空間體驗和更多的深度,向用戶傳達當前視圖“前”或“后”的其他區域。

 

縮放指的是既不是透視也不是物體在空間上的移動,而是物體本身在縮放(或者我們的視野正在縮小,從而導致圖像放大)。這向用戶傳達對象所在“內部”區域的信息。

 

 



作者:UX辭典
鏈接:https://www.zcool.com.cn/article/ZMTE5Mzg5Mg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

底部標簽導航設計的千奇百態

天宇

作為 UI 設計師來說,掌握產品設計中的每個組成要素是非常必要的,所謂精細化的設計就是把控好每一個細節的深入。隨著大屏手機的普及,在人機交互的探索上面設計師追求著更多提高用戶體驗的設計方式,不過萬變不離其宗,用戶體驗沉淀下來的行為習慣依然影響著我們的設計。

 

就拿導航設計來深入探索,隨著產品設計的不斷推進,很多新穎的設計呈現帶給用戶更多的操作體驗。本文就以移動端底部標簽欄導航為案例分析,和大家一起探索一下底部標簽欄導航設計的千奇百態。

 

 

 

 

分享目錄

 

一、關于底部標簽導航

二、UI 設計注意事項

三、UI 表現層類別分析

四、移動端線上案例分析

五、總結

 

 

 

一、關于底部標簽導航

 

移動端導航欄設計相當于自身的骨架,是支撐產品中功能交互和內容傳播的血肉。導航系統指引著用戶的操作軌跡,引導用戶抵達目的地和進行相關的操作,將零散的內容和功能進行組織形成結構化的可視軌跡。導航的存在因此顯得格外重要,也是梳理功能結構需要重點確定的內容,以此來形成整個產品的脈絡。

 

 

移動端導航欄比較常見的有:底部標簽欄導航、舵式導航、頂部標簽(Tab)導航、宮格式導航、輪播(平鋪)式導航、懸浮 icon 導航、列表式導航欄、抽屜式導航、下拉導航/菜單導航等等。我們比較常見的產品中采用底部標簽欄導航的居多,便于用戶進行頻繁的操作,這也是本文接下來重點和大家探索的話題方向。

 

在移動端產品中底部標簽欄導航是最常用的導航模式,常作為一級目錄的導航,位于產品界面底部。根據用戶對于界面的操作熱區來看,底部是用戶可以輕松點擊的區域,無論用戶單手還是雙手操作都十分便利。

 

在底部標簽欄導航的基礎上進行拓展欄設計也是比較常見的形式,也就是舵式導航。突出中間的功能強化用戶的關注度,引導用戶使用更多延展功能。底部標簽欄導航和底部(舵式)拓展欄都屬于底部導航的范圍,本文將會重點以此類型為主進行梳理。

 

 

 

 

二、UI 設計注意事項

 

底部標簽欄導航非常直觀的告訴用戶當前的位置,也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性,不會與其他功能模塊形成干擾,也能與多種導航模式進行組合使用。

 

底部標簽欄導航在模塊的選擇上面通常是 3-5 個,比較常見的為 5 個,3 個模塊相對比較松散,運用案例不是很多,除非業務功能較少。在設計表現形式上面有:icon + 文字、純 icon、純文字形式,比較主流的還是 icon + 文字的形式,可以降低用戶的理解成本和記憶負擔,提高用戶的操作體驗。

 

 

底部(舵式)拓展欄是為了突出中間功能設計,吸引用戶關注度,提高更多隱藏功能的使用概率。這種導航模式較為常見,比如轉轉、抖音、馬蜂窩旅游、閑魚等等均有使用。可以提高導航欄設計的趣味性和特征性,引導用戶操作更多功能和貢獻更多內容。不過這樣的設計由于關注度被吸引,進而影響其它一級模塊的關注度,由于隱藏的功能增加了用戶的記憶負擔和操作負擔,利弊權衡需要產品設計師進行評估。

 

在進行設計的過程中,功能模塊的確定需要起到牽引的重要作用,鏈接起整個產品的功能脈絡;設計表現上面需要區分默認和點擊狀態,可以跳出規范的束縛,但是需要在不影響其它業務模塊的前提下進行。

 

 

 

 

三、UI 表現層類別分析

 

底部標簽欄導航在 UI 表現層方面也是千奇百態,除了常規的置底形式,設計師也發散了更多新穎的表現。突破現有規范的束縛,不被固有化思維所限制,才能不斷的進行設計創新。

 

 

3.1 最穩定的常規設計形式

底部標簽欄導航最常見的設計形式依然是置于底部的常規形式,通常是 3-5 個功能模塊為主,其中 5 個功能模塊是較為常見的。形成差異化的是在圖標設計上面進行發揮,難度較大的設計是結合品牌基因或者特征性元素表達,也有一些是純文字的設計形式。

 

除了圖標上面進行發揮以外,也有一些會在背景上面進行裝飾,體現產品差異化。不過最常見的依然還是單色為主,或者根據模塊的需求在切換的過程中選擇使用不同的背景體現。雖然是最常規的導航模式,但是設計師依然可以在布局形式、圖標風格、配色關系、背景裝飾等方面進行發揮。

 

 

 

3.2 動靜結合的微動效表現

微動效在產品設計中的運用逐漸變得頻繁,相較于靜態的表現更能引起用戶的關注度,也能帶來趣味性和互動性。在底部標簽欄導航中的圖標設計上面,默認的采用靜態展示,而點擊狀態以動效的形式進行演變過度也是非常常見的設計處理。

 

在進行動效設計的時候,可以采用整個圖標位移形成動效,這是最簡單的動效表現,通常是上下彈跳位移。比較復雜的是圖標本身的結構動效,這也是圖標動效轉換比較連貫的形式。

 

 

 

3.3 突出規范框架的束縛表現

雖然大部分產品設計都會優先采用官方的設計規范,但是為了突出設計的差異化,也會進行一些突出規范框架的設計。在保持原有不變的導航設計中,我們可以針對局部功能模塊進行突出表現(比如舵式導航),也可以將點擊狀態進行突出表現。

 

 

 

3.4 懸浮層增強空間感

一些產品為了增強界面結構的空間感,針對底部標簽欄導航設計采用懸浮層的設計來進行表現,使得界面的通透性和呼吸感更強。這種設計形式依然保留了原本的結構,只是預留了左右和底部的間距,也有一些產品結合交互動效的形式表達,滑動過程中采用隱藏部分功能,增加瀏覽過程的內容輸出面積。

 

 

 

3.5 底部拓展/隱藏式設計

隨著一些工具型產品的使用,功能模塊變得復雜而繁多,也有將更多功能隱藏在底部標簽欄里面,上拉交互時顯示。這種設計形式將底部標簽欄進行了深度的開發利用,但是功能隱藏比較深,曝光度受到了一定的影響,不適合較為重要的功能模塊設計。

 

 

 

3.6 小結

底部標簽欄導航在 UI 表現層方面還有更多可以給予設計師發揮的空間,設計沒有固定不變的形式,在于不斷的發現、總結和創新。期待大家發現更多設計解決方案和進行更多設計創新,下面將會為大家梳理線上的優秀案例,讓我們可以站在巨人的肩膀上不斷超越。

 

 

 

四、移動端線上案例分析

 

移動端底部標簽欄導航設計在眾多產品中浮現出很多優秀的案例,對于線上案例的分析將有助于我們進行落地性的思考,新穎的設計不再是飛機稿,而是可以實現的創意。創新是建立在不斷的發現、總結、分析和改變,希望這些案例可以帶給你點滴靈感。

 

 

4.1 背景結合特定節日增強氛圍

在大部分情況下底部標簽欄導航的背景為單色的居多,不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節日結合氛圍營造對背景進行簡單的裝飾,可以在節假日或者特殊時期引起用戶的共勉,增強產品的情感化設計。

 

比如寶寶巴士兒歌 APP 的底部標簽欄導航設計,在之前的一些版本迭代過程中,結合特定氛圍營造進行背景設計,也是一種非常不錯的設計表達形式。由于屬于兒童類產品,點擊功能模塊切換的過程中還伴隨著音樂,視聽體驗的結合使得操作體驗備受關注。

 

 

 

4.2 強化消息提示的關注度

系統通知或者消息提示往往都會被用戶所忽略,盡管很多產品都會將消息作為單獨的功能模塊來設計,但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結合在個人中心的設計中,以氣泡彈出的形式展示在圖標紅點提示上方。以此來吸引用戶的關注度,增加消息閱讀率。

 

 

 

4.3 特異設計引導功能模塊關注度

在底部標簽欄導航的多個功能模塊中,為了突出或者引導使用某個功能時,會采用特異構成的設計做法,在原本的設計規范上面突出表現個例,以此來引起用戶的關注度。比如騰訊動漫在第一次進入 APP 時,圈子的圖標設計會特意突出,點擊之后恢復原樣,以此吸引用戶對該欄目的關注,增強功能模塊的使用率。

 

 

 

4.4 圖標設計的年輕化趨勢

隨著 95 后成為互聯網原住民,產品設計逐漸趨向于“年輕化”的探索和挖掘。優酷 V9.0 升級后設計風格更年輕化,底部標簽欄圖標設計采用低純度、高明度的多色漸變,結合微動效使得風格更加青春活潑,符合年輕一代的審美需求。年輕化的設計不僅提高感官體驗,也拉近了產品與用戶之間的親和力。

 

 

 

4.5 趣味性的情感化設計融入

情感化的設計能夠拉近產品與用戶之間的親和力,這也是設計師在不斷探索并延展的設計方向。QQ 作為社交工具而言,如何更加符合年輕化的設計需求,在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情,在拖拽的時候會切換不同的表情,帶給用戶更加趣味性的體驗,讓人會心一笑。

 

 

 

4.6 首頁圖標強化品牌曝光

為了強化產品品牌的曝光度,在進行底部標簽欄圖標設計的時候,會將首頁圖標的點擊狀態切換為品牌 LOGO 的形式,以此來增加品牌的曝光度。設計上面的選擇有 LOGO 圖形、吉祥物、應用圖標、品牌局部圖形等,會根據品牌 LOGO 的造型靈活選擇。

 

 

 

4.7 舵式導航轉一轉增強關注度

底部(舵式)拓展欄導航是突出中間功能模塊設計來強化關注度,除了靜態的表達以外,結合微動效更能起到強化突出的作用。轉轉結合吉祥物和微動效運用在舵式導航的設計中,不僅提高用戶的關注度,情感化的設計還能增強產品的親和力。

 

 

 

4.8 結合營銷內容多層共用

產品中的營銷結合是最為常見的,產品設計師也在不斷地思考更多可結合的功能模塊,舵式導航的區域被充分利用是最為便利的。芒果 TV 將營銷內容與會員模塊圖標進行結合,在保持原有功能操作的基礎上強化營銷活動的曝光度,鼓勵更多用戶參與活動。

 

 

 

4.9 微動效結合多層功能運用

微動效運用到底部標簽欄導航圖標動效中較為常見,可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設計的產品,也會在用戶上滑瀏覽內容到一定量的時候將首頁變化為“置頂”的操作,方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標的設計中,結合微動效的變化帶給用戶趣味性和強化品牌記憶,在首頁圖標和置頂圖標切換的過程中也采用了微動效的形式,過度更加自然流暢,也能更加醒目的提示用戶。

 

 

 

4.10 微動效結合突出框架的束縛

一些尋求突破的產品,在設計的時候也嘗試了突出規范框架的束縛表現,點擊狀態會突出局部來強化。結合動效的變化形成自然過度,突出的設計更能引起用戶的關注度,明確自己當前所處的位置。這樣的表現形式不僅可以形成設計差異化,也能讓用戶操作路徑更加明顯,比如愛奇藝早期版本、美團外賣等產品。

 

 

 

4.11 懸浮層設計突破底部標簽欄常規表現

設計師都在不斷的探索設計的差異化,敢于創新才能尋求新的可能性。脈脈在最近的迭代中將底部標簽欄的設計采用懸浮層的形式表現,使得界面內容呈現的呼吸感更強,也增加了界面結構的空間感。在保持基本設計規范的前提下進行小小的變化,就能帶來設計的差異表現,也能帶給用戶較為新穎的感官體驗。

 

 

 

4.12 懸浮層設計結合交互動效的雙向運用

交互動效是 UI 設計師在靜態設計稿中要逐步突破的一種技能,交互動效可以讓我們的設計表達更加直觀,提高產品的互動性和趣味性。馬蜂窩旅游在進行底部標簽欄突破的過程中,除了采用新穎的懸浮層設計以外,在上滑瀏覽內容時采用隱藏局部功能的處理方式,讓內容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航,探知用戶行為習慣并給出不同的交互反饋,帶給用戶更高的操作體驗和互動趣味性。

 

 

 

4.13 底部拓展設計承載更多功能模塊

對于一些功能模塊較多的產品,產品設計師會盡可能的開發每一個常規的功能,拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候,就將更多功能模塊隱藏在上拉展開欄中,方便用戶進行快捷操作。充分的對底部標簽欄進行了深度挖掘,利用手勢的變化實現更多功能模塊的切換,提高了用戶的操作體驗。

 

 

關于移動端底部標簽欄導航設計還有很多非常不錯的線上案例,這里就不一一列舉啦!優秀的案例總結能夠帶給我們更多的靈感參考,基于優秀之上我們才能設計出更新穎的作品,希望以此拋磚引玉,期待大家發現更多好玩的設計。

 

 

 

五、總結

 

對于 UI 設計師來說,產品體驗是一種習慣的養成,結合體驗的日記化摘錄形成設計思路的總結。總結是為了形成最終可供靈感借鑒的經驗,基于優秀的案例分析才能形成更多的設計解決方案。

 

本文以移動端底部標簽欄導航設計的經驗分析為大家進行梳理,任何的設計表達都不是不變的規律,掌握的是這種設計分析和總結的思路,以此反推出更多的設計總結。希望本文的思路作為拋磚引玉,帶給你更多的思路。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTIzMTk0MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

發現了10個非常棒的UI動效案例

天宇

動效在 UI 場景中的運用已經非常普遍,帶給用戶的體驗升級也是很直觀的。無論是一個圖標動效到界面間的轉場動效,還是聊天場景中的表情動效等,都證明了動效已經是無處不在。

 

最近黑馬哥在體驗產品的過程中,發現了很多優秀的動效案例,今天選擇其中的 10 個和大家一起交流學習,希望能夠帶給大家一些靈感啟發。

 

 

 

 

01. 動效,讓點贊與眾不同

 

動態表情為社交場景帶來更活躍的體驗,使得交流過程變得更加趣味性。一個動態的表情不僅活躍了氛圍,也使得通過簡單的一個符號代表了千言萬語。

 

最近在使用釘釘 APP 進行聊天的過程中,發現輸入框的大拇指圖標在長按的時候結合了動效的變化,對話場景中出現的大拇指表情會隨著長按而增大。結合動效和長按手勢,為點贊的圖標增加了不一樣的趣味性,帶給用戶不一樣的社交體驗。

 

 

 

 

02. 動態提醒,增強消息的關注度

 

各類通知/消息在產品中隨處可見,紅點提示剛出現的時候還引起了用戶強迫癥,短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化,未讀消息的點擊率逐漸降低,大家都在嘗試更多提高關注度的形式。

 

支付寶在消息模塊的服務提醒中,采用了動態形式提高關注度。當用戶點擊消息進入界面時,小鈴鐺圖標會左右晃動,以此來吸引用戶的目光,達到增加關注度的目的。

 

 

 

 

03. 圖標動效,讓你脫穎而出

 

在金剛區眾多的業務模塊中,想要突出重點模塊的關注度,采用動態圖標是比較常用的方式。采用動靜結合的形式,會讓動態表達得到突出。

 

比如 Keep App 將活動挑戰圖標動效化,在不改變配色規則和圖標設計規范前提下,依然可以達到突出主題的作用。

 

 

 

 

04. 博人眼球的動態懸浮廣告

 

在不破壞產品結構的前提下,融入廣告的做法中,懸浮層廣告是較為明顯的形式。通常是靜態異形和動態異形較多,而動態的關注度相對更強一些。

 

比如 Keep App 將活動的折扣信息以懸浮層的形式表達,既不會占用太多空間(隨著滑動會隱藏顯示),又能吸引用戶的關注度。如果用戶覺得影響操作,也可以直接關閉,就不會反復提醒而形成干擾。

 

 

 

 

05. 內容模塊結合動效替換突出存在感

 

在一些內容量比較多的產品中,比如電商產品,很多內容模塊都是百花齊放。都想要突出自己模塊的存在感,帶來更好的流量引入。而動效的結合也是不錯的選擇,但是需要考慮動效的干擾度。

 

當當 App 在突出今日搶購欄目時,為了不影響臨近板塊的干擾度,利用動效轉場來替換展示的商品信息。縮放替換商品時的動效既能達到差異化,也不會破壞整體的結構,算是一舉兩得的設計解決方案。

 

 

 

 

06. 微弱的動效也能呈現有溫度的設計

 

有時候在進行產品設計的時候,動效帶來的關注度并不是需要很強的表現力,一些微弱的動效依然可以提升產品體驗,帶給用戶更有溫度的設計。

 

自如 App 整體的設計都是做得非常不錯的,在“我的”板塊頭部區域,結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感,讓用戶感受到這是一款有溫度的產品,提升用戶的好感度。

 

 

 

 

07. 動態感十足的底部標簽欄

 

圖標動效運用到底部標簽欄十分普遍,在這個頻繁切換的操作中,動態的形式可以帶來更強的趣味性和關注度。

 

優酷 App 底部標簽欄采用多種顏色變化轉場,結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能,方便用戶進行內容的刷新,增強用戶體驗感。

 

 

 

 

08. 拓展功能的動態指引設計

 

針對一些功能體量較大的產品,會經常結合一些隱藏式設計,拓展出更多功能操作。通常默認為展開狀態,在滑動瀏覽內容時隱藏,通過動效吸引點擊展開,不會造成主內容的干擾。

 

比如平安口袋銀行底部標簽欄上方的拓展功能區,動態形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態設計(點我抽獎),突出其點擊欲望。動態設計不僅提高了功能的曝光度,也能引導用戶操作,將繁瑣的操作變得更便利。

 

 

 

 

09. 結合動態 IP 的下拉刷新

 

針對下拉刷新這一常規操作,設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作,被很多產品設計師所采納。

 

美團外賣就將品牌 IP 形象結合得恰到好處,下拉刷新時兩只耳朵搖擺非常俏皮可愛,松開后 IP 形象露出,還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現,拉近與用戶之間的親和力,帶給用戶更人性化的使用體驗。

 

 

 

 

10. 圖標動效帶動局部功能的關注度

 

對于一些局部功能或者模塊占比較小的欄目,為了提高曝光度,獲得用戶的關注度,動態的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計,帶來的效果也是顯而易見。

 

比如 QQ 音樂在“我的”模塊中,將活動中心、會員中心、每日簽到的圖標采用動態設計形式,雖然幾個模塊占比較小,但是依然能夠獲得用戶的關注度。

 

 

 

 

小結

 

動效表達在產品設計中的應用越發普及,不僅可以強化功能的關注度,也能帶給用戶感官體驗上的升級。優秀案例的積累和分析,有助于我們掌握更多的表現形式,靈活的運用到項目設計中。

 

 

作者:黑馬青年(vx: heimaux)

本文由 @黑馬青年 原創發布。未經許可,禁止轉載。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTMzMTI5Mg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

54個絕妙UI/UX設計秘訣:讓你的設計脫穎而出!

天宇

當你為你的項目創建有效的,可訪問的,漂亮的ui時,只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中,我收集了一些容易放置的內容。在實踐中,這些小技巧可以毫不費力地幫助你改善你的設計,還有用戶體驗。

希望你喜歡!

1·讓你的元素出現更多

 

用微妙的邊界定義。

使用多重陰影或非常微妙的邊界(只是一個陰影比你的實際影子)周圍的某些元素可以使這些元素出現

更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。

 

 

2.減少字母間距

 

標題給一個更好的光學范圍。減少長格式正文的字母間距?這是一個大大的“不”。但對于標題……我要說“是”!

你的標題很可能會比他們的標題更大,更重。相比于正文,字母之間的間距有時會出現視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標題視覺平衡,更易于閱讀,通常更賞心悅目。

 

 

3.圖表一致性

 

為了一致性,確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量,要么填滿,要么秒變了。不要混搭。

 

 

4.頁面可以用一種字體

 

只使用一種字體就很好。在設計時,使用單一字體是絕對沒問題的,這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。

 

 

5.適當的留白

 

留白是UI設計朋友。大膽的使用。適度的留白,即使是少量的白色物質,但要使用得當。能讓你的設計透氣,而且看起來更光亮。

 

 

6.20pt的文字

 

創建長篇內容?給20 pt試試。對于長形式的內容(即微博文章,項目描述等等),試著這樣做20pt(甚至更多一點)為你的文本字號。當然,這取決于所選擇的字體,但大多數流行的字體在20pt時效果得很好,并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。

 

 

7.字號集比例

 

使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義,Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。

 

 

8.界面顏色定義

 

選擇一個基本顏色,然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許,簡單地使用一個有限的調色板選擇一個基地顏色,然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。

 

 

9.登陸用戶體驗

 

改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整,可以為你的用戶提供更好的體驗……

記住,拇指仍然是主宰!

 

 

 

10.陰影來自一個光源

 

你的影子來自其中一個光源對吧?確保你的影子總是來自一個光源。這是一個簡單的錯誤,但它可以讓你的設計看起來更拋光且統一。記住,我們不是生活在一個擁有一千個太陽的國度里。

 

 

 

11.建立字體集合

 

使用更好的字體組合,效率會很很快。當你想要提高你的字體組合技巧的時候,當面對1000個字體選擇,只是去尋找對應的自己集合,效率會快很多。

 

 

 

12.提高你的對比

 

文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置,您可以選擇嘗試,并測試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比,不要太復雜的內容和圖片。

 

 

13.使用居中排列文字要有節制

 

太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容,保持文本左對齊。你的用戶會感謝你的你。

 

 

14.多字重

 

當選擇一個多用途的文字,盡量找一個大量權重。你搜索的字體有很多選擇嗎?重量、風格?如果你打算在你的一些項目中使用它,請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當然也有例外,某些項目會要求“只有一種風格”

更精致的字體,但對于絕大多數項目,你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格,希望你在設計過程的后期需要更多的空間。

 

 

 

15.淺色背景不要文本過亮

 

想要創造更容易理解的界面,對吧?把你的文字調暗在光亮的背景上。在淺色背景下工作時,不要讓你的文本太亮。

 

 

16.純黑色文字未必是好

 

當涉及到長形式的內容時,某些常規的粗細字體仍然可以看。但太重了,在屏幕上會很僵硬。你可以很容易地解決這個問題,選擇一些像深灰色(即#4F4F4F)的基調,把文字往下寫,讓眼睛更容易看。

 

 

17.通過色彩對比度作區分

總是通過icon最突出的內容。你認為這是常識,對嗎?我并不覺得。通過使用色彩對比度做區分,尺寸和標簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標。如果可以使用文本標簽,那就使用它們,讓用戶更好地理解。

 

 

18.字體越小,行高越大

 

當你的字體變小時,請增加行高,以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。

 

 

19.“Il1”測試文字可讀性

 

使用x-height來測試字體的可讀性。基本上,x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高,通常有助于更好地閱讀,特別是在使用長形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個測試,比較來自特定字體的三個字符:大寫字母I,小寫的L和數字1。

 

 

 

20.突出實用動作

 

當設計一個在應用程序內部使用的菜單時,確保提供最多經常使用的動作(例如:上傳圖像,添加文件等)最突出的屏幕上。

 

 

 

21.顏色-從你的圖像中選擇

 

顏色-從你的圖像中選擇,會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色,然后應用各種色調。你選擇的顏色陰影到你的背景,文字,圖標或更多,可以添加。你的設計具有豐富的視覺趣味和個性。

 

 

22.不同字體,不同行高

 

基于字體的x坐標,設置您的線高度。不同x高的字體需要不同的行高測量,實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實現。

 

 

23.突出最重要元素的方式

 

突出最重要的元素。通過使用字體大小,權重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡單,但微妙的調整,讓用戶體驗更好一點。

 

 

24.錯誤下額外的視覺輔助

 

操作錯誤的時候,添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式,但很有幫助,當他們填寫任何形式的表格時額外的視覺輔助。

 

 

25.移動端熱區創建

 

嘗試在移動端創建慷慨的熱區。當為移動設備設計時,嘗試創建足夠大的可點擊區域,是好的。對于只包含文本的按鈕和鏈接來說,這是很有挑戰性的,盡可能使用帶有標簽的圖標。

以下是iOS和Android的最小推薦點擊區域:

44 x 44pt用于iOS

48x48dp用于Android

 

 

26.短標題上盡量使用全大寫

 

在短標題上盡量使用全大寫。如果你想在標題上使用全大寫,請確保它們在任何時候都很短。有可能,最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣,在標題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。

 

 

27.保持文字與圖像的對比度

 

在輕文本和圖像之間,保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。

 

 

28.英文標題字體推薦

 

看看這些很棒的字體,用在標題非常好的。發現他們真的很適合標題,設計感很強。(我沒有推廣費用,請放心用)

 

 

29.英文長文本字體推薦

 

看看這些很棒的字體,用于長文本是非常好的,強烈推薦使用。(我仍然沒有任何推廣費)。

 

 

30.讓垂直節奏恰到好處

 

標題和正文。當你想實現一個好的垂直節奏,以及一個強大的視覺之間,需要對文本元素排版、間距作設計。我見過許多設計,最常見的是在文章列表中,它們已經被應用標題的上下空白相等,這樣就失去了這種聯系在它下面有正文。在這種情況下,我總是會給我的標題更多的頂部邊距,而在底部,標題和下面的內容之間的連接是更強,有良好的垂直節奏,視覺層次保留在所有的文章之間。

 

 

31.使用具有信息性的提示符

 

對于下載指標,試著去做盡可能提供信息。對于用戶,嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點,用百分數來顯示當前進度,一個簡單的圖標,讓他們可以在任何地方取消下載時間。

 

 

 

32.保持標題相對簡潔

 

如果你能保持標題簡短,簡潔……“想做就做”。

如果可以,如果合適的話,保持標題簡短,時髦,切中要點。而不是“這是你的風格,你的方式”,簡單地使用像這樣的“你的風格。你的方式。”人們會瀏覽,保持這些標題簡短有力有助于他們更快地消化中的信息。

記住,這種方式可能會讓人感覺很突然,你需要考慮一下你所從事的項目類型,以及目標受眾來決定方法是合適的,相對于更標準的格式。

 

 

33.選擇合適的字體

 

正確的設計“聲音”。在項目中處理文本時,選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨特的聲音,關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時,這似乎是一項艱巨的任務,所以不要害怕從類似的項目中獲得靈感,并從這些項目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。

 

 

 

34.行長度的平衡點

 

你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面,45到75個字符被普遍認為是滿意的行長度,而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然,字體大小和行高在決定可讀性時也起著重要作用,但是對于行長,保持在45到75個字符之間,就會更好了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

35.幽靈文字提升用戶體驗

 

偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗,那么出于裝飾的原因,插入奇怪的元素是可以的。



 

 

36.界面元素保證快速區分

 

使用戶界面中的元素彼此區分。按鈕、通知,ui中兩個獨立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區分開來,輕松掃描您的網站或應用程序。按鈕,在大多數情況下,將優先,所以確保他們是最突出的。項目在屏幕上,并很容易區分其他元素。

 

 

37.投影的玩兒法

 

只是一些細微的陰影,你所需要的。我們都喜歡陰影,對吧?它們可以作為微妙又很強大的視覺線索,在您的設計中使用要適度。現實世界中的陰影,在大多數情況下幾乎是不可察覺的,而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實現一些的東西更微妙和栩栩如生。

 



38.全大寫文本

使用全部大寫?選擇適合的字體,能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重,使用戶的光學清晰度。

 

 

39.讓面包屑脫穎而出

讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經常用于內容豐富的網站,通過最小的調整,你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度,這一點尤其有用。

 

 

40.嘗試用高飽和顏色

 

使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒,但是當過度使用時,它們會使使用者的眼睛疲勞,主要是在使用的時候的文字內容。盡可能使用時要適度,并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時,可讀性和可訪問性應該是最優先的。

 

 

 

41.圖表不要叛逆的使用

 

在ui中使用已建立的圖標,為了避免給用戶造成混淆。在你的設計中添加圖標時,試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑,成為用戶的認知障礙。不要在這些圖標上過于叛逆。

 

 

 

42.接近原則

 

在眾多經過嘗試和測試的設計原則中,這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程,表明彼此之間的關系,這有助于加快用戶的認知。

 

 

 

43.文本網格

4pt基線網格+ 8pt網格=單一網格。當使用類型時,8點網格旁邊使用4點基線

可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4,使用的行高值為4的倍數(16、20、24、28等)

為什么4?我發現在過去使用特定的文本大小時,按8的倍數縮放是不太合適。

 

 

 

44.文本建議行高比例

減少標題上的行高是很好的。與長形式的主體文本不同,它需要足夠的行高,以便折行易讀。標題的推薦行高通常約為1至1.3倍。

 

 

45.顏色選擇

 

選顏色有困難計劃嗎?在顏色上進行類比論。類似的顏色,也被稱為相鄰或相鄰的色調,是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的,顏色方案快速。當你需要快速將顏色調和到混合中時,可以使用類似的方法。

 

 

46.提高信噪比

 

在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲,從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效,不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。

 

 

47.圖像文字達到強對比

 

我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時,使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。

 

 

48.使用重量、大小和顏色來表示類型中的層次結構

 

當使用類型時,元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產生任何混淆。

 

 

49.淺色文字加深色?

 

養肥了,字體大小為最佳易讀性。當設置暗色文字與淺色背景,選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量,特別是對于長表單副本。以最佳的易讀性為目標,避免讓用戶的眼睛疲勞。

 

 

 

50. 用你的字體選擇創造正確的情感回應

 

試著為你要呈現的內容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當內容與他們交談當它不是。正確的字體選擇是至關重要的,使您的內容講給他們直率和情感的水平。

 

 

51.大寫字母+字母間距=更好的易讀性

 

你是否使用全大寫的短行文本?嗯…這是一個好主意,增加這些字母之間的間距,以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。

 

 

52.錯誤告知

 

打開這些錯誤消息,您的表格有幫助。在使用表單時,請嘗試并確保錯誤消息得到解釋。出了什么問題,如何補救。總是讓用戶了解情況,即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用,不要讓您的用戶蒙昧。

 

 

 

53.告知用戶正在發生什么

 

試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循,并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。

 

 

 

54.不可逆的操作強提醒

 

告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前,總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為,如刪除某些東西。讓用戶知道將要發生什么,并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。

 

 

 

參考文獻《UI & UX Micro Tips - The Ultimate Collection》

 



作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTI1NjIyMA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 成人国产精品高清在线观看 | 成人91视频 | 最新国产你懂的在线网址 | www日韩免费高清视频 | 女人被免费看在线看 | 久热精品视频在线观看99小说 | 免费一级a毛片在线播放 | 一级aaaaaa毛片免费 | 1024精品| 成人午夜影视全部免费看 | 99久热只有精品视频免费观看17 | 三级毛片三级毛片 | 国产91在线视频 | 国产精品成人va在线观看入口 | 亚洲国产成人精品青青草原100 | 国产vr一区二区在线观看 | 韩国一级毛片a级免观看 | 91sao在线看片水片 | 麻豆19禁国产青草精品 | 女人被狂躁的视频免费免费看 | 国产亚洲欧美在线播放网站 | 国内精品视频区在线2021 | 中文字幕亚洲一区二区v@在线 | 精品久久看 | 天天看大片特色视频.vr | 午夜激情在线 | 亚洲日韩中文字幕 | 国产极品嫩模大尺度福利视频 | 欧美精品免费一区欧美久久优播 | 青青草伊人网 | 欧美成人xx禁片在线观看 | 麻豆传媒视频网站 | 久久九九国产 | 免费在线黄色网址 | 成人综合婷婷国产精品久久免费 | 国产成人www | 夜夜偷影视| 玖玖在线国产精品 | 日本黄色大片免费看 | 中国一级黄色片子 | 国产一区亚洲二区 |