B端設(shè)計(jì)中臺(tái)落地、響應(yīng)式界面設(shè)計(jì)

2022-6-6    ui設(shè)計(jì)分享達(dá)人


以下內(nèi)容主要分成兩大部分,第一是聊聊響應(yīng)式和自適應(yīng)的區(qū)別和原理,以及我們應(yīng)該如何去設(shè)計(jì)響應(yīng)式界面;第二部分也是比較關(guān)鍵的B端系統(tǒng)設(shè)計(jì)的核心,B端設(shè)計(jì)中臺(tái)完整構(gòu)建過(guò)程的具體步驟,以及應(yīng)用到的格式塔原則,和命名的一些注意事項(xiàng),內(nèi)容較多,大家可以根據(jù)上述目錄來(lái)選擇性閱讀。


1.1多端兼容設(shè)計(jì)的發(fā)展史



簡(jiǎn)單概括多端兼容設(shè)計(jì)的發(fā)展史,最早是桌面端,比如桌面的一些應(yīng)用;后來(lái)出現(xiàn)了移動(dòng)端,針對(duì)移動(dòng)端大家用的都是WAP,指一種無(wú)線應(yīng)用協(xié)議,大家在用手機(jī)瀏覽一些網(wǎng)站,會(huì)把網(wǎng)站翻譯成一種低流量的瀏覽方式,比如去掉圖片大圖,只剩全文字,因?yàn)楫?dāng)時(shí)網(wǎng)絡(luò)不好,早在3G和2G時(shí)代移動(dòng)端用的都是WAP;在2008年之后出現(xiàn)了響應(yīng)式,也就是做一套代碼可以兼容三端(網(wǎng)頁(yè)、移動(dòng)端、iPad)設(shè)備,在發(fā)展的同時(shí)也遇到很多問(wèn)題,但響應(yīng)式同時(shí)也遇到了很多問(wèn)題;于是又出現(xiàn)了自適應(yīng),指不同的設(shè)備打開(kāi)不同的頁(yè)面進(jìn)行自適應(yīng),自適應(yīng)能增加效率,但需要增加工作量;2017年以后直到現(xiàn)在看到最常用的就是漸進(jìn)式,類似完整的像在使用一個(gè)APP。這是多端兼容設(shè)計(jì)的整體的發(fā)展。


1.2 響應(yīng)式布局的種類



1.2.1 響應(yīng)式布局RWD


可以理解成用戶在手機(jī)、電腦、ipad打開(kāi)同一個(gè)界面,所呈現(xiàn)的界面是一樣的。需要考慮移動(dòng)端設(shè)計(jì)和網(wǎng)頁(yè)端怎么通過(guò)一套代碼進(jìn)行兼容。


1.2.2 自適應(yīng)布局AWD


自動(dòng)布局算是響應(yīng)式的一種,但平時(shí)看到很多響應(yīng)式其實(shí)并不是真正的響應(yīng)式,而是自動(dòng)布局,因?yàn)榻缑嬖诓煌脑O(shè)備用的是不同的模板,當(dāng)我們用電腦打開(kāi)呈現(xiàn)的是一套模板,而用手機(jī)打開(kāi)則是另外一套模板,這種看起來(lái)是響應(yīng)式,其實(shí)不是。因?yàn)楫?dāng)我在開(kāi)發(fā)者模式下調(diào)節(jié)不同設(shè)備展示時(shí),就會(huì)發(fā)現(xiàn),其實(shí)是換了一個(gè)網(wǎng)址來(lái)根據(jù)不同的設(shè)備進(jìn)行自適應(yīng)的,而真正的響應(yīng)式是不需要刷新的,在拖小窗口的時(shí)候就會(huì)變成手機(jī)端的那個(gè)樣子。


1.2.3 漸進(jìn)式布局PWD


漸進(jìn)式布局是近幾年比較新起的,這種布局設(shè)計(jì),很像一個(gè)網(wǎng)站或者本身它就是一個(gè)網(wǎng)站,但用起來(lái)就像一個(gè)APP一樣,看到這里大家很容易相到,小程序就是漸進(jìn)式布局得一種,小程序明顯是一個(gè)網(wǎng)頁(yè),但通過(guò)技術(shù)的一些嵌入和一些接口或者緩存的方式的操作,讓用戶在使用的時(shí)候感覺(jué)小程序就是一個(gè)APP,但核心技術(shù)還是web網(wǎng)頁(yè)。



