伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

如何正確建立B端系統(tǒng)設(shè)計規(guī)范

2022-3-2    周周

結(jié)合營銷管理后臺系統(tǒng)案例,詳細(xì)聊聊B端設(shè)計規(guī)范建立過程


以下內(nèi)容主要分成兩大部分,第一部分是認(rèn)識布局設(shè)計中的一些常見問題,比如柵格中8的相關(guān)數(shù)原則,分辨率的選擇,以及布局的幾種常用方式,因為B端布局是建立B端設(shè)計規(guī)范的前提。第二部分是結(jié)合營銷管理后臺系統(tǒng)實際案例,去搭建B端設(shè)計規(guī)范的詳細(xì)過程,基本庫,擴(kuò)展庫的詳細(xì)展開介紹,基本庫和擴(kuò)展庫的搭建也是設(shè)計規(guī)范中的關(guān)鍵。內(nèi)容較多,大家可以根據(jù)上述目錄來選擇性閱讀。



1.1 如何正確做布局設(shè)計



如下圖幾個常見的布局設(shè)計稿,或者當(dāng)前市場上線的所有B端系統(tǒng)里,僅作為布局大框架來看,都可以分成以下這6種布局框架。



這六種框架里,我們可以發(fā)現(xiàn)它們在設(shè)計上共性的地方幾乎都是左右布局,并且有側(cè)邊欄。其中細(xì)微的區(qū)別就是有的側(cè)邊欄寬一些,有的側(cè)邊欄窄一些,有一些有頂部的導(dǎo)航欄,有一些有底部的導(dǎo)航欄,還有一些它的側(cè)邊欄和頂部導(dǎo)航欄的層疊關(guān)系不一樣,還有一些只有圖標(biāo)沒有文字,整個的布局方式無非就是這六種,所以不管哪種方式總結(jié)出來的共性就是左右布局,左邊稱之為側(cè)邊欄,右邊稱之為操作區(qū)。在B端設(shè)計中我們都采用這樣一種共性的布局方式,有的人想創(chuàng)新不想用這樣的布局方式,但不可以,因為經(jīng)過實驗調(diào)查發(fā)現(xiàn),從用戶體驗角度講,在B端系統(tǒng)中,或者說在電腦的操作環(huán)境下,側(cè)邊欄方式,這種左右布局的操作在電腦端是非常有普及性和體驗性的,也是最容易操作的。



接下來我們繼續(xù)把這個框架細(xì)化一下,如下圖,可以分成很多的區(qū)域,可以看出,左上角更多的是放一些logo或者放一些項目的名稱;在頂部大部分80%左右都會有頂部的導(dǎo)航欄也叫導(dǎo)航區(qū);左邊是側(cè)邊欄,一般是系統(tǒng)的主菜單導(dǎo)航,可以分到2級或者3級,一般到3級就顯得不夠友好了,我們一般會分到1級或者2級;然后是底部的狀態(tài)欄,狀態(tài)欄不是所有系統(tǒng)都有,這個狀態(tài)欄代表當(dāng)前系統(tǒng)運(yùn)行的狀態(tài),比如數(shù)據(jù)庫的讀取情況,保存情況;最后是操作區(qū)域,類似于我們平時使用的figma軟件也操作區(qū)域是最大的,在操作區(qū)域操作,選擇區(qū)來選擇一些功能。這個就是細(xì)分的框架內(nèi)容,當(dāng)然這些細(xì)分出來的內(nèi)容也都是有規(guī)范的。



比如頂部導(dǎo)航區(qū)域,可分為一級導(dǎo)航和二級導(dǎo)航,一級導(dǎo)航64px,二級導(dǎo)航48px,B端系統(tǒng)所有的單位都是像素px(物理像素),在這里補(bǔ)充一個小常識,我們平時在做C端移動端設(shè)計的時候,IOS單位是pt(點/邏輯像素),安卓單位是dp,其中1dp=1px,平時UI設(shè)計師都是基于IOS設(shè)計稿來設(shè)計,因為蘋果得交互在整個設(shè)計規(guī)范里是最好的,基于IOS出一版,然后安卓進(jìn)行微調(diào)。所以移動端開發(fā)單位用到的是pt。而B端設(shè)計中,由于b端系統(tǒng)的技術(shù)架構(gòu):分c/s和b/s。c/s需要下載客戶端,b/s直接通過瀏覽器打開。所以B端的設(shè)計用到的單位一定是px(像素)。因此這里我們提到的一級導(dǎo)航高度和二級導(dǎo)航高度都指的是像素。


然后頂部導(dǎo)航展示類的(放些logo或圖片),一級導(dǎo)航高度80px,二級導(dǎo)航高度56px。頂部導(dǎo)航高度的范圍是48+8n,側(cè)邊欄寬度的范圍是200+8n。這里要繼續(xù)補(bǔ)充一個常識,在B端的設(shè)計中,要遵循8的倍數(shù)相關(guān)值來進(jìn)行設(shè)計,比如在界面設(shè)計中我們的間距、邊距、高度或者寬度不知道該怎么確定的時候,就可以取8的倍數(shù)值來進(jìn)行確定,8、16、24、32、48等。對比C端來看,由于手機(jī)端的柵格化不能體現(xiàn)出特別強(qiáng)的優(yōu)勢來,因為屏幕的范圍寬度太小了,最多可設(shè)置6列柵格,反而有約束。在手機(jī)端如果非要做柵格,可以分成6列柵格和4列柵格。移動端左右安全距離通常都是16pt,在移動端設(shè)計中如果間距、留白不知道怎么確定的時候,我們一般會找4的相關(guān)值。比如4、8、16、20、24、28、32、40、44,這和IOS的規(guī)范是有關(guān)系的,其中44是比較特別的值,44是在IOS中設(shè)計中是能點到的最小區(qū)域,如果放到44以下,在移動端就可能點擊不到,而在安卓中是48最小區(qū)域。提及這些的目的,說回來,是想讓大家加深印象,在移動端不知道怎么預(yù)留空間的時候,就按照4得相關(guān)值去做,在B端就按照8的相關(guān)值去做,就可以做出設(shè)計的韻律來。


