chinesefreesexvideos高潮,欧美极品少妇性运交,久久久国产一区二区三区,99久久婷婷国产综合精品,成人国产一区二区三区

本期文章來(lái)自：南山可

原文鏈接：

https://www.ui.cn/detail/449121.html

作者dribbble主頁(yè)：

https://dribbble.com/Asazzywei

前言

最近在接手同事的源文件后，發(fā)現(xiàn)文件內(nèi)命名混亂，很難尋找到想要的目標(biāo)界面或者控件、設(shè)計(jì)元素，只能按順序查看，設(shè)身處地的想象到別人接到我做的命名混亂的源文件會(huì)如何抓狂，于是查找資料整理了這篇文章。網(wǎng)上有很多類似講解命名規(guī)范之類的文章，大而全且細(xì)，但我向來(lái)重實(shí)用，輕理論，希望把最簡(jiǎn)潔但核心的內(nèi)容羅列出來(lái)，令大家可以在短時(shí)間內(nèi)掌握規(guī)范命名的方法，提高自己的專業(yè)性。

考慮到UI崗位從業(yè)者的sketch普及率，因此以sketch為工作環(huán)境整理了這篇文章，望理解，也建議UI設(shè)計(jì)師跟隨潮流使用更高效易用的軟件來(lái)提高工作效率，降低協(xié)作成本。

目錄

一、畫(huà)板命名

二、圖層與組命名

三、控件命名（及各控件詳解）

四、切圖命名

 一、畫(huà)板命名 

畫(huà)板命名較簡(jiǎn)單，我們需要做的是避免一些常規(guī)錯(cuò)誤，盡量使畫(huà)板名稱規(guī)整易讀。在UI設(shè)計(jì)中，每個(gè)畫(huà)板對(duì)應(yīng)著一個(gè)界面，中小項(xiàng)目畫(huà)板基本維持在數(shù)十個(gè)甚至更少，因此其命名較之動(dòng)輒數(shù)百個(gè)的圖層要容易很多。那么具體如何命名呢？

整體遵循以下公式：

模塊（項(xiàng)目名）/一級(jí)分類/二級(jí)分類/狀態(tài)

針對(duì)不同情況我們一一解釋 

當(dāng)該界面層級(jí)最高時(shí)，我們只需要進(jìn)行最簡(jiǎn)單的命名如：

好貨商城（項(xiàng)目名）/首頁(yè) 

好貨商城/分類

當(dāng)界面層級(jí)不是最高時(shí)，我們需要再補(bǔ)充一個(gè)層級(jí)的名稱如：

好貨商城/首頁(yè)/搜索/input 

好貨商城/首頁(yè)/搜索/regular

這個(gè)命名的意思是從首頁(yè)進(jìn)入的搜索頁(yè)面，其中input則是指已經(jīng)鍵入了內(nèi)容。這種命名的優(yōu)點(diǎn)是可以清晰的闡述當(dāng)前界面的來(lái)源，上一步操作是什么，父界面是什么，即通過(guò)命名傳達(dá)出交互邏輯。

應(yīng)當(dāng)避免重名及“某某某copy”此類情況；

 二、圖層與組命名 

 Layer：零散的單個(gè)圖層只需以其自身屬性命名，如矩形、線條、圖片等。當(dāng)該圖層有明確意義時(shí)，也可使用當(dāng)前語(yǔ)義來(lái)命名，如矩形可以命名為bg(背景)，線條可以命名為section divide(分割線)，圖片可以命名為image(某某配圖)；

關(guān)于使用中英文的問(wèn)題看個(gè)人喜好和習(xí)慣，英文當(dāng)然最標(biāo)準(zhǔn)，但或許中文更易讀。事無(wú)絕對(duì)，選擇最適合的名字。例如banner這個(gè)詞，雖然是英文，但所有設(shè)計(jì)師都有對(duì)其有明確的認(rèn)知，使用它必然利于提高協(xié)作效率。

圖層layer有多種情況 :

文字 （text） 

圖片 （image）

線條 （line）

形狀（以矩形、圓形為主） 

切圖（slice） 

組件（symbol） 

其中切圖和組件都有獨(dú)立的命名規(guī)則，在這里不做解釋。另外幾項(xiàng)則可以用默認(rèn)的命名方式，即無(wú)需修改，或者僅在原本命名基礎(chǔ)上后綴數(shù)字。如line1、line2；矩形1、矩形2；當(dāng)它們有明確語(yǔ)義時(shí)可以酌情命名，如矩形作為背景時(shí)可命名為bg，線作為分割線時(shí)可命名為section divide(分割線)；

