中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

各行各業(yè)都有規(guī)范，可以說我們每天都是生活在各種條條框框中，那么對我們手上的設(shè)計工作來說，如何制定設(shè)計規(guī)范來幫助我們更高質(zhì)高效的完成設(shè)計工作。

最近在做工作的項目文件整理，其中一部分工作內(nèi)容就是維護更新之前產(chǎn)出的設(shè)計規(guī)范。

一、設(shè)計規(guī)范什么時候做？做到什么程度？

先有產(chǎn)品還是先有規(guī)范？

聽起來好像有點像先有雞還是先有蛋，先做產(chǎn)品后總結(jié)規(guī)范，or先出規(guī)范再做產(chǎn)品，or一邊出產(chǎn)品一邊整理規(guī)范，其實每種方法都沒有錯。

不過在我來看，我比較中意第三種方式，即一邊出產(chǎn)品一邊出規(guī)范。

對于新的產(chǎn)品來說，需要在產(chǎn)品的初期先制定能夠主導(dǎo)產(chǎn)品體驗大方向性的、主要組件的設(shè)計規(guī)范，先讓小車的輪子轉(zhuǎn)起來，隨后在產(chǎn)品的研發(fā)和迭代的過程中，不斷去完善。

對于大部分常見的設(shè)計組件基本上在產(chǎn)品的一個版本的迭代中就可以全部涉及到，所以在產(chǎn)品從0-1的這個階段是最合適的。

制定交互規(guī)范對我們工作中有什么幫助呢？

我們先來看看如果不制作交互規(guī)范的話，日常的設(shè)計工作中會遇到哪些問題：

• 同一類型的交互方式在不同頁面顯示的方式不一樣
• 對于明明可以復(fù)用的組件，每次出交互方案時都要重新畫組件，費時費力
• 與工作上下游伙伴的溝通效率低
• ……

那么設(shè)計規(guī)范做到什么程度才可以呢？

現(xiàn)在大部分的互聯(lián)網(wǎng)公司都是敏捷研發(fā)的模式，所以在產(chǎn)品起步的初期，我們最重要的事情不是制作各種交互組件，最重要的是定義整個產(chǎn)品最基礎(chǔ)的交互框架。

網(wǎng)易UEDC設(shè)計組對web頁面的框架層級做了如下的梳理：即底層、內(nèi)容層、導(dǎo)航層、全屏操作層、插件層和模態(tài)彈窗層（熟悉前端的同學(xué)應(yīng)該知道，前端同學(xué)在寫頁面時會把頁面劃分的三層：結(jié)構(gòu)層、表示層、行為層，我們制定設(shè)計的主要是圍繞這三個方向展開，即頁面框架、頁面樣式和交互動作設(shè)計）。

當(dāng)我們制定好這框架之后，設(shè)計的工作就會變得更加的清晰，有條理，絕大部分的設(shè)計工作都可以依附在在這個設(shè)計框架內(nèi)完成，和前端的同學(xué)溝通效率也會更高。

在制定了完善的頁面交互框架之后，敏捷開發(fā)的團隊中，產(chǎn)品的生命周期節(jié)奏很快，所以我們在設(shè)計工作的前期，只需要根據(jù)產(chǎn)品的定位、產(chǎn)品的調(diào)性去制定我們的常見的交互規(guī)范就可以了。

比如基礎(chǔ)文字使用規(guī)范、基礎(chǔ)控件庫（輸入框、對話框、搜索、導(dǎo)航等）、產(chǎn)品全局狀態(tài)（加載、刷新、缺省等），能夠滿足初期的產(chǎn)品設(shè)計就行。

在產(chǎn)品發(fā)展突破了從0-1的這個階段時，產(chǎn)品的交互規(guī)范就要隨著產(chǎn)品的不斷迭代進行更新擴充，各種復(fù)雜的、較為少見的交互組件都會慢慢的出現(xiàn)在產(chǎn)品迭代中。

在這時候我們需要對這些組件進行更加規(guī)范的分組整理，常見的分組有導(dǎo)航、搜索、通知、按鈕、表單、提示信息、信息切換等，比如導(dǎo)航又會分為頂部導(dǎo)航、側(cè)邊導(dǎo)航、底部導(dǎo)航等，具體的內(nèi)容會在下文中詳細說明。

二、怎樣重新開始制作一套自己的交互設(shè)計規(guī)范

交互規(guī)范主要分為web端和移動端以及其他配合產(chǎn)品使用的設(shè)備端，其中移動端又分為Android和IOS兩種，其他設(shè)備端如iWatch、車載大屏等，我們在制作對應(yīng)的交互設(shè)計規(guī)范時，一定要在響應(yīng)平臺本身的設(shè)計規(guī)范之上制作。

如果要從零開始設(shè)計一套屬于自己產(chǎn)品的設(shè)計規(guī)范，我們不妨看看一些做的非常優(yōu)秀的案例，比如iview、Ant Design，Element、VUX等，這類產(chǎn)品已經(jīng)實現(xiàn)了端到端的體驗一致，交互組件的的豐富度能夠滿足絕大部分交互場景。

并且這些組件的交互、視覺、前端都做的非常優(yōu)秀，這些優(yōu)秀的案例在我們制作交互規(guī)范時確實可以作為有效的參考，包括交互組件的類型、每個組件的交互方式、整體色彩搭配等等，參考這些優(yōu)秀的設(shè)計規(guī)范產(chǎn)品，對我們制作交互規(guī)范時可以起到事半功倍的效果。

