如何設(shè)計一份專業(yè)且有價值的交互規(guī)范
很多設(shè)計團(tuán)隊都會有一套比較成熟完整的交互規(guī)范,好的交互規(guī)范能夠保證設(shè)計的一致性,減少溝通和開發(fā)成本,提升效率。由于筆者是設(shè)計手機系統(tǒng)和App相關(guān)的,所以簡單的和大家聊下如何設(shè)計交互規(guī)范。
設(shè)計前的準(zhǔn)備工作:
1.認(rèn)真閱讀IOS和Android L的設(shè)計規(guī)范,做到心中有數(shù) 。
2.組織小組收集現(xiàn)有的控件類型(通過IOS、Android L和現(xiàn)有的項目App),并進(jìn)行統(tǒng)計與整理。
3.對不同的控件分組收集該類型的樣式,然后小組討論,找出該控件的規(guī)律和注意事項。
完成上述工作后,開始輸出交互規(guī)范文檔。
主體部分:
一份好的交互規(guī)范文檔包含:封面(標(biāo)題、版本號、創(chuàng)建人、聯(lián)系方式)、前言(設(shè)計原則、原則說明等)、版本信息(修改時間、修改人、版本號、修改章節(jié)、修改內(nèi)容、修改原因)、目錄、控件說明(標(biāo)題、描述、組成、位置(可選)、使用場景、注意事項)。
舉例說明:
封面、前言、版本信息、目錄等相關(guān)內(nèi)容在這里就不一一展開說明了,只針對控件主體部分——控件說明 進(jìn)行舉例。由于微信是大家常用的App,所以選取微信作為范例(如有版權(quán)問題,請及時告知),拋磚引玉。
?Tabbar (*注意大小寫、注意和代碼中的控件名稱保持一致)
描述:
Tabbar是IOS和Android L中最常見的控件之一,常用于整個App的主導(dǎo)航,也是擴展性最好的框架。能直觀的呈現(xiàn)頁面的分類與層級。對于單功能的屬性選擇上也會使用(目前在微信里有“掃一掃”和“搖一搖”,且多用在界面元素很簡單的頁面上(有點類似ios里的分段選擇器)。
主導(dǎo)航:
IOS(左圖)和Android(右圖),早期IOS和Android有區(qū)分,但是目前微信Android版本主框架按照IOS的規(guī)范來設(shè)計,所以目前的微信界面暫時只有左圖這一種情況。
單功能屬性選擇
特點:
功能可見性、操作直接。用戶能夠很直觀了解整個App的所有大的功能分類。
組成:
1.Tabbar一般是由一組(通常不超過5個)相同層級的Tab組成。應(yīng)保證當(dāng)前界面直接從屬某個Tab,對于用戶當(dāng)前所在的Tab需要通過特定的視覺樣式或狀態(tài)加以區(qū)分。
2.一般而言,Tab中會包含圖標(biāo)和文字描述。
位置:
在IOS里:Tabbar固定在屏幕底部,通過點擊切換不同的tab。
在Android ?L里:Tabbar位于Navigation bar下方,通過左右滑動或點擊切換不同的Tab。
注意事項:
- Tab的內(nèi)容是否屬于同一層級、是否相互獨立?如果不是,建議不要使用tabbar布局,采用其他的布局方式。
- 當(dāng)Tab的數(shù)量超過5個,應(yīng)考慮設(shè)計是否合理,是否需要采用其他的布局方式。
- Tab的內(nèi)容是否有優(yōu)先級別?如果有,需設(shè)定默認(rèn)的Tab。
- 是否需要記住用戶的選擇和操作。
- 在設(shè)計時,需要考慮Tab中的是否會出現(xiàn)消息提示、提示類型。
- 注意Tab的中文文字描述字符長度不要超過3個字符,且描述文字長度盡量保持一致,(*英文版本的字符長度和大小寫規(guī)則也需要考慮)。
寫在最后的話
- 文檔盡量圖文并茂,能用圖的盡量用圖,少用文字。
- 交互規(guī)范1.0在整個團(tuán)隊里使用一段時間后,你會發(fā)現(xiàn)團(tuán)隊在使用過程中存在或多或少的問題,這個時候可以通過各類的調(diào)研方法(比如:問卷調(diào)查、用戶訪談等)收集團(tuán)隊意見和反饋。根據(jù)收集的意見和反饋,設(shè)計團(tuán)隊進(jìn)行內(nèi)部討論和對比IOS規(guī)范和Android L規(guī)范,提供解決方案,并對規(guī)范文檔進(jìn)行修改與調(diào)整。
- 文檔需不定期補充和更新,每次更新及時提醒團(tuán)隊成員,避免成員使用舊的版本。
- 文檔不要太在意形式。畢竟每個項目團(tuán)隊的工作方式不一樣,針對當(dāng)前環(huán)境的方法和文檔才是有價值的。
本文由 @huanying2008 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
有沒有可參考的完整的交互文檔,谷歌或者阿里那種的就不要了,那個是相當(dāng)于前端交互還有ui雜糅在一起的規(guī)范 ??
這不叫規(guī)范吧,寫的也太粗糙了,交互沒寫清楚,版式的規(guī)范也沒寫。就寫了一下對比的taber,字體,大小都沒清晰的表述出來
棒棒噠
標(biāo)題黨
能否加個微信
可以,加我qq吧:459974241
你好我也在學(xué)交互~可以也加qq嗎
可以
你好,想問一下,android L 和material design 哪個更適合做參考呢?
android L是系統(tǒng)名稱,material design 是android L的設(shè)計語言
疑問:“在Android L里:Tabbar位于Navigation bar下方,通過左右滑動或點擊切換不同的Tab?!?br /> 現(xiàn)在安卓里的navigation bar 和ios的navigation bar 不是一般都在最上方么?
android 里主導(dǎo)航用抽屜式或和 ios 一樣的形式,作者在文章中說的 tab 針對android 的形式應(yīng)該層級設(shè)計較低的,即主導(dǎo)航下的一塊內(nèi)容用 tab
不一樣,Android 早起也是把滑動tabbar做為主導(dǎo)航。后面再Android L里弱化tab,強化抽屜為主導(dǎo)航。Android M又開始突出tab,只是叫法變了。這也是谷歌的不斷嘗試。畢竟抽屜更適合一個功能為主,其他功能為輔的App。好處在于界面元素簡介,且不被其他元素干擾。缺點是擴展性很差。后期產(chǎn)品做大了以后,又會改版。早期Facebook,Path等產(chǎn)品就嘗試過抽屜。所以一個產(chǎn)品本身用tab還是抽屜取決于產(chǎn)品定位和產(chǎn)品的未來趨勢。
有道理,剛查了下最新的交互文檔,確實也可以在應(yīng)用程序的功能方面切換!
嗯,是的
作者用心良苦,贊
寫的很詳細(xì),深受啟發(fā)