如何設(shè)計一份專業(yè)且有價值的交互規(guī)范

17 評論 28992 瀏覽 101 收藏 6 分鐘

很多設(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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 有沒有可參考的完整的交互文檔,谷歌或者阿里那種的就不要了,那個是相當(dāng)于前端交互還有ui雜糅在一起的規(guī)范 ??

    來自菲律賓 回復(fù)
  2. 這不叫規(guī)范吧,寫的也太粗糙了,交互沒寫清楚,版式的規(guī)范也沒寫。就寫了一下對比的taber,字體,大小都沒清晰的表述出來

    來自北京 回復(fù)
  3. 棒棒噠

    回復(fù)
  4. 標(biāo)題黨

    來自浙江 回復(fù)
  5. 能否加個微信

    來自陜西 回復(fù)
    1. 可以,加我qq吧:459974241

      來自廣東 回復(fù)
    2. 你好我也在學(xué)交互~可以也加qq嗎

      回復(fù)
    3. 可以

      來自廣東 回復(fù)
  6. 你好,想問一下,android L 和material design 哪個更適合做參考呢?

    來自陜西 回復(fù)
    1. android L是系統(tǒng)名稱,material design 是android L的設(shè)計語言

      來自廣東 回復(fù)
  7. 疑問:“在Android L里:Tabbar位于Navigation bar下方,通過左右滑動或點擊切換不同的Tab?!?br /> 現(xiàn)在安卓里的navigation bar 和ios的navigation bar 不是一般都在最上方么?

    來自陜西 回復(fù)
  8. android 里主導(dǎo)航用抽屜式或和 ios 一樣的形式,作者在文章中說的 tab 針對android 的形式應(yīng)該層級設(shè)計較低的,即主導(dǎo)航下的一塊內(nèi)容用 tab

    回復(fù)
    1. 不一樣,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)品的未來趨勢。

      來自廣東 回復(fù)
    2. 有道理,剛查了下最新的交互文檔,確實也可以在應(yīng)用程序的功能方面切換!

      回復(fù)
    3. 嗯,是的

      回復(fù)
  9. 作者用心良苦,贊

    回復(fù)
  10. 寫的很詳細(xì),深受啟發(fā)

    來自廣東 回復(fù)