[zhuan]產(chǎn)品設(shè)計規(guī)范與關(guān)乎“秩序和混亂”的人生算法

http://www.woshipm.com/pmd/935516.html

文章結(jié)構(gòu):

目錄結(jié)構(gòu)規(guī)范;

原型設(shè)計規(guī)范产镐;

注釋規(guī)范佛纫;

關(guān)于“秩序(規(guī)范)和混亂”的一些思考残吩。

一、目錄結(jié)構(gòu)規(guī)范

0歲的產(chǎn)品同學(xué)很多對Axure的定位就是一個畫原型的工具捧杉,經(jīng)常拿起Axure就開始畫頁面陕见,一打開.rp文件目錄第一頁就是產(chǎn)品首頁。

一個好的原型設(shè)計不僅僅是畫出滿足業(yè)務(wù)需求的原型頁面味抖,而是讓瀏覽者清晰的明白這個項目的背景和業(yè)務(wù)邏輯以及整個產(chǎn)品結(jié)構(gòu)评甜,而這些基本都是通過目錄來引導(dǎo)的,所以拿起Axure

不是一開始就畫頁面非竿,而是完善目錄結(jié)構(gòu)蜕着。

需求規(guī)格說明書 & 產(chǎn)品結(jié)構(gòu)導(dǎo)圖

通常介紹整個項目背景以及產(chǎn)品形態(tài)等,通常以《需求規(guī)格說明書》的形式展示:

產(chǎn)品結(jié)構(gòu)導(dǎo)圖相當于移動端產(chǎn)品的功能結(jié)構(gòu)圖红柱,一般用思維導(dǎo)圖和架構(gòu)圖來展示說明承匣,以上兩個頁面主要告訴閱讀者項目背景,產(chǎn)品功能形態(tài)锤悄。

項目開發(fā)流程&基本流程圖

項目開發(fā)流程圖主要介紹整個項目開發(fā)過程中各部門角色之間的協(xié)作流程韧骗,有的公司偏向于敏捷開發(fā),有的公司走傳統(tǒng)的需求零聚,評審袍暴,設(shè)計&開發(fā),測試隶症,驗收政模,上線的路線,相關(guān)流程都應(yīng)該體現(xiàn)在流程圖里蚂会,方便閱讀者知曉淋样。

產(chǎn)品設(shè)計過程中每一個涉及到業(yè)務(wù)邏輯和功能邏輯的流程都需要在基本流程圖里提現(xiàn),當遇到復(fù)雜的業(yè)務(wù)邏輯的時候胁住,流程圖往往比原型頁面更加直觀趁猴。

原型封面 & 版本控制

原型封面主要介紹作簡要的產(chǎn)品描述和歸屬標識刊咳,作為原型設(shè)計完整性的一部分,不是必要的儡司。

版本控制主要作為產(chǎn)品更新迭代記錄以及設(shè)計周期的一個時間標識娱挨。

全局框架設(shè)計規(guī)范 & 全局控件設(shè)計規(guī)范 & 原型注釋規(guī)范

不僅是專業(yè)的UI設(shè)計需要遵守設(shè)計規(guī)范,產(chǎn)品設(shè)計也需要定義一定的設(shè)計規(guī)范捕犬,方便自己設(shè)計產(chǎn)品隨時復(fù)用跷坝,也方便其他人接手時能盡可能的在保持設(shè)計樣式整體一致的前提下,快速上手或听。

二探孝、產(chǎn)品設(shè)計規(guī)范

保持整個系統(tǒng)所有頁面結(jié)構(gòu)的一致性和所有控件元素的統(tǒng)一性是我們定義設(shè)計規(guī)范最初的目的。

產(chǎn)品設(shè)計規(guī)范具體體現(xiàn)在:全局框架設(shè)計規(guī)范誉裆,全局控件設(shè)計規(guī)范顿颅,原型注釋規(guī)范這三個方面。