一套基礎(chǔ)的交互設(shè)計規(guī)范體系需要包含哪些內(nèi)容？

上文提到了交互組件的類型、每個組件的交互方式、色彩文字使用規(guī)范等，其實比較抽象，在實際的產(chǎn)品中，這些開發(fā)具體要包含哪些內(nèi)容呢？

首先我們把組件類型分類：頁面布局類、導(dǎo)航類、基礎(chǔ)組件類、表單組件類、數(shù)據(jù)展示類、提示組件類。

每一類常見的內(nèi)容如下：

• 頁面布局：柵格布局、顏色色彩、排版字體等
• 導(dǎo)航：頂部導(dǎo)航、側(cè)邊抽屜導(dǎo)航、頂部導(dǎo)航欄、底部標(biāo)簽欄、分頁器、面包屑、步驟條、tab標(biāo)簽、分段控制器
• 基礎(chǔ)組件：按鈕、加載、單行文本框、多行文本框、搜索框、下拉框、段落文本等
• 表單組件類：輸入框、單選框、復(fù)選框、滑動開關(guān)、輸入校驗規(guī)則、文件上傳、圖片上傳、圖片查看、日期選擇器、級聯(lián)選擇器等
• 數(shù)據(jù)展示類：表格、圖表、手風(fēng)琴、走馬燈、列表、步驟條、九宮格等
• 提示組件類：tip、標(biāo)簽、對話框、吐司提示等
• 業(yè)務(wù)組件：根據(jù)當(dāng)前產(chǎn)品業(yè)務(wù)的需要而設(shè)計出的一些特殊類型的組件

值得注意的是：我們在制作一套交互設(shè)計組件時，可以把它看成一個我們設(shè)計的一個產(chǎn)品，它也要有自己的規(guī)范，也會有優(yōu)先級，也會有版本迭代，從零到一；從先滿足對基礎(chǔ)業(yè)務(wù)的支撐開始，再逐步進行迭代。

針對交互設(shè)計規(guī)范文檔本身制訂一套規(guī)范，以滿足在不同時間、不同人員維護這個規(guī)范文檔時都能夠保持整個文檔的統(tǒng)一性，在我們制作規(guī)范文檔的過程中是一件磨刀不誤砍柴工的事情。

三、交互設(shè)計規(guī)范制作的的幾個注意點

交互規(guī)范雖然能夠提高工作效率，維護產(chǎn)品的體驗一致性，也能夠降低團隊的溝通成本。

但是仍然需要我們做好以下幾點才可以：

• 文字不要太多，能讓項目組成員看圖明白的交互方式（多狀態(tài)、極限情況等）就盡量避免文字的累贅描述
• 必要的描述信息不能少，對于關(guān)鍵的交互信息最好能夠輔以清晰的文字闡述
• 務(wù)必設(shè)計好組件多狀態(tài)的情況（獲取焦點前、獲取焦點、失去焦點）和在極限等情況下的交互形式
• 文案表達形清晰一致，好的交互規(guī)范不需要太多的文字說明，團隊成員直接看圖即可明白這個組件的交互方式（點擊前、點擊后、空數(shù)據(jù)、有數(shù)據(jù)、極限情況下等的交互樣式），當(dāng)然有些不好通過圖稿表達的信息也必須需要文字說明輔助，但相比文字而言，能用圖片傳達的信息盡量用圖片傳達。
• 交互規(guī)范后期有一定的維護成本，需要專門抽出時間進行整理維護，每一次的維護內(nèi)容都要記錄在冊。

設(shè)計規(guī)范在梳理制作的過程中，主要由設(shè)計同學(xué)來主導(dǎo)，但是必須要與團隊的產(chǎn)品同學(xué)、前端同學(xué)達成共識。對于因為團隊內(nèi)技術(shù)、業(yè)務(wù)等限制產(chǎn)生的特定情況下的交互產(chǎn)物了然于胸。

當(dāng)然規(guī)范的制定一定要結(jié)合有效的落地執(zhí)行才能夠發(fā)揮真正的作用。在解放設(shè)計師勞動力的同時，讓我們的設(shè)計工作變成真正的以不變應(yīng)萬變。

不過有一點必須要說明一下：實際的設(shè)計工作中也不要產(chǎn)生唯規(guī)范論的態(tài)度，我們真正要做的還是盡量從場景和問題的角度出發(fā)，而不是拿規(guī)范當(dāng)擋箭牌。

規(guī)范是為了實現(xiàn)業(yè)務(wù)需求而服務(wù)的，如果某種設(shè)計方案能夠更高效更有質(zhì)量的解決某個問題，并不帶來新的損失，那是不是可以不那么拘泥在當(dāng)前的規(guī)范中。

規(guī)范不是我們的王牌，不要因為產(chǎn)品有了設(shè)計規(guī)范而讓自己變成規(guī)范的奴隸，喪失了更多好設(shè)計和好靈感。

附1：自己整理制作的一套交互組件庫

• 鏈接：https://pan.baidu.com/s/1PQ9mEaMnJqWAhHvqErwHBg
• 密碼：z8xg

附2：我常做參考的web交互設(shè)計規(guī)范

Ant Design：https://ant.design/index-cn

餓了么 Element ：http://element-cn.eleme.io/#/zh-CN

附3：我常做參考的移動端交互設(shè)計規(guī)范

VUX UI：https://vux.li/demos/v2/#/demo

滴滴Cube UI：https://didi.github.io/cube-ui/example/#/

Ant Design Mobile：https://mobile.ant.design/index-cn

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

題圖來自 Unsplash，基于CC0協(xié)議。