概括來(lái)說(shuō)，從高效角度講，單個(gè)圖層的命名不需要太過(guò)糾結(jié)，一方面因?yàn)槠鋽?shù)量過(guò)多，一方面因?yàn)橐驗(yàn)?strong>layer會(huì)嵌套進(jìn)組，共享一個(gè)組的名字，該組的名字是工作中需要重點(diǎn)識(shí)別的地方。 

Group：我們主要的命名工作實(shí)際上是組命名，大部分圖層都應(yīng)成組，利于操作的同時(shí)減少篩選信息的成本,多個(gè)圖層組成的組才是我們需要重點(diǎn)命名的設(shè)計(jì)最小元素。

組命名遵循嵌套的原則，即一級(jí)組/二級(jí)組/三級(jí)組，一般以功能模塊為主要命名原則，例如小說(shuō)首頁(yè)的主編推薦模塊，自然命名為主編推薦，如果是可復(fù)用的模塊則可以命名為card(Components：組件名稱)/主編推薦。 

symbol本質(zhì)上也是一個(gè)組，而且是我們進(jìn)行UI設(shè)計(jì)時(shí)最常用的組的種類，用symbol組件利于我們減少總的組的層級(jí)，將組保持在二至三層，因此在點(diǎn)擊某個(gè)最小級(jí)別元素時(shí)只需要2次點(diǎn)擊即可選中。 提高效率和使用體驗(yàn)。

針對(duì)大部分首屏設(shè)計(jì)較長(zhǎng)，承載內(nèi)容較多的情況，建議通過(guò)數(shù)字前綴來(lái)標(biāo)明其上下順序。

界面中的所有設(shè)計(jì)元素都能夠且應(yīng)該按照某種邏輯分門(mén)別類從而打組，應(yīng)當(dāng)避免出現(xiàn)落單圖層的情況，從而導(dǎo)致畫(huà)板的一級(jí)展開(kāi)欄混亂不堪。另外不要出現(xiàn)group copy此類情況，這會(huì)顯得我們不夠?qū)I(yè)，即便是復(fù)制的組件，我們也可以去添加一個(gè)數(shù)字后綴從而體現(xiàn)出一定邏輯性。

 三、控件命名方式 

控件或者說(shuō)組件是我們?nèi)缃裨O(shè)計(jì)中最常用到的設(shè)計(jì)元素的命名，尤其是sketch逐漸在UI設(shè)計(jì)領(lǐng)域普及的情況下，掌握基礎(chǔ)的原子設(shè)計(jì)理論，通過(guò)組件化設(shè)計(jì)元素可以提高設(shè)計(jì)效率、規(guī)范設(shè)計(jì)流程、減少后期維護(hù)成本。 

在了解控件的命名方式之前，我們需要知道，在當(dāng)下的設(shè)計(jì)環(huán)境下，控件已經(jīng)不僅僅局限于各系統(tǒng)廠商的定義范圍，例如ios端的navigation bar、status bar。我們?cè)谌粘９ぷ髦锌倳?huì)產(chǎn)出一些不在系統(tǒng)組件庫(kù)范圍內(nèi)的設(shè)計(jì)元素組，例如眾所周知的金剛區(qū)入口，再如淘寶等電商類產(chǎn)品首頁(yè)承載各種運(yùn)營(yíng)活動(dòng)的卡片區(qū)設(shè)計(jì)。我們可以籠統(tǒng)的概括其為內(nèi)容容器，但總歸是要有更詳細(xì)的名字來(lái)定義和區(qū)分，這便產(chǎn)生了許多新的控件，這些新的控件的命名實(shí)際上可以由設(shè)計(jì)師自由決定。 

因此簡(jiǎn)單的結(jié)論就是，對(duì)于平臺(tái)級(jí)官方控件我們應(yīng)當(dāng)使用其規(guī)范的命名，本篇文章會(huì)盡量列出，你也可以在官方文檔查閱。對(duì)于非原生控件，根據(jù)項(xiàng)目協(xié)作需要或者根據(jù)提升自己工作效率的訴求，去酌情命名。例如針對(duì)首頁(yè)的一些內(nèi)容性質(zhì)的復(fù)用模塊，我會(huì)使用card作為前綴來(lái)命名，因?yàn)檫@類設(shè)計(jì)是受卡片設(shè)計(jì)趨勢(shì)啟發(fā)的。