那么這個整體的布局方式,屬于layout/容器布局,包括了頂部導(dǎo)航、Header/頂部布局、Sider/側(cè)邊欄、Content/操作區(qū)、Footer/底部操作欄。


這幾個部分有一個順序關(guān)系,大致可以分成三種。第一種如圖1,側(cè)邊欄是最高的級別,然后頂部導(dǎo)航區(qū)、操作區(qū)和底部狀態(tài)欄是保持平等同一個級別。第二種如圖2,頂部導(dǎo)航為最高級別,側(cè)邊欄為次高級別,然后是操作區(qū)域,底部狀體欄。第三種如圖3,頂部導(dǎo)航欄、操作區(qū)和底部狀態(tài)欄是同一個級別。其中這三種情況常見的就是第一種和第二種,第一種最為常見,第二種圖2通欄的導(dǎo)航情況也有。所以我們在設(shè)計的時候,選擇1和2方案布局就可以。


所以綜上我們可以看出,B端就是左右布局來進(jìn)行設(shè)計,而手機(jī)端更多采用上下布局的方式來設(shè)計。這也是剛才提到的問題,屏幕比例的問題,手機(jī)和電腦尺寸的區(qū)別。



這里又延伸出一個問題,B端有沒有移動端?或者說什么情況下會做B端移動端的設(shè)計?其實,并不是所有的B端都有移動端,比如我們常用的一些大量信息的管理,CRM,ERP系統(tǒng),有一些會有一定的移動端,也是針對一些快捷的操作來設(shè)計的,比如在CRM系統(tǒng)中尋找一個客戶資料,比如我們在任何辦公場景去找一個用戶資料的時候,不可能總守著電腦去找,最方便的情況是可以隨時用手機(jī)去查找,具備這樣的業(yè)務(wù)使用場景的時候,設(shè)計師就應(yīng)該和產(chǎn)品經(jīng)理商量,是否去增加移動端設(shè)計,這也是必要的一步。同樣B端有B端的優(yōu)勢,如果涉及到大型的篩選、數(shù)據(jù)錄入的時候,很明顯手機(jī)端就不支持了,而且體驗效果不好,我們一定會用電腦來操作,一般也就是在集中的工作時間和在工位配合鼠標(biāo)進(jìn)行,面對大型數(shù)據(jù)還是電腦端好用,所以電腦端主要是B端承載的方式,這也是布局規(guī)范這部分需要了解的知識點。



2.1 必讀前言


B端系統(tǒng)設(shè)計規(guī)范的建立,可以分成四部分,第一先建立基本庫,包括色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)、布局系統(tǒng)。當(dāng)建立好幾本庫后,再根據(jù)自己的公司的實際業(yè)務(wù),去建立擴(kuò)展庫,擴(kuò)展庫包括導(dǎo)航系統(tǒng)、數(shù)據(jù)錄入、數(shù)據(jù)顯示、反饋系統(tǒng),這些細(xì)分為又有很多組件,具體如下圖,并不是每一個都會做,需要結(jié)合實際項目去進(jìn)行擴(kuò)展庫的搭建,也就是缺什么組件就補(bǔ)充到擴(kuò)展庫里。做完擴(kuò)展庫后再繼續(xù)做方法庫和案例庫,也就是做這些組件的說明和最佳之間案例,告訴設(shè)計同事或者開發(fā)人員具體什么時候用,怎么可以正確的去使用,來提高設(shè)計效率。我們接下來先了解第一步基本庫的建立過程。




2.2 基本庫建立詳解


2.2.1  Gird-柵格化建立


2.2.1.1  認(rèn)識柵格系統(tǒng)

在做基本庫建立時,基本庫建立的第一步是柵格化的建立。柵格化是我們做B端設(shè)計規(guī)范的第一步,也是做B端組件庫的第一步,柵格系統(tǒng)是什么樣子決定了我們接下來設(shè)計界面會進(jìn)行怎么樣的布局,因為柵格化里也應(yīng)用到了格式塔原則中的相關(guān)性等原理,所以柵格的結(jié)果是一定是有規(guī)則的。


比如下圖是營銷系統(tǒng)的柵格規(guī)范,我們可以看到,兩種情況的柵格,在分辨率1440情況下,一種是24列,間距和邊距都是24,另一種是24列,間距和邊距都是16。當(dāng)然我們還可以把界面設(shè)置其他情況的柵格,比如16、12列柵格。還有一些列數(shù)相對較少的柵格,與其對應(yīng)的界面是一些布局簡單的界面。但話說回來,通常在B端系統(tǒng)中,大家都把柵格做成24列,24列柵格可以做到一些復(fù)雜的排版布局,同時在做響應(yīng)式適配的時候也最方便,小于24柵格或者說柵格列數(shù)越少,基本在B端系統(tǒng)中就失去了靈活布局的意義,所以在B端系統(tǒng),通常情況下,就分成了以24列柵格,不同間距邊距的以下兩種柵格,這也符合我們公司后臺系統(tǒng)的布局,同時可以更好的做響應(yīng)式適配。


剛才分成的那兩種柵格,有人會產(chǎn)生疑惑,畫這么多條線是干什么的呢?那么接下來最佳案例實踐來了,通過第三個案例圖就可以看出。我們可以使用4列的方式來進(jìn)行布局,各占25%;也可以使用2列各占50%,或者75%和25%分;也可以占全列;也可以各占三分之一。所以用這樣的方法去指導(dǎo)我們使用,我們很容易按照這樣的方式去拍版布局的,我們也可以使用更多,但推薦這么多,再多可能就不好看了。


