小紐扣

辽宁35选7走势:規范化入門交互設計

小紐扣 設計規范 2503瀏覽

辽宁35选7开奖哪个台 www.duulp.com 這是一篇適合剛入門的設計師,對交互設計規范的詳細介紹。主要含括了原型的概念、界面基礎控件、界面常見的布局方式,對設計規范不熟悉想要更深入了解的可以參考一下。

 

01.原型的概念

原型設計

為了讓用戶能夠更直觀的評估產品設計,避免將錯誤帶到最終的產品中去,從而根據構思設計產品的大概草案版本,稱為原型設計

 

初級原型:(概念草圖)

用戶通過該種原型,對之前的需求結果有一個表象上的呈現,能夠更直觀的了解產品特征。初級原型也為設計者的思路落到實處提供途徑。

 

高級原型:

在產品邏輯、交互邏輯、視覺效果等等極度接近最終產品的形態。這樣不熟悉產品的人也能通過觀察、使用明白這個產品有什么用。

 

可交互的高級原型:?

有交互效果的高保真原型,無限接近于上線稿。

原型=產品草圖

 

02.界面中的原型板式——界面基礎控件

通用基礎控件

狀態欄 status bar:顯示設備信息或用戶通知信息
導航欄 navigation bar:iOS和Android布局不同 安卓叫app bar
內容content view:主要設計區域
標簽欄 tabbar:iOS都有,安卓以前沒有,現在跟iOS越來越像,也有標簽欄

 

對話框與提示框

彈窗可以分為4個種類,每個種類適用于不同的交互場景下,并不是每個彈窗都需要被確認。這四個種類分別是 “Toast提示框” “Dialog對話框” “Actionbar功能框” 與“Snackbar提示對話框”沒有任何一個用戶喜歡彈窗,所以使用要控制。

Toast提示框:是一種非模態彈窗(自行消失的,時間自定),它彈出一個小信息,作為提醒或消息反饋來用,一般用來顯示操作結果,或者應用狀態的改變。例如你發出了一條短息,app彈出一個Toast提示你消息已發出。

 

toast替代方案:多態按鈕

這種提示可以常駐在頁面里,即使用戶短時間內注意力轉移,提示也不會消失,確保用戶能一直完整的看到。此外頁面內提示能容納更多信息量,與頁面本身風格比較契合,沒有阻塞感,適合表單錯誤提示、加載過渡。

 

Dialog對話框:是一種模態彈窗,當用戶進行了敏感操作,或者當app內部發生了較為嚴重性的狀態改變,這種操作和改變會帶來影響性比較大的行為結果,一般情況下dialog由標題、信息內容和功能按鈕組成,只有當用戶點擊了某個功能按鈕后彈窗才會消失。

 

Actionbar功能框:可以看成是Dialog的一種延伸設計,兩者都是模態彈窗,用戶必須進行回應,否則彈窗不會消失,用戶無法繼續其他操作。actionbar比dialog擁有更多的功能按鈕,提供給用戶更多的功能選擇。

 

Snackbar提示對話框:是安卓系統的特色彈窗之一,它也是一種非模態彈窗,同時擁有toast和dialog的特點,不會打斷用戶正常的操作流程,它除了可以告訴用戶信息內容,還可以與用戶進行對話交互。

 

頁面指示器

是附著在輪播圖、一組卡片或者頁面的底部,用來表示頁面總數量和指示當前停留的頁面。通常有一組等距的小圓點組成,小圓點的數量代表頁面總數,其中深色或實心的小圓點代表當前頁面。

 

設計要點1.不要顯示太多
超過10個很難在一屏內展示,超過20個頁面用戶瀏覽起來會非常耗時。如果超過20個頁面請考慮使用其他形式或控件展示。

 

設計要點2:避免滑動沖突
一般來說用戶在移動端習慣使用左右滑動操作,因此要注意同頁面內會不會與其他支持左右滑動的空間(例如:頂部tabs、地圖、輪播圖等)產生手勢沖突。

 

設計要點3:樣式可以特殊化
如果指示的某個頁面較為特殊,可以為某定制特別的樣式,例如鎖屏頁用戶可以不解鎖直接向左滑動打開相機,因此為相機設計了特殊樣式突出這個功能。天氣app中一眼就明白第一個是當前GPS定位地址。

設計要點4:不要把指示符做到頁面內
頁面指示器的層級比頁面要高,因此切圖和研發工程師溝通實現方案時,一定要確認把頁面指示器單獨切圖處理。千萬不能把頁面指示器嵌入到頁面里,導致滑動頁面時跟隨頁面一起運動。

 

通告欄notice bar

經常能看到很多app的 navigation bar(iOS叫導航欄,安卓叫app bar/應用欄)下方、列表上方或者頁面底部懸浮著一個橫幅。這些橫幅通過某個事件觸發而出現,能常駐顯示直到事件結束,并且通??梢圓僮?。