除此之外我們還需要知道，組件之間是可以相互嵌套的，例如一個(gè)card組件中會(huì)有多個(gè)icon組件、navigation組件中包含status組件；

很多時(shí)候我們會(huì)把具有相關(guān)性的一些組件匯總成一個(gè)大組件，通過(guò)移動(dòng)大組件來(lái)布局，效率要更高一些，也方便進(jìn)行界面管理和查看全局效果；

整體命名規(guī)則為 ：性質(zhì)/模塊/狀態(tài)(屬性) 例如 bar/status bar/black 

這樣命名主要考慮到在sketch中作圖的效率，使用“/”符號(hào)可以將同類組件的不同模塊與不同狀態(tài)作區(qū)分及二級(jí)嵌套，在實(shí)際工作中方便篩選和調(diào)用。

下面羅列出常用的組件，參考了iOS組件庫(kù)及Ant design組件庫(kù)：

1. 后綴bar（欄）

• 狀態(tài)欄（status bar） 

• 導(dǎo)航欄（navigation bar） 

• 搜索欄（search bar） 

• 標(biāo)簽欄/菜單欄（tab bar） 

• 工具欄（tool bar）

1.1 狀態(tài)欄+導(dǎo)航欄

在IOS系統(tǒng)控件中，狀態(tài)欄和導(dǎo)航欄是分開(kāi)來(lái)的，但在日常設(shè)計(jì)中狀態(tài)欄和導(dǎo)航欄一般合并為一個(gè)navigation bar。

1.2 搜索欄

search bar 有時(shí)會(huì)與導(dǎo)航欄合并，有時(shí)會(huì)單獨(dú)排列在導(dǎo)航欄下方。另外在Ant design中，search bar被劃分在輸入信息類控件(data entry)

1.3 標(biāo)簽欄/菜單欄

標(biāo)簽欄是標(biāo)簽導(dǎo)航中的核心控件，與之對(duì)應(yīng)的是抽屜導(dǎo)航中的抽屜控件(drawer)，抽屜式導(dǎo)航最早運(yùn)用于安卓系統(tǒng)，但在現(xiàn)今移動(dòng)端設(shè)計(jì)邊界趨向融合，一切以高效易用為首要原則，平臺(tái)差異化則顯得次要。在谷歌2019 IO大會(huì)上公布的最新安卓系統(tǒng)，采用了與IOS一致的home bar側(cè)面證實(shí)了這一點(diǎn)。標(biāo)簽欄又被稱作菜單欄、底部菜單欄等，主要功能是作為一級(jí)導(dǎo)航對(duì)信息進(jìn)行分類，便于用戶在不同模塊切換。

除此之外還有一類特殊tab bar，即tabs與Segmented Control(在ios組件庫(kù)中稱為范圍欄scope bar)，功能為二級(jí)導(dǎo)航分類。

1.4 工具欄

工具欄是操作類功能的集合，主要承載各類操作。

2. UI視圖 (views)

2.1 模態(tài)類（modal）

概括來(lái)講，模態(tài)需要中斷當(dāng)前進(jìn)行的任務(wù)，去開(kāi)啟另一個(gè)任務(wù)或者內(nèi)容。一般通過(guò)遮罩的形式中斷當(dāng)前頁(yè)面，彈出對(duì)話框或者浮層、活動(dòng)視圖等。因此模態(tài)這種手段具有強(qiáng)制性，一般用在比較重要的功能或者比較重要的事項(xiàng)上比如警告。但也有一些新興的用法，例如通過(guò)模態(tài)視圖，在不打斷當(dāng)前閱讀進(jìn)度的情況下查看用戶評(píng)論或進(jìn)行互動(dòng)。收起模態(tài)視圖后可以繼續(xù)當(dāng)前任務(wù)或接續(xù)閱讀進(jìn)度。 

• 警告框alert (注意彈框類可統(tǒng)稱為dialog) 

• 彈出框/浮層（popovers） 

• 模態(tài)視圖（modal） 

• 模態(tài)底板(bottom sheets) 包括：1.操作列表（action sheet）2.活動(dòng)視圖（Active view）3.內(nèi)容底板（content sheet）

警告框/提示框

彈出框/浮層

標(biāo)準(zhǔn)彈出框一般為icon+文案的形式，但一些簡(jiǎn)易彈出框?yàn)閱渭兾淖只騣con的形式，每個(gè)選項(xiàng)一般承載一個(gè)功能語(yǔ)義。

模態(tài)視圖

