火星網(wǎng)校
UI設(shè)計怎么高效率找到UI設(shè)計素材
發(fā)布時間：2024-03-28 11:15:08 瀏覽量：103次
如何高效率找到UI設(shè)計素材。
生活中的搜索工具
在日常生活中我們常常會跟各式各樣的“搜索工具”打交道。比如下面這個場景尤為常見，當(dāng)你身處一個圖書館，想找某一本你很需要的書時，你會怎么辦？
這個時候通常會通過以下兩種途徑來解決問題：
- 精準(zhǔn)查找-通過電腦檢索，找到目標(biāo)；
- 模糊查找-通過書架類目分類，找到目標(biāo)；
然而，這里電腦和類目標(biāo)識在整個找書的行為路徑中就充當(dāng)了查找的功能。生活中還有很多諸如此類的應(yīng)用場景，比如超市購物、查字典等行為場景。
某超市貨架
為什么需要搜索工具
搜索工具的本質(zhì)是幫助人們提升決策效率。據(jù)全美2012年調(diào)研結(jié)果顯示，每位成年人每天平均要做70個選擇。然而每個選擇又可能會面對大量的選擇對象，這時人們的決策成本就會隨著平行信息時代的發(fā)展而與日俱增。
如何幫助人們在面對大量選擇對象時提升決策效率，這就成為了篩選設(shè)計的抓手也就是我們所說的設(shè)計機(jī)會點。
移動設(shè)備上的搜索工具
大量數(shù)據(jù)集合需要根據(jù)不同用戶的不同需求來進(jìn)行過濾，也叫做篩選。篩選依賴于用戶的選擇標(biāo)準(zhǔn)，從而細(xì)化搜索結(jié)果或著一組大型對象結(jié)果。常見的搜索工具設(shè)計包括：
- 直列式搜索工具
- 抽屜/折疊式搜索工具
- 列表式搜索工具
上述三類搜索工具的設(shè)計思路幾乎涵蓋了市場上絕大多數(shù)的應(yīng)用案例，不同類型之間的搜索工具適用于不同的使用場景，下面我們可以來分辨看看各個類型的場景應(yīng)用。
直列式搜索工具
與頁面的元素排序邏輯以及展示方式類似，屏幕上直接顯示對象結(jié)果或者對象列表。通過設(shè)計tab按鈕來篩選目標(biāo)對象。Google和百度都是采用單排橫向式。
百度
當(dāng)我對關(guān)鍵詞進(jìn)行檢索后，可以在此基礎(chǔ)上對結(jié)果進(jìn)行內(nèi)容類型的搜索， Google的搜索點擊最右側(cè)的“搜索工具”時，會額外展示出一列新的篩選條輔助進(jìn)一步的選擇。
Google Play 報亭
Google Play報停采用了雙排篩選條，根據(jù)用戶感興趣的檢索詞匹配出“內(nèi)容相關(guān)”以及“媒體相關(guān)”兩類篩選偏好。
這類型的搜索工具會緊跟檢索入口，這樣更便于讓用理解下方的單排tab元素是基于檢索關(guān)鍵詞而進(jìn)行過濾的。根據(jù)格式塔定律的接近性原則，相鄰的元素關(guān)系會更容易讓用戶理解他們之間的關(guān)聯(lián)作用。
抽屜式搜索工具
CNN新聞采取的是抽屜/折疊式搜索工具，通過一個handle來提示篩選器的入口，用戶通過點擊可以將被折疊/收起的搜索工具浮層展示出來。
CNN NEWS
擁有成熟且穩(wěn)固的分類/類目體系的內(nèi)容平臺更適合這種抽屜式的篩選器浮層，可以將完整的類目完全曝光，并且常駐底部的handle,可以有效的避免曝光衰減的狀況。
列表式搜索工具
作為全球最大的在線旅游公司Expedia，采用了列表式的搜索工具。但Expedia有一點做的非常好，就是在搜索工具展開時如何給用戶預(yù)期匹配的結(jié)果數(shù)量。
再早期的一些app上會采用對話框式的篩選器，比如說Trip Advisor，但現(xiàn)在他們也開始采用列表式的篩選器。
在此結(jié)構(gòu)基礎(chǔ)上還有組合設(shè)計方式，通過單排直列式 列表式，比如攜程,這樣更適用于較為復(fù)雜的篩選邏輯，并且可以將高頻的篩選項作為預(yù)期設(shè)計提前曝光在單排的直列式篩選項中。
攜程
在做列表式搜索工具時，盡量保持選項列表短，避免過多的手勢滑動?？紤]一個更長或多選擇過濾選項過濾形式。不要過度設(shè)計搜索工具，一個簡單的屏幕搜索工具或折疊搜索工具通常就足夠了。
在設(shè)計搜索工具的過程中我們要記住我們的核心目標(biāo)是幫助用戶建立一個簡單易用的概念模型來提高用戶的決策效率。
在這里我相信有很多想要學(xué)習(xí)UI設(shè)計是一名從事了多年UI設(shè)計私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的學(xué)習(xí)干貨及教程，從最基礎(chǔ)到，各種框架都有整理，送給每一位UI設(shè)計取的可以關(guān)注我并在后臺私信我：學(xué)習(xí)，即可免費(fèi)獲取
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 10個免費(fèi)學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
4. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
8. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
9. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
10. 武漢UI設(shè)計培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費(fèi)價格以及學(xué)習(xí)內(nèi)容。
最新文章