1.3 如何應(yīng)用設(shè)計(jì)響應(yīng)式


響應(yīng)式的原理是通過(guò)定位的方式來(lái)做響應(yīng)式的各種開(kāi)發(fā),需要在頁(yè)面中至少標(biāo)出這十個(gè)點(diǎn):中心點(diǎn),上下左右點(diǎn),上左上右點(diǎn)和下左下右點(diǎn),這幾個(gè)點(diǎn)其實(shí)就代表了做響應(yīng)式和做布局相應(yīng)的位置。這樣可能大家不容易理解,其實(shí)結(jié)合figma來(lái)看,這些點(diǎn)對(duì)應(yīng)的就是這樣(如下圖),在figma中的布局點(diǎn)。設(shè)計(jì)師通過(guò)調(diào)節(jié)圖形的布局點(diǎn),可以做到在頁(yè)面拉伸時(shí),讓想動(dòng)的元素跟隨變化,不動(dòng)的元素靜止不動(dòng),這就是響應(yīng)式的原理。換言之,我們做響應(yīng)式布局的原理也就是通過(guò)figma或者sketch中的布局約束這個(gè)功能來(lái)實(shí)現(xiàn)的。



1.4 響應(yīng)式和自適應(yīng)的區(qū)別


01、響應(yīng)式


如下圖是響應(yīng)式的優(yōu)點(diǎn)和缺點(diǎn)。響應(yīng)式其實(shí)就是只開(kāi)發(fā)一套頁(yè)面,這個(gè)頁(yè)面兼容三端。雖然做了響應(yīng)式,但如何響應(yīng)是需要設(shè)計(jì)師去設(shè)計(jì)的。比如我們?cè)O(shè)計(jì)了一個(gè)移動(dòng)端界面,然后全部做好對(duì)應(yīng)的自動(dòng)布局,再進(jìn)行頁(yè)面拉伸,內(nèi)容隨之會(huì)發(fā)生變化,比如當(dāng)拉伸到1024*768的時(shí)候,也就是iPad的尺寸,就會(huì)發(fā)現(xiàn)局部在設(shè)計(jì)上有些不合實(shí)際情況,這時(shí)就需要設(shè)計(jì)師在對(duì)應(yīng)尺寸的設(shè)計(jì)稿上進(jìn)行內(nèi)容上的微調(diào),比如按鈕不可能那么長(zhǎng),就把按鈕設(shè)計(jì)的短一點(diǎn)。當(dāng)繼續(xù)進(jìn)行拉伸到1440網(wǎng)頁(yè)的寬度時(shí),然后再酌情針對(duì)網(wǎng)頁(yè)尺寸的呈現(xiàn)樣式,局部進(jìn)行尺寸的調(diào)整,比如文字和按鈕被拉伸到網(wǎng)頁(yè)版都需要居中對(duì)齊,電腦端的樣式就需要設(shè)計(jì)師重新排版了。


通常在B端系統(tǒng),設(shè)計(jì)師需要做響應(yīng)式設(shè)計(jì)時(shí),往往是從大往小做設(shè)計(jì),這也取決于這個(gè)B端產(chǎn)品是否需要進(jìn)行移動(dòng)端的設(shè)計(jì),《B端設(shè)計(jì)總概二》中提到過(guò)什么情況下進(jìn)行設(shè)計(jì)B端移動(dòng)端。如果需要設(shè)計(jì)B端移動(dòng)端,就需要我們將網(wǎng)頁(yè)改成移動(dòng)端設(shè)計(jì),比如B端的側(cè)邊欄導(dǎo)航在拉伸到移動(dòng)端時(shí),就會(huì)變成用一個(gè)折疊懸浮的iocn來(lái)替代等等這樣設(shè)計(jì)上的改變。在figma中,做三端拉伸時(shí)候,可以用斷點(diǎn)插件來(lái)進(jìn)行演示,通過(guò)對(duì)斷點(diǎn)插件的設(shè)置,就可以完美的看到頁(yè)面在三端不同情況的適配呈現(xiàn),斷點(diǎn)插件用來(lái)做演示非常方便。



02、自適應(yīng)


如下圖是自適應(yīng)的優(yōu)點(diǎn)和缺點(diǎn),其實(shí)就是一個(gè)項(xiàng)目開(kāi)發(fā)三個(gè)頁(yè)面,分別做定制設(shè)計(jì),網(wǎng)頁(yè)端、移動(dòng)端和Ipad端。