Image title

設計要點1:醒目的區分不同類型
如果你的app中有用于警告、溫馨提示、活動促銷等不同的notice bar,可用顏色和圖標進行區分,便于用戶形成視覺記憶,快速辨識通告類型。
Image title

 

設計要點2:不要附加太多操作

一條notice bar只描述一個事件,通常點擊后提供處理這個事件的頁面,最多再提供一個關閉notice bar的按鈕。不要在notice bar上附加太多操作,增加用戶選擇負擔。
Image title

 

加載占位符skeleton screen

近年流行的加載控件,通常表現形式是在界面上待加載區域填充灰色的占位符,與線框圖的效果非常相似。skeleton screen本質上是界面加載過程中的過渡效果。
Image title

 

氣泡彈出框 Popover

Popover(氣泡彈出框/彈出式氣泡/氣泡)是由一個矩形和三角箭頭組成的彈出窗口,箭頭指向的地方通常是導致popover彈出的控件或區域。通過點擊popover內的按鈕或非popover的屏幕其他區域可關閉popover。
Image title

 

設計要點1:情境下的相關選項
如果界面中有多個項目,而且每個項目都有多個相關選項,使用popover承載多個情境下的相關選項是個不錯的方案。在手機上,相比于action sheet,popover的三角箭頭能明確的指示當前操作的是哪個條目,不易出錯。
Image title

設計要點2:提示引導
popover的三角箭頭這一獨特特性,同樣適合作為提示引導或者展示附屬信息。每當上線新功能,用popover能很好的吸引用戶注意力,引導用戶了解新功能。界面圖形較多的情況下,用popover簡短的展示附屬文字信息,能幫助用戶很好的理解圖形的含義。
Image title

 

徽標/小紅點 Badge

[小紅點]是這個控件在國內最通俗的稱呼,正式的名稱為[badge]徽標,徽標是指通常出現在圖標或文字右上角的紅色圓點、數字或者文字,表示有新內容或者待處理的信息。

Image title

 

設計要點1:注意數字的長度和上限
小紅點可以分為五數字和有數字兩類,對于有數字的小紅點,由于界面顯示空間有限,因此要注意視場景和信息類型決定數字最長顯示多少位,如果數字達到上限該如何顯示。

 

設計要點2:一鍵清除
小紅點如果非常多出現頻次又很高,會對用戶產生一些情緒干擾,例如很多強迫癥用戶每次遇到小紅點都會設法點擊消除掉,收集qq以此為出發點,創造性的設計了一鍵拖拽清除小紅點的功能,得到用戶好評。

Image title

 

開關/滑動開關/切換開關 Swich

Swich有兩個互斥的選項(例如開/關、是/否、啟動/禁用),它是用來打開或關閉選項的控件。選擇其中一個選項會導致立即執行操作。

 

設計要點1:立即執行操作
Swich與Radiobutton(單選按鈕)、checkbox(復選框)最大的區別是:swich操作后,程序立即執行相關操作。而單選按鈕和復選框一般用在表單里,僅反應當前的選擇狀態,如果要執行操作并生效,需要點擊額外的提交按鈕。
注:開關按鈕頁面不需要加保存按鈕,

 

設計要點2:注意加載狀態
如果開關所執行的操作需要與服務器交互,就必須考慮加載狀態了,例如剛進入頁面時,獲取開關的狀態需要加載。如果改變開關的狀態,需要與服務器交互,必須等待服務器返回成功指令后才能改變開關的狀態,傳統的做法是為初次加載和操作后等待準備特定的樣式。

Image title

 

設計要點3:危險操作二次確認
正是由于按下開關后立即執行操作,如果操作比較危險,請在點擊開關后加入二次確認流程,避免造成嚴重損失。
Image title

 

字母索引導航A-Z index

字母索引導航能將信息以首字母進行分類組織并提供導航。字母索引歷史悠久,早在我們的實體書籍入字典、詞典等就運用這種信息組織方式。正因如此,字母索引導航是用戶非常熟悉的一種導航方式。

 

設計要點1:注意非字母開頭的內容
一些移動社交網絡的昵稱,可能會使用emoji表情或者數字作為首歌自負。一般來說可以通過在字母末尾增加“#”,表示非字母開頭的內容。如果首字母非字母的內容太多,可以考慮采用其他數據類型的導航。
Image title

 

設計要點2:增加常用選項導航
字母索引導航嚴格按照字母順序排序,但是在某些場景中,這并非是最高效的。例如在外賣app選擇城市的列表中,用戶選擇當前城市的可能性最大,因此可以在字母索引導航最頂端增加當前GPS定位地理位置的導航等等。
Image title

 

03.界面中的原型板式——界面常見的布局方式

標簽式 labelling type、列表式tabular form、

卡片式card type、多面板式multifaceted plate type、