包括移動端的柵格系統(tǒng),我們怎么去使用,比如做金剛區(qū)的時候,分成四列的金剛區(qū)各占25%。所以為了更好的靈活布局,我們就能做這樣的柵格布局的規(guī)則。



補(bǔ)充知識點1: 柵格中Col指的是列,都分成為24列,Gutter指列間距也叫溝槽為24,Margin指兩邊邊距為24。



所以關(guān)于柵格,B端設(shè)計中,左側(cè)是固定的,只需把右側(cè)操作區(qū)域做成柵格就可以,全屏柵格是沒有意義的,比如現(xiàn)在的寬度是這么寬,有可能換了電腦使用的情況下瀏覽器的寬度會拉的很寬。


我們就會看到如下圖,當(dāng)右側(cè)拉伸了,同時右側(cè)響應(yīng)區(qū)域的柵格也變寬了。



這里就有了推薦的設(shè)計尺寸模板,在1440尺寸下的兩種設(shè)計,第一種是最常用的,也是我們這次設(shè)計的尺寸,第二種有部分系統(tǒng)需要尺寸變寬的時候,就需要這樣的設(shè)計。



2.2.1.2  為什么選用1440*900分辨率設(shè)計


通過調(diào)查發(fā)現(xiàn),我們使用的電腦顯示器尺寸和分辨率大部分是1920*1080px這個主流分辨率,那其余的主流分辨率還有1440*900,1466*768等等。(tips:像素是指照片的點數(shù)單位是px,表示照片是由多少點構(gòu)成,分辨率是指照片像素點的密度,是用單位尺寸內(nèi)的像素點,一般用每英寸多少點表示,單位是dpi,也就是分辨率越高圖像就越清晰。)我們也可以去京東電腦屏幕銷量的排行來看,銷量最高的也就是主流分辨率,大部分銷量在23~27英寸的顯示器,比例為16:9,分辨率就是1920*1080px,所以我們在設(shè)計的時候一定要滿足大部分人使用的屏幕分辨率。但是我們也不能按照1920*1080px尺寸來設(shè)計,因為這只是市場買賣的情況,作為B端工作者或者真正的用戶,這不是一個絕對的數(shù)據(jù)。通過對百度流量研究院數(shù)據(jù)的調(diào)查,B端中實際用戶更多采用的設(shè)計分辨率是1440*900px,所以我們作為設(shè)計師通常是以這個尺寸下來進(jìn)行設(shè)計的,我們選擇一個1440*900px的分辨率它不是最高,也不是最低分辯率,屬于中間值,原因就是可以做到更好的向上和向下兼容適配。



前面我們提到,B端柵格化遵循8像素8的倍率來進(jìn)行設(shè)計韻律。如圖,列了五個B端主流的分辨率,如果用這些分辨率除以4、6、8、12這些隨機(jī)的偶數(shù),就發(fā)現(xiàn),其中1920*1080都可以整除顯示為綠色點,由于它是最大的分辨率,我們不考慮選用,繼續(xù)往下看,除不盡的為紅點表示,可以直觀的看出除不盡的點數(shù)占比最少的就是1440*900的分辨率,而1440*900又是眾多分辨率中居中的一個值容易兼容適配最高和最低分辨率,且遵循了8的倍數(shù)設(shè)計原則,容易做柵格化設(shè)計。所以我們通常會選擇1440*900這樣的分辨率來進(jìn)行做B端的設(shè)計界面。