傾向完成某個(gè)獨(dú)立任務(wù)時(shí)采用，此任務(wù)較重要且需要中斷上一級(jí)別的體驗(yàn)，注意不是簡(jiǎn)單的功能入口的集合，而是在模態(tài)視圖card上完成某個(gè)任務(wù)。

模態(tài)底板 

此項(xiàng)控件都是由底部喚出，承載多種功能語(yǔ)義，應(yīng)用范圍廣，場(chǎng)景多樣。操作列表源自IOS組件庫(kù)無(wú)需多說(shuō)，常用來(lái)確認(rèn)操作，如刪除；活動(dòng)視圖多用于分享場(chǎng)景；內(nèi)容模態(tài)則是后來(lái)興起的一種設(shè)計(jì)手段，其目的是不中斷當(dāng)前體驗(yàn)的同時(shí)滿足用戶的多樣交互需求。

2.2 非模態(tài)類

非模態(tài)視圖與模態(tài)視圖的區(qū)別是它將在幾秒時(shí)間后自動(dòng)消失，不強(qiáng)制用戶執(zhí)行某種操作來(lái)收起。

• 輕量提示層（toast） 

• 可操作提示層（snackbar）

輕量提示層

多用來(lái)表明狀態(tài)信息，且傾向成功的操作，例如分享成功、已收藏；優(yōu)點(diǎn)在于反饋輕量，既能傳達(dá)結(jié)果，又不會(huì)過(guò)于打擾。

可操作提示層（snackbar）

基本形式為文案+功能按鈕，即對(duì)狀態(tài)的解釋，及對(duì)應(yīng)的可執(zhí)行操作，例如騰訊撤回消息后的snackbar提供了，你撤回一條消息這一狀態(tài)及重新編輯這一操作。 

2.3 卡片類

卡片視圖(card view)是當(dāng)前所有產(chǎn)品首頁(yè)設(shè)計(jì)都會(huì)用到的內(nèi)容容器。一般會(huì)包含文字、背景、圖片、icon等元素。作為二級(jí)頁(yè)面的入口，以內(nèi)容呈現(xiàn)為主、圖文混排等等。當(dāng)然也有一些特殊卡片視圖，如可左右滑動(dòng)的隱藏視圖 (slide view)

3. 表單類控件

表單類控件主要指涉及到信息輸入(Data entry)與信息展示(Data display)兩個(gè)方面的控件，主要形式是：列表(list)

3.1 輸入類(entry list)

輸入列表

輸入列表一般為單行l(wèi)ist，包括標(biāo)題、輸入?yún)^(qū)、提示詞極限值等輔助信息；功能按鈕如刪除或隱藏輸入內(nèi)容。注意list有多種狀態(tài)，命名時(shí)需要作區(qū)分如 “user name-list/regular”、“user name-list/input”，輸入類列表常用的狀態(tài)包括常規(guī)態(tài)、輸入態(tài)、不可用態(tài)、校驗(yàn)態(tài)。 

文本輸入框（TextareaItem） 

包含輔助提示文案、內(nèi)容輸入?yún)^(qū)(色塊或邊框)、極限值等；

檢查器類控件

包括時(shí)間或地址檢查器(picker)、滑塊檢查器(slidder)、步進(jìn)器(stepper)圖片檢查器；

3.2展示列表（display list）

展示列表同樣為單行l(wèi)ist，包括icon/圖片、標(biāo)題、副文案、箭頭指引。展示列表有時(shí)僅僅展示信息，如展示規(guī)則的展開(kāi)列表設(shè)計(jì)，但大部分時(shí)間，展示列表都指向一個(gè)次級(jí)界面，例如設(shè)置中心的關(guān)于我們list，指向一個(gè)產(chǎn)品介紹的次級(jí)界面，微信的消息界面list，指向聊天界面。

展開(kāi)列表與常規(guī)列表

可操作列表

由于其本質(zhì)仍然是展示選項(xiàng)，因此歸類于展示列表

金剛區(qū)/網(wǎng)格列表（Grid） 

網(wǎng)格列表本質(zhì)上是一組入口的集合，和首頁(yè)金剛區(qū)相同，因此將其歸為一類，目前廣泛的應(yīng)用于首頁(yè)及個(gè)人中心。當(dāng)然也有很多其他用法， 這里不做贅敘。

4. 其他控件

包括一些不方便劃分的小型控件，如勾選框、開(kāi)關(guān)、小紅點(diǎn)、加載控件、輪播點(diǎn)；

5. Icon及切圖命名方式