瀑布流式cascade flow type、手風琴式accordion type

 

標簽式 labelling type: ?

也叫網格式布局,一般承載較為重要的功能,由于標簽式的設計較有儀式感,所以視覺上層級很好,一般用于展示較多的快捷重要入口,且各??橄嘍遠懶?。
標簽式布局的優點是個入口展示清晰,方便快速查找。缺點是擴展性較差,標題不易過長。并且非重要層級的功能,或者不可點擊的純介紹類元素,不適用于標簽式設計。最多兩排,不宜過多
Image title

 

如果產品需要,如下圖這種分層級也是可以的

Image title

 

列表式tabular form:(適用于有規律的內容)

列表式布局式移動端應用小屏幕的限制下最常見的版式形式尤其適用于文字較長的信息組合,列表式的布局優點是信息展示較為直觀,節省頁面空間,瀏覽效率高,字段長度不受限制可以錯行顯示。
缺點是點一的列表容易視覺疲勞,需要穿插其他版式形式讓畫面有些變化,并且不適用于信息層級過多并且字段內容不確定的情況,這些情況僅僅通過分割線或者間距的區分容易讓用戶出現視覺誤差。
Image title

 

卡片式card type:

卡片式設計的另一個典型好處是可以將不同大小、不同媒介 形式的內容單元以統一的方式進行混合呈現,最常見的就是圖文混排,既要做到視覺上盡量一致,又要平衡文字和圖片的強弱,這是卡片設計經常有奇效。
當一個頁面內信息板塊過多,或者一個信息組合中信息層級過多通過列表式設計容易使用戶出現視覺誤差時,卡片式的設計就再合適不過了,卡片式設計的缺點是對頁面空間的消耗非常大,需要上下左右各有艱巨,就會導致一瓶呈現的信息量很小。
卡片可以進行歸類,卡片設計在視覺層級上是最高的,可以賦予用戶有任務的感覺,通過卡片設計可以跟物理空間進行聯系,如優惠券用卡片式設計
Image title

 

多面板式multifaceted plate type:如京東分類頁

多面版的布局更常見于pad終端,但移動端也會用到。多面版很像豎屏排列的tab,可以展示更多的信息量,操作效率較高,適合分類和內容都比較多的情形,多用于分類頁面或者品牌篩選頁面。
優點是減少了頁面之間的跳轉,并且分類較為明確直觀。它的不足是同一界面信息量過多,較為擁擠,并且分類很多時,左側滑動區域過窄,且不利于單手操作。
Image title

 

瀑布流式cascade flow type:

當一個頁面內卡片的大小不一致,產生錯落的視覺效果就是瀑布流,瀑布流設計適用于圖片/視頻等“瀏覽型”內容,當用戶僅僅通過圖片就可以獲取到自己想獲取的信息時,那么瀑布流再合適不過了。
移動端的瀑布流一般式兩列信息并行,可以極大的節省交互效率,并且可以用來制造“豐富/華麗/眼花繚亂”的體驗,適用于電商或者小視頻類應用。瀑布流布局的缺點時過于依賴圖片質量,如果圖片質量較低,整體的產品格調也會被圖片所影響。

瀑布流會確定卡片的寬度,高度根據圖片內容自適應。Image title

 

手風琴式accordion type:

手風琴式布局常見于兩級結構的內容。用戶點擊分類可展開顯示二級內容,在不用的時候,內容式隱藏的。因此它可承載比較多的信息,同時保持界面簡潔。
手風琴可以減少界面跳轉,與樹形結構相比,手風琴減少點擊次數,提高操作效率。手風琴在瀏覽器上很常見,很多瀏覽器的導航、歷史、下載管理等頁面均采用了手風琴的設計。手風琴布局的缺點是同時打開多個手風琴菜單,分類標題不易尋找,且容易將頁面布局打亂。
Image title

 

原文地址:UI中國

作者:星云Design

 

轉載請注明:辽宁35选7开奖哪个台 » 規范化入門交互設計

登錄收藏
 
你可能喜歡的:
圓角矩形背后的含義|深度解析圓角矩形背后的含義|深度解析
?iOS 13 做了哪些體驗升級?iOS 13 做了哪些體驗升級
系統圖標 - 基礎認知 Material 規范系統圖標 – 基礎認知 Material 規范
移動端設計規范 — UI欄類移動端設計規范 — UI欄類
如何輸出清晰有效的設計方案如何輸出清晰有效的設計方案
UI設計命名方式及常用控件分享UI設計命名方式及常用控件分享
網格的基礎網格的基礎
按鈕規范系列 - 「按鈕尺寸」的設計詳解按鈕規范系列 – 「按鈕尺寸」的設計詳解
干貨 | 如何構建UI組件設計規范干貨 | 如何構建UI組件設計規范
‘信息引導’超全總結,讓你的設計有理有據‘信息引導’超全總結,讓你的設計有理有據
?