2.1必讀前言


我們都知道2021年也就是今年是我國(guó)新基建的元年,十四五規(guī)劃2035遠(yuǎn)景目標(biāo)里提到重點(diǎn)發(fā)展傳統(tǒng)企業(yè)數(shù)字化轉(zhuǎn)型,尤其是今年我們?cè)O(shè)計(jì)師更能深刻體會(huì),C端和B端已經(jīng)是完全兩個(gè)不同的行業(yè),C端發(fā)展近十年,已經(jīng)很難再做到創(chuàng)新上的突破,該做的功能和創(chuàng)新都已經(jīng)做了,而B端這片藍(lán)海才剛剛開(kāi)始發(fā)力,很多企業(yè)也都在考慮B端系統(tǒng)的搭建,降本提效率成了很多公司新的指標(biāo),因此數(shù)字化轉(zhuǎn)型重點(diǎn)在于B端系統(tǒng)探索,B端重點(diǎn)在于中臺(tái)的搭建!設(shè)計(jì)師通過(guò)設(shè)計(jì)中臺(tái),構(gòu)建出基本的業(yè)務(wù)類型,再分類到業(yè)務(wù)中,構(gòu)建出不同的業(yè)務(wù)界面,所以設(shè)計(jì)中臺(tái)非常關(guān)鍵,很多公司經(jīng)常會(huì)用這兩個(gè)系統(tǒng)去構(gòu)建,Antdesign和Elemnet就是設(shè)計(jì)中臺(tái),我們會(huì)發(fā)現(xiàn)用Antdesign可以做出很多的系統(tǒng),那怎么進(jìn)行設(shè)計(jì)中臺(tái)的設(shè)計(jì)呢?和我們?cè)O(shè)計(jì)師有什么樣的關(guān)聯(lián)度呢?帶著這個(gè)問(wèn)題,我們深度探索B端設(shè)計(jì)中臺(tái)的落地!


2.2 中臺(tái)的概念及作用


概念:中臺(tái)是互聯(lián)網(wǎng)的術(shù)語(yǔ),一般應(yīng)用于大型企業(yè),中國(guó)互聯(lián)網(wǎng)的變革永遠(yuǎn)是從大型互聯(lián)網(wǎng)開(kāi)始,大型互聯(lián)網(wǎng)公司引發(fā)了技術(shù)的變革,這也是中臺(tái)的興起,一般指搭建一個(gè)靈活快速應(yīng)對(duì)變化的架構(gòu),快速實(shí)現(xiàn)前端提的需求,避免重復(fù)建設(shè),達(dá)到提高工作效率目的。


作用:降本提效。如果沒(méi)有組件庫(kù),普通設(shè)計(jì)師一天最多做十個(gè)頁(yè)面,再多就不太可能了,如果有組件化得產(chǎn)生,一天可以做一百個(gè)左右的界面。在面對(duì)B端系統(tǒng)這樣幾千個(gè)頁(yè)面的巨大的工作量前,組件庫(kù)的作用尤為重要。但如果落地,就需要前端工程師的密切配合,因?yàn)樵O(shè)計(jì)師設(shè)計(jì)的組件只是一個(gè)樣式,而前端需要把組件進(jìn)行代碼化,所以組件一定是代碼化的,也就是說(shuō)只有代碼化的組件才是真正的組件。所以視覺(jué)組件的復(fù)用,和前端代碼的復(fù)用,可以大大提高設(shè)計(jì)師的工作效率。


2.3 設(shè)計(jì)中臺(tái)的構(gòu)建過(guò)程



2.3.1 基本庫(kù)建立