全局框架設(shè)計規(guī)范

后臺系統(tǒng)框架主要分為三個部分:① 系統(tǒng)功能區(qū) ② 菜單區(qū) ③ 數(shù)據(jù)/功能區(qū)

當然三個區(qū)域可以進行很多靈活的設(shè)計足丢,無論選擇哪種都需要保持所選框架下所有頁面的整體一致性粱腻。

全局控件設(shè)計規(guī)范

上文提到剛開始設(shè)計原型的同學(xué)經(jīng)常會出現(xiàn)不同的頁面同樣的信息不同大小的字體,同樣的功能按鈕用不同的顏色斩跌,結(jié)果導(dǎo)致整個原型看起來像是很多個人設(shè)計出來的绍些,沒有一致性,原因就在于開始的時候沒有定義好一套控件設(shè)計規(guī)范耀鸦。

平時的產(chǎn)品設(shè)計過程中可以參考一些優(yōu)秀的UI框架柬批,例如:Bootstrap,F(xiàn)lat UI 袖订,jQuery UI 等氮帐。

在設(shè)計原型前定義好這些控件以及樣式的規(guī)范后,所有的頁面都引用一套樣式洛姑,不僅使整個原型保持一致性上沐,而且能大大的提高設(shè)計效率。

這里要提到Axure 的兩個很實用的功能:一個是母版楞艾,一個是控件樣式

把后面可能要多次復(fù)用的控件做成母版以及把需要多次復(fù)用的控件樣式設(shè)置成主題樣式會大大的提高設(shè)計效率参咙。

全局注釋規(guī)范

當然這里指的注釋規(guī)范是基于Axure 的,并非借助于PRD文檔硫眯。對于PC端的原型設(shè)計蕴侧,我更傾向于用Axure

原生的注釋功能來描述。分別為:業(yè)務(wù)邏輯两入,需求說明净宵,功能邏輯,視覺(交互)邏輯,技術(shù)邏輯塘娶,備注等。

在保證整個產(chǎn)品設(shè)計統(tǒng)一性和一致性的前提下痊夭,每個人都可以根據(jù)自己的喜好定義自己的原型設(shè)計規(guī)范刁岸。

四、關(guān)于“秩序(規(guī)范)和混亂”的一些思考

秩序和混亂一直是指導(dǎo)我學(xué)習(xí)和工作的第一性原理她我,下面我用畢加索畫牛的過程來解釋這個道理虹曙,也解釋了為什么我會覺得“規(guī)范”是一件很重要的事情,以至于要用一篇文章來強調(diào)番舆。

這是畢加索1934年12月5日畫的一張牛酝碳,看起來很正常,惟妙惟俏恨狈。

過了幾天疏哗,他又畫了一張圖,看起來也不錯禾怠,比較正常返奉。

這張也不錯,有點小頑皮吗氏。

這張更頑皮了

接下來的幾張越來越頑皮了

你可能看到過畢加索畫的很抽象的幾何牛芽偏,也可能只看過他筆下惟妙惟肖的仿真牛,但是連貫起來看畢加索畫牛的過程弦讽,從最開始的仿真牛污尉,不斷的被結(jié)構(gòu)化,幾何化往产,最后畫出了很抽象的幾何牛被碗。

普通人完全可以畫出一個一模一樣的幾何牛,但是為什么畢加索畫出的牛就這么牛捂齐,這是一個值得思考的問題蛮放。畢加索是建立在仿真牛的基礎(chǔ)上,通過解構(gòu)奠宜,抽象出來的幾何牛包颁,這是建立在某種“秩序”上引入的藝術(shù)性“混亂”,而不是直接去通過簡筆畫畫出一個幾何牛压真,這就是大師和普通人的本質(zhì)差別娩嚼。