最常用的切圖實(shí)際上是icon，但切圖并不僅限于icon，同樣包括一些圖片類內(nèi)容，一般為png格式。另外一些標(biāo)準(zhǔn)的icon可以輸出svg格式上傳至iconfont，便于提高開(kāi)發(fā)效率，質(zhì)量也較png要高很多。好吧偏題了，這里是講命名的。以我們使用sketch工作為例icon命名和切圖命名應(yīng)當(dāng)分開(kāi)來(lái)考慮。 

icon命名 

icon命名主要考慮到在sketch文件中的命名方式，為了通過(guò)symbol的形式管理icon，我們通常需要用“/”來(lái)對(duì)icon進(jìn)行分類，標(biāo)準(zhǔn)版格式遵循icon/模塊/功能-狀態(tài)這樣的邏輯，極簡(jiǎn)版則是 icon/功能-狀態(tài)，這樣我們可以在控件庫(kù)一級(jí)一級(jí)的尋找到目標(biāo)icon。 

概括來(lái)說(shuō)，icon規(guī)范命名是為了在sketch工作環(huán)境下提高效率及規(guī)范管理icon素材。 

 四、切圖命名 

切圖命名的服務(wù)對(duì)象是開(kāi)發(fā)人員，而不是設(shè)計(jì)師，因此對(duì)切圖命名要照顧開(kāi)發(fā)同學(xué)的習(xí)慣或者規(guī)則。

這里說(shuō)幾個(gè)大原則：

1.避免大小寫(xiě)，有些開(kāi)發(fā)語(yǔ)言無(wú)法識(shí)別大小寫(xiě)的文件；

2.絕對(duì)不允許有空格；

3.切圖請(qǐng)用分隔符“_”而不是“/”，“/”符號(hào)是用來(lái)分級(jí)的，只適用于我們?cè)谲浖泄芾韴D標(biāo)使用，不要命名在切圖上；

4.不允許有數(shù)字(話說(shuō)在整理這篇文章之前我經(jīng)常會(huì)加數(shù)字來(lái)表明邏輯關(guān)系)；

補(bǔ)充一點(diǎn)偏題的，我們?cè)O(shè)計(jì)稿經(jīng)常會(huì)用regular、medium、bold三種粗細(xì)的文字，而在H5界面中，字體只有regular和bold兩種，即或者細(xì)或者粗，沒(méi)有中粗，大家一定記好，有機(jī)會(huì)要多多和開(kāi)發(fā)溝通。

OK，按理說(shuō)該整理一份控件列表方便大家查閱，但是靈機(jī)一動(dòng)想到了張小龍前輩講過(guò)的最后一條原則，以上我說(shuō)的都是錯(cuò)的。不要被條條框框限制。

擁有扎實(shí)的整理技能VS有強(qiáng)烈的想整理好文件的意愿，這兩者里我認(rèn)為后者更為重要，當(dāng)你想要做某件事時(shí)你有無(wú)數(shù)方法去踐行。但更多時(shí)候我們是明知可以做卻不作為。

工作中場(chǎng)景多變，除非有很強(qiáng)的維護(hù)組件庫(kù)的需求，否則沒(méi)有足夠的時(shí)間與精力去規(guī)范每一個(gè)小細(xì)節(jié)的命名。另外在高效作圖期間有些人并不習(xí)慣被命名工作打斷思路，那我還寫(xiě)這么多廢話干啥？

首先，在真正需要時(shí)，要有能拿的出手整理文件素材的能力。其次，涉及到項(xiàng)目協(xié)作時(shí)要考慮到他人體驗(yàn)，要有共情思維，比如有同事管我要某個(gè)源文件時(shí)我不會(huì)立即丟過(guò)去，而是先打開(kāi)整理一下圖層，當(dāng)他接手時(shí)會(huì)體會(huì)到你的嚴(yán)謹(jǐn)性以及對(duì)他人的尊重。

最后，不看這篇文章，不了解匯總的控件的專業(yè)名詞，你就做不好命名了嘛?不是的，而是明知能做好命名，但卻不去做?；蛘呤菓?，或者是壞習(xí)慣，當(dāng)你意識(shí)到這件事，本身就是很大的進(jìn)步了。

感謝閱讀~

相關(guān)文章推薦閱讀：

大佬，請(qǐng)問(wèn)這個(gè)控件叫啥？

 文中觀點(diǎn)歸作者所有 

 更多精彩文章 請(qǐng)識(shí)別二維碼關(guān)注我們！

歡迎留言、點(diǎn)贊，分享！

因?yàn)楹每矗涣咄扑]??