在沒有得到數(shù)據(jù)支撐的時候就按照行業(yè)慣例1440*900來進(jìn)行設(shè)計,這樣做肯定沒有錯,但如果做的系統(tǒng)可以確定只是少部分人進(jìn)行使用,那我們應(yīng)該做一些適當(dāng)?shù)恼{(diào)研,去獲知更合適的尺寸分辨率,比如公司集體辦公配備的統(tǒng)一尺寸是多少,經(jīng)常在這個電腦下查看工作的話,我們就應(yīng)該用這個尺寸去設(shè)計,如圖,我們就應(yīng)該按照如圖順序進(jìn)行調(diào)研選擇合適的分辨率。



所以在認(rèn)識了柵格包括建立了柵格布局后,接下來就是色彩系統(tǒng)。


2.2.2  Color-色彩


2.2.2.1 如何正確確定系統(tǒng)主色和輔助色


在設(shè)計中色彩占了很大一部分,首先要確定主色,主色只要一個就夠了。主色往往和行業(yè)和企業(yè)的VI色要有關(guān)聯(lián)度,同時主色要和其他的顏色脫引而出要有強(qiáng)調(diào)感,通常我們根據(jù)行業(yè)屬性和企業(yè)VI可以大致確定主色的色相范圍,但不知道怎么去精確色值,這時可以借助Antdesign中的色板來找精確色值,比如上品的VI品牌色為橙色,可以對應(yīng)找到Antdesign中色板“火山”模塊兒,在這組色階中我們通常會選擇中間“色階6”的色值作為最佳色值,因為色階6的顏色更飽和更純凈,可以上下進(jìn)行兼容色值。所以我們就確定了主色為“色階6”,色值為#fa541c。



當(dāng)設(shè)置完主色后再建立輔助色。輔助色的原則是要和主色能夠搭配起來,也就是說幾種輔助色放在一起,我們看起來要統(tǒng)一和諧而不是比較奇怪感受起來給人不協(xié)調(diào)的感覺。比如我確定了三個輔助色,由于上品VI色中提及了輔助色為青色,所以我以青色來延展其他的輔助色,青色、紫薇、粉色,當(dāng)這三種顏色放在一起,它們看起來還是比較和諧的,為什么會看起來比較和諧?我們通過觀察拾色器中輔助色色值的位置可以看出,他們幾乎都在同一個位置,或者他們除了色相不同外,他們幾乎都在同一個緯度,保持在同一個區(qū)間,所以他們看起來才比較協(xié)調(diào),這也是配色的一個小技巧,通過在拾色器中同一緯度下去更改色相來達(dá)到顏色之間的統(tǒng)一協(xié)調(diào)。那有人會問,如果企業(yè)VI沒有確定可延展的輔助色怎么辦?同理,調(diào)色的方法和剛才提到的方法是一樣的,以主色的拾色器色值維度,來更改出不同的色相,直到自己感覺彼此搭配協(xié)調(diào)為止,這個方法屢試不爽,經(jīng)過多次驗證,可以快速找到我們適合的配色。


2.2.3  Space-標(biāo)準(zhǔn)間距


所有的基本庫第一做柵格,第二做色彩,第三步就是間距,間距一般和柵格是可以同時做出來的,因為柵格遵循了8得倍數(shù)原則來建立得,所以我們可以看到間距也取得是8得相關(guān)值,最小是4,接下來是8,16,24,32,48,64,所以現(xiàn)在只是確定了我們B端排版時間距的這樣的一個設(shè)計韻律,如果以后有的頁面模塊兒間距是128,那就把128這個間距加進(jìn)去,加到間距規(guī)范里。



2.2.4  Typography-字體


當(dāng)做出色彩后,接下來重要的就是字體規(guī)范。在B端字體中文用PingFangSC(也可以是思源黑體或者微軟雅黑,B端中字體比較受限制,也就這三種字體可用,這里我選擇PingfangSC),英文用SF,常規(guī)數(shù)字用PingFangSC,涉及到特殊數(shù)字比如一些數(shù)據(jù)信息用DIN字體。這里的字體尺寸規(guī)范,常用的一般就是正文,小標(biāo)題,標(biāo)題都是14px,和注釋的字號為12px,所以最小字號12px,14px,18px,這樣的字號大小選擇。字重一種是常規(guī)體,一種是加粗。至于H1,H2, H3這些,H標(biāo)簽也叫Heading標(biāo)簽,HTML語 言里一共有六種大小的heading 標(biāo)簽,是網(wǎng)頁html 中對文本標(biāo)題所進(jìn)行的著重強(qiáng)調(diào)的一種標(biāo)簽,UI中一般用不上,雖然很少用到,但需要定義到。


同時字體有它的色彩規(guī)范,字體的尺寸規(guī)范對應(yīng)的是字體的色彩規(guī)范,我們可以看到很多界面標(biāo)題字,小標(biāo)題,正文字有不同的大小,同時有不同的字體顏色,這種對比的使用,這些細(xì)節(jié)的使用才會使界面看起來正確和諧。比如它的副標(biāo)題和描述用的就是比較淡的顏色。如果有顏色的區(qū)別,就把它放進(jìn)去,這個色彩我們稱之為中性色,它不偏色彩,偏的是灰,但這里字體的顏色用的是偏藍(lán)灰色,偏藍(lán)的顏色,不仔細(xì)看還是趨向于灰色,這種藍(lán)灰色可以讓界面看起來更靈動一點。同樣字體可以定義它的色階,透明度20%去遞減選擇不同位置不同的字體顏色。



2.2.5  Icon-圖標(biāo)


接下來是圖標(biāo),可以使用Antdedign的icon,因為Antdesign的icon是開源的,這里用的是IBM carbon的圖標(biāo),也是開源的圖標(biāo),但設(shè)計師在平時還是建議去自己畫圖標(biāo),用戶經(jīng)歷C端的視覺沖擊的洗禮,對視覺的品味越來越高,慢慢慢慢B端C化只是時間問題,用戶對B端的視覺要求也會越來越高,所以我們還需要多練習(xí)設(shè)計自己的圖標(biāo),B端能體現(xiàn)設(shè)計師視覺功底的的地方一般也就圖表的設(shè)計和圖標(biāo)的設(shè)計,其他就是表單之類的很難體現(xiàn)視覺方面的東西。所以設(shè)計好后放到圖標(biāo)庫里,這里只是一個占位,如果想快速出圖,那用這些開源的圖標(biāo)也是沒有問題。


在實際操作的時候,可以在柵格里直接畫,也就是在這個大小范圍內(nèi)直接畫,或者先畫完再放到柵格里調(diào)整大小,線寬,圓角等細(xì)節(jié)。



做到這一步,柵格、色彩、字體、圖標(biāo),我們的基礎(chǔ)的模板就已經(jīng)做完了,也就是基本庫,接下來就需要做擴(kuò)展庫。擴(kuò)展庫包含了各種組件和按鈕。并不是所有項目都會用到按鈕,開關(guān),滑動條這些組件,所以擴(kuò)展庫根據(jù)我們需要去建立,接下來我們詳細(xì)了解一下營銷系統(tǒng)案例擴(kuò)展庫的建立方法。



2.3.1  Button-按鈕


比如擴(kuò)展庫里的按鈕,按鈕是這個主色, 有很多情景需要我們?nèi)ソ?,按鈕有三種樣子小的、中號、大號的,其實它們代表著不同的情景;按鈕有三種狀態(tài),通常、懸停、禁用;包括按鈕的類型,有文字按鈕,圖標(biāo)+文字按鈕在左,圖標(biāo)+文字按鈕在右,只有圖標(biāo)按鈕;包括按鈕在功能樣式上的分類,有主要按鈕、次要按鈕、形狀按鈕、全圓角按鈕,這些分類,對應(yīng)的狀態(tài)形狀都羅列了出來,這些種類一定會在我們的界面中不同地方體現(xiàn),所以具體界面中用到的,到時候把這內(nèi)容再補(bǔ)全,補(bǔ)到我們的按鈕規(guī)范中,下次再使用的時候具體放什么樣式,長什么樣子就可以直接使用。



2.3.2  Navigation-導(dǎo)航菜單