“我們的混亂,是逃避秩序前無力掌控的毀滅性混亂”這讓我想到幾個月前的自己滴肿,對工作的熱愛和對產(chǎn)品的追求以及處女座的性格岳悟。總是希望畫原型的時候每一個頁面讓它好看,炫酷贵少,以至于過度發(fā)揮呵俏。這樣做導(dǎo)致的結(jié)果是可能一個頁面很好看,整體會很混亂滔灶,看起來像是很多人畫出來的普碎。

后來我明白了建立在秩序上的混亂這樣的道理之后,每次畫原型都會定義好設(shè)計規(guī)范和UI框架录平,第一次感覺得到秩序和規(guī)范帶來的美麻车,以及遵守規(guī)范帶來的簡潔,流暢和高效斗这,我更相信在框架和規(guī)范下再去引入混亂和創(chuàng)新才是有價值的动猬。

以前太自我,不屑于已經(jīng)被定義好的東西表箭,不屑于規(guī)范性的東西赁咙。后來認識到,越自我的東西免钻,距離產(chǎn)品越遠序目,距離藝術(shù)越遠,距離人性越遠伯襟。如果你想在一個領(lǐng)域成為大師猿涨,至少應(yīng)該先遵守這個領(lǐng)域內(nèi)的某種規(guī)范,駕馭了規(guī)范之后姆怪,再去創(chuàng)造叛赚,那樣才是可被掌控的有價值的創(chuàng)造。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稽揭,一起剝皮案震驚了整個濱河市俺附,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌溪掀,老刑警劉巖事镣,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異揪胃,居然都是意外死亡璃哟,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門喊递,熙熙樓的掌柜王于貴愁眉苦臉地迎上來随闪,“玉大人,你說我怎么就攤上這事骚勘☆戆椋” “怎么了撮奏?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長当宴。 經(jīng)常有香客問我畜吊,道長,這世上最難降的妖魔是什么户矢? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任定拟,我火速辦了婚禮,結(jié)果婚禮上逗嫡,老公的妹妹穿的比我還像新娘。我一直安慰自己株依,他們只是感情好驱证,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著恋腕,像睡著了一般抹锄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上荠藤,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天伙单,我揣著相機與錄音,去河邊找鬼哈肖。 笑死吻育,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的淤井。 我是一名探鬼主播布疼,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼币狠!你這毒婦竟也來了游两?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤漩绵,失蹤者是張志新(化名)和其女友劉穎贱案,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體止吐,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡宝踪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了碍扔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肴沫。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蕴忆,靈堂內(nèi)的尸體忽然破棺而出颤芬,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布站蝠,位于F島的核電站汰具,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏菱魔。R本人自食惡果不足惜留荔,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望澜倦。 院中可真熱鬧聚蝶,春花似錦、人聲如沸藻治。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽桩卵。三九已至验靡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雏节,已是汗流浹背胜嗓。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钩乍,地道東北人辞州。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像寥粹,于是被迫代替她去往敵國和親孙技。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 2018-02-10 以前設(shè)計產(chǎn)品把隨性當創(chuàng)意排作,不屑于已經(jīng)被定義好的東西牵啦,不屑于規(guī)范性的東西。后來才認識到妄痪,越自我...
    粒粒note閱讀 674評論 0 1
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,112評論 25 707
  • 一般打印一個對象的時候輸出的是對象名稱和地址如果想打印對象里面的具體成員變量的值就需要重寫description方法
    Coder大雄閱讀 280評論 0 0
  • 姓名:潘愛強 公司:招寶磁業(yè) 【日精進打卡第77/365天】 【知~學(xué)習(xí)】 《六項精進》1遍 共83遍 《大學(xué)》1...
    潘愛強_7e0f閱讀 123評論 0 0
  • 每個人都有不同的路要走衫生,走哪條路裳瘪,都是自己的選擇。 最近發(fā)生了很多事罪针,考研結(jié)束潦匈,等待成績中每天窩在...
    miniJ閱讀 323評論 0 0