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

本期文章來自：南山可

原文鏈接：

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

作者dribbble主頁：

https://dribbble.com/Asazzywei

前言

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

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

目錄

一、畫板命名

二、圖層與組命名

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

四、切圖命名

 一、畫板命名 

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

整體遵循以下公式：

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

針對不同情況我們一一解釋 

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

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

好貨商城/分類

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

好貨商城/首頁/搜索/input 

好貨商城/首頁/搜索/regular

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

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

 二、圖層與組命名 

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

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

圖層layer有多種情況 :

文字 （text） 

圖片 （image）

線條 （line）

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

切圖（slice） 

組件（symbol） 

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

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

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

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

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

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

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

 三、控件命名方式 

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

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

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

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

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

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

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

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

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)航欄是分開來的，但在日常設(shè)計(jì)中狀態(tài)欄和導(dǎo)航欄一般合并為一個navigation bar。

1.2 搜索欄

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

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

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

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

1.4 工具欄

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

2. UI視圖 (views)

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

概括來講，模態(tài)需要中斷當(dāng)前進(jìn)行的任務(wù)，去開啟另一個任務(wù)或者內(nèi)容。一般通過遮罩的形式中斷當(dāng)前頁面，彈出對話框或者浮層、活動視圖等。因此模態(tài)這種手段具有強(qiáng)制性，一般用在比較重要的功能或者比較重要的事項(xiàng)上比如警告。但也有一些新興的用法，例如通過模態(tài)視圖，在不打斷當(dāng)前閱讀進(jìn)度的情況下查看用戶評論或進(jìn)行互動。收起模態(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.活動視圖（Active view）3.內(nèi)容底板（content sheet）

警告框/提示框

彈出框/浮層

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

模態(tài)視圖

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

模態(tài)底板 

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

2.2 非模態(tài)類

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

• 輕量提示層（toast） 

• 可操作提示層（snackbar）

輕量提示層

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

可操作提示層（snackbar）

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

2.3 卡片類

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

3. 表單類控件

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

3.1 輸入類(entry list)

輸入列表

輸入列表一般為單行l(wèi)ist，包括標(biāo)題、輸入?yún)^(qū)、提示詞極限值等輔助信息；功能按鈕如刪除或隱藏輸入內(nèi)容。注意list有多種狀態(tài)，命名時需要作區(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ū)(色塊或邊框)、極限值等；

檢查器類控件

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

3.2展示列表（display list）

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

展開列表與常規(guī)列表

可操作列表

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

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

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

4. 其他控件

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

5. Icon及切圖命名方式

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

icon命名 

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

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

 四、切圖命名 

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

這里說幾個大原則：

1.避免大小寫，有些開發(fā)語言無法識別大小寫的文件；

2.絕對不允許有空格；

3.切圖請用分隔符“_”而不是“/”，“/”符號是用來分級的，只適用于我們在軟件中管理圖標(biāo)使用，不要命名在切圖上；

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

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

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

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

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

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

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

感謝閱讀~

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

大佬，請問這個控件叫啥？

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

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

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

因?yàn)楹每?，不吝推薦??