接下來擴(kuò)展庫里的導(dǎo)航菜單,和表單的詳細(xì)制作方法都在后面的案例圖中有詳細(xì)制作步驟和過程,這里就不一一展開介紹了,大家可以根據(jù)如下圖結(jié)合自己業(yè)務(wù)進(jìn)行響應(yīng)設(shè)計規(guī)范的建立。實際難度其實在figma的正確使用上,比如創(chuàng)建組件,母組件和子組件的結(jié)合應(yīng)用,自動布局(shifr+A)的規(guī)范使用等,重在多做練習(xí),實際動手操作。


2.3.2.1  Menu 導(dǎo)航菜單



2.3.2.2  Tabs  標(biāo)簽導(dǎo)航



2.3.2.3  Breadcrumb 面包屑



2.3.2.4  Pagination 分頁導(dǎo)航



2.3.2.5  Dropdowns 下拉菜單



2.3.3  Form-表單


2.3.3.1  Input 輸入/查詢表單



2.3.3.2  Checks & Radios & Switches 多選框 & 單選 & 開關(guān)



以上為B端設(shè)計規(guī)范基本庫和擴(kuò)展庫的建立思路,其中基本庫里的色彩或者字體、柵格規(guī)范等等,根據(jù)常用分辨率設(shè)備的調(diào)研,和企業(yè)品牌VI關(guān)聯(lián)色,我們都可以很輕松的定義出來。其實設(shè)計規(guī)范的搭建核心在于組件庫的搭建,舉個例子,比如Iput輸入框規(guī)范,我們需要先定義一個輸入框的高度,以及文字與輸入框的間距,線框的顏色,文字大小,文字顏色,這些是定義一個輸入框組件規(guī)范的關(guān)鍵,我們會發(fā)現(xiàn)當(dāng)規(guī)范的做圖做好這個輸入框的時候,也就是確定了它的組件規(guī)范,做好后,我們就需要把這個輸入框形成組件,為了方便后面界面中進(jìn)行復(fù)用,我們就可以把它創(chuàng)建組件。因為是組件嘛,他要方便在不同場景下使用,會需要拉伸,所以就需要把文字與輸入框加上自動布局(shift+A)進(jìn)行調(diào)整。有了之前提到的整體設(shè)計規(guī)范建立思路,再結(jié)合剛才提到的基本的設(shè)計規(guī)范操作步驟,就形成了以上自己業(yè)務(wù)系統(tǒng)的設(shè)計規(guī)范落地,以上內(nèi)容供大家參考,感謝閱讀,thanks~

文章來源:站酷   作者:_C魚

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔

