有了解和學習 B 端的同學必然都聽說過 SaaS 這個詞，這在 B 端行業(yè)是個非常重要的產(chǎn)品形式和分支。
雖然它重要，但新手對這東西的理解充滿了讓人遺憾的扭曲。比如常見的誤解式提問，Saas 應該怎么設計？適用哪些設計風格？
……
所以我從最底層的技術層面，來解析 Saas 到底是什么，在未來你再也不用擔心對這個詞匯一知半解，無法正常參與業(yè)務討論了。
講解什么是 Saas，或者剛剛圖例出現(xiàn)的 Paas、laas 是什么，首先要認識一個問題，一個需要聯(lián)網(wǎng)的軟件，是如何落地的，需要哪些前提條件。
通常，我們可以把一個普通的聯(lián)網(wǎng)產(chǎn)品要正式上線并使用，需要滿足 9 個層級的條件，我們簡稱 “9層塔”，分別是：
下面，我們根據(jù)每個大層級來解釋一下，它們分別都是什么。
1.1 基礎設施層
基礎設施層是一切網(wǎng)絡服務的根基，由現(xiàn)實世界的硬件組成，是所有技術、代碼、數(shù)據(jù)的運行基礎。
層1：網(wǎng)絡（Networking）
即基礎的互聯(lián)網(wǎng)電信寬帶服務，通過電信運營商在各地搭建聯(lián)網(wǎng)用的設備，并使用線纜相互連接，滿足數(shù)據(jù)的物理傳輸可能。
比如你想要在家上網(wǎng)沖浪（非移動上網(wǎng)），最基礎的條件是就是購買和開通寬帶服務，通過接入光纖的形式，實現(xiàn)從家中連接到互聯(lián)網(wǎng)世界的可能。
層2：服務器（Serves）
服務器，本質(zhì)上也是一臺電腦。有了聯(lián)網(wǎng)的條件，我們就要把網(wǎng)絡接入到這臺 “電腦” 上，讓它來完成各種數(shù)據(jù)的處理和存儲。
但不管它能做什么，要做什么，首先你得先有這臺設備，不然后續(xù)的工作都無從談起，所以服務器指的就是用來完成后續(xù)工作的電腦設備。
層3：存儲（Storage）
存儲就是硬盤，你想要運行的任何程序、代碼，還是想要收集的數(shù)據(jù)，都需要容納的地方，那就是硬盤空間。存儲就是關聯(lián)到服務器的硬盤，是數(shù)據(jù)存儲的物理環(huán)境。
之所以硬盤被獨立出出來，而沒有把 CPU 內(nèi)存這些拿出來，是因為數(shù)據(jù)的存儲和安全（物理上）是網(wǎng)絡服務的重中之重。CPU、內(nèi)存、電源壞了，替換就可以，硬盤損壞導致數(shù)據(jù)的丟失是無論如何不可能接受的。
所以，工程師們開發(fā)了非常多特殊的技術來保障存儲的穩(wěn)定和安全。
1.2 技術應用層
技術應用層，就是具備了網(wǎng)絡、服務器、硬盤以后，讓這些基礎設施充分發(fā)揮作用和能效的相關技術。
層4：虛擬化（Virtualization）
虛擬化是個比較抽象的概念，它是一種資源利用的技術，讓服務器最大化的利用和分配自己的資源。
比如一臺服務器，有8核心、8G內(nèi)存、8G存儲，如果賣個一個客戶運行一個程序，那么很可能這個這個程序日常只使用一個核心的算力，1GB內(nèi)存，1G不到的存儲，剩下的算力資源不就浪費了嘛？
于是，虛擬技術就可以把這臺服務器切割成 8 臺 “虛擬機” 賣給 8 個這樣的客戶。讓他們在這臺設備上運行 8 個不同的程序，并根據(jù)它們各自使用的消耗靈活分配 CPU 和內(nèi)存資源。
所以，今天如果你想要搭建一個網(wǎng)站，云服務商出售的 “虛擬主機”，就是在實體服務器主機上切割出來的一部分。這樣客戶省錢了，商家利潤率也更高了！
層5：操作系統(tǒng)（OS）
每臺電腦都有自己的操作系統(tǒng)，我們熟知的 Windows、Mac OS等等。如果硬件沒有搭載操作系統(tǒng)，那它們就只是一堆工藝精密的廢鐵。
對于服務器來說也是，任何服務器想要正常運行，都必須搭載相關的服務器操作系統(tǒng)，有了基本的系統(tǒng)，我們才能創(chuàng)建程序，讓服務器去運行我們想要的功能。
前面提到的虛擬機，就允許同一臺服務器通過虛擬技術運行多個系統(tǒng)。
層6：中間件
中間件也是個比較復雜的技術概念，它是個獨立系統(tǒng)軟件服務程序，是軟件的直接面向?qū)ο螅ǘ皇欠掌鳎?，是一種支撐軟件。
舉個不太嚴謹?shù)睦?，我們常?guī)的邏輯是一個程序?qū)慌_服務器（或虛擬機），但真實情況往往是一個程序會關聯(lián)好幾個服務器和不同的系統(tǒng)，來完成不同的網(wǎng)絡服務。正常情況下，你需要對每個服務器和系統(tǒng)進行適配。
而中間件的作用就是幫助你省掉這個麻煩的步驟，讓你只需要對接唯一的翻譯和話事人，他會幫你向不同的任務對象傳達你的要求。
層7：程序環(huán)境（Rumtime）
程序環(huán)境，就是編譯代碼用的環(huán)境。我們常聽說的 C 語言、C++、PHP、Java、.Net 等編程語言，都需要安裝一個對應的運行環(huán)境。
許多熱衷電腦游戲的同學一定很熟悉游戲第一次啟動觸發(fā)的 Java 安裝界面，那就證明這個游戲中運用到了 Java 的代碼，如果你沒有 Java 的運行環(huán)境，那么它們就無法生效。
1.3 產(chǎn)品表現(xiàn)層
層8：應用（Application）
在這個系統(tǒng)下，應用程序指的不是你在自己電腦手機上安裝的程序。而是安裝在服務器上運行的程序，不管是后端程序還是前端程序。
它們需要使用某些特定的程序語言來編寫，并運行在上面所說的對應環(huán)境中。我們所說的后端開發(fā)，通常就是開發(fā)服務器所運行的程序的程序員。
層9：數(shù)據(jù)（Data）
這個詞放在這里可能有比較大的歧義，數(shù)據(jù)實際上就是使用這個程序所產(chǎn)生出來的數(shù)據(jù)，而不是單指數(shù)據(jù)庫（數(shù)據(jù)庫也是環(huán)境的一部分）。
比如你打開一個網(wǎng)站注冊了賬號，上傳了頭像，那么這些信息就是使用程序所額外產(chǎn)生的數(shù)據(jù)，它是項目正常運作的必然產(chǎn)品。
1.4 SaaS 到底是什么
理解上面的9個層級的內(nèi)容是什么，我們就可以看下面這張圖表了。
SaaS 全程 Software-as-a-Service，翻譯叫 “軟件即服務”，講人話就是 “賣聯(lián)網(wǎng)軟件” 的。
前面提的 9 個層級，除了最后一層數(shù)據(jù)是我們普通人可以負責的，其它每個層級都需要對應的開發(fā)和工程師來負責對吧，那么我們普通人還是企業(yè)就不能使用網(wǎng)絡軟件服務了嘛？
這肯定是不符合事物發(fā)展規(guī)律的。
SaaS 的存在，就是讓用戶不用管什么服務器、代碼、中間件這些有的沒的高深玩意，直接讓你在瀏覽器或本地客戶端上直接使用這款聯(lián)網(wǎng)軟件，并創(chuàng)建對應的數(shù)據(jù)信息。
換句話講，只要這個軟件是聯(lián)網(wǎng)的，且軟件本身的功能就是服務的核心（劃重點：社區(qū)電商類軟件的服務顯然不是軟件功能本身），它就是 SaaS。SaaS 既可以免費，也可以是通過批量出售軟件功能的使用權(quán)來賺取收益。
免費情景：
微軟：如果你使用了基于 Web 的電子郵件服務（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已經(jīng)使用一種形式的 SaaS。
https://azure.microsoft.com/zh-cn/overview/what-is-saas/
付費情景：
在 B 端的語境下，SaaS 通常就是指制作一個面向商業(yè)用戶的聯(lián)網(wǎng)軟件，然后批量出售這個軟件的使用權(quán)。它并沒有特指這個軟件必須是 CRM、ERP、HRM 還是商用 HMI……
所以明白了嘛，SaaS 只是一個商業(yè)形式或技術形式的統(tǒng)稱，它根本沒有具體的設計規(guī)范或者學習方法，完全根據(jù)業(yè)務的實際需求和場景決定。
最后，再問你們一個問題，你們現(xiàn)在負責的項目是 SaaS 嘛？
在 9 層塔中，SaaS 是完全制作好軟件讓用戶直接上手使用的軟件，而 PaaS 和 IaaS 就不一樣。
2.1 PaaS
PaaS 全文 Platform as a Service，是平臺即服務的簡稱。這屬于完全技術化的服務，是非程序員的一般用戶難以參與到的業(yè)務類型了。
即服務商提供了基礎的 7 層服務，只要用戶購買了這些使用權(quán)，那么就可以直接在這個基礎上編寫或安裝運行的程序進行使用了。
比如全球最大的開源 CMS 博客程序 WordPress，是由 PHP+MySQL 編寫的，如果要創(chuàng)建這樣的網(wǎng)站，就可以直接購買符合程序?qū)h(huán)境的服務器，再進行安裝部署即可。
2.2 IaaS
IaaS 全文 Infrastructure as a Service，就是用戶只購買一個完全空白的虛擬主機，類似你購買了一臺硬盤格式化后完全空白的虛擬電腦。
用戶可以自己選擇安裝什么樣的系統(tǒng)，編寫什么樣的中間件，最后再搭建自己的框架。這適合定自定義要求更高的用戶，完全根據(jù)自己的需要 DIY 項目的服務器功能。
2.3 Hosting
Hosting 則是比 IaaS 更進一步的服務，從原本的虛擬服務器升級到了完整的服務器。
也就是說，在一些特定業(yè)務環(huán)境下（比如特殊的數(shù)據(jù)安全要求），用戶需要購買完整的服務器硬件使用權(quán)，從原本的合租換成整租。
所以，Hosting 就是服務器托管的意思，用戶向一些服務商購買了完整的服務器硬件使用權(quán)和聯(lián)網(wǎng)功能，然后遠程進行控制和使用。而商家負責硬件層面運維，防止服務器斷電、斷網(wǎng)、損壞、過熱、故障等一系列硬件問題。
2.4 Co-location
九層塔中，我們其實還省略了一個更底層的環(huán)節(jié) —— 數(shù)據(jù)中心。
數(shù)據(jù)中心是一個物理名詞，在今天指的是大規(guī)模的服務器數(shù)據(jù)設備安置和運行的空間。比如蘋果的云上貴州，就是典型的數(shù)據(jù)中心。
Co-location 的服務也叫場地出租，就是數(shù)據(jù)中心的商家，把數(shù)據(jù)中心的物理空間使用權(quán)租用給用戶，用戶自己購買服務器或商家的（不是臨時租用）放進去，再借助數(shù)據(jù)中心的網(wǎng)絡和其它基礎服務實現(xiàn)服務器的正常運轉(zhuǎn)。
這個概念大家簡單理解就可以，我就不多做介紹了。
所以，九層塔中包攬了不同層級數(shù)量的技術，就可以形成不同的服務，每一級服務有各自的優(yōu)缺點，是由項目的實際情況決定的。
相信看完前面的介紹大家已經(jīng)知道，SaaS 等服務是建立在聯(lián)網(wǎng)的基礎之上的，也就是說，除了可以獨立運行在你客戶端里的本地軟件，還包含更多需要聯(lián)網(wǎng)的軟件，或者干脆運行在遠程服務器主機上的軟件。
這是一個發(fā)展的過程……
最早的軟件安裝是我們到軟件店里購買軟盤、光盤，回到家里的電腦安裝，這些軟件往往只在本地運行，是不需要聯(lián)網(wǎng)的孤島。
隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，孤島漸漸被消除，聯(lián)網(wǎng)上傳和獲取數(shù)據(jù)越來越普及，甚至，軟件都不需要再下載和安裝，直接用瀏覽器就可以訪問使用。
這種模式，就催生了軟件的開發(fā)維護與服務器、網(wǎng)絡的硬件運行進行了分工，一般的產(chǎn)品開發(fā)團隊專注在軟件應用層面的開發(fā)工作，而把網(wǎng)絡、遠程服務交給其它商家，并付費購買。
這樣不僅帶來更高的效率，而且降低了各自的成本，實現(xiàn)了多方的共贏。
所以，我們再來理解云服務這個詞就很容易了，云就是網(wǎng)絡，云服務就是基于聯(lián)網(wǎng)實現(xiàn)的各種軟硬件服務的總和。
除了遠程的虛擬機、中間件、數(shù)據(jù)庫外，還有遠程計算、渲染、CND加速、直播分流等等。
這也是為什么云服務會成為互聯(lián)網(wǎng)發(fā)展的基礎，因為它實在太重要了，幾乎所有互聯(lián)網(wǎng)公司都無法脫離云服務帶來的支持。
這也是為什么各個大廠紛紛投入云服務的賽道中，因為這是互聯(lián)網(wǎng)的基建和命脈之一，擁有非常廣闊的前景與市場。而在馬太效應強者越強的現(xiàn)實環(huán)境下，頭部的廠商擁有更好的機群、技術、人員，可以大幅度降低運作成本，提供更優(yōu)質(zhì)但價格更低廉的服務。
雖然云服務在今天不可或缺，價格也越來越有優(yōu)勢。但是，并不是所有企業(yè)都一定要選擇購買外部的云服務，這就是我們要理解的另一個課題 —— 私有化部署。
云服務再怎么便捷，也有一個缺陷，那就是數(shù)據(jù)是存儲在別的商家、企業(yè)的服務器中，有一定的數(shù)據(jù)安全隱患。
雖然數(shù)據(jù)安全是云服務的最基本保障，但很多對數(shù)據(jù)隱私、安全極度重視的企業(yè)，是不愿意承擔任何外部風險的。所以他們就會通過自建本地服務器（私有云）的方式，實現(xiàn)從網(wǎng)絡、硬件到軟件全局私有化的部署。
也就是說，服務器機房是自己公司的，網(wǎng)絡是自己遷進機房的，服務器自己買的，環(huán)境、虛擬化、數(shù)據(jù)庫自己搭建的，后端程序也是自己寫的，最后電腦手機上運行的客戶端，是連接這些服務器的。
哦對了，當然這些硬件日常的維護也要由自己公司的運維負責……
這樣的成本高嘛？非常高。但類似國企、銀行、證券、國防、政府機關等機構(gòu)，對數(shù)據(jù)的安全性是異乎尋常的執(zhí)著的，他們是有足夠的動力劃出預算來確保數(shù)據(jù)的私密與安全，用來運行自己內(nèi)部的 B 端系統(tǒng)。
這也是為什么這些機構(gòu)從一開始就拒絕使用 Figma 這種公有云端軟件，尤其是服務器在國外的。
再問下一個問題，私有化部署，就意味著這個環(huán)節(jié)中所有步驟全是自己搞定嘛？
當然不可能，因為應用這個層面，有時候不是想開發(fā)就開發(fā)得出來，或者成本實在超出了預算。因為私有化的主要目標是數(shù)據(jù)安全，但不是應用的工具一定得個性化定制。
比如在即時設計官網(wǎng)的價格頁面，就可以看到 “私有部署” 這個選項。它的實際作用，就是允許客戶在自己的服務器上安裝它，讓內(nèi)部的員工使用設計軟件時是同步到公司指定的服務器而不是官方的公共服務器中，滿足客戶的數(shù)據(jù)隱私需求
注：這例子大家討論最多適合理解，非恰飯
所以，了解完上面的概念，你也就大概能明白什么是云服務，什么是私有化。如果需要在工作中碰到更細節(jié)的名詞還是概念，可以再進一步做理解。
文章來源：UI中國 作者：超人的電話亭
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
綜合監(jiān)管平臺是對自然資源管控的一個OA系統(tǒng)。主要功能是對國土資源相關業(yè)務的監(jiān)測、評估和統(tǒng)計，將各專項規(guī)劃實現(xiàn)“多規(guī)融合”，從而優(yōu)化城市自然資源配置，做好國土空間規(guī)劃統(tǒng)籌。
為什么要有設計規(guī)范
1、多個設計師同步設計
我們部門有2名UI設計師，所以在我們同時畫同一個項目界面時，為了保持整個設計的統(tǒng)一，就需要我們設定設計規(guī)范。
2、設計與前端之間的溝通
與設計同理，開發(fā)人員參照統(tǒng)一的設計規(guī)范寫頁面，可避免同一系統(tǒng)中出現(xiàn)設計控件混亂的情況，從而提高開發(fā)效率、減少溝通成本、減少返工率。
3、在公司內(nèi)部復用
在公司內(nèi)部，設計規(guī)范可運用在多個項目中，從而減少開發(fā)的工作量、提高開發(fā)效率。
建立設計規(guī)范前的工作
從產(chǎn)品經(jīng)理手中接到原型圖，首先是與產(chǎn)品經(jīng)理的溝通，包括客戶需求、設計風格的確定、頁面內(nèi)容的布局等等，關于設計尺寸，因為我們客戶用的是1920*1080分辨率的電腦，所以設計就基于1920*1080尺寸來做；但有時會基于1440*900的尺寸來設計，然后上下適配1920*1080和1366*768。所以設計尺寸要根據(jù)具體情況而定。
頁面框架
a、主體框架分為四個區(qū)域：頂欄、左側(cè)欄、頁簽、主體內(nèi)容
b、主體內(nèi)容上、左邊距為10px，默認顯示一屏高度，超出的內(nèi)容加上下滾動條
c、頁面中的各個組件根據(jù)不同屏幕分辨率采用自適應
如何建立設計規(guī)范
1、顏色規(guī)范
后臺系統(tǒng)主色調(diào)大多運用藍色，這是因為藍色往往圍繞著科技、安全、信任等等，很符合業(yè)務場景，比如智慧城市、智慧醫(yī)療、智慧交通等。但是藍色用多了也會讓人感覺沒有新意、審美疲勞，所以在色調(diào)這塊，后臺系統(tǒng)可以采取皮膚功能的擴展，做兩套配色好的皮膚供客戶選擇，這樣避免了因客戶的不滿而一次次的修改，從而提高工作效率。
2、文字規(guī)范
因為我們面向的客戶多為政府工作人員，且年紀稍長，所以字號要比平常的網(wǎng)頁設計要稍大一些；常用字體，中文：微軟雅黑，英文或阿拉伯數(shù)字：Arial；行間距=字體+8px。
3、按鈕規(guī)范
按鈕是用戶與系統(tǒng)間交互的一個重要觸點，用于特定觸發(fā)事件的發(fā)生。按鈕類型可分為線性按鈕、面型按鈕、文字按鈕、圖標按鈕、圖標+文字按鈕，按鈕狀態(tài)分為常規(guī)、懸停、按下、禁用。按鈕的寬、高、曲率、文字離邊框的間距需要在規(guī)范中寫明。
4、表單規(guī)范
在后臺系統(tǒng)中，表單多用于登錄注冊、搜索框、選擇器、信息錄入等。表單類型可分為輸入框、下拉框、時間選擇框、單選框、多選框等等，表單狀態(tài)分為默認、輸入/選中、填寫完成/已選擇、不可填寫/不可選、錯誤提示。對于必填表單，需在標簽前后或輸入框后增加“紅色*號”。輸入框的高度、曲率需要在規(guī)范中寫明。
5、表格
此圖為可進行單選或批量選擇、排序、表頭分組和帶有凍結(jié)列的復合型表格：
a、固定列表格：對于屏幕無法展示完全的內(nèi)容，可以采用凍結(jié)重要列的方式，然后橫向加滾動條左右滑動
b、可對數(shù)據(jù)進行排序：升序和降序
c、文字類字數(shù)限制：重要字段全部顯示，其他文字信息超出寬度以“...”代替，鼠標懸停時顯示全部內(nèi)容
d、對齊方式：文字信息左對齊，因為人的閱讀習慣是由左到右、由上到下的，此外在主從型列表中，采用左對齊錯開文字，可使用戶一目了然，降低視覺噪音；數(shù)據(jù)信息右對齊，因為數(shù)字單位個十百千萬...是由右向左，方便比較數(shù)據(jù)大小
文章來源：站酷 作者：Alice冰冰
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
本文是參考國內(nèi)交互設計標準網(wǎng)站及用戶行為研究實現(xiàn)的用戶體驗設計規(guī)范，用于后臺設計，網(wǎng)站設計等。
涉及到的產(chǎn)品越多，產(chǎn)品統(tǒng)一性越強，實現(xiàn)信息同頻，開發(fā)和設計快速了解信息
一個項目中會涉及到多種按鈕，甚至一個頁面中也會涉及到多種不同功能的按鈕，這個就需要把同一類型或同一功能的按鈕，它們的位置統(tǒng)一。減少用戶學習成本。
因為如果同一樣的功能按鈕在不同的變換位置的話會打亂用戶已經(jīng)形成的習慣，增加其學習成本。（盡量采取以下情況的一種）
幫助說明的表現(xiàn)形式有很多種，但不管選那種整個項目要保持統(tǒng)一，一些特殊情況除外，固定一個位置，可以方便用戶在最短的時間內(nèi)，快速完成此項操作和獲取內(nèi)容。
權(quán)重是為了突出有效信息，也能在不同元素建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關鍵信息。
為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷，來突出其中一項相對更重要或者更高頻的操作。
突出的方法，不局限于強化重點項，也可以是弱化其他項。
但是在一些需要用戶慎重決策的場景中，系統(tǒng)應該保持中立，不能替用戶或者誘導用戶做出判斷
表單在遵守操作流程的情況下，讓用戶涉及到的操作從易到難，讓用戶有填下去的動力。
排序規(guī)則
（1）有“有默認項”的選項；
（2）有“選項”的選項；
（3）只輸入“數(shù)字”的選項；
（4）“添加圖片”“修改”等涉及復雜操作的選項；
（5）“備注”“商品賣點”等選擇。
左右排版的時候?qū)ⅰ爸匾靥铐棥毕仍趶淖筮叄v向排列）開始排版（排版時仍按照我們的從簡到難的規(guī)則）
注：當“必填項”比“非必填項”多時，排版上要考慮，就按照次序，左邊排滿，再排右邊。
在使用Table 時，文字鏈的點擊范圍受到文字長短影響，可以設置整個單元格為熱區(qū)，以便用戶觸發(fā)。
注：當懸浮在“客戶”所在的文字鏈單元格時，鼠標
【指針】隨即變?yōu)椤臼中汀?，單擊即可跳轉(zhuǎn)。
當需要增強按鈕的響應性時，可以通過增加用戶點擊熱區(qū)的范圍，而不是增大按鈕形狀，從而增強響應性，又不缺失美感。
注：在移動端尤其適用。
鼠標移入按鈕附近，即可激活Hover 狀態(tài)
當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』
狀態(tài)一：普通的瀏覽模式，不區(qū)分可編輯行和不可編輯行；
狀態(tài)二：鼠標懸停時，『指針』變?yōu)椤菏中汀唬庉媴^(qū)域底色變黃，出現(xiàn)『Tooltips』提示單擊編輯；
狀態(tài)三：鼠標點擊后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。
當『易讀性』為主，同時又要突出操作性的『易編輯性』時，可使用『文字鏈/圖標編輯』
狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標；
狀態(tài)二：鼠標點擊『編輯』后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。
當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』
注：編輯模式在不破壞整體性的前提下，可擴大空間，以便放下『輸入框』等表單元素；其中，在Table 中進行編輯模式切換時，需要保證每列的不跳動。
減少負擔，增加輕量化的操作
注：刪除的操作是謹慎的，系統(tǒng)在不打斷當前操作的時候給出二次提醒確認。
填寫表單的條件反饋。
注：不需要提交后才出現(xiàn)提示，輸入及時給用戶反饋
完成整個操作后的提示以及系統(tǒng)提示
注：重要的，文字多于15個字以上不適合放在toast里面提示。
提供下一步操作的入口
不僅要提示他發(fā)生了什么，還能引導他怎么做，甚至能讓他一步到位直接跳轉(zhuǎn)到要進行下一步操作的頁面去操作
當頁面沒有按鈕時，提供明確的入口。
最后，關于后臺的用戶體驗設計規(guī)范就總結(jié)到這里啦。
文章來源：站酷 作者：chaih
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
讓信息架構(gòu)，和產(chǎn)品架構(gòu)，產(chǎn)生“化學反應”
這個信息架構(gòu)的角度，具體而言，就是只包含一級頻道的交互設計。
核心功能、輔助功能、重大功能，作為產(chǎn)品的三大類功能，更多是從發(fā)展的角度來劃分。
除此之外，大部分 App 都還有一些非?；A的功能，比如“個人資料”、“我的收藏”、“設置”、“搜索”等，此類功能，我們稱其為通用功能。
核心功能、輔助功能、重大功能和通用功能，是產(chǎn)品的四大類功能。
總的來說，本文主要以底部 tab 導航的 App 為例，探討一下，如何在一級頻道來落地產(chǎn)品的四大類功能。
01 宏觀上講，怎樣更好的擺放四大類功能？
網(wǎng)易云音樂是我個人很喜歡的一款產(chǎn)品，日常用的也比較多。不過，它的新版（6.0 系列）給我的直觀感受是，有點復雜了，我甚至在很長時間里找不到“私人 FM”這個以前常用的功能。
給我類似感受的產(chǎn)品，還有 Keep 和知乎。
究竟是什么，讓我覺得，這些產(chǎn)品變得有點復雜了？
個人簡單總結(jié)了一下，最直接的一個原因，是這些 App 都新增了重大功能，并給這個重大功能單獨加了一個一級頻道。
比如 Keep 的“計劃”頻道、知乎的“會員”頻道、網(wǎng)易云音樂的“視頻”和“云村”頻道，都分別占用一個一級頻道。
企業(yè)為什么這么設計？個人的猜測，這些重大功能于企業(yè)而言，很重要，要么肩負商業(yè)化使命，要么被寄予厚望，所以企業(yè)就單獨給了一個一級頻道。
這是一個相對簡單的邏輯。但如果想要更好的去平衡用戶體驗和商業(yè)化之間的關系，那我們就需要考慮更多的因素。
之前在信息架構(gòu)那篇文章里，個人的建議是，如果想讓 App 始終保持簡單，那就只保留 4 個 tab，也即只有 4 個一級頻道。
如何將產(chǎn)品的四大類功能、以及未來很大概率會不斷出現(xiàn)的重大功能，以接近最優(yōu)的方式，安置在寸土寸金的 4 個一級頻道上？
我想，這中間一定有一些原則，值得我們探討和參考。
1 和重要程度保持一致
通常而言，重要程度越高，分配到的空間就越多。這是一個比較普世的道理。
也就是說，這條原則，主要會影響到，四大類功能，各自占用多少空間比較合適。
我們有 4 個一級頻道，每個一級頻道代表了 25% 的空間。
再來看四大類功能，按其大概的重要程度，簡單的分析一下。
先說核心功能，這個最重要。
核心功能是立足之本和護城河。先換個角度看這個問題，假設有三種可能，即核心功能可以占用一個、兩個或三個一級頻道。
先用下排除法。三個一級頻道難免顯得過多，剩余的三種功能擠在一個一級頻道里也會顯得過分擁擠；一個一級頻道的話，倒也可以，但是平分四分之一的空間很難體現(xiàn)出核心功能的重要性。
相比之下，兩個一級頻道就顯得較為合適。
綜合考慮到有四大類功能，通常兩個一級頻道也不會完全給核心功能所用。
所以，核心功能，大概占用一個半一級頻道，也即 40% 左右的空間即可。
再說通用功能，這個比較容易。
此類功能通常比較多，重要程度可能不及重大功能，但是又不能沒有，所以通常我們也會單獨給一個一級頻道，就是“我”或者“設置”之類的一級頻道，大概占用 25% 的空間即可。
第三，說下重大功能，這個比較重要。
通常而言，重大功能的重要性僅次于核心功能，而且重大功能可以有多個，再考慮到通用功能一般單獨占用一個一級頻道。
那么，相對而言，重大功能，完全可以單獨占用一個一級頻道，甚至更多，大概占用 30% 左右的空間即可。
最后，說下輔助功能，這個比較特殊。
首先，很多產(chǎn)品是沒有輔助功能的；其次，輔助功能是個小功能；最后，輔助功能的數(shù)量一般也不多。
總的來說，輔助功能是沒有必要單獨給一個一級頻道的。再考慮到 4 個一級頻道所?？臻g已經(jīng)不多，所以，輔助功能一般和重大功能共用一個一級頻道即可，大概占用 5% 左右的空間。
2 和使用頻率保持一致
通常而言，用戶用的越多的功能，就排的越靠前。
也就是說，這條原則主要決定四大類功能的排序問題。
具體而言，用戶用的最多的是核心功能，所以核心功能最靠前。
重大功能和通用功能，有時候很難說哪個使用頻率更高，比如微信里的“搜一搜”和“收藏”。但是比較明確的是，很多 App 在誕生之初，并沒有重大功能，只有核心功能和通用功能。
所以自然而然，通用功能排在了核心功能后面。
個人有個猜測，一方面，有時候很難說清重大功能和通用功能，哪個使用頻率更高；另一方面，通用功能起初是排在最后的。
所以，當重大功能出現(xiàn)時，就延續(xù)了舊傳統(tǒng)：通用功能依然排在最后。最終結(jié)果就是，重大功能和輔助功能排在中間。
值得一提的是，現(xiàn)在市面上開始出現(xiàn)兩類現(xiàn)象。
其一是，有一些擁有 5 個一級頻道的 App，開始把核心功能放到中間那個頻道，比如 Keep 的“運動”頻道。
其二是，企業(yè)開始人為的控制打開 App 時默認展示哪一個頻道，而且默認顯示哪一個頻道，存在多種情況，例子依然包括 Keep：以前默認顯示中間的“運動”頻道，現(xiàn)在默認顯示“計劃”頻道。
個人覺得，對企業(yè)而言，這兩類做法，都是得不償失的。
因為這樣做，會讓 “從左起，1、2、3、4”這個排序失去價值。沒有這個前提，也就談不上“和用戶的使用頻率保持一致。
而且，這種默認不顯示左邊第一個頻道的做法，有時候會讓用戶產(chǎn)生一種被綁架的感覺（默認顯示收費頻道），有時會讓用戶感覺企業(yè)在自作聰明（默認沒顯示收費頻道，但也沒顯示核心頻道）。
3 符合用戶預期
主要有兩個預期，邏輯預期和習慣預期。
3.1 邏輯預期
用戶確實很懶，但不代表用戶不會思考。
比如前文提到的，網(wǎng)易云音樂的“私人 FM“功能，在我的認知里面，”私人 FM“和”每日推薦“一樣，都是個性化推薦，性質(zhì)極其相似，應該放在一起。
所以，當我在新版里的“每日推薦”旁邊找不到“私人 FM”時，心里就覺得很奇怪很不解，心想這么好的功能不會是給刪了吧。
后來某一天，當我在第三個一級頻道“我的”里面發(fā)現(xiàn)“私人 FM“的時候，我又覺很別扭，不好用。
在新版里面，一開始我是去“發(fā)現(xiàn)”頻道的“動作庫”找的，怎么找都找不到，跟找不到網(wǎng)易云音樂的“私人 FM“是一樣的心情。
因為我覺得，“動作訓練”和“動作庫”，是很接近的一對事物，從邏輯上來講，用戶會覺得這倆事物挨在一起，或者會猜他們是不是挨在一起。
3.2 習慣預期
這里的用戶習慣，主要有兩類。一類是自家產(chǎn)品培養(yǎng)出來的，一類是市面上的產(chǎn)品培養(yǎng)出來的。
通常情況，一級頻道的設計，是要符合用戶習慣的。
最忌諱的情況是，自己一手培養(yǎng)的用戶習慣，到最后自己再一手去打破，這樣很容易引起用戶的煩躁、不滿和失望等負面情緒。
比如 3.1 段的兩個例子，同樣也沒有符合用戶的習慣預期。因為在最開始，網(wǎng)易云音樂的“每日推薦”和“私人 FM“是挨在一切的，Keep 的“動作訓練”和“動作庫”也是融合在一起的。
4 良好的擴展性
就一級頻道而言，重大功能和通用功能是最有可能擴展出更多子功能的。所以，就擴展性而言，需要重點照顧到這兩類功能。
通用功能大部分都收納在“我”這個一級頻道，通常也是一個列表的樣式，天然自帶良好的擴展性。所以，擴展性的難點和重點，最后是落在了重大功能這里。
在一級頻道，重大功能的展現(xiàn)形式，通常有兩種。
一種是像核心功能一樣，直接把重大功能的內(nèi)容鋪陳出來，典型代表是網(wǎng)易云音樂的“云村”。另外一種是把各個重大功能都收納起來，只展示一個入口，典型代表是微信的“發(fā)現(xiàn)”頻道。
對企業(yè)而言，現(xiàn)實問題是，當重大功能的數(shù)量上升到兩個、三個甚至更多時，如何展示他們？
市面上的常規(guī)做法，也是兩種。
一種是像網(wǎng)易云音樂和 Keep 這樣的，直接開辟一個新的一級頻道，供重大功能使用。還有一種是微信這種，把所有重大功能都收納起來，有新的重大功能出現(xiàn)時，新增一行列表即可。
個人推薦微信這種做法，因為這種做法的擴展性最好，可以應對無窮盡的重大功能。
至此，我們簡單總結(jié)一下。個人看法，四大類功能，具體咋擺放，并沒有標準答案，但是可以參考以上 4 個原則。
02 微觀上講，有沒有補充和例外？
有。借這個話題，聊兩個比較特殊的問題。
1 頂部標題欄的兩側(cè)，適合放什么功能？
先來分析一下這個位置，頂部標題欄的兩側(cè)，位于屏幕的左上角或右上角，是個很顯眼的位置。
個人認為，有三類功能比較適合這個位置。
第一類，是和當前頁面內(nèi)容有密切關系的功能。比如“編輯”型功能，可參考微信讀書“書架”頻道的“編輯”。再比如“新增”型功能，可參考 Twitter 首頁信息流的發(fā)推圖標。此類功能，最適合這個位置，而且一般也沒有更合適的位置來擺放他們。
第二類，是比較高頻的通用功能或重大功能，比如搜索、消息、設置等。
第三類，是某些高頻功能的快捷入口，比如微信的掃一掃和收付款。
除此之外，如果是一個比較低頻的功能，不管是通用功能、重大功能還是輔助功能，放在這里，都不合適，因為會對用戶形成打擾。
2 一個功能，最多可以出現(xiàn)幾次？
大部分功能，在 App 里只會出現(xiàn)一次。但在日常使用各種 App 的時候，我們也會多次看到同一個功能，在不同的地方。
有時候，能看到三次，比如搜索，在微信、知乎和網(wǎng)易云音樂都出現(xiàn)了三次，我們也不會覺得哪里不對勁兒。實際上，搜索雖然出現(xiàn)了三次，但也沒有引起我們的特別注意。
還有一些功能，是出現(xiàn)了兩次。我們在第二次看到的時候，會有點煩躁，心想怎么又來了；有時候會有點困惑，心想下次我該用哪一個，哪一個最快捷。
這中間有什么原則可以參考嗎？
先來看下搜索，在微信、知乎和網(wǎng)易云音樂，都是比較高頻的功能。換句話說，用戶在不同的一級頻道，都有可能需要搜索一下，所以搜索出現(xiàn)三次，在不同的一級頻道，是有這個需求存在的。
搜索以外的功能，個人認為，只有一類適合出現(xiàn)多次，通常兩次足矣。
那就是，此類功能確實比較高頻，同時路徑又比較長，使用起來不夠方便。這時候，就適合給此類功能一個快捷入口。這個快捷入口，一般是出現(xiàn)在標題欄。
一個功能，如果只是單純的重復出現(xiàn)兩次，兩次都沒出現(xiàn)在標題欄。那給用戶的感覺，就是，App 并不是在給我提供快捷入口，而可能只是通過重復的方式來強推這個功能，就容易產(chǎn)生煩躁和困惑的負面情緒。
文章來源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
用戶體驗四維度的概念、價值以及相互之間的關系
用戶體驗，是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。
解讀用戶體驗，可以有很多視角。本文提供一個以人為本的視角：用戶體驗四維度。具體如下。
HI X：Human Interface Experience，人與界面的交互體驗。
HC X：Human Content Experience，人與內(nèi)容的交互體驗。
HH X：Human Human Experience，人與人的交互體驗。
HB X：Human Brand Experience，人與品牌的交互體驗。
用戶體驗四維度
01 四維度的概念
怎樣判斷一款產(chǎn)品有幾個維度？這就要從四維度的概念說起。
1. HI X（人與界面的交互體驗）
HI X 是指用戶在瀏覽、閱讀、操作界面過程中產(chǎn)生的主觀感受。
HI X 既受信息架構(gòu)、交互設計和UI設計的影響，也受根需求和功能架構(gòu)的影響。主要依托手機和電腦的互聯(lián)網(wǎng)產(chǎn)品，天然存在界面。所以，HI X 屬于基礎屬性，所有產(chǎn)品都有。
2. HC X（人與內(nèi)容的交互體驗）
HC X 是指用戶在消費內(nèi)容時，內(nèi)容本身帶給用戶的主觀感受。
這里的內(nèi)容，既包括衣服、鞋子等實體商品，也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴選等電商產(chǎn)品，以及公眾號、Instagram、抖音等 UGC 產(chǎn)品，都具備 HC X 屬性。
3. HH X（人與人的交互體驗）
HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時產(chǎn)生的主觀感受，或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。
所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間，是指當用戶扎堆或溝通交流時，交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間，是指當產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務時，產(chǎn)品工作人員的服務行為帶給用戶的主觀感受。
關于第一層含義，不管是更強調(diào)社區(qū)屬性的產(chǎn)品，比如天涯社區(qū)、豆瓣小組、百度貼吧，還是更強調(diào)內(nèi)容屬性的產(chǎn)品，比如公眾號、微博、小紅書的筆記，都具備 HH X 屬性。
關于第二層含義，常見的 HH X 由客服人員提供。如果是電商產(chǎn)品，提供人員還包括快遞員和售后人員等。
4. HB X（人與品牌的交互體驗）
HB X 是指當用戶想起、談論起品牌，或使用品牌的產(chǎn)品、體驗品牌的服務時，品牌帶給用戶的主觀感受。
只要一款產(chǎn)品做成了品牌，它就有 HB X 屬性。
HB X 會直接影響到我們是否信任、喜歡一個品牌，以及是否會使用它的產(chǎn)品和服務。所以，我們對 HB X 往往會有一個抓重點的綜合評價。就像一個外向活潑的女生，雖然在外向程度方面和一個內(nèi)向安靜的男生不一致，但雙方也可能會選擇在一起，因為內(nèi)向、外向并非雙方關注的重點。
因為 HB X 牽涉到對品牌的綜合評價，所以就像工作都有一段試用期、戀愛都有一段了解期一樣，HB X 的形成往往也需要較長時間，通常至少要 3~5 年。
02 四維度的價值
每一個維度，各有什么價值？
1. HI X（人與界面的交互體驗）
作為基礎屬性，HI X 的價值主要體現(xiàn)在以下兩方面。
如果是一款只具有 HI X 屬性的工具型產(chǎn)品，比如視頻會議產(chǎn)品 Zoom，那于這款產(chǎn)品而言，HI X 就是一切，這款產(chǎn)品的成敗也幾乎完全取決于 HI X。
如果是一款同時具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品，比如 B 站、快手這些視頻類產(chǎn)品，那此時的 HI X 就會扮演一個類似交通出行（基礎設施）的角色。如果 HI X 比較差，這個“出行”過程就會像出去玩時的塞車一樣，讓人難受；如果 HI X 很優(yōu)秀，這個“出行”過程就會像準點的高鐵、飛機一樣，又快又爽。
2. HC X（人與內(nèi)容的交互體驗）
HC X 主要從內(nèi)容層面影響用戶滿意度。
如果 HC X 比較好，用戶消費時的決策時間就會被大大縮減，同時用戶滿意度也會比較高。比如淘寶上就有一些原創(chuàng)設計、質(zhì)量不錯、價格不貴的精品小店，很受歡迎。我們?nèi)ゾW(wǎng)易嚴選、優(yōu)衣庫天貓旗艦店這些質(zhì)量不錯、設計不錯、價格適中的店鋪買 東西時，也會很快很省心。
以上說的是電商產(chǎn)品，對于 UGC 類的內(nèi)容產(chǎn)品，也是類似的道理。比如站酷上的首頁推薦和編輯推薦，相對而言，HC X 比較不錯，所以看這些內(nèi)容的用戶也會比較多。
3. HH X（人與人的交互體驗）
HH X 是用戶情緒的最大影響因素，在情感方面對用戶具有最大吸引力。物以類聚，人以群分。HH X 良好的產(chǎn)品，會像一場談笑風生、其樂融融的聚會，吸引用戶去扎堆。
良好的 HH X 往往意味著良好的氛圍，它不僅能帶給我們諸如輕松、愉快等積極情緒，還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果，就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好，具體而言就是彈幕氛圍比較歡樂友好，這樣的氛圍帶給用戶的感覺是比較好的，用戶也喜歡在 B 站就著彈幕看視頻。
4. HB X（人與品牌的交互體驗）
HB X 事關品牌能不能以正面形象住進用戶心里。
良好的 HB X，往往意味著良好的品牌美譽度和忠誠度。HB X 良好的產(chǎn)品，就像你信任和喜歡的男/女朋友一樣，他/她會在你心里占據(jù)一定的分量和地位，讓你樂意介紹給家人和朋友認識。比如蘋果的 Mac，就有很高的品牌美譽度和忠誠度，用戶也很樂意把 Mac 推薦給身邊的朋友。
03 四維度的關系
四維度之間存在怎樣的關系?
1. HI X 是另外三個維度的基礎
HI X 作為基本維度，相當于“水之源，木之本”。如果把用戶體驗四維度比作一個金字塔的話，塔底的基石一定是 HI X，塔尖則是 HB X。
2. HC X 通常是 HH X 的基礎
HH X 的產(chǎn)生，通常離不開 HC X。也就是說，通常得有一個合適的“內(nèi)容”或“主題”，才能把人聚攏過來。比如結(jié)婚的時候，你可以邀請到很多親朋好友來參加婚禮，但在平時，你很難邀請到這么多人。我們在 B 站看視頻的時候，彈幕通常比較歡樂友好，氛圍不錯，但如果沒有這些視頻，也就不會有這些彈幕，以及不錯的社區(qū)氛圍。
3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎
HC X、HH X 和 HI X 一樣，都可以成就 HB X。
以早期 Keep 為例，剛開始只有課程這個功能，也就是說只有 HI X 和 HC X 這兩個屬性。其中，HI X 還可以，HC X 比較優(yōu)秀。在此基礎上，慢慢發(fā)展出了社區(qū)功能（HH X 屬性），而且做得不錯。再往后，有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下，Keep 有了不錯的品牌美譽度和忠誠度。也就是說，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。
4. HB X 也可以僅有 HI X 這一個基礎
有些產(chǎn)品并不具有 HC X 和 HH X 這兩個屬性，而是僅有 HI X 這一個屬性。單憑一個良好的 HI X，也可以成就良好的 HB X。
比如 Zoom，作為一款開視頻會議的工具應用，它最初只有 HI X 這一個屬性。但是因為很好用，HI X 很優(yōu)秀，所以如今的 Zoom 即便沒有內(nèi)容（HC X）和社區(qū)（HH X）屬性，依然成了一個在全球都很受歡迎的品牌，擁有了不錯的 HB X。
總的來說，在四維度的金字塔里面，它們的關系如下圖所示。
文章來源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
目錄
1.百度網(wǎng)盤 ：會員標識
2.當當：搜索記錄隱藏
3.當當：分享動效 ? 一鍵制作朋友圈分享海報
4.抖音：點擊復制 ID
5.飛書：效率工作—語言自動轉(zhuǎn)化
6.美團：優(yōu)惠卷新到提示
7.墨跡天氣：一鍵登錄（大部分應用已上線該功能，部分應用仍未上線）
8.起點讀書：長按可進行互動
9.騰訊視頻：亮度調(diào)節(jié)的動效設計
10.微博：點贊動效設計
11.知乎：刪除搜索記錄
12. QQ：可隱藏會話
13. QQ 音樂：搜索入口的聽歌識曲
14. QQ 閱讀：長按復制的放大設計
在開通會員后百度網(wǎng)盤會進行對于應用圖標的更換，使得應用圖標更加高級，在分享鏈接時也會加入會員分享的標識。
屬于用戶激勵體系中的一個板塊，增強用戶的標識和身份。
搜索隱藏功能設定。
我們在使用各大應該的搜索功能時總會遇到過這樣的場景，當你要某人或者在某種場景下需要進行搜索時，來不及刪除自己的搜索記錄出現(xiàn)社死的情況。
而當當?shù)乃阉麟[藏就可以完美的解決這個問題，退一步講我們可以思考一下為什么別的成熟型應用，沒有采用這樣的方式。大部分是沒有這個功能，其余則是在搜索這一個功能上已經(jīng)添加了其余用戶體驗的設計。所以在這一塊就沒法加入這個設計。
在當當應用中點擊分享進入頁面后不同于傳統(tǒng)的分享頁面，而是把分享到微信和分享到朋友圈進行了動態(tài)設計。并且在分享到朋友圈的右上角加上了海報的標識。我們點擊會自動跳轉(zhuǎn)生成海報。
這樣的設計可以更加吸引用戶的眼球并且自動生成海報可以激發(fā)用戶在朋友圈轉(zhuǎn)發(fā)的次數(shù)。
主頁 ID 點擊可進行復制 很多應用都有 ID 。但是當我們要進行 ID 搜索的時候，我們便需要一遍一遍的反復查看或者記住這個 ID 然后再進行搜索。
目前部分的應用也上線了類似的功能,讓用戶點擊 ID 區(qū)域可進行復制。對于用戶體驗的提升有著很顯著的效果。
飛書屬于一款協(xié)同辦公類的應用
在飛書的設置用有語音直接轉(zhuǎn)換文字的說明，飛書本身便是一款協(xié)同辦公類的產(chǎn)品。此產(chǎn)品效率便是產(chǎn)品關鍵詞之一，所以加入這樣的設置可極大的提升用戶的體驗。
有提示用戶新到多少張優(yōu)惠卷的提示
可以促進用戶消費的同時能幫助和提醒用戶去使用消費卷不僅提高了商家的銷量還使得用戶在消費中發(fā)現(xiàn)自己的優(yōu)惠卷及時使用
一鍵登錄
應用登陸中目前主流為（1.第三方登錄，登陸之后需要再次綁定手機號。2.手機號注冊登陸，登陸之后可選擇是否綁定第三方。3.一鍵登錄，登陸之后可以選擇是否綁定第三方）在設計流程中，設計開發(fā)者需要盡可能的減少對流程的復雜化。
一鍵登錄在為看來是最喜歡的一種登陸方式。導致現(xiàn)在如果需要各種注冊綁定，除非必要的情況下，我會直接放棄這款應用。
長按頁面可以框選當前的段落，并且出現(xiàn)互動選項。
增加用戶和用戶之間，用戶和作者之間的互動。使得用戶在讀書的同時有著較強的參與感。
滑動可調(diào)節(jié)亮度
左邊的小動效的設計加上右邊的漸變進度條，使用戶可以更加明確的知道自己所處于一個什么樣的觀看環(huán)境，并且加入了漸隱漸現(xiàn)的出場和入場。
用一個小巧的動效設計幫助用戶確定自己的亮度屬性，
點擊點贊會出現(xiàn)彩色的波浪并且不斷擴散的同時有小表情彈出。
增加趣味性和互動性。
清空時會在進行確認，再次點擊全部刪除方可刪除。
在下方列表中可逐一刪除，上面清空中不是點擊后就全部清空。而是再次出現(xiàn)，起強調(diào)和確認的作用。
增加用戶體驗，幫助用戶進行二次確認和防止用戶誤觸。作為一款咨訊類應用用戶的搜索記錄也是比較重要的。
前幾天發(fā)現(xiàn)的一個神級功能（雖然我已經(jīng)不用 QQ 進行社交了），當時我外甥和我講述了這個功能他么00后戲稱為養(yǎng)魚神器。
在好友的設置中可隱藏會話，開啟隱藏會話以后。此聯(lián)系人發(fā)來的消息不會顯示在聯(lián)系人列表。需要自己手動去設置隱藏會話列表去尋找。
應用的功能更加多樣化滿足多種不同的需求。
在搜索入口加入了聽歌識曲且進入界面后可進行聽歌識曲和哼唱識別的切換
搜索歌曲界面的使用場景為：1.用戶得知該歌曲的名稱或者歌詞進行搜索。2.用戶聽到了某一首很好聽的歌曲想進行搜索。此時在場景二的情況下，正好可以進行聽歌識曲。聽歌識曲此功能在比較舊的版本屬于主頁中的一個模塊，把聽歌識曲放到搜索入口處更加符合用戶場景。
對用戶場景進行細致的研究，增加了用戶體驗。
長按復制會有放大鏡設計
當用戶處于復制文案的場景下時，由于復制需要拖動，在拖動的過程中會按壓住自己所處于的復制內(nèi)容位置。所以在用戶進行復制時加入放大鏡的設計會使得用戶清楚的明白自己復制到哪里，不需要后續(xù)用戶在進行刪減。
極大的加強了此場景下的用戶體驗
文章來源：站酷 作者：張陽光Designer
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
GUI（Graphical UserInterface）圖形界面，市面上最常見的交互方式。點觸，滑動，作為主要輸入方式。圖像顯示作為主要輸出方式。
VUI（Voice User Interface）語音界面，常見沒有屏幕的智能音箱/耳機，靠語言輸入和交流，如我們常見的小艾同學，天貓精靈等。
1973年第一個可視化操作的Alto電腦在施樂帕洛阿爾托研究中心（Xerox PARC）完成。Alto是第一個把計算機所有元素結(jié)合到一起的圖形界面操作系統(tǒng)。它使用3鍵鼠標、位運算顯示器、圖形窗口、以太網(wǎng)絡連接。
1981年施樂公司推出了Alto的繼承者Star，Alto曾首次使用了窗口設計。
1983年蘋果電腦公司推出Apple Lisa個人電腦，是全球第一款搭載圖形用戶界面（GUI）的個人電腦。
1984年蘋果電腦公司推出Macintosh。
1986年首款用于Unix的窗口系統(tǒng)X Window System發(fā)布。
1988年IBM發(fā)布OS/2 1.10標準版演示管理器（Presentation Manager），這是第一種支持Intel計算機的穩(wěn)定的圖形界面。
1992年微軟公司發(fā)布Windows 3.1，增加了多媒體支持。
1995年微軟的Windows 95發(fā)布，其窗口操作系統(tǒng)的外觀基本定型。
1996年微軟發(fā)布Microsoft Bob，此軟件具有動畫助手和有趣的圖片。
1996年IBM發(fā)布OS/2 Warp 4，它的交互界面得到顯著改善，至今仍有不少ATM機運行這樣的系統(tǒng)。
1997年KDE和GNOME兩大開源桌面項目啟動。
1997年蘋果電腦公司發(fā)布Mac OS 8，這個系統(tǒng)具有三維外觀并提供了SpringLoaded Folder功能。
2000年蘋果電腦公司推出Mac OS X系統(tǒng)的默認外觀Aqua。
2001年微軟發(fā)布Windows XP，實現(xiàn)了主題支持。
2003年Mac OS X v10.3提供了一鍵單擊訪問任何已打開窗口的功能。
2003年Sun公司的Java桌面系統(tǒng)為GNOME桌面添加了和Mac類似的效果。
2006年微軟發(fā)布Windows Vista，對此前其視窗操作系統(tǒng)的外觀作了較大的修改，實現(xiàn)了Aero功能。
20世紀90年代，誕生了第一個可行的、非特定的（每個人都可以對他說話）的語音識別系統(tǒng)，交互式語音應答（Interactive Voice Response，IVR）系統(tǒng)的出現(xiàn)代表了VUI的第一個重要時期。人通過電話線路進行交互并執(zhí)行任務，如機票預訂、銀行轉(zhuǎn)帳、業(yè)務查詢等。
目前很多像siri、Google這類集成了視覺和語音信息的APP，以及Amazon Echo這類純語音的設計產(chǎn)品，逐步發(fā)展并成為主流。隨著語音識別技術、AI技術、互聯(lián)網(wǎng)技術的發(fā)展，我們已經(jīng)可以在手機設備中用語音處理很多事情，但還有很多事情目前無法通過語音完成，需要我們探索。
交互的多樣性：
不同于PC機通過鼠標來點擊，在觸控設備上通過手指點按，由于手指的精確度相對于鼠標指針差很多，所以子啊移動頁面設計當中的交互元素一定得辨識作用，手機并沒有懸停操作所以圖標如果特征不明顯時一定要加文字識別，設計時也應注意圖標和菜單元素的尺寸。
拖拽和移動是很相似的交互工作，被拖拽的元素始終跟隨著緊貼屏幕的指尖
除了使用單指之外，還可以用兩個手指放大，縮小圖片，如果設計了一些新的多指交互一定要給用戶提示和指導。
智能家居
在智能家居領域VUI應用越來越廣泛，相信在不久的將來我們一定能夠享受到更多的VUI所帶給我們的便利。
輔助駕駛
車載語音交互系統(tǒng)使得我們可以在開車的同時接聽電話、聽廣播等。
企業(yè)應用
未來大型企業(yè)中將會多領域應用VUI，用于書寫、記錄等工作。
醫(yī)療教育
智能記錄病例、管理病例的出入。
過多的聲音干擾，不但會增加用戶的心智負擔，將會引起用戶感到厭煩，尤其是，語音在資訊的負荷量上又比單純的聲音來的更多，考量是否存在存在的必要性就放在格外重要。而言，可以尋找替代的方式，透過震動和燈光甚至狀態(tài)變化來提示，減少使用者的認知負荷，并確保聲音只會在特定的時間點出現(xiàn)，并提供使用者自行設定關閉聲音的功能
除了聲音本身的設計外，還要考慮整體環(huán)境的影響因素，可能周遭受非常的吵雜。換句話說，在KTV的包廂，吵雜的環(huán)境，會使用者無法聽到消防警鈴響，而容易造成危險事件的產(chǎn)生。也因為如此，消防警鈴的聲音頻率設計就應該介于2kM到4kM，因為研究指出人類的耳朵對于這個范圍的聲音最敏感
從音量的角度來看，耳朵對不同頻率的音量有不同的感知程度，有些聲音聽起來很響亮，有些則是很沉悶因人而異，但比較客觀的量化體驗指標就是分貝（decibel，dB） ，在尺度上超過70分貝以上，會讓人產(chǎn)生憂慮不安，并引發(fā)各種癥狀，因此要盡量避免尺寸大小過大的設計， ，，降低主動的侵入性?；谶@些因素總和來說，還要考量到用戶和產(chǎn)品間的距離，與產(chǎn)品愈近，對于體積的需求量較大，反之為然
在聲音體驗設計（Amber Case，2018）一書指出，當警告或提示音出現(xiàn)的頻率愈高，就應該設計成愈短，但不足就是，如果把聲音設計成短而急促，從而使用者需要集中相反地，事件發(fā)生時間間隔長且久，則聲音提示更需要明顯且激烈的聲音來提醒用戶，例如手機鈴聲響時，需要告知用戶
文章來源：站酷 作者：張陽光Designer
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
組件化思維對于一個設計師來說十分重要，它能夠幫助你更好的去進行產(chǎn)品的設計,那么組件化思維對于設計者都起到什么作用呢?
1.符合產(chǎn)品功能邏輯，組件化的設計理念能幫助設計符合產(chǎn)品功能邏輯。
2.有助于保持交互一致性，在一個項目里，選擇日期應該是統(tǒng)一的交互方式，在整個產(chǎn)品中就應該只有一種存在形式。所以時間選擇器就是一個組件，一個可以復用的組件，如果你沒有組件化思維，很可能出現(xiàn)好幾個不同的時間選擇器，一會兒是流輪撥盤，一會兒是日歷，一會兒又是下拉列表，這樣的設計絕對是不能上線的。當然該統(tǒng)一的地方還有很多，比如:錯誤提示的形式，講度條的交互方式，導航欄和按鈕的樣式。表單，下拉菜單等等。
3.減少開發(fā)工程師的工作量,開發(fā)時使用不同的技術,了解不同技術之間的差異,設計時按照每個開發(fā)軟件的組件來做設計極大的減少了開發(fā)的時間.
4.保持視覺風格的統(tǒng)一，在同個項目不同頁面按鈕等組件的樣式上應該保持統(tǒng)一。
5.便于多設計師協(xié)作組件化設計是大型設計項目的必要條件，多人協(xié)作完成項目時，應當保持視覺統(tǒng)一規(guī)范，組件化建立就起到了至關重要的作用。
6.便于修改設計，設計總是需要修改優(yōu)化的，只需要根據(jù)需求調(diào)整需要調(diào)整組件即可。
針對各種組件的開發(fā)軟件做了以下介紹,歡迎在評論區(qū)進行補充與探討!
echarts
幫助各行業(yè)進數(shù)據(jù)處理以及分析,一鍵生成餅圖,柱狀圖,甘特圖,折線圖等多種圖表;簡道云的圖表分析
各種圖示效果樣式案例可供設計者參考
https://echarts.apache.org/examples/zh/index.html#chart-type-line
Ant Design
ant通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設計者專注于更好的用戶體驗,規(guī)范設計的設計思維,有豐富的設計資源與組件,對設計樣式的表達起到非常好的參考作用
https://ant.design/index-cn
Element
與Ant Design稍加相似,可供設計者作為輔助參考
https://element.eleme.cn/#/zh-CN/guide/design
另外其它的開發(fā)工具:
React是用于構(gòu)建用戶界面的JavaScript庫，起源于Facebook的內(nèi)部項目
Hook 可以中文譯為“掛鉤”或者“鉤子”，逆向開發(fā)中改變程序運行的一種技術,在逆向開發(fā)中是指改變程序運行流程的技術，通過Hook在別人的程序中。需要了解其Hook原理，這樣就能夠?qū)阂獯a攻擊進行有效的防護
Umi 是一個可插拔的企業(yè)級 react 應用框架。 插件化 umi 的整個生命周期都是插件化的，甚至其內(nèi)部實現(xiàn)就是由大量插件組成
可擴展 Umi 實現(xiàn)了完整的生命周期,并使其插件化,Umi 內(nèi)部功能也全由插件完成。此外還支持插件和插件集,以滿足功能和垂直
Vue 有兩大特點：響應式編程、組件化。其優(yōu)勢為：輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快。
vue是單頁面應用，使頁面局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，這樣大大加快了訪問速度和提升用戶體驗。它的第三方ui庫很多節(jié)省開發(fā)時間。https://cn.vuejs.org/v2/guide/index.html
注: vue是我們的常用框架，大多數(shù)客戶的選擇。ant?react?hook?umi，中后臺這個也比較多，最近的項web端的基本上是這兩種選型。
其它常設計有wpf/qt/mfc/開發(fā)，在c++或c#下運行的客戶端程序
其它例如:
Bootstrap 是Twitter推出的一個用于前端開發(fā)的開源工具包。是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷
https://getbootstrap.com/docs/5.1/examples/
developer與material匯聚了ios、安卓組件框架及人機交互指南,相關鏈接:
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
https://developer.android.google.cn/docs/quality-guidelines/core-app-quality
https://material.io/components?platform=android
藍藍設計—— 作者：純純
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
先舉個例子來理解一下：我要點擊手機上的確認按鈕所需要的時間，和 手與按鈕的距離（D） 按鈕的大?。⊿）有關。 當距離越長，所需要的時間越長。當按鈕越大，所需要的時間越短。
這里是說合理的大小。一般來講越大用戶越容易到達，但是屏幕的大小是一定的，某一按鈕/目標越大就會降低其他按鈕/目標的大小。所以大小是相對制衡的，要根據(jù)具體情景和需求制定合理的大?。òㄈ庋鄞笮『蛯嶋H熱區(qū)大?。５顷P于手指點擊的最小熱區(qū)有規(guī)定是44x44px，一般的圖形的熱區(qū)大小都要高于這個大小，才能便于點擊。其他大小要根據(jù)功能需求進行制定。
相對距離指的是界面內(nèi)部各個元素與控件之間的距離。一般通過研究 整個流程 的交互動作，相互關聯(lián)的操作元素/操作手勢 距離會相對比較近，這樣能有效減少操作的時間。
屏幕邊界是可以確定的（鼠標向某一方向一直移動終會停留在屏幕邊界），但是屏幕中央確是較難確定的（四個方向鼠標均能延展出去）。一些重要和主要的操作放在屏幕的邊界，可以方便用戶快速到達，也是菲茨定律的普遍應用。
業(yè)務目標有時候是與用戶目的是相違背的，也需要根據(jù)具體場景來判斷菲茨定律的使用走向。在特殊情境下也會通過距離和自身大小來反向增加使用時間來完成目的。
選擇增加也就意味著事情可以發(fā)展的方向更加多元化，用戶就需要權(quán)衡事情該往哪個方向發(fā)展，而這就需要時間。不要讓你的用戶思考太多，所以一般給出的選項在滿足需求的情況下要盡可能的少。（這里注意：一般情況下要少但也不能太少，強迫用戶也是不可取。）
事情越復雜，越難處理。盡可能的將復雜的事件通過交互或者版式等手段進行簡化，讓用戶覺得容易把握，而不是大量事物/流程/元素的堆砌。
同一類型或者同一層級的元素出現(xiàn)，數(shù)目一般控制在5-9個。
面對有大量信息的時候（數(shù)字/文字/段落）將其分割到5-9個等大腦容易記住的數(shù)量。
看到了有一些設計并沒有按照米勒定律去執(zhí)行，因為隨著時代的發(fā)展，有一些定律并不是萬能適用的。定律不可照搬，要根據(jù)具體情境去做取舍，以最終效果為導向。
在面臨很多復雜功能時，簡單的堆砌顯得啰嗦，需求又不能隨意刪減。這時候就可以將相類似的功能放在同一個組別里面進行收納整理，這與席克定律也相接近。
這里與視覺設計也有很多重疊，即落實到頁面的高保真的細節(jié)。保證內(nèi)容想接近的元素間距要小，內(nèi)容有區(qū)分的間距要大。
事物的復雜性是固定，但是要思考你所面對的是最簡程度的復雜性么。首先優(yōu)化內(nèi)部系統(tǒng)的整個流程和不必要的步驟能夠有效降低系統(tǒng)本身的復雜性。
再把復雜性降低到最低程度之后，事物/流程仍然表現(xiàn)出一定復雜性時。就要考慮造成復雜的元素是什么，是否要將造成復雜的元素進行收納組合，甚至隱藏。
想清楚這張界面的主要目的是什么，順著這個目標去引導用戶，其他元素的視覺層級要讓步，來讓用戶抓住重點。
少代表流程/步驟/界面元素的減少，多意味著用戶量的增加 體驗感的增強。
產(chǎn)品在功能迭代改版上，會出現(xiàn)大量不同的聲音和方向。但功能不是越多越好，用戶的時間是確定的，在某一功能上消耗的時間長，在其他功能上就短了。奧卡姆剃刀就要求我們找到主功能點，其他功能點要做出讓步妥協(xié)甚至砍掉。
有一些功能在你操作之前就禁止操作，避免了錯誤的發(fā)生。或者通過告知操作之后會產(chǎn)生的不良后果
在操作過程中，進行錯誤提醒，有效避免錯誤的進行
用戶在使用app的過程進入錯誤的路線，需要給用戶彌補的機會
倒計時會給人一種緊促感，逼迫用戶去注意，無形之中給用戶規(guī)定了任務，這個任務也就是咋們的業(yè)務目標。倒計時 讀條等交互方式也應該謹慎恰當使用，因為不是每一個任務場景都需要給用戶緊迫感。
這一點也是利用未完成任務的相關信息反饋達到讓用戶去完成任務的業(yè)務目的。
創(chuàng)新意味著改變，改變的不僅僅是你的界面還有用戶習慣和長久以來的認知模型。破壞習慣重建習慣是有很大風險的。
其實能看到很多Dribble頁面很有特點，也不是完全沒有落地性，但是實際國內(nèi)產(chǎn)品并沒有看到這樣的設計，原因就是不符合雅各布定律。
這一點好像和上一點有點相悖。但是其實也不違背，有很多分寸的拿捏往往不是理論能完全決定的。微信后來居上絕不是因為照搬qq，如果新的創(chuàng)新帶來的優(yōu)勢能夠彌補不相同所帶來的不足，也是可以嘗試的。
文章來源：站酷 作者：花城丶
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
保持好奇，巧妙融合，追求卓越，自然而然
文章來源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://m.yvirxh.cn