基本庫(kù)指的是一些色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)等等,之所以強(qiáng)調(diào)系統(tǒng)兩個(gè)字,有系統(tǒng)就要統(tǒng)一規(guī)則和統(tǒng)一規(guī)范,然后進(jìn)行調(diào)用應(yīng)用在系統(tǒng)中的各個(gè)地方,比如我們想調(diào)用一個(gè)顏色,不是去隨選用一個(gè)顏色,應(yīng)該嚴(yán)格的從色彩系統(tǒng)中去調(diào)用,如果系統(tǒng)組件庫(kù)里沒(méi)有這個(gè)顏色,我們也絕對(duì)不可以使用,可以先用替代色做或者根據(jù)業(yè)務(wù)再進(jìn)行補(bǔ)充顏色進(jìn)組件庫(kù)為了后續(xù)的調(diào)用,這是一種比較嚴(yán)謹(jǐn)?shù)氖褂梅绞?。所以在建立組件庫(kù)的時(shí)候我們要考慮全面,組件庫(kù)中如果沒(méi)有相應(yīng)的組件,我們應(yīng)該試著反推一下,是否要加進(jìn)組件庫(kù)中去,來(lái)進(jìn)行系統(tǒng)的調(diào)用。在做中臺(tái)的過(guò)程中,我們一直使用Antdesign,我們對(duì)組件的名稱,組件的分類其實(shí)一點(diǎn)都不陌生,其實(shí)Antdesign也在借鑒國(guó)外的Bootstrap組件庫(kù)(大家感興趣可以下載Bootstrap組件庫(kù)進(jìn)行查看),所以并不是Antdesign組件庫(kù)形成了一定的規(guī)則,它也是在沿用別人的規(guī)則,而這些規(guī)則也需要不斷的有大公司去繼承出來(lái),所以慢慢衍生出來(lái)現(xiàn)在這樣的組件庫(kù),那中臺(tái)設(shè)計(jì),首先要搭建基本庫(kù),把基本庫(kù)里的基礎(chǔ)一些系統(tǒng)搭建好后,我們繼續(xù)去做擴(kuò)展庫(kù)。


2.3.2 擴(kuò)展庫(kù)建立


如下圖,擴(kuò)展庫(kù)中包含了很多內(nèi)容,比如分了四類,導(dǎo)航系統(tǒng),數(shù)據(jù)錄入,數(shù)據(jù)展示和反饋系統(tǒng)。其中導(dǎo)航系統(tǒng)又包含了,面包屑導(dǎo)航、下拉菜單、導(dǎo)航菜單、頂部導(dǎo)航等等,包括后面的數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋系統(tǒng)也包含了很多內(nèi)容。我們做這樣的擴(kuò)展庫(kù),也不需要做成像Antdesign的組件庫(kù)里包含的那么多,或者和新出得字節(jié)Arco組件庫(kù),因?yàn)樗鼈兠嫦虻氖窍到y(tǒng)級(jí)的解決方案,各行各業(yè)都可以用它,它面向的是一個(gè)大系統(tǒng),也許我們只涉及到了其中的20%,因?yàn)橐矝](méi)有一個(gè)系統(tǒng)能用到它所有的組件,所以我們自己在設(shè)計(jì)組件庫(kù)的時(shí)候,一定是按照我們自己項(xiàng)目的范圍去做組件庫(kù),而不是做一個(gè)大而全的,大而全的組件庫(kù)對(duì)我們也沒(méi)有意義。它們做的是公共平臺(tái),而我們要做的是一個(gè)專屬平臺(tái)。



2.3.3 方法庫(kù)建立


形成完基本庫(kù)和擴(kuò)展庫(kù)后,第三步是建立方法庫(kù)。方法庫(kù)告訴我們的是什么時(shí)候用,比如我做了一個(gè)多選框,這個(gè)多選框應(yīng)該什么時(shí)候用,是不是只要遇見(jiàn)一個(gè)選擇就去用多選框,肯定不是,應(yīng)該加以說(shuō)明什么時(shí)候用這個(gè)多選框。類似于是組件的設(shè)計(jì)說(shuō)明。


2.3.4 案例庫(kù)建立


最后再做一個(gè)案例庫(kù),最佳實(shí)踐庫(kù),具體組件什么時(shí)候用我們知道了,接著案例庫(kù)就是在告訴我們應(yīng)該如何正確的使用,或者說(shuō)的方法是什么。比如標(biāo)簽的左對(duì)齊和右對(duì)齊,這種情況都對(duì),什么時(shí)候用頂對(duì)齊,什么時(shí)候用左對(duì)齊,什么時(shí)候用右對(duì)齊呢?那么根據(jù)眼動(dòng)儀實(shí)驗(yàn)數(shù)據(jù)數(shù)據(jù)來(lái)看,并且結(jié)合給出一些工作中業(yè)務(wù)中的最佳實(shí)踐得案例放進(jìn)去,給使用的人去做指引。