午夜免费男女啪啪视频观看| 丰满迷人的少妇在线观看| 大香蕉97超碰在线| 亚洲国产精品国产精品| 亚洲欧美日韩东京热| 大话2 男鬼变身卡| 精品一区二区免费观看| 国产免费视频播放在线视频| 国产精品蜜桃在线观看| 99re6热这里在线精品视频| 成人毛片60女人毛片免费| 日韩精品有码人妻一区| 啦啦啦视频在线资源免费观看| 色视频www国产| 久热这里只有精品99| 欧美xxⅹ黑人| 日韩制服骚丝袜av| videossex国产| 熟妇人妻不卡中文字幕| 人妻制服诱惑在线中文字幕| 一区在线观看完整版| 久久影院123| 最近2019中文字幕mv第一页| 日韩一区二区视频免费看| 寂寞人妻少妇视频99o| 国产精品国产三级国产av玫瑰| 王馨瑶露胸无遮挡在线观看| 乱人伦中国视频| 岛国毛片在线播放| 成人国产麻豆网| av国产精品久久久久影院| 啦啦啦啦在线视频资源| 在线精品无人区一区二区三| 国产 一区精品| 偷拍熟女少妇极品色| 午夜激情福利司机影院| 国产精品人妻久久久久久| 亚洲精品自拍成人| 国产高清国产精品国产三级| 久久精品国产亚洲网站| 99re6热这里在线精品视频| 欧美日韩在线观看h| 久久人人爽av亚洲精品天堂| 超碰97精品在线观看| 国产伦在线观看视频一区| 一区二区三区精品91| 成人特级av手机在线观看| 国产美女午夜福利| 日韩在线高清观看一区二区三区| 国产精品福利在线免费观看| 日韩成人av中文字幕在线观看| 热re99久久精品国产66热6| 中国美白少妇内射xxxbb| 久久久午夜欧美精品| 男女国产视频网站| 在线观看www视频免费| 人妻一区二区av| 91aial.com中文字幕在线观看| 美女xxoo啪啪120秒动态图| 麻豆成人午夜福利视频| 99久久精品一区二区三区| 男的添女的下面高潮视频| 日本猛色少妇xxxxx猛交久久| 国产老妇伦熟女老妇高清| 大又大粗又爽又黄少妇毛片口| 亚洲av日韩在线播放| 亚洲av.av天堂| 亚洲综合精品二区| 精品一区二区三卡| 全区人妻精品视频| 国产亚洲91精品色在线| 乱系列少妇在线播放| 80岁老熟妇乱子伦牲交| 免费人妻精品一区二区三区视频| 午夜免费鲁丝| 免费黄网站久久成人精品| 人人妻人人澡人人爽人人夜夜| 草草在线视频免费看| 男男h啪啪无遮挡| 黑人巨大精品欧美一区二区蜜桃 | 18禁动态无遮挡网站| www.av在线官网国产| 人人妻人人澡人人看| 精品亚洲成a人片在线观看| 女人久久www免费人成看片| 国产欧美日韩综合在线一区二区 | 蜜桃在线观看..| 自拍偷自拍亚洲精品老妇| 免费大片18禁| 狠狠精品人妻久久久久久综合| 亚洲中文av在线| 精品久久久久久电影网| 国产在视频线精品| 国产色婷婷99| 国产精品国产三级专区第一集| 一级毛片久久久久久久久女| 亚洲av不卡在线观看| 亚洲中文av在线| 99热网站在线观看| 男人爽女人下面视频在线观看| 日韩欧美一区视频在线观看 | 亚洲精品国产av蜜桃| 大香蕉久久网| 各种免费的搞黄视频| 久久久久网色| 伦精品一区二区三区| 69精品国产乱码久久久| 午夜福利影视在线免费观看| 80岁老熟妇乱子伦牲交| 69精品国产乱码久久久| 春色校园在线视频观看| a级一级毛片免费在线观看| av在线观看视频网站免费| 天美传媒精品一区二区| 亚洲精品一区蜜桃| 三级国产精品欧美在线观看| 我要看日韩黄色一级片| 女的被弄到高潮叫床怎么办| 99视频精品全部免费 在线| 美女国产视频在线观看| 亚洲,一卡二卡三卡| 欧美日韩国产mv在线观看视频| 日本免费在线观看一区| 美女国产视频在线观看| 久久6这里有精品| 下体分泌物呈黄色| 久久国产精品男人的天堂亚洲 | 一级毛片久久久久久久久女| 99久久精品国产国产毛片| 久久精品国产亚洲av天美| 久久毛片免费看一区二区三区| 国产黄片美女视频| 天天躁夜夜躁狠狠久久av| 欧美bdsm另类| 亚洲内射少妇av| 亚洲婷婷狠狠爱综合网| 啦啦啦啦在线视频资源| 秋霞伦理黄片| av福利片在线观看| 国产精品无大码| 午夜激情久久久久久久| 美女内射精品一级片tv| 国产精品久久久久久精品古装| 日韩欧美一区视频在线观看 | 最近手机中文字幕大全| 妹子高潮喷水视频| 最近中文字幕2019免费版| 欧美精品国产亚洲| 亚洲国产欧美日韩在线播放 | 最近的中文字幕免费完整| 高清视频免费观看一区二区| 十分钟在线观看高清视频www | 制服丝袜香蕉在线| 久久久精品94久久精品| 九九爱精品视频在线观看| 午夜福利在线观看免费完整高清在| 国产亚洲午夜精品一区二区久久| 久久久久久久大尺度免费视频| 色网站视频免费| 日韩av免费高清视频| 色视频www国产| 老司机影院毛片| xxx大片免费视频| 麻豆乱淫一区二区| 黑丝袜美女国产一区| 多毛熟女@视频| 免费看av在线观看网站| 午夜福利在线观看免费完整高清在| 久久久久视频综合| 欧美成人精品欧美一级黄| 99久久精品一区二区三区| 欧美精品一区二区免费开放| 国语对白做爰xxxⅹ性视频网站| 日韩精品免费视频一区二区三区 | 国产在线视频一区二区| 爱豆传媒免费全集在线观看| 免费黄色在线免费观看| 久久久久久久久久人人人人人人| av一本久久久久| 精品99又大又爽又粗少妇毛片| 插逼视频在线观看| 亚洲综合精品二区| 内射极品少妇av片p| 免费不卡的大黄色大毛片视频在线观看| 免费黄色在线免费观看| 欧美日韩综合久久久久久| 免费不卡的大黄色大毛片视频在线观看| 少妇 在线观看| 成年人免费黄色播放视频 | 亚洲精品国产av蜜桃| 人妻夜夜爽99麻豆av| 久久综合国产亚洲精品| 久久国产精品男人的天堂亚洲 | 亚洲精品自拍成人| 欧美日韩国产mv在线观看视频| 午夜视频国产福利| 色吧在线观看| 99热6这里只有精品| 久久女婷五月综合色啪小说| 国产日韩一区二区三区精品不卡 | 久久毛片免费看一区二区三区| 成人国产麻豆网| 国产 精品1| 亚洲中文av在线| 有码 亚洲区| 精品99又大又爽又粗少妇毛片| 交换朋友夫妻互换小说| 男男h啪啪无遮挡| 国产av一区二区精品久久| 久久久久精品久久久久真实原创| 久久久久国产精品人妻一区二区| 久久国产精品大桥未久av | 波野结衣二区三区在线| 久久影院123| 日本91视频免费播放| 蜜臀久久99精品久久宅男| 成人无遮挡网站| 免费看不卡的av| 精品一区二区免费观看| 亚洲精品中文字幕在线视频 | 亚洲国产最新在线播放| 麻豆成人av视频| 97超视频在线观看视频| 久久久久久久大尺度免费视频| 91久久精品电影网| videossex国产| 亚洲国产精品999| 爱豆传媒免费全集在线观看| 亚洲人成网站在线播| 交换朋友夫妻互换小说| 能在线免费看毛片的网站| 97超碰精品成人国产| 十分钟在线观看高清视频www | 亚洲av中文av极速乱| 丰满少妇做爰视频| 一个人看视频在线观看www免费| 国产成人精品婷婷| 新久久久久国产一级毛片| 亚洲美女黄色视频免费看| 国产精品嫩草影院av在线观看| 不卡视频在线观看欧美| 91久久精品国产一区二区三区| 高清在线视频一区二区三区| 黄片无遮挡物在线观看| 下体分泌物呈黄色| 免费观看av网站的网址| 99久久综合免费| 久久av网站| 777米奇影视久久| 欧美 日韩 精品 国产| 日韩人妻高清精品专区| 高清欧美精品videossex| 久久鲁丝午夜福利片| 一级a做视频免费观看| 乱人伦中国视频| 亚洲美女黄色视频免费看| av女优亚洲男人天堂| 三级经典国产精品| av国产精品久久久久影院| 午夜免费观看性视频| 国产成人91sexporn| 性色av一级| 午夜福利网站1000一区二区三区| videossex国产| 在线精品无人区一区二区三| 久久午夜综合久久蜜桃| 两个人免费观看高清视频 | 国产欧美日韩精品一区二区| 国产一区亚洲一区在线观看| 国产爽快片一区二区三区| 久久99精品国语久久久| 乱系列少妇在线播放| 国产熟女欧美一区二区| 久久韩国三级中文字幕| 看免费成人av毛片| 午夜免费鲁丝| 麻豆成人av视频| 欧美另类一区| 成人综合一区亚洲| 桃花免费在线播放| 国产成人aa在线观看| 午夜福利,免费看| 亚洲怡红院男人天堂| 精品人妻熟女av久视频| 伦理电影大哥的女人| 大码成人一级视频| 黄色视频在线播放观看不卡| 亚洲欧美日韩东京热| 女人精品久久久久毛片| 国产成人aa在线观看| 日本免费在线观看一区| 一区二区三区乱码不卡18| 黄色配什么色好看| 欧美日韩视频高清一区二区三区二| 一级毛片aaaaaa免费看小| 国产成人免费观看mmmm| 中文字幕免费在线视频6| 免费高清在线观看视频在线观看| a 毛片基地| 国产有黄有色有爽视频| 性色avwww在线观看| 大香蕉久久网| 国产高清有码在线观看视频| 亚洲在久久综合| 91久久精品国产一区二区三区| 欧美一级a爱片免费观看看| 桃花免费在线播放| 老女人水多毛片| 视频区图区小说| 妹子高潮喷水视频| 国产真实伦视频高清在线观看| 丝袜脚勾引网站| 亚洲电影在线观看av| 亚洲婷婷狠狠爱综合网| av福利片在线观看| 久久6这里有精品| 久久久久久久久久成人| 国产视频首页在线观看| 蜜桃在线观看..| 黑人猛操日本美女一级片| 在线观看一区二区三区激情| 亚洲精品乱久久久久久| 亚洲av成人精品一区久久| 亚洲国产av新网站| 久久精品国产鲁丝片午夜精品| 日韩中字成人| 欧美日韩亚洲高清精品| 国产极品粉嫩免费观看在线 | 久久久久久久亚洲中文字幕| 国产精品国产三级国产av玫瑰| 亚洲国产精品国产精品| 国产成人免费观看mmmm| av在线老鸭窝| av又黄又爽大尺度在线免费看| 精品亚洲成国产av| 少妇人妻久久综合中文| 中文字幕免费在线视频6| 观看av在线不卡| 成人二区视频| 精品国产乱码久久久久久小说| 久热久热在线精品观看| 日韩伦理黄色片| 亚洲国产欧美日韩在线播放 | 观看免费一级毛片| 五月玫瑰六月丁香| 国产一区有黄有色的免费视频| 日韩电影二区| 亚洲国产欧美在线一区| 精品亚洲成国产av| 五月玫瑰六月丁香| 秋霞伦理黄片| 久久ye,这里只有精品| 少妇的逼水好多| 自拍欧美九色日韩亚洲蝌蚪91 | 成人特级av手机在线观看| 成年女人在线观看亚洲视频| 丰满乱子伦码专区| 尾随美女入室| 亚洲精品久久午夜乱码| 国产精品.久久久| 久久6这里有精品| 欧美激情极品国产一区二区三区 | 成人漫画全彩无遮挡| 蜜桃在线观看..| av天堂久久9| 日日摸夜夜添夜夜添av毛片| 丰满乱子伦码专区| 麻豆成人av视频| 观看美女的网站| 人妻 亚洲 视频| 一级a做视频免费观看| 国产伦精品一区二区三区四那| 日韩av免费高清视频| av专区在线播放| 一级毛片电影观看| 亚洲无线观看免费| 国产高清有码在线观看视频| 波野结衣二区三区在线| 最近手机中文字幕大全| 交换朋友夫妻互换小说| 日韩一区二区三区影片| 日本色播在线视频| 99久久人妻综合| 亚洲怡红院男人天堂| 日日啪夜夜爽| 精品午夜福利在线看| 男人添女人高潮全过程视频| 欧美少妇被猛烈插入视频| 久久毛片免费看一区二区三区| 一本色道久久久久久精品综合| 亚洲国产成人一精品久久久| 日韩av不卡免费在线播放| 人妻人人澡人人爽人人| 亚洲在久久综合| 日本猛色少妇xxxxx猛交久久| 亚洲不卡免费看| 亚洲精品自拍成人| 春色校园在线视频观看| 亚洲国产日韩一区二区| 一边亲一边摸免费视频| 99久久人妻综合| 国产真实伦视频高清在线观看| 麻豆成人午夜福利视频| 亚洲成人av在线免费| 综合色丁香网| 久久狼人影院| 国产精品秋霞免费鲁丝片| 妹子高潮喷水视频| 中文天堂在线官网| 一本久久精品| 国产精品一区二区三区四区免费观看| 国产高清国产精品国产三级| 精品一区二区三卡| 中国三级夫妇交换| 熟妇人妻不卡中文字幕| 国产精品偷伦视频观看了| 超碰97精品在线观看| 欧美bdsm另类| 又黄又爽又刺激的免费视频.| 国产精品人妻久久久影院| 亚洲三级黄色毛片| 亚洲国产精品一区三区| 不卡视频在线观看欧美| 国模一区二区三区四区视频| 午夜福利网站1000一区二区三区| 人妻系列 视频| 国产精品无大码| 久久久久久人妻| 七月丁香在线播放| h视频一区二区三区| 久久影院123| 黄色一级大片看看| 欧美日韩国产mv在线观看视频| 亚洲欧美精品自产自拍| 秋霞在线观看毛片| 国产极品粉嫩免费观看在线 | 国产成人午夜福利电影在线观看| 91在线精品国自产拍蜜月| 久久久久久久久久久免费av| 一本一本综合久久| 亚洲真实伦在线观看| 男人狂女人下面高潮的视频| 亚洲伊人久久精品综合| 日韩视频在线欧美| 免费大片18禁| 国产av精品麻豆| av女优亚洲男人天堂| 只有这里有精品99| 免费黄网站久久成人精品| 中国三级夫妇交换| 国产精品人妻久久久久久| 免费观看性生交大片5| 大陆偷拍与自拍| 一本一本综合久久| 自拍偷自拍亚洲精品老妇| 精品99又大又爽又粗少妇毛片| 日韩大片免费观看网站| 久久久欧美国产精品| 91在线精品国自产拍蜜月| 美女脱内裤让男人舔精品视频| 精品一区二区三区视频在线| 久久99蜜桃精品久久| 高清毛片免费看| 日韩中文字幕视频在线看片| 91精品一卡2卡3卡4卡| 观看美女的网站| 久久国产精品大桥未久av | 伊人久久国产一区二区| 精品午夜福利在线看| 18+在线观看网站| 久久6这里有精品| 亚洲电影在线观看av| 午夜激情福利司机影院| 又大又黄又爽视频免费| 国产亚洲av片在线观看秒播厂| 久久久国产一区二区| a级片在线免费高清观看视频| 一二三四中文在线观看免费高清| 亚洲国产精品一区二区三区在线| 国产69精品久久久久777片| 亚洲怡红院男人天堂| 免费人成在线观看视频色| 99九九线精品视频在线观看视频| 黄色日韩在线| 黄色视频在线播放观看不卡| 国产一区二区在线观看日韩| 亚洲国产毛片av蜜桃av| 亚洲情色 制服丝袜| h日本视频在线播放| 国产淫片久久久久久久久| 国产精品福利在线免费观看| 国产日韩欧美亚洲二区| 国产高清国产精品国产三级| av天堂中文字幕网| 国产美女午夜福利| 人人妻人人澡人人看| 美女中出高潮动态图| 少妇裸体淫交视频免费看高清| 老司机影院毛片| 国产美女午夜福利| 亚洲欧洲国产日韩| 两个人免费观看高清视频 | 两个人的视频大全免费| 91精品国产九色| 日韩中文字幕视频在线看片| 欧美+日韩+精品| 国产在视频线精品| 久久99蜜桃精品久久| videos熟女内射| 91久久精品国产一区二区三区| 性高湖久久久久久久久免费观看| 久久久久精品性色| 26uuu在线亚洲综合色| 大又大粗又爽又黄少妇毛片口| 精品少妇久久久久久888优播| 欧美区成人在线视频| 免费黄色在线免费观看| 亚洲伊人久久精品综合| 国产精品麻豆人妻色哟哟久久| 日日撸夜夜添| 国产日韩欧美在线精品| 男女边吃奶边做爰视频| 另类亚洲欧美激情| 亚洲av男天堂| 美女视频免费永久观看网站| 日韩中字成人| 国产精品久久久久久久久免| 亚洲精品乱码久久久久久按摩| 亚洲欧美清纯卡通| 一级毛片黄色毛片免费观看视频| 久久国产亚洲av麻豆专区| .国产精品久久| 久久午夜福利片| 肉色欧美久久久久久久蜜桃| av不卡在线播放| 国产免费一级a男人的天堂| 丝袜脚勾引网站| 亚洲av国产av综合av卡| 性色av一级| 欧美日韩精品成人综合77777| 亚洲精品国产av蜜桃| 亚洲欧洲国产日韩| videos熟女内射| 中文精品一卡2卡3卡4更新| 免费人成在线观看视频色| 91久久精品国产一区二区三区| 熟女av电影| av视频免费观看在线观看| 黑人猛操日本美女一级片| 国产精品不卡视频一区二区| 日韩成人av中文字幕在线观看| 九草在线视频观看| 日韩欧美精品免费久久| 久久久久久久久久人人人人人人| 大香蕉97超碰在线| 久久免费观看电影| 天堂俺去俺来也www色官网| 婷婷色综合大香蕉| 高清在线视频一区二区三区| 亚洲国产欧美在线一区| 人妻 亚洲 视频| 视频中文字幕在线观看| 亚洲欧美日韩东京热| 毛片一级片免费看久久久久| 国产高清不卡午夜福利| 国产精品嫩草影院av在线观看| 久久热精品热| 成人二区视频| 国产一区二区在线观看av| 午夜影院在线不卡| 成人特级av手机在线观看| 欧美+日韩+精品| 大片免费播放器 马上看| 永久网站在线| 少妇 在线观看| 亚洲精品日韩av片在线观看| 黑人巨大精品欧美一区二区蜜桃 | 99re6热这里在线精品视频| 高清不卡的av网站| 肉色欧美久久久久久久蜜桃| 水蜜桃什么品种好| 日本与韩国留学比较| 狠狠精品人妻久久久久久综合| av免费在线看不卡| 午夜免费观看性视频| 综合色丁香网| .国产精品久久| 亚洲国产精品成人久久小说| 国产亚洲5aaaaa淫片| 内地一区二区视频在线| 在线观看三级黄色| 国产伦在线观看视频一区| 国产老妇伦熟女老妇高清| 日本wwww免费看| 国产精品99久久久久久久久| 国产 精品1| 最近最新中文字幕免费大全7| 欧美日本中文国产一区发布| 51国产日韩欧美| 亚洲精品乱久久久久久| 国产精品一区二区三区四区免费观看| 久久人人爽人人片av| 精品午夜福利在线看| 国产黄片美女视频| 啦啦啦啦在线视频资源| 有码 亚洲区| 国产熟女欧美一区二区| 中文字幕亚洲精品专区| 我要看日韩黄色一级片| 午夜福利网站1000一区二区三区| 日日啪夜夜爽| 亚洲色图综合在线观看| 亚洲精品久久久久久婷婷小说| 夜夜爽夜夜爽视频| 亚洲婷婷狠狠爱综合网|