基于Axure的移動(dòng)端APP產(chǎn)品設(shè)計(jì)規(guī)范

11 評(píng)論 55720 瀏覽 508 收藏 6 分鐘

上一篇文章《產(chǎn)品設(shè)計(jì)規(guī)范與關(guān)乎“秩序和混亂”的人生算法》主要分享的是基于Axure的后端產(chǎn)品設(shè)計(jì)規(guī)范。原本前后端的設(shè)計(jì)規(guī)范是要放在一起來(lái)寫的,考慮文章太長(zhǎng),影響閱讀體驗(yàn),于是就分成了后端和前端兩篇。

文章結(jié)構(gòu):① 全局元素與控件設(shè)計(jì)規(guī)范 ② 全局注釋規(guī)范 ③ 一些基本的產(chǎn)品設(shè)計(jì)原則

一、全局控件元素設(shè)計(jì)規(guī)范

我們經(jīng)常會(huì)看到很多產(chǎn)品都有一個(gè)標(biāo)志顏色,來(lái)增加產(chǎn)品的辨識(shí)度,例如淘寶的橙色,小黃車的黃色等。在產(chǎn)品設(shè)計(jì)過(guò)程中,為了保持視覺(jué)的統(tǒng)一性,通常會(huì)有一套配色方案,配色方案確定了產(chǎn)品的主色調(diào)和輔色調(diào),所有的控件和元素都應(yīng)用這一套配色來(lái)設(shè)計(jì)。

除了配色還有,還有字體元素,按鈕元素,以及其他控件元素等,產(chǎn)品設(shè)計(jì)開(kāi)始就應(yīng)該定義好這些基本規(guī)范,不僅能保證產(chǎn)品的一致性和統(tǒng)一性,還能提高產(chǎn)品的設(shè)計(jì)效率,同時(shí)也方便其他人接手。

配色元素

字體元素

按鈕元素

字體圖標(biāo)元素

其它控件元素

(注:以上圖片來(lái)源于大梨老師的原型網(wǎng)站:http://www.axureux.com

還有很多可以模板化的產(chǎn)品組件,大家在平時(shí)的工作中可以多多積累,積累到一定量的時(shí)候,量變引起質(zhì)變,你會(huì)發(fā)現(xiàn)所有的產(chǎn)品原型設(shè)計(jì)都成了母板拖拽的操作,而且高效,統(tǒng)一,規(guī)范。

?二、全局注釋規(guī)范

之前的文章里分享了后端產(chǎn)品的注釋是寫在Axure原生的注釋說(shuō)明里面,主要是因?yàn)楹蠖水a(chǎn)品的頁(yè)面寬度一般占據(jù)了整個(gè)頁(yè)面,兩邊沒(méi)有多余的位置來(lái)添加說(shuō)明。放在下方又需要頁(yè)面下滑去閱讀,不能保證原型和注釋在同一視覺(jué)范圍內(nèi)。

但是移動(dòng)端APP產(chǎn)品頁(yè)面周圍有足夠的范圍來(lái)添加注釋,所以一般建議標(biāo)記在原型周圍,比較直觀。如下圖某大神在人人在人人都是產(chǎn)品經(jīng)理分享的Axure原型注釋規(guī)范,個(gè)人覺(jué)得比較清晰,規(guī)范,每個(gè)人可以根據(jù)自己的需要去定義自己的規(guī)范,前提是要保證統(tǒng)一性。

三、一些基本的產(chǎn)品設(shè)計(jì)原則

“相信一切事物背后必有知識(shí)和道理”這幾乎是一個(gè)普世價(jià)值觀,但是常常被人們所忽略。產(chǎn)品設(shè)計(jì)也是同樣的道理,我們的每一個(gè)交互和功能的設(shè)計(jì)都應(yīng)該盡可能按照某個(gè)原則或規(guī)范,而不是隨心所欲,想怎么做就怎么做,太自我的東西,距離產(chǎn)品越遠(yuǎn),距離藝術(shù)越遠(yuǎn)。