所以設(shè)計(jì)師做的事情,不僅僅是應(yīng)用組件庫(kù)和創(chuàng)造組價(jià)庫(kù),還應(yīng)該指導(dǎo)其他設(shè)計(jì)師,指導(dǎo)開(kāi)發(fā)人員在去復(fù)用每個(gè)頁(yè)面組件的的時(shí)候,應(yīng)該怎么正確的使用,這也是在B端設(shè)計(jì)中一個(gè)關(guān)鍵的環(huán)節(jié),同時(shí)我們的視覺(jué)系統(tǒng)一定也是和業(yè)務(wù)有關(guān)聯(lián)度的,所以在B端中做設(shè)計(jì)一定也不會(huì)脫離業(yè)務(wù)去做,我們一定要聯(lián)系到實(shí)際的業(yè)務(wù)場(chǎng)景中,這個(gè)業(yè)務(wù)場(chǎng)景指的就是業(yè)務(wù)和視覺(jué)的結(jié)合,在做C端的時(shí)候,業(yè)務(wù)場(chǎng)景一定不會(huì)比B端多,C端的業(yè)務(wù)場(chǎng)景大多是定制化的業(yè)務(wù)場(chǎng)景,它要求的是個(gè)性化,不要求通用,盡量得個(gè)性化,比如圖標(biāo)、按鈕、頁(yè)面,而B端需要統(tǒng)一化,中臺(tái)組件庫(kù)的落地,可以大大提高設(shè)計(jì)師的工作效率和開(kāi)發(fā)人員的協(xié)同效率,嚴(yán)謹(jǐn)?shù)恼{(diào)用組件使用組件,可以使得系統(tǒng)頁(yè)面保持高度的一致。



2.4 認(rèn)識(shí)格式塔原則


2.4.1接近性


如圖1:可以看出縱列的關(guān)系更緊密,因?yàn)榭v間距小于行間距。


如圖2:可以看出行間距大于列間距,它得橫向關(guān)系更加緊密。通過(guò)圖中這樣的視覺(jué)設(shè)計(jì)為什么會(huì)感覺(jué)間距更加緊密呢?這屬于用戶心理學(xué)的應(yīng)用,如果元素相鄰的更近,元素之間的關(guān)系就會(huì)更加的緊密。


如圖3:如果元素相鄰的關(guān)系都是保持一樣的,那么它們的關(guān)系是相對(duì)對(duì)等的。


由此可以得出結(jié)論,如果相鄰的關(guān)系越近,它們的關(guān)聯(lián)度就越近,如果相鄰的越遠(yuǎn),它們的關(guān)聯(lián)度就越遠(yuǎn)。


應(yīng)用案例:如圖4卡片中得標(biāo)題和內(nèi)容,設(shè)計(jì)中把標(biāo)題和內(nèi)容進(jìn)行區(qū)分,所以我們會(huì)做大量的留白,這樣的留白就會(huì)讓信息結(jié)構(gòu)具有層次感,層次感就是指它們信息結(jié)構(gòu)的關(guān)聯(lián)度,如果想讓它們有關(guān)聯(lián)度,就讓它們距離近一點(diǎn)不要做區(qū)分,如果不想讓它們有關(guān)聯(lián)度,或者關(guān)聯(lián)度出現(xiàn)一個(gè)等級(jí)的區(qū)分,那么就可以加一條線,讓它們之間的關(guān)聯(lián)度分隔開(kāi)。這就是格式塔接近性的應(yīng)用。



2.4.2 相似性


如圖5:如果去區(qū)分右邊的形狀,通常我們會(huì)根據(jù)形狀進(jìn)行區(qū)分,因?yàn)槿说臐撘庾R(shí)會(huì)認(rèn)為相似的形狀會(huì)更有相關(guān)的分類性。這就是格式塔中的相似性原則。


應(yīng)用案例:如果文字的標(biāo)題大小是保持一致的,包括它有統(tǒng)一的大小,統(tǒng)一的色彩,統(tǒng)一的字號(hào),那系統(tǒng)中的其他同樣功能的地方,都應(yīng)該用統(tǒng)一的文字,這就是格式塔相似性的應(yīng)用,比如圖標(biāo)也是一樣,只有用了相似的圖形大小,相似的顏色,在相同的位置,用相同的圖標(biāo)進(jìn)行表達(dá),圖標(biāo)之間的設(shè)計(jì)才具有相似性。


2.4.3 主體與背景


如圖6:可以看到有一個(gè)L,是主體與背景進(jìn)行了區(qū)分,如果在設(shè)計(jì)的時(shí)候讓L看的更加明顯,我們采用的辦法就是將主體的色彩或者形狀變的更加獨(dú)特,或者將背景的顏色變得更加分明,這樣就可以做到那個(gè)L看的更加明顯。這就是主題與背景區(qū)分原則。


