2019-6-24 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
設(shè)計(jì)師在日常溝通的時(shí)候，是不是經(jīng)常會(huì)遇到說(shuō)了半天結(jié)果大家說(shuō)的不是一件事的情況？筆者認(rèn)為，要解決這個(gè)問(wèn)題，首先要統(tǒng)一名詞，保證溝通的準(zhǔn)確度。下面是筆者整理的一些關(guān)于 APP（小程序）名詞的規(guī)范樣例，希望能幫助到剛剛?cè)胄械耐瑢W(xué)們。我們從下載并使用一個(gè) APP 的流程來(lái)展開(kāi)說(shuō)明。
1. 啟動(dòng)圖標(biāo)
點(diǎn)擊后可以啟動(dòng) APP 的圖標(biāo)，如圖分別是淘寶在不同場(chǎng)景下的啟動(dòng)圖標(biāo)。
2. 應(yīng)用市場(chǎng)展示頁(yè)
在應(yīng)用市場(chǎng)中為了幫助用戶(hù)在下載之前了解 APP 功能的頁(yè)面叫應(yīng)用市場(chǎng)展示頁(yè)，也能夠通過(guò)優(yōu)秀的 UI 設(shè)計(jì)吸引用戶(hù)下載。
如圖中紅框內(nèi)分別是蘇寧易購(gòu)、設(shè)計(jì)本、當(dāng)當(dāng)網(wǎng)的應(yīng)用市場(chǎng)展示頁(yè)。
3. 啟動(dòng)頁(yè)（閃屏）
APP 啟動(dòng)后加載過(guò)程中顯示的頁(yè)面叫啟動(dòng)頁(yè)，如圖是微信、有道云筆記、得到的啟動(dòng)頁(yè)。一般啟動(dòng)頁(yè)的設(shè)計(jì)都會(huì)比較簡(jiǎn)潔，只有啟動(dòng)圖標(biāo)+solgen，或是吉祥物、一張精美圖片的形式。
4. 廣告頁(yè)
國(guó)內(nèi)一些公司由于變現(xiàn)困難在啟動(dòng)頁(yè)之前或之后，進(jìn)入主頁(yè)之前加了一張廣告頁(yè)，主要用來(lái)顯示接的廣告或自己公司的運(yùn)營(yíng)活動(dòng)，可以跳轉(zhuǎn)鏈接或打開(kāi)其他 APP。
如圖是 UC瀏覽器、網(wǎng)易云音樂(lè)、寶寶樹(shù)的廣告頁(yè)。
5. 引導(dǎo)頁(yè)
用戶(hù)第一次打開(kāi) APP 后為用戶(hù)介紹 APP 主要功能的頁(yè)面，只顯示一次，或是 APP 版本更新后用來(lái)介紹新版本新功能。
如圖是前程無(wú)憂(yōu) APP 的引導(dǎo)頁(yè)。
6. 首頁(yè)
進(jìn)入 APP 后默認(rèn)顯示的頁(yè)面，如圖是微信、澎湃新聞、淘寶的首頁(yè)。
7. 一級(jí)頁(yè)面
一般指通過(guò)底部標(biāo)簽切換的方式能夠到達(dá)的頁(yè)面。如：
8. 二級(jí)頁(yè)面
指通過(guò)一次反饋操作能夠回到一級(jí)頁(yè)面的頁(yè)面，叫二級(jí)頁(yè)面。
如圖分別是微信聊天頁(yè)面、朋友圈頁(yè)面、支付寶我的余額頁(yè)面，它們都是二級(jí)頁(yè)面。
9. 注冊(cè)登錄頁(yè)面
用戶(hù)注冊(cè)賬號(hào)、登錄賬號(hào)的頁(yè)面。如圖是洪恩故事的注冊(cè)登錄頁(yè)。
10. 個(gè)人主頁(yè)/我的頁(yè)面
顯示用戶(hù)個(gè)人信息、和用戶(hù)有關(guān)的訂單、收藏、優(yōu)惠券、課程、商品等等信息的頁(yè)面。
如圖是 luckin 咖啡、家長(zhǎng)幫、丁香醫(yī)生的個(gè)人主頁(yè)。
11. 菜單導(dǎo)航頁(yè)
包含很多分類(lèi)、不同欄目，可以跳轉(zhuǎn)到很多個(gè)不同內(nèi)容頁(yè)面的頁(yè)面叫做菜單導(dǎo)航頁(yè)。一般首頁(yè)大部分屬于菜單導(dǎo)航頁(yè)，如我們的 pro 小程序的首頁(yè)就是一個(gè)菜單導(dǎo)航頁(yè)。
如圖是一條、新世相閱讀、美圖秀秀的菜單導(dǎo)航頁(yè)。
12. 搜索頁(yè)面
用于搜索的頁(yè)面。有的 APP 沒(méi)有單獨(dú)的搜索頁(yè)面只有一個(gè)輸入框，有的有單獨(dú)的，因?yàn)榭梢苑乓恍┩扑]內(nèi)容或廣告位。
如圖是喜馬拉雅 FM、貝貝、搜狗閱讀的搜索頁(yè)。
13. 設(shè)置頁(yè)面
更改 APP 設(shè)置的頁(yè)面，如圖是百度閱讀、淘票票、夸克瀏覽器的設(shè)置頁(yè)面。
14. 詳情頁(yè)面
展示內(nèi)容詳細(xì)信息的頁(yè)面，如圖分別是淘寶的商品詳情頁(yè)、起點(diǎn)學(xué)院的課程詳情頁(yè)、今日頭像的咨詢(xún)?cè)斍轫?yè)。
15. 關(guān)于我們頁(yè)面
介紹 APP 版本信息、功能介紹、公司信息、聯(lián)系方式、版權(quán)聲明的頁(yè)面。
如圖分別是夸克瀏覽器、極客時(shí)間、火辣健身的關(guān)于我們頁(yè)面。
16. 意見(jiàn)反饋?lái)?yè)面
一般的 APP 都會(huì)設(shè)計(jì)一個(gè)意見(jiàn)反饋功能來(lái)收集用戶(hù)需求，對(duì)應(yīng)的頁(yè)面就是意見(jiàn)反饋?lái)?yè)面。
如圖分別是貝貝、阿里釘釘、花生地鐵的意見(jiàn)反饋?lái)?yè)。
APP 中的頁(yè)面類(lèi)型大致可以分為以上這些，上邊所寫(xiě)的頁(yè)面名稱(chēng)是被使用得最多的、最規(guī)范的名稱(chēng)。溝通時(shí)使用上面的頁(yè)面名稱(chēng)應(yīng)該 90% 的成員都能理解。
對(duì)于不同類(lèi)型的頁(yè)面名稱(chēng)一般設(shè)計(jì)師用的比較多，叫法也最準(zhǔn)確，以上名稱(chēng)是在一些專(zhuān)業(yè)的 UI 設(shè)計(jì)網(wǎng)站查閱資料，又和幾個(gè)設(shè)計(jì)師朋友確認(rèn)后擬定的，準(zhǔn)確度可以保證。
1. 編程語(yǔ)言
人的語(yǔ)言可以分為漢語(yǔ)、英語(yǔ)、法語(yǔ)等等，計(jì)算機(jī)的語(yǔ)言同樣可以分為 java、php、html 等等，這些語(yǔ)言就是編程語(yǔ)言。不同的程序員會(huì)的語(yǔ)言不同，每一種語(yǔ)言都需要單獨(dú)學(xué)習(xí)。
2. 程序
通過(guò)編程語(yǔ)言給計(jì)算機(jī)下達(dá)任務(wù)，讓它理解我們要做什么。用編程語(yǔ)言給計(jì)算機(jī)/手機(jī)下達(dá)的任務(wù)書(shū)就是程序。
3. 數(shù)據(jù)類(lèi)型
編程語(yǔ)言中用來(lái)區(qū)分?jǐn)?shù)據(jù)格式的標(biāo)記，如記錄數(shù)字和記錄漢字就要使用不同的數(shù)據(jù)類(lèi)型。
如：
4. 變量
沒(méi)有固定值的量，例如：定義一個(gè)變量 X 表示繪本名稱(chēng)，那 X 可能叫《我不喜歡哭》，也可能叫《鱷魚(yú)媽媽》。即用一個(gè)單詞表示物體的一個(gè)屬性，如上面說(shuō)的繪本標(biāo)題。
5. 接口
電腦需要調(diào)用手機(jī)里面的信息，這時(shí)候你會(huì)拿一根數(shù)據(jù)線(xiàn)將電腦手機(jī)連接起來(lái)，電腦和手機(jī)上連接數(shù)據(jù)線(xiàn)的接口就是傳說(shuō)中的 API 接口──即獲取數(shù)據(jù)、獲取某種功能的通道。
如在 pro 小程序中要想在前端展示文章，那么在定義完文章標(biāo)題的字號(hào)、顏色等等后就需要設(shè)計(jì)師提供給接口獲取具體的文章內(nèi)的文字，常說(shuō)的 API 就是接口的意思。
6. 客戶(hù)端（前端）和后臺(tái)
客戶(hù)端是用戶(hù)使用軟件時(shí)能夠看到的軟件界面，后臺(tái)是控制前端內(nèi)容、功能的控制器，一般給軟件開(kāi)發(fā)者使用。
7. 寫(xiě)死和后臺(tái)傳過(guò)來(lái)
寫(xiě)死就是程序員直接在 html 代碼中直接把具體文字寫(xiě)出來(lái)，想修改的話(huà)只能在代碼中進(jìn)行修改，后臺(tái)傳過(guò)來(lái)就行。程序員在 html 代碼中不寫(xiě)具體文字，而是寫(xiě)一個(gè)變量，這個(gè)變量可以在后臺(tái)修改成不同的內(nèi)容。
例如，要設(shè)計(jì)一個(gè)管理不同城市分公司的軟件，需要一個(gè)下拉選擇框切換不同城市的分公司，這個(gè)需求在技術(shù)上有兩個(gè)實(shí)現(xiàn)辦法：
第一種方案比較靈活，當(dāng)城市數(shù)據(jù)有變化（在新的城市成立了新的分公司）可以在后臺(tái)直接添加，前端不需要做修改。缺點(diǎn)是需要開(kāi)發(fā)相應(yīng)接口，有一定工作量。第二種是比較快速的辦法，省去了開(kāi)發(fā)接口的工作量。
具體使用哪種方案要根據(jù)具體場(chǎng)景選擇，如廣告位的圖片就不適合寫(xiě)死，而是要開(kāi)發(fā)對(duì)應(yīng)的接口能夠在后臺(tái)靈活更換修改。像導(dǎo)航欄中部的頁(yè)面名稱(chēng)的文字一般不會(huì)有變化就可以直接寫(xiě)死。
8. 服務(wù)器
提供服務(wù)的機(jī)器，如微信的服務(wù)器就提供了聊天、傳文件、視頻、朋友圈等服務(wù)，用戶(hù)連接服務(wù)器（登錄）后由服務(wù)器對(duì)數(shù)據(jù)和信息進(jìn)行處理，再返回給用戶(hù)結(jié)果，而不是在用戶(hù)自己的電腦/手機(jī)上處理。
9. 數(shù)據(jù)庫(kù)
儲(chǔ)存用戶(hù)信息、軟件內(nèi)容的地方，保存一切數(shù)據(jù)的倉(cāng)庫(kù)。
如我們 pro 小程序的專(zhuān)家文章就保存在自己的數(shù)據(jù)庫(kù)中，上次出問(wèn)題打不開(kāi)文章就是數(shù)據(jù)庫(kù)出了問(wèn)題，其余鏈接式的文章是保存在微信的服務(wù)器上，我們鏈接到微信的服務(wù)器上他為我們提供瀏覽文章的服務(wù)，數(shù)據(jù)庫(kù)是服務(wù)器的一部分。
10. 類(lèi)、對(duì)象、抽象和實(shí)例
抽象在技術(shù)術(shù)語(yǔ)里的意思是提煉出一個(gè)通用模板，然后基于模板做具象化的實(shí)現(xiàn)。
例如：在現(xiàn)實(shí)世界中關(guān)于人的分類(lèi)，會(huì)有男人、女人、老人和小孩，如果將這個(gè)具體的分類(lèi)抽象出一個(gè)類(lèi)別，得到的抽象結(jié)果就是人。所以，人就是一個(gè)抽象出來(lái)的分類(lèi)，也就是技術(shù)術(shù)語(yǔ)里面的「類(lèi)」。
在編程語(yǔ)言的世界中，通過(guò)程序語(yǔ)言描述現(xiàn)實(shí)世界中的事物時(shí)，使用的就是抽象的方法，將一類(lèi)事物抽象成一個(gè)類(lèi)。有了類(lèi)以后就可以根據(jù)類(lèi)具體出實(shí)例，如根據(jù)「人」這個(gè)類(lèi)可以具體出老人、小孩，這樣的人就叫實(shí)例。
11. 程序員說(shuō)的「打印」
在調(diào)試程序或開(kāi)發(fā)測(cè)試的時(shí)候經(jīng)常出現(xiàn)打印這個(gè)詞，程序員口中的打印不是用打印機(jī)打印出文字或圖片，而是表示結(jié)果輸出。這個(gè)輸出不是輸出到現(xiàn)實(shí)世界的紙張上，而是把程序運(yùn)行的結(jié)果輸出到他的電腦屏幕上，進(jìn)而查看程序運(yùn)行是否正確。這個(gè)把程序運(yùn)行的結(jié)果輸出到屏幕上的過(guò)程就叫打印。
12. 架構(gòu)和框架
架構(gòu)和框架是程序員經(jīng)常提到的兩個(gè)技術(shù)概念，在工作崗位上也有架構(gòu)師這一崗位。
我們通過(guò)舉例來(lái)理解這兩個(gè)概念，例如：修建房屋時(shí)會(huì)有一個(gè)總設(shè)計(jì)師負(fù)責(zé)設(shè)計(jì)整體藍(lán)圖和規(guī)劃，這個(gè)工作就可以理解為架構(gòu)師的工作。
架構(gòu)設(shè)計(jì)好后，繼續(xù)進(jìn)入具體施工的環(huán)節(jié)，施工時(shí)可以完全自己設(shè)計(jì)裝修方案，也可以使用一些現(xiàn)有的比較成熟的裝修模板來(lái)套用，這里的裝修模板就是框架?？蚣芫褪鞘褂矛F(xiàn)有的成熟技術(shù)框架簡(jiǎn)化開(kāi)發(fā)過(guò)程，降低復(fù)雜度、減少工作量?，F(xiàn)在很多軟件的開(kāi)發(fā)都會(huì)使用一些比較成熟的開(kāi)發(fā)框架代替純自主開(kāi)發(fā)來(lái)提率。
13. 控件和組件
任何一個(gè)網(wǎng)頁(yè)或 APP 都是由大量的輸入框、按鈕、圖文展示框組成的，這些組成頁(yè)面的最小元素就叫控件。一個(gè)按鈕是一個(gè)控件，一個(gè)輸入框也是一個(gè)控件。
而組件是一種功能更全面的升級(jí)版控件，可以把組件理解成多個(gè)控件的組合。如 tab 欄就是一個(gè)組件，它是由圖標(biāo)、文字、按鈕等組成的。
14. 進(jìn)程和線(xiàn)程
經(jīng)常聽(tīng)程序員討論進(jìn)程和線(xiàn)程，如涉及到一些復(fù)雜功能的時(shí)候程序員會(huì)說(shuō)已經(jīng)同時(shí)開(kāi)了幾個(gè)線(xiàn)程在處理了。
還是通過(guò)實(shí)例來(lái)說(shuō)明，例如：我們點(diǎn)擊一個(gè) APP 的啟動(dòng)圖標(biāo)，手機(jī)的操作系統(tǒng)就會(huì)給這個(gè) APP 分配運(yùn)行資源（CPU和內(nèi)存），分配好后這個(gè) APP 就會(huì)開(kāi)始運(yùn)行。這里說(shuō)的 APP 運(yùn)行就是一個(gè)進(jìn)程，也可以理解為每一個(gè)正在運(yùn)行的 APP 都是一個(gè)進(jìn)程，如我們同時(shí)打開(kāi)的微信和淘寶，那么就同時(shí)存在兩個(gè)進(jìn)程。當(dāng)手機(jī)的 cpu 資源或內(nèi)存不足時(shí)就會(huì)關(guān)閉當(dāng)前沒(méi)有正在使用的進(jìn)程（APP），進(jìn)程就會(huì)被終止，對(duì)應(yīng)的 APP 也就關(guān)閉了。
相對(duì)于進(jìn)程，線(xiàn)程是一個(gè)更小的程序運(yùn)行單位。一個(gè) APP 中可以包含多個(gè)線(xiàn)程，如負(fù)責(zé)發(fā)送聊天信息的線(xiàn)程、負(fù)責(zé)連接網(wǎng)絡(luò)的線(xiàn)程。APP 之所以能夠同時(shí)完成很多功能就是因?yàn)榇嬖诙鄠€(gè)線(xiàn)程，多個(gè)線(xiàn)程可以保證系統(tǒng)資源被合理地分配和利用。
15. 腳本
腳本這個(gè)詞出現(xiàn)的頻率也比較高，程序員有時(shí)候就會(huì)說(shuō)「弄一個(gè)腳本統(tǒng)一處理一下」。腳本也是一種計(jì)算機(jī)程序，一般用來(lái)代替人工重復(fù)的操作，例如：我們可以通過(guò)一個(gè)固定格式的表格，來(lái)把繪本信息導(dǎo)入到數(shù)據(jù)庫(kù)中，就是使用了腳本。
腳本一般沒(méi)有圖形界面，通過(guò)代碼命令的形式使用，腳本一般是程序員使用的。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com