上圖整理了經(jīng)常用到的一些產(chǎn)品設(shè)計(jì)基本原則,詳情可以閱讀源文章:《設(shè)計(jì)法則 | 實(shí)例解析「交互設(shè)計(jì)七大定律」》在設(shè)計(jì)中的應(yīng)用 和 《交互理論 | 深度解析尼爾森十大交互設(shè)計(jì)原則在設(shè)計(jì)中的用法》。

每一個(gè)產(chǎn)品經(jīng)理都應(yīng)該有一套自己的產(chǎn)品方法論,小到可復(fù)用的產(chǎn)品原件庫(kù),大到能輸出的產(chǎn)品思維和產(chǎn)品價(jià)值觀。這套方法論就是你的底層,它應(yīng)該是一個(gè)反脆弱系統(tǒng),不斷的認(rèn)知迭代,優(yōu)化強(qiáng)勁。

一個(gè)人的能力很重要一部分體現(xiàn)在,是否把自己的能力和優(yōu)秀量化輸出,對(duì)于個(gè)人來(lái)說(shuō),最簡(jiǎn)單的生意莫過(guò)于批量化販賣自己的某項(xiàng)能力,而批量化的前提是首先是,標(biāo)準(zhǔn)和規(guī)范。

最后,忠于用戶,忠于產(chǎn)品,忠于正確的事情,與君共勉。

 

作者:Allen,一個(gè)熱愛(ài)科學(xué),迷戀技術(shù)的文藝青年,目前是某金融公司產(chǎn)品小助理一枚,愛(ài)讀書,愛(ài)旅行,愛(ài)健身。個(gè)人公眾號(hào):思維改變生活

本文由 @Allen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 可以的

    來(lái)自廣東 回復(fù)
  2. 加你微信,請(qǐng)教下移動(dòng)端原型規(guī)范

    來(lái)自山西 回復(fù)
  3. 加你微信,請(qǐng)教下移動(dòng)端原型規(guī)范

    來(lái)自重慶 回復(fù)
  4. 那個(gè)啥…

    【一些基本的產(chǎn)品設(shè)計(jì)原則】 這一節(jié)中有三個(gè)地方看到了忍不住吐槽下

    1. “The Magical Number Seven, Plus or Minus Two” 這一項(xiàng)理論在Miller (1956)中指的是 7 chunks plus or minus 2。 且Preece, Rogers & Sharp 明確指明了這項(xiàng)理論中,”by chunks he meat a range of items like numbers, letters or words”。因此這項(xiàng)理論跟設(shè)計(jì)師在設(shè)計(jì)下拉菜單中有5個(gè)還是15個(gè)drop down menu沒(méi)有關(guān)系,因?yàn)閡ser在scan drop down menu時(shí)不運(yùn)用working memory來(lái)記憶menu items。Po主可以理解下原理論和Cognitive Psychology中人類的Sensory Memory, Working Memory 和 Long-Term Memoy的區(qū)別。具體可以refer到Preece, Rogers & Sharp第四版p75。

    2. The Law of Proximity 這里其實(shí)只是Gestalt Psychology中眾多l(xiāng)aw中的一個(gè),其他著名的還有The Law of Reification, The Law of Multi-Stability, etc. 所以這里是不是應(yīng)該也列出其他Gestalt Psychology中的law呢?

    3. 關(guān)于Nelson的Heuristic Evaluation中的十條Heuristic,之前沒(méi)有看到過(guò)academic literature refer成【交互設(shè)計(jì)法則】,且因這十條啟發(fā)是在Evaluation階段中所采取的啟發(fā)式評(píng)估中使用,所以翻譯為看起來(lái)像在設(shè)計(jì)前期時(shí)考慮的【交互設(shè)計(jì)法則】是否準(zhǔn)確呢?

    來(lái)自上海 回復(fù)
  5. 您好,介意分享一下思維導(dǎo)圖嗎

    來(lái)自河北 回復(fù)
    1. 可以呀,你加我微吧。UU894392704

      來(lái)自廣東 回復(fù)
  6. 麻煩你微笑多少^_^

    回復(fù)
  7. 好多好多話

    回復(fù)
    1. 記得記得好好的

      回復(fù)
    2. 哈哈,會(huì)玩

      來(lái)自廣東 回復(fù)