應(yīng)用案例:比如警告彈出,可以用色彩去區(qū)分,目標(biāo)就是讓用戶看的更加得清晰,當(dāng)警告的時(shí)候給用戶一個(gè)警告的信息,當(dāng)成功的時(shí)候給用戶一個(gè)成功的信息。還有類似對(duì)話框的彈出,采用背景變暗和加陰影的方式,都使用到了格式塔的主體與背景變化關(guān)系的原理。因此應(yīng)用在我們?cè)O(shè)計(jì)系統(tǒng)中,前景和背景進(jìn)行區(qū)分的時(shí)候,我們就可以通過(guò)色彩進(jìn)行區(qū)分,色彩的區(qū)分要保持統(tǒng)一,比如背景色彩透明度50%同時(shí)加一些背景模糊,其他的背景也需要保持一致,陰影也是一樣,如果把陰影放在一個(gè)平面上,距離平面越近,它得陰影越短,距離平面越遠(yuǎn),它得陰影越長(zhǎng),這也是陰影的層級(jí)關(guān)系。


2.4.4 封閉性


如圖7:可以看出這是一個(gè)四分之一的圓形。


如圖8:這個(gè)圖可以看出是一個(gè)五角星。


封閉性應(yīng)用案例:當(dāng)一個(gè)形狀被另外一個(gè)形狀或者被另外一個(gè)色彩阻斷的時(shí)候,并不影響人們對(duì)這個(gè)形狀額外得認(rèn)知,一定會(huì)腦補(bǔ)出另外一個(gè)形狀,這個(gè)原則和我們UI的關(guān)系是什么呢?比如一個(gè)loading,半圓一直在旋轉(zhuǎn),或者圖表中的圓占比,我們就可以判斷出誰(shuí)大誰(shuí)小,誰(shuí)多誰(shuí)少,判斷出當(dāng)前的進(jìn)程和位置,封閉性原則通常應(yīng)用在圖標(biāo)的設(shè)計(jì),圖表的設(shè)計(jì)和步驟條的設(shè)計(jì)中。


2.4.5 連續(xù)性


如圖9:可以看出用一些簡(jiǎn)單得形狀來(lái)體現(xiàn),其中三角形具有明顯的指向性,三角形箭頭指向右邊,上面五個(gè)是一組,可以看出它們具有連續(xù)性;另外一組三角形箭頭指向右下角,可以看出它們是連續(xù)的一組。不同的形狀會(huì)有連續(xù)性,箭頭也特別有指向性,這就是為什么返回和前要進(jìn)放在不同的位置,當(dāng)我們的數(shù)據(jù)需要有連續(xù)的時(shí)候,我們也要使用相似的形狀來(lái)表達(dá),這就是連續(xù)性原則的應(yīng)用。


同理如圖10:連續(xù)性一定是要有連續(xù)等階的變化,從左上角開(kāi)始,向下和向右我們可以看出有明顯的顏色連續(xù)等階變化,通過(guò)色彩的透明度也可以做到連續(xù)性。




2.5 組件的命名規(guī)則



2.5.1 如何正確的命名


很多公司或者不同公司有不同的命名方式,這個(gè)需要和團(tuán)隊(duì)開(kāi)發(fā)提前做溝通,主要以方便開(kāi)發(fā)習(xí)慣操作為主,如果不命名也不能非得說(shuō)成是錯(cuò)誤的,命名可以理解成是一件錦上添花的事情,因?yàn)橐磺卸家孕蕛?yōu)先,命名自然會(huì)影響工作效率,通常情況,組件的命名可以分成組件的名稱、級(jí)別、尺寸、狀態(tài),這樣的命名順序來(lái)進(jìn)行,這樣命名開(kāi)發(fā)使用也比較方便,因?yàn)槭前凑樟碎_(kāi)發(fā)的統(tǒng)一規(guī)則來(lái)進(jìn)行命名的。如圖所示:



2.5.2 更多命名英文詞匯


當(dāng)英文不好的時(shí)候,推薦大家記常用組件英文名,以及常用狀態(tài)名、級(jí)別名、內(nèi)部名、尺寸名和位置名,那這些英文也幾乎涵蓋了工作中80%的英文詞匯,收藏記憶哦~



文章來(lái)源:站酷   作者:飛魚十七

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

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

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



分享本文至:

日歷

鏈接

個(gè)人資料

存檔