首頁(yè)

還不懂什么是SaaS?一篇最專業(yè)的掃盲科普文

純純

有了解和學(xué)習(xí) B 端的同學(xué)必然都聽(tīng)說(shuō)過(guò) SaaS 這個(gè)詞,這在 B 端行業(yè)是個(gè)非常重要的產(chǎn)品形式和分支。

雖然它重要,但新手對(duì)這東西的理解充滿了讓人遺憾的扭曲。比如常見(jiàn)的誤解式提問(wèn),Saas 應(yīng)該怎么設(shè)計(jì)?適用哪些設(shè)計(jì)風(fēng)格?

……

所以我從最底層的技術(shù)層面,來(lái)解析 Saas 到底是什么,在未來(lái)你再也不用擔(dān)心對(duì)這個(gè)詞匯一知半解,無(wú)法正常參與業(yè)務(wù)討論了。




講解什么是 Saas,或者剛剛圖例出現(xiàn)的 Paas、laas 是什么,首先要認(rèn)識(shí)一個(gè)問(wèn)題,一個(gè)需要聯(lián)網(wǎng)的軟件,是如何落地的,需要哪些前提條件。

通常,我們可以把一個(gè)普通的聯(lián)網(wǎng)產(chǎn)品要正式上線并使用,需要滿足 9 個(gè)層級(jí)的條件,我們簡(jiǎn)稱 “9層塔”,分別是:

下面,我們根據(jù)每個(gè)大層級(jí)來(lái)解釋一下,它們分別都是什么。



1.1 基礎(chǔ)設(shè)施層

基礎(chǔ)設(shè)施層是一切網(wǎng)絡(luò)服務(wù)的根基,由現(xiàn)實(shí)世界的硬件組成,是所有技術(shù)、代碼、數(shù)據(jù)的運(yùn)行基礎(chǔ)。


層1:網(wǎng)絡(luò)(Networking)

即基礎(chǔ)的互聯(lián)網(wǎng)電信寬帶服務(wù),通過(guò)電信運(yùn)營(yíng)商在各地搭建聯(lián)網(wǎng)用的設(shè)備,并使用線纜相互連接,滿足數(shù)據(jù)的物理傳輸可能。

比如你想要在家上網(wǎng)沖浪(非移動(dòng)上網(wǎng)),最基礎(chǔ)的條件是就是購(gòu)買(mǎi)和開(kāi)通寬帶服務(wù),通過(guò)接入光纖的形式,實(shí)現(xiàn)從家中連接到互聯(lián)網(wǎng)世界的可能。


層2:服務(wù)器(Serves)

服務(wù)器,本質(zhì)上也是一臺(tái)電腦。有了聯(lián)網(wǎng)的條件,我們就要把網(wǎng)絡(luò)接入到這臺(tái) “電腦” 上,讓它來(lái)完成各種數(shù)據(jù)的處理和存儲(chǔ)。

但不管它能做什么,要做什么,首先你得先有這臺(tái)設(shè)備,不然后續(xù)的工作都無(wú)從談起,所以服務(wù)器指的就是用來(lái)完成后續(xù)工作的電腦設(shè)備。


層3:存儲(chǔ)(Storage)

存儲(chǔ)就是硬盤(pán),你想要運(yùn)行的任何程序、代碼,還是想要收集的數(shù)據(jù),都需要容納的地方,那就是硬盤(pán)空間。存儲(chǔ)就是關(guān)聯(lián)到服務(wù)器的硬盤(pán),是數(shù)據(jù)存儲(chǔ)的物理環(huán)境。

之所以硬盤(pán)被獨(dú)立出出來(lái),而沒(méi)有把 CPU 內(nèi)存這些拿出來(lái),是因?yàn)閿?shù)據(jù)的存儲(chǔ)和安全(物理上)是網(wǎng)絡(luò)服務(wù)的重中之重。CPU、內(nèi)存、電源壞了,替換就可以,硬盤(pán)損壞導(dǎo)致數(shù)據(jù)的丟失是無(wú)論如何不可能接受的。

所以,工程師們開(kāi)發(fā)了非常多特殊的技術(shù)來(lái)保障存儲(chǔ)的穩(wěn)定和安全。



1.2 技術(shù)應(yīng)用層

技術(shù)應(yīng)用層,就是具備了網(wǎng)絡(luò)、服務(wù)器、硬盤(pán)以后,讓這些基礎(chǔ)設(shè)施充分發(fā)揮作用和能效的相關(guān)技術(shù)。


層4:虛擬化(Virtualization)

虛擬化是個(gè)比較抽象的概念,它是一種資源利用的技術(shù),讓服務(wù)器最大化的利用和分配自己的資源。

比如一臺(tái)服務(wù)器,有8核心、8G內(nèi)存、8G存儲(chǔ),如果賣(mài)個(gè)一個(gè)客戶運(yùn)行一個(gè)程序,那么很可能這個(gè)這個(gè)程序日常只使用一個(gè)核心的算力,1GB內(nèi)存,1G不到的存儲(chǔ),剩下的算力資源不就浪費(fèi)了嘛?

于是,虛擬技術(shù)就可以把這臺(tái)服務(wù)器切割成 8 臺(tái) “虛擬機(jī)” 賣(mài)給 8 個(gè)這樣的客戶。讓他們?cè)谶@臺(tái)設(shè)備上運(yùn)行 8 個(gè)不同的程序,并根據(jù)它們各自使用的消耗靈活分配 CPU 和內(nèi)存資源。

所以,今天如果你想要搭建一個(gè)網(wǎng)站,云服務(wù)商出售的 “虛擬主機(jī)”,就是在實(shí)體服務(wù)器主機(jī)上切割出來(lái)的一部分。這樣客戶省錢(qián)了,商家利潤(rùn)率也更高了!


層5:操作系統(tǒng)(OS)

每臺(tái)電腦都有自己的操作系統(tǒng),我們熟知的 Windows、Mac OS等等。如果硬件沒(méi)有搭載操作系統(tǒng),那它們就只是一堆工藝精密的廢鐵。

對(duì)于服務(wù)器來(lái)說(shuō)也是,任何服務(wù)器想要正常運(yùn)行,都必須搭載相關(guān)的服務(wù)器操作系統(tǒng),有了基本的系統(tǒng),我們才能創(chuàng)建程序,讓服務(wù)器去運(yùn)行我們想要的功能。

前面提到的虛擬機(jī),就允許同一臺(tái)服務(wù)器通過(guò)虛擬技術(shù)運(yùn)行多個(gè)系統(tǒng)。


層6:中間件

中間件也是個(gè)比較復(fù)雜的技術(shù)概念,它是個(gè)獨(dú)立系統(tǒng)軟件服務(wù)程序,是軟件的直接面向?qū)ο螅ǘ皇欠?wù)器),是一種支撐軟件。

舉個(gè)不太嚴(yán)謹(jǐn)?shù)睦樱覀兂R?guī)的邏輯是一個(gè)程序?qū)?yīng)一臺(tái)服務(wù)器(或虛擬機(jī)),但真實(shí)情況往往是一個(gè)程序會(huì)關(guān)聯(lián)好幾個(gè)服務(wù)器和不同的系統(tǒng),來(lái)完成不同的網(wǎng)絡(luò)服務(wù)。正常情況下,你需要對(duì)每個(gè)服務(wù)器和系統(tǒng)進(jìn)行適配。

而中間件的作用就是幫助你省掉這個(gè)麻煩的步驟,讓你只需要對(duì)接唯一的翻譯和話事人,他會(huì)幫你向不同的任務(wù)對(duì)象傳達(dá)你的要求。


層7:程序環(huán)境(Rumtime)

程序環(huán)境,就是編譯代碼用的環(huán)境。我們常聽(tīng)說(shuō)的 C 語(yǔ)言、C++、PHP、Java、.Net 等編程語(yǔ)言,都需要安裝一個(gè)對(duì)應(yīng)的運(yùn)行環(huán)境。

許多熱衷電腦游戲的同學(xué)一定很熟悉游戲第一次啟動(dòng)觸發(fā)的 Java 安裝界面,那就證明這個(gè)游戲中運(yùn)用到了 Java 的代碼,如果你沒(méi)有 Java 的運(yùn)行環(huán)境,那么它們就無(wú)法生效。



1.3 產(chǎn)品表現(xiàn)層


層8:應(yīng)用(Application)

在這個(gè)系統(tǒng)下,應(yīng)用程序指的不是你在自己電腦手機(jī)上安裝的程序。而是安裝在服務(wù)器上運(yùn)行的程序,不管是后端程序還是前端程序。

它們需要使用某些特定的程序語(yǔ)言來(lái)編寫(xiě),并運(yùn)行在上面所說(shuō)的對(duì)應(yīng)環(huán)境中。我們所說(shuō)的后端開(kāi)發(fā),通常就是開(kāi)發(fā)服務(wù)器所運(yùn)行的程序的程序員。


層9:數(shù)據(jù)(Data)

這個(gè)詞放在這里可能有比較大的歧義,數(shù)據(jù)實(shí)際上就是使用這個(gè)程序所產(chǎn)生出來(lái)的數(shù)據(jù),而不是單指數(shù)據(jù)庫(kù)(數(shù)據(jù)庫(kù)也是環(huán)境的一部分)。

比如你打開(kāi)一個(gè)網(wǎng)站注冊(cè)了賬號(hào),上傳了頭像,那么這些信息就是使用程序所額外產(chǎn)生的數(shù)據(jù),它是項(xiàng)目正常運(yùn)作的必然產(chǎn)品。



1.4 SaaS 到底是什么

理解上面的9個(gè)層級(jí)的內(nèi)容是什么,我們就可以看下面這張圖表了。

SaaS 全程 Software-as-a-Service,翻譯叫 “軟件即服務(wù)”,講人話就是 “賣(mài)聯(lián)網(wǎng)軟件” 的。

前面提的 9 個(gè)層級(jí),除了最后一層數(shù)據(jù)是我們普通人可以負(fù)責(zé)的,其它每個(gè)層級(jí)都需要對(duì)應(yīng)的開(kāi)發(fā)和工程師來(lái)負(fù)責(zé)對(duì)吧,那么我們普通人還是企業(yè)就不能使用網(wǎng)絡(luò)軟件服務(wù)了嘛?

這肯定是不符合事物發(fā)展規(guī)律的。

SaaS 的存在,就是讓用戶不用管什么服務(wù)器、代碼、中間件這些有的沒(méi)的高深玩意,直接讓你在瀏覽器或本地客戶端上直接使用這款聯(lián)網(wǎng)軟件,并創(chuàng)建對(duì)應(yīng)的數(shù)據(jù)信息。

換句話講,只要這個(gè)軟件是聯(lián)網(wǎng)的,且軟件本身的功能就是服務(wù)的核心(劃重點(diǎn):社區(qū)電商類軟件的服務(wù)顯然不是軟件功能本身),它就是 SaaS。SaaS 既可以免費(fèi),也可以是通過(guò)批量出售軟件功能的使用權(quán)來(lái)賺取收益。


免費(fèi)情景:

微軟:如果你使用了基于 Web 的電子郵件服務(wù)(例如 Outlook、Hotmail 或 Yahoo!Mail),那么你已經(jīng)使用一種形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/


付費(fèi)情景:

在 B 端的語(yǔ)境下,SaaS 通常就是指制作一個(gè)面向商業(yè)用戶的聯(lián)網(wǎng)軟件,然后批量出售這個(gè)軟件的使用權(quán)。它并沒(méi)有特指這個(gè)軟件必須是 CRM、ERP、HRM 還是商用 HMI……

所以明白了嘛,SaaS 只是一個(gè)商業(yè)形式或技術(shù)形式的統(tǒng)稱,它根本沒(méi)有具體的設(shè)計(jì)規(guī)范或者學(xué)習(xí)方法,完全根據(jù)業(yè)務(wù)的實(shí)際需求和場(chǎng)景決定。

最后,再問(wèn)你們一個(gè)問(wèn)題,你們現(xiàn)在負(fù)責(zé)的項(xiàng)目是 SaaS 嘛?




在 9 層塔中,SaaS 是完全制作好軟件讓用戶直接上手使用的軟件,而 PaaS 和 IaaS 就不一樣。



2.1 PaaS

PaaS 全文 Platform as a Service,是平臺(tái)即服務(wù)的簡(jiǎn)稱。這屬于完全技術(shù)化的服務(wù),是非程序員的一般用戶難以參與到的業(yè)務(wù)類型了。

即服務(wù)商提供了基礎(chǔ)的 7 層服務(wù),只要用戶購(gòu)買(mǎi)了這些使用權(quán),那么就可以直接在這個(gè)基礎(chǔ)上編寫(xiě)或安裝運(yùn)行的程序進(jìn)行使用了。

比如全球最大的開(kāi)源 CMS 博客程序 WordPress,是由 PHP+MySQL 編寫(xiě)的,如果要?jiǎng)?chuàng)建這樣的網(wǎng)站,就可以直接購(gòu)買(mǎi)符合程序?qū)?yīng)環(huán)境的服務(wù)器,再進(jìn)行安裝部署即可。



2.2 IaaS

IaaS 全文 Infrastructure as a Service,就是用戶只購(gòu)買(mǎi)一個(gè)完全空白的虛擬主機(jī),類似你購(gòu)買(mǎi)了一臺(tái)硬盤(pán)格式化后完全空白的虛擬電腦。

用戶可以自己選擇安裝什么樣的系統(tǒng),編寫(xiě)什么樣的中間件,最后再搭建自己的框架。這適合定自定義要求更高的用戶,完全根據(jù)自己的需要 DIY 項(xiàng)目的服務(wù)器功能。



2.3 Hosting

Hosting 則是比 IaaS 更進(jìn)一步的服務(wù),從原本的虛擬服務(wù)器升級(jí)到了完整的服務(wù)器。

也就是說(shuō),在一些特定業(yè)務(wù)環(huán)境下(比如特殊的數(shù)據(jù)安全要求),用戶需要購(gòu)買(mǎi)完整的服務(wù)器硬件使用權(quán),從原本的合租換成整租。

所以,Hosting 就是服務(wù)器托管的意思,用戶向一些服務(wù)商購(gòu)買(mǎi)了完整的服務(wù)器硬件使用權(quán)和聯(lián)網(wǎng)功能,然后遠(yuǎn)程進(jìn)行控制和使用。而商家負(fù)責(zé)硬件層面運(yùn)維,防止服務(wù)器斷電、斷網(wǎng)、損壞、過(guò)熱、故障等一系列硬件問(wèn)題。



2.4 Co-location

九層塔中,我們其實(shí)還省略了一個(gè)更底層的環(huán)節(jié) —— 數(shù)據(jù)中心。

數(shù)據(jù)中心是一個(gè)物理名詞,在今天指的是大規(guī)模的服務(wù)器數(shù)據(jù)設(shè)備安置和運(yùn)行的空間。比如蘋(píng)果的云上貴州,就是典型的數(shù)據(jù)中心。

Co-location 的服務(wù)也叫場(chǎng)地出租,就是數(shù)據(jù)中心的商家,把數(shù)據(jù)中心的物理空間使用權(quán)租用給用戶,用戶自己購(gòu)買(mǎi)服務(wù)器或商家的(不是臨時(shí)租用)放進(jìn)去,再借助數(shù)據(jù)中心的網(wǎng)絡(luò)和其它基礎(chǔ)服務(wù)實(shí)現(xiàn)服務(wù)器的正常運(yùn)轉(zhuǎn)。

這個(gè)概念大家簡(jiǎn)單理解就可以,我就不多做介紹了。

所以,九層塔中包攬了不同層級(jí)數(shù)量的技術(shù),就可以形成不同的服務(wù),每一級(jí)服務(wù)有各自的優(yōu)缺點(diǎn),是由項(xiàng)目的實(shí)際情況決定的。




相信看完前面的介紹大家已經(jīng)知道,SaaS 等服務(wù)是建立在聯(lián)網(wǎng)的基礎(chǔ)之上的,也就是說(shuō),除了可以獨(dú)立運(yùn)行在你客戶端里的本地軟件,還包含更多需要聯(lián)網(wǎng)的軟件,或者干脆運(yùn)行在遠(yuǎn)程服務(wù)器主機(jī)上的軟件。

這是一個(gè)發(fā)展的過(guò)程……

最早的軟件安裝是我們到軟件店里購(gòu)買(mǎi)軟盤(pán)、光盤(pán),回到家里的電腦安裝,這些軟件往往只在本地運(yùn)行,是不需要聯(lián)網(wǎng)的孤島。

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展,孤島漸漸被消除,聯(lián)網(wǎng)上傳和獲取數(shù)據(jù)越來(lái)越普及,甚至,軟件都不需要再下載和安裝,直接用瀏覽器就可以訪問(wèn)使用。

這種模式,就催生了軟件的開(kāi)發(fā)維護(hù)與服務(wù)器、網(wǎng)絡(luò)的硬件運(yùn)行進(jìn)行了分工,一般的產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)專注在軟件應(yīng)用層面的開(kāi)發(fā)工作,而把網(wǎng)絡(luò)、遠(yuǎn)程服務(wù)交給其它商家,并付費(fèi)購(gòu)買(mǎi)。

這樣不僅帶來(lái)更高的效率,而且降低了各自的成本,實(shí)現(xiàn)了多方的共贏。

所以,我們?cè)賮?lái)理解云服務(wù)這個(gè)詞就很容易了,云就是網(wǎng)絡(luò),云服務(wù)就是基于聯(lián)網(wǎng)實(shí)現(xiàn)的各種軟硬件服務(wù)的總和。

除了遠(yuǎn)程的虛擬機(jī)、中間件、數(shù)據(jù)庫(kù)外,還有遠(yuǎn)程計(jì)算、渲染、CND加速、直播分流等等。

這也是為什么云服務(wù)會(huì)成為互聯(lián)網(wǎng)發(fā)展的基礎(chǔ),因?yàn)樗鼘?shí)在太重要了,幾乎所有互聯(lián)網(wǎng)公司都無(wú)法脫離云服務(wù)帶來(lái)的支持。

這也是為什么各個(gè)大廠紛紛投入云服務(wù)的賽道中,因?yàn)檫@是互聯(lián)網(wǎng)的基建和命脈之一,擁有非常廣闊的前景與市場(chǎng)。而在馬太效應(yīng)強(qiáng)者越強(qiáng)的現(xiàn)實(shí)環(huán)境下,頭部的廠商擁有更好的機(jī)群、技術(shù)、人員,可以大幅度降低運(yùn)作成本,提供更優(yōu)質(zhì)但價(jià)格更低廉的服務(wù)。

雖然云服務(wù)在今天不可或缺,價(jià)格也越來(lái)越有優(yōu)勢(shì)。但是,并不是所有企業(yè)都一定要選擇購(gòu)買(mǎi)外部的云服務(wù),這就是我們要理解的另一個(gè)課題 —— 私有化部署。

云服務(wù)再怎么便捷,也有一個(gè)缺陷,那就是數(shù)據(jù)是存儲(chǔ)在別的商家、企業(yè)的服務(wù)器中,有一定的數(shù)據(jù)安全隱患。

雖然數(shù)據(jù)安全是云服務(wù)的最基本保障,但很多對(duì)數(shù)據(jù)隱私、安全極度重視的企業(yè),是不愿意承擔(dān)任何外部風(fēng)險(xiǎn)的。所以他們就會(huì)通過(guò)自建本地服務(wù)器(私有云)的方式,實(shí)現(xiàn)從網(wǎng)絡(luò)、硬件到軟件全局私有化的部署。

也就是說(shuō),服務(wù)器機(jī)房是自己公司的,網(wǎng)絡(luò)是自己遷進(jìn)機(jī)房的,服務(wù)器自己買(mǎi)的,環(huán)境、虛擬化、數(shù)據(jù)庫(kù)自己搭建的,后端程序也是自己寫(xiě)的,最后電腦手機(jī)上運(yùn)行的客戶端,是連接這些服務(wù)器的。

哦對(duì)了,當(dāng)然這些硬件日常的維護(hù)也要由自己公司的運(yùn)維負(fù)責(zé)……

這樣的成本高嘛?非常高。但類似國(guó)企、銀行、證券、國(guó)防、政府機(jī)關(guān)等機(jī)構(gòu),對(duì)數(shù)據(jù)的安全性是異乎尋常的執(zhí)著的,他們是有足夠的動(dòng)力劃出預(yù)算來(lái)確保數(shù)據(jù)的私密與安全,用來(lái)運(yùn)行自己內(nèi)部的 B 端系統(tǒng)。

這也是為什么這些機(jī)構(gòu)從一開(kāi)始就拒絕使用 Figma 這種公有云端軟件,尤其是服務(wù)器在國(guó)外的。

再問(wèn)下一個(gè)問(wèn)題,私有化部署,就意味著這個(gè)環(huán)節(jié)中所有步驟全是自己搞定嘛?

當(dāng)然不可能,因?yàn)閼?yīng)用這個(gè)層面,有時(shí)候不是想開(kāi)發(fā)就開(kāi)發(fā)得出來(lái),或者成本實(shí)在超出了預(yù)算。因?yàn)樗接谢闹饕繕?biāo)是數(shù)據(jù)安全,但不是應(yīng)用的工具一定得個(gè)性化定制。

比如在即時(shí)設(shè)計(jì)官網(wǎng)的價(jià)格頁(yè)面,就可以看到 “私有部署” 這個(gè)選項(xiàng)。它的實(shí)際作用,就是允許客戶在自己的服務(wù)器上安裝它,讓內(nèi)部的員工使用設(shè)計(jì)軟件時(shí)是同步到公司指定的服務(wù)器而不是官方的公共服務(wù)器中,滿足客戶的數(shù)據(jù)隱私需求

注:這例子大家討論最多適合理解,非恰飯

所以,了解完上面的概念,你也就大概能明白什么是云服務(wù),什么是私有化。如果需要在工作中碰到更細(xì)節(jié)的名詞還是概念,可以再進(jìn)一步做理解。

文章來(lái)源:UI中國(guó)    作者:超人的電話亭
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)



B端后臺(tái)設(shè)計(jì)規(guī)范—OA系統(tǒng)為例

純純

綜合監(jiān)管平臺(tái)是對(duì)自然資源管控的一個(gè)OA系統(tǒng)。主要功能是對(duì)國(guó)土資源相關(guān)業(yè)務(wù)的監(jiān)測(cè)、評(píng)估和統(tǒng)計(jì),將各專項(xiàng)規(guī)劃實(shí)現(xiàn)“多規(guī)融合”,從而優(yōu)化城市自然資源配置,做好國(guó)土空間規(guī)劃統(tǒng)籌。


為什么要有設(shè)計(jì)規(guī)范

1、多個(gè)設(shè)計(jì)師同步設(shè)計(jì)

我們部門(mén)有2名UI設(shè)計(jì)師,所以在我們同時(shí)畫(huà)同一個(gè)項(xiàng)目界面時(shí),為了保持整個(gè)設(shè)計(jì)的統(tǒng)一,就需要我們?cè)O(shè)定設(shè)計(jì)規(guī)范。


2、設(shè)計(jì)與前端之間的溝通

與設(shè)計(jì)同理,開(kāi)發(fā)人員參照統(tǒng)一的設(shè)計(jì)規(guī)范寫(xiě)頁(yè)面,可避免同一系統(tǒng)中出現(xiàn)設(shè)計(jì)控件混亂的情況,從而提高開(kāi)發(fā)效率、減少溝通成本、減少返工率。


3、在公司內(nèi)部復(fù)用

在公司內(nèi)部,設(shè)計(jì)規(guī)范可運(yùn)用在多個(gè)項(xiàng)目中,從而減少開(kāi)發(fā)的工作量、提高開(kāi)發(fā)效率。


建立設(shè)計(jì)規(guī)范前的工作

從產(chǎn)品經(jīng)理手中接到原型圖,首先是與產(chǎn)品經(jīng)理的溝通,包括客戶需求、設(shè)計(jì)風(fēng)格的確定、頁(yè)面內(nèi)容的布局等等,關(guān)于設(shè)計(jì)尺寸,因?yàn)槲覀兛蛻粲玫氖?920*1080分辨率的電腦,所以設(shè)計(jì)就基于1920*1080尺寸來(lái)做;但有時(shí)會(huì)基于1440*900的尺寸來(lái)設(shè)計(jì),然后上下適配1920*1080和1366*768。所以設(shè)計(jì)尺寸要根據(jù)具體情況而定。


頁(yè)面框架

a、主體框架分為四個(gè)區(qū)域:頂欄、左側(cè)欄、頁(yè)簽、主體內(nèi)容

b、主體內(nèi)容上、左邊距為10px,默認(rèn)顯示一屏高度,超出的內(nèi)容加上下滾動(dòng)條

c、頁(yè)面中的各個(gè)組件根據(jù)不同屏幕分辨率采用自適應(yīng)


如何建立設(shè)計(jì)規(guī)范

1、顏色規(guī)范

后臺(tái)系統(tǒng)主色調(diào)大多運(yùn)用藍(lán)色,這是因?yàn)樗{(lán)色往往圍繞著科技、安全、信任等等,很符合業(yè)務(wù)場(chǎng)景,比如智慧城市、智慧醫(yī)療、智慧交通等。但是藍(lán)色用多了也會(huì)讓人感覺(jué)沒(méi)有新意、審美疲勞,所以在色調(diào)這塊,后臺(tái)系統(tǒng)可以采取皮膚功能的擴(kuò)展,做兩套配色好的皮膚供客戶選擇,這樣避免了因客戶的不滿而一次次的修改,從而提高工作效率。

2、文字規(guī)范

因?yàn)槲覀兠嫦虻目蛻舳酁檎ぷ魅藛T,且年紀(jì)稍長(zhǎng),所以字號(hào)要比平常的網(wǎng)頁(yè)設(shè)計(jì)要稍大一些;常用字體,中文:微軟雅黑,英文或阿拉伯?dāng)?shù)字:Arial;行間距=字體+8px。

undefined

3、按鈕規(guī)范

按鈕是用戶與系統(tǒng)間交互的一個(gè)重要觸點(diǎn),用于特定觸發(fā)事件的發(fā)生。按鈕類型可分為線性按鈕、面型按鈕、文字按鈕、圖標(biāo)按鈕、圖標(biāo)+文字按鈕,按鈕狀態(tài)分為常規(guī)、懸停、按下、禁用。按鈕的寬、高、曲率、文字離邊框的間距需要在規(guī)范中寫(xiě)明。

4、表單規(guī)范

在后臺(tái)系統(tǒng)中,表單多用于登錄注冊(cè)、搜索框、選擇器、信息錄入等。表單類型可分為輸入框、下拉框、時(shí)間選擇框、單選框、多選框等等,表單狀態(tài)分為默認(rèn)、輸入/選中、填寫(xiě)完成/已選擇、不可填寫(xiě)/不可選、錯(cuò)誤提示。對(duì)于必填表單,需在標(biāo)簽前后或輸入框后增加“紅色*號(hào)”。輸入框的高度、曲率需要在規(guī)范中寫(xiě)明。

5、表格

此圖為可進(jìn)行單選或批量選擇、排序、表頭分組和帶有凍結(jié)列的復(fù)合型表格:

a、固定列表格:對(duì)于屏幕無(wú)法展示完全的內(nèi)容,可以采用凍結(jié)重要列的方式,然后橫向加滾動(dòng)條左右滑動(dòng)

b、可對(duì)數(shù)據(jù)進(jìn)行排序:升序和降序

c、文字類字?jǐn)?shù)限制:重要字段全部顯示,其他文字信息超出寬度以“...”代替,鼠標(biāo)懸停時(shí)顯示全部?jī)?nèi)容

d、對(duì)齊方式:文字信息左對(duì)齊,因?yàn)槿说拈喿x習(xí)慣是由左到右、由上到下的,此外在主從型列表中,采用左對(duì)齊錯(cuò)開(kāi)文字,可使用戶一目了然,降低視覺(jué)噪音;數(shù)據(jù)信息右對(duì)齊,因?yàn)閿?shù)字單位個(gè)十百千萬(wàn)...是由右向左,方便比較數(shù)據(jù)大小


文章來(lái)源:站酷    作者:Alice冰冰
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)



以用戶體驗(yàn)為中心的商家后臺(tái)設(shè)計(jì)

純純

本文是參考國(guó)內(nèi)交互設(shè)計(jì)標(biāo)準(zhǔn)網(wǎng)站及用戶行為研究實(shí)現(xiàn)的用戶體驗(yàn)設(shè)計(jì)規(guī)范,用于后臺(tái)設(shè)計(jì),網(wǎng)站設(shè)計(jì)等。


一、統(tǒng)一性

涉及到的產(chǎn)品越多,產(chǎn)品統(tǒng)一性越強(qiáng),實(shí)現(xiàn)信息同頻,開(kāi)發(fā)和設(shè)計(jì)快速了解信息

  • 字段統(tǒng)一:模塊之間的tab的字段位置保持統(tǒng)一,減少用戶記憶負(fù)擔(dān)


  • 按鈕位置統(tǒng)一:(頁(yè)面功能操作按鈕,添加按鈕,導(dǎo)出按鈕,批量操作按鈕的位置)

一個(gè)項(xiàng)目中會(huì)涉及到多種按鈕,甚至一個(gè)頁(yè)面中也會(huì)涉及到多種不同功能的按鈕,這個(gè)就需要把同一類型或同一功能的按鈕,它們的位置統(tǒng)一。減少用戶學(xué)習(xí)成本。


因?yàn)槿绻粯拥墓δ馨粹o在不同的變換位置的話會(huì)打亂用戶已經(jīng)形成的習(xí)慣,增加其學(xué)習(xí)成本。(盡量采取以下情況的一種)


  • 幫助說(shuō)明的統(tǒng)一性

幫助說(shuō)明的表現(xiàn)形式有很多種,但不管選那種整個(gè)項(xiàng)目要保持統(tǒng)一,一些特殊情況除外,固定一個(gè)位置,可以方便用戶在最短的時(shí)間內(nèi),快速完成此項(xiàng)操作和獲取內(nèi)容。



二、權(quán)重性

權(quán)重是為了突出有效信息,也能在不同元素建立一種有組織的層次結(jié)構(gòu),讓用戶快速識(shí)別關(guān)鍵信息。

  • 主次關(guān)系對(duì)比

為了讓用戶能在操作上(類似表單、彈出框等場(chǎng)景)快速做出判斷,來(lái)突出其中一項(xiàng)相對(duì)更重要或者更高頻的操作。

突出的方法,不局限于強(qiáng)化重點(diǎn)項(xiàng),也可以是弱化其他項(xiàng)。

按鈕主次

信息主次

但是在一些需要用戶慎重決策的場(chǎng)景中,系統(tǒng)應(yīng)該保持中立,不能替用戶或者誘導(dǎo)用戶做出判斷

數(shù)字主次


  • 操作難易順序

表單在遵守操作流程的情況下,讓用戶涉及到的操作從易到難,讓用戶有填下去的動(dòng)力。

排序規(guī)則

(1)有“有默認(rèn)項(xiàng)”的選項(xiàng);

(2)有“選項(xiàng)”的選項(xiàng);

(3)只輸入“數(shù)字”的選項(xiàng);

(4)“添加圖片”“修改”等涉及復(fù)雜操作的選項(xiàng);

(5)“備注”“商品賣(mài)點(diǎn)”等選擇。

左右排版的時(shí)候?qū)ⅰ爸匾靥铐?xiàng)”先在從左邊(縱向排列)開(kāi)始排版(排版時(shí)仍按照我們的從簡(jiǎn)到難的規(guī)則)

注:當(dāng)“必填項(xiàng)”比“非必填項(xiàng)”多時(shí),排版上要考慮,就按照次序,左邊排滿,再排右邊。

  • 可視區(qū)域不=可點(diǎn)擊區(qū)域

在使用Table 時(shí),文字鏈的點(diǎn)擊范圍受到文字長(zhǎng)短影響,可以設(shè)置整個(gè)單元格為熱區(qū),以便用戶觸發(fā)。

注:當(dāng)懸浮在“客戶”所在的文字鏈單元格時(shí),鼠標(biāo)

【指針】隨即變?yōu)椤臼中汀浚瑔螕艏纯商D(zhuǎn)。


當(dāng)需要增強(qiáng)按鈕的響應(yīng)性時(shí),可以通過(guò)增加用戶點(diǎn)擊熱區(qū)的范圍,而不是增大按鈕形狀,從而增強(qiáng)響應(yīng)性,又不缺失美感。

注:在移動(dòng)端尤其適用。

鼠標(biāo)移入按鈕附近,即可激活Hover 狀態(tài)



三、有效交互

  • 頁(yè)內(nèi)編輯:

單字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí),可以使用『?jiǎn)螕艟庉嫛?


狀態(tài)一:普通的瀏覽模式,不區(qū)分可編輯行和不可編輯行;

狀態(tài)二:鼠標(biāo)懸停時(shí),『指針』變?yōu)椤菏中汀唬庉媴^(qū)域底色變黃,出現(xiàn)『Tooltips』提示單擊編輯;

狀態(tài)三:鼠標(biāo)點(diǎn)擊后,出現(xiàn)『輸入框』、『確定』、『取消』表單元素,同時(shí)光標(biāo)定位在『輸入框』中。


單字段行內(nèi)編輯

當(dāng)『易讀性』為主,同時(shí)又要突出操作性的『易編輯性』時(shí),可使用『文字鏈/圖標(biāo)編輯』

狀態(tài)一:在可編輯行附近出現(xiàn)文字鏈/圖標(biāo);

狀態(tài)二:鼠標(biāo)點(diǎn)擊『編輯』后,出現(xiàn)『輸入框』、『確定』、『取消』表單元素,同時(shí)光標(biāo)定位在『輸入框』中。


多字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí),可以使用『?jiǎn)螕艟庉嫛?

注:編輯模式在不破壞整體性的前提下,可擴(kuò)大空間,以便放下『輸入框』等表單元素;其中,在Table 中進(jìn)行編輯模式切換時(shí),需要保證每列的不跳動(dòng)。



  • 輕量化設(shè)計(jì)

減少負(fù)擔(dān),增加輕量化的操作

注:刪除的操作是謹(jǐn)慎的,系統(tǒng)在不打斷當(dāng)前操作的時(shí)候給出二次提醒確認(rèn)。


  • 輸入框?qū)崟r(shí)判斷

填寫(xiě)表單的條件反饋。

注:不需要提交后才出現(xiàn)提示,輸入及時(shí)給用戶反饋



  • toast反饋提示

完成整個(gè)操作后的提示以及系統(tǒng)提示

注:重要的,文字多于15個(gè)字以上不適合放在toast里面提示。


  • 提供邀請(qǐng)

提供下一步操作的入口

不僅要提示他發(fā)生了什么,還能引導(dǎo)他怎么做,甚至能讓他一步到位直接跳轉(zhuǎn)到要進(jìn)行下一步操作的頁(yè)面去操作

當(dāng)頁(yè)面沒(méi)有按鈕時(shí),提供明確的入口。


最后,關(guān)于后臺(tái)的用戶體驗(yàn)設(shè)計(jì)規(guī)范就總結(jié)到這里啦。

文章來(lái)源:站酷    作者:chaih
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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òu),來(lái)落地產(chǎn)品架構(gòu)

純純

讓信息架構(gòu),和產(chǎn)品架構(gòu),產(chǎn)生“化學(xué)反應(yīng)”

這個(gè)信息架構(gòu)的角度,具體而言,就是只包含一級(jí)頻道的交互設(shè)計(jì)。


核心功能、輔助功能、重大功能,作為產(chǎn)品的三大類功能,更多是從發(fā)展的角度來(lái)劃分。


除此之外,大部分 App 都還有一些非常基礎(chǔ)的功能,比如“個(gè)人資料”、“我的收藏”、“設(shè)置”、“搜索”等,此類功能,我們稱其為通用功能。


核心功能、輔助功能、重大功能和通用功能,是產(chǎn)品的四大類功能。


總的來(lái)說(shuō),本文主要以底部 tab 導(dǎo)航的 App 為例,探討一下,如何在一級(jí)頻道來(lái)落地產(chǎn)品的四大類功能。



01 宏觀上講,怎樣更好的擺放四大類功能?


網(wǎng)易云音樂(lè)是我個(gè)人很喜歡的一款產(chǎn)品,日常用的也比較多。不過(guò),它的新版(6.0 系列)給我的直觀感受是,有點(diǎn)復(fù)雜了,我甚至在很長(zhǎng)時(shí)間里找不到“私人 FM”這個(gè)以前常用的功能。


給我類似感受的產(chǎn)品,還有 Keep 和知乎。


究竟是什么,讓我覺(jué)得,這些產(chǎn)品變得有點(diǎn)復(fù)雜了?


個(gè)人簡(jiǎn)單總結(jié)了一下,最直接的一個(gè)原因,是這些 App 都新增了重大功能,并給這個(gè)重大功能單獨(dú)加了一個(gè)一級(jí)頻道。


比如 Keep 的“計(jì)劃”頻道、知乎的“會(huì)員”頻道、網(wǎng)易云音樂(lè)的“視頻”和“云村”頻道,都分別占用一個(gè)一級(jí)頻道。



企業(yè)為什么這么設(shè)計(jì)?個(gè)人的猜測(cè),這些重大功能于企業(yè)而言,很重要,要么肩負(fù)商業(yè)化使命,要么被寄予厚望,所以企業(yè)就單獨(dú)給了一個(gè)一級(jí)頻道。


這是一個(gè)相對(duì)簡(jiǎn)單的邏輯。但如果想要更好的去平衡用戶體驗(yàn)和商業(yè)化之間的關(guān)系,那我們就需要考慮更多的因素。


之前在信息架構(gòu)那篇文章里,個(gè)人的建議是,如果想讓 App 始終保持簡(jiǎn)單,那就只保留 4 個(gè) tab,也即只有 4 個(gè)一級(jí)頻道。


如何將產(chǎn)品的四大類功能、以及未來(lái)很大概率會(huì)不斷出現(xiàn)的重大功能,以接近最優(yōu)的方式,安置在寸土寸金的 4 個(gè)一級(jí)頻道上?


我想,這中間一定有一些原則,值得我們探討和參考。


1 和重要程度保持一致


通常而言,重要程度越高,分配到的空間就越多。這是一個(gè)比較普世的道理。


也就是說(shuō),這條原則,主要會(huì)影響到,四大類功能,各自占用多少空間比較合適。


我們有 4 個(gè)一級(jí)頻道,每個(gè)一級(jí)頻道代表了 25% 的空間。


再來(lái)看四大類功能,按其大概的重要程度,簡(jiǎn)單的分析一下。


先說(shuō)核心功能,這個(gè)最重要。


核心功能是立足之本和護(hù)城河。先換個(gè)角度看這個(gè)問(wèn)題,假設(shè)有三種可能,即核心功能可以占用一個(gè)、兩個(gè)或三個(gè)一級(jí)頻道。


先用下排除法。三個(gè)一級(jí)頻道難免顯得過(guò)多,剩余的三種功能擠在一個(gè)一級(jí)頻道里也會(huì)顯得過(guò)分擁擠;一個(gè)一級(jí)頻道的話,倒也可以,但是平分四分之一的空間很難體現(xiàn)出核心功能的重要性。


相比之下,兩個(gè)一級(jí)頻道就顯得較為合適。


綜合考慮到有四大類功能,通常兩個(gè)一級(jí)頻道也不會(huì)完全給核心功能所用。


所以,核心功能,大概占用一個(gè)半一級(jí)頻道,也即 40% 左右的空間即可。


再說(shuō)通用功能,這個(gè)比較容易。


此類功能通常比較多,重要程度可能不及重大功能,但是又不能沒(méi)有,所以通常我們也會(huì)單獨(dú)給一個(gè)一級(jí)頻道,就是“我”或者“設(shè)置”之類的一級(jí)頻道,大概占用 25% 的空間即可。


第三,說(shuō)下重大功能,這個(gè)比較重要。


通常而言,重大功能的重要性僅次于核心功能,而且重大功能可以有多個(gè),再考慮到通用功能一般單獨(dú)占用一個(gè)一級(jí)頻道。


那么,相對(duì)而言,重大功能,完全可以單獨(dú)占用一個(gè)一級(jí)頻道,甚至更多,大概占用 30% 左右的空間即可。


最后,說(shuō)下輔助功能,這個(gè)比較特殊。


首先,很多產(chǎn)品是沒(méi)有輔助功能的;其次,輔助功能是個(gè)小功能;最后,輔助功能的數(shù)量一般也不多。


總的來(lái)說(shuō),輔助功能是沒(méi)有必要單獨(dú)給一個(gè)一級(jí)頻道的。再考慮到 4 個(gè)一級(jí)頻道所剩空間已經(jīng)不多,所以,輔助功能一般和重大功能共用一個(gè)一級(jí)頻道即可,大概占用 5% 左右的空間。



2 和使用頻率保持一致


通常而言,用戶用的越多的功能,就排的越靠前。


也就是說(shuō),這條原則主要決定四大類功能的排序問(wèn)題。


具體而言,用戶用的最多的是核心功能,所以核心功能最靠前。


重大功能和通用功能,有時(shí)候很難說(shuō)哪個(gè)使用頻率更高,比如微信里的“搜一搜”和“收藏”。但是比較明確的是,很多 App 在誕生之初,并沒(méi)有重大功能,只有核心功能和通用功能。


所以自然而然,通用功能排在了核心功能后面。


個(gè)人有個(gè)猜測(cè),一方面,有時(shí)候很難說(shuō)清重大功能和通用功能,哪個(gè)使用頻率更高;另一方面,通用功能起初是排在最后的。


所以,當(dāng)重大功能出現(xiàn)時(shí),就延續(xù)了舊傳統(tǒng):通用功能依然排在最后。最終結(jié)果就是,重大功能和輔助功能排在中間。


值得一提的是,現(xiàn)在市面上開(kāi)始出現(xiàn)兩類現(xiàn)象。


其一是,有一些擁有 5 個(gè)一級(jí)頻道的 App,開(kāi)始把核心功能放到中間那個(gè)頻道,比如 Keep 的“運(yùn)動(dòng)”頻道。


其二是,企業(yè)開(kāi)始人為的控制打開(kāi) App 時(shí)默認(rèn)展示哪一個(gè)頻道,而且默認(rèn)顯示哪一個(gè)頻道,存在多種情況,例子依然包括 Keep:以前默認(rèn)顯示中間的“運(yùn)動(dòng)”頻道,現(xiàn)在默認(rèn)顯示“計(jì)劃”頻道。


個(gè)人覺(jué)得,對(duì)企業(yè)而言,這兩類做法,都是得不償失的。


因?yàn)檫@樣做,會(huì)讓 “從左起,1、2、3、4”這個(gè)排序失去價(jià)值。沒(méi)有這個(gè)前提,也就談不上“和用戶的使用頻率保持一致。


而且,這種默認(rèn)不顯示左邊第一個(gè)頻道的做法,有時(shí)候會(huì)讓用戶產(chǎn)生一種被綁架的感覺(jué)(默認(rèn)顯示收費(fèi)頻道),有時(shí)會(huì)讓用戶感覺(jué)企業(yè)在自作聰明(默認(rèn)沒(méi)顯示收費(fèi)頻道,但也沒(méi)顯示核心頻道)。



3 符合用戶預(yù)期


主要有兩個(gè)預(yù)期,邏輯預(yù)期和習(xí)慣預(yù)期。


3.1 邏輯預(yù)期


用戶確實(shí)很懶,但不代表用戶不會(huì)思考。


比如前文提到的,網(wǎng)易云音樂(lè)的“私人 FM“功能,在我的認(rèn)知里面,”私人 FM“和”每日推薦“一樣,都是個(gè)性化推薦,性質(zhì)極其相似,應(yīng)該放在一起。


所以,當(dāng)我在新版里的“每日推薦”旁邊找不到“私人 FM”時(shí),心里就覺(jué)得很奇怪很不解,心想這么好的功能不會(huì)是給刪了吧。


后來(lái)某一天,當(dāng)我在第三個(gè)一級(jí)頻道“我的”里面發(fā)現(xiàn)“私人 FM“的時(shí)候,我又覺(jué)很別扭,不好用。


另外一個(gè)例子,Keep 的動(dòng)作訓(xùn)練。 


在新版里面,一開(kāi)始我是去“發(fā)現(xiàn)”頻道的“動(dòng)作庫(kù)”找的,怎么找都找不到,跟找不到網(wǎng)易云音樂(lè)的“私人 FM“是一樣的心情。


因?yàn)槲矣X(jué)得,“動(dòng)作訓(xùn)練”和“動(dòng)作庫(kù)”,是很接近的一對(duì)事物,從邏輯上來(lái)講,用戶會(huì)覺(jué)得這倆事物挨在一起,或者會(huì)猜他們是不是挨在一起。


3.2 習(xí)慣預(yù)期


這里的用戶習(xí)慣,主要有兩類。一類是自家產(chǎn)品培養(yǎng)出來(lái)的,一類是市面上的產(chǎn)品培養(yǎng)出來(lái)的。


通常情況,一級(jí)頻道的設(shè)計(jì),是要符合用戶習(xí)慣的。


最忌諱的情況是,自己一手培養(yǎng)的用戶習(xí)慣,到最后自己再一手去打破,這樣很容易引起用戶的煩躁、不滿和失望等負(fù)面情緒。


比如 3.1 段的兩個(gè)例子,同樣也沒(méi)有符合用戶的習(xí)慣預(yù)期。因?yàn)樵谧铋_(kāi)始,網(wǎng)易云音樂(lè)的“每日推薦”和“私人 FM“是挨在一切的,Keep 的“動(dòng)作訓(xùn)練”和“動(dòng)作庫(kù)”也是融合在一起的。


4 良好的擴(kuò)展性


就一級(jí)頻道而言,重大功能和通用功能是最有可能擴(kuò)展出更多子功能的。所以,就擴(kuò)展性而言,需要重點(diǎn)照顧到這兩類功能。


通用功能大部分都收納在“我”這個(gè)一級(jí)頻道,通常也是一個(gè)列表的樣式,天然自帶良好的擴(kuò)展性。所以,擴(kuò)展性的難點(diǎn)和重點(diǎn),最后是落在了重大功能這里。


在一級(jí)頻道,重大功能的展現(xiàn)形式,通常有兩種。


一種是像核心功能一樣,直接把重大功能的內(nèi)容鋪陳出來(lái),典型代表是網(wǎng)易云音樂(lè)的“云村”。另外一種是把各個(gè)重大功能都收納起來(lái),只展示一個(gè)入口,典型代表是微信的“發(fā)現(xiàn)”頻道。


對(duì)企業(yè)而言,現(xiàn)實(shí)問(wèn)題是,當(dāng)重大功能的數(shù)量上升到兩個(gè)、三個(gè)甚至更多時(shí),如何展示他們?


市面上的常規(guī)做法,也是兩種。


一種是像網(wǎng)易云音樂(lè)和 Keep 這樣的,直接開(kāi)辟一個(gè)新的一級(jí)頻道,供重大功能使用。還有一種是微信這種,把所有重大功能都收納起來(lái),有新的重大功能出現(xiàn)時(shí),新增一行列表即可。



個(gè)人推薦微信這種做法,因?yàn)檫@種做法的擴(kuò)展性最好,可以應(yīng)對(duì)無(wú)窮盡的重大功能。


至此,我們簡(jiǎn)單總結(jié)一下。個(gè)人看法,四大類功能,具體咋擺放,并沒(méi)有標(biāo)準(zhǔn)答案,但是可以參考以上 4 個(gè)原則。




02 微觀上講,有沒(méi)有補(bǔ)充和例外?


有。借這個(gè)話題,聊兩個(gè)比較特殊的問(wèn)題。


1 頂部標(biāo)題欄的兩側(cè),適合放什么功能?


先來(lái)分析一下這個(gè)位置,頂部標(biāo)題欄的兩側(cè),位于屏幕的左上角或右上角,是個(gè)很顯眼的位置。


個(gè)人認(rèn)為,有三類功能比較適合這個(gè)位置。


第一類,是和當(dāng)前頁(yè)面內(nèi)容有密切關(guān)系的功能。比如“編輯”型功能,可參考微信讀書(shū)“書(shū)架”頻道的“編輯”。再比如“新增”型功能,可參考 Twitter 首頁(yè)信息流的發(fā)推圖標(biāo)。此類功能,最適合這個(gè)位置,而且一般也沒(méi)有更合適的位置來(lái)擺放他們。


第二類,是比較高頻的通用功能或重大功能,比如搜索、消息、設(shè)置等。


第三類,是某些高頻功能的快捷入口,比如微信的掃一掃和收付款。



除此之外,如果是一個(gè)比較低頻的功能,不管是通用功能、重大功能還是輔助功能,放在這里,都不合適,因?yàn)闀?huì)對(duì)用戶形成打擾。


2 一個(gè)功能,最多可以出現(xiàn)幾次?


大部分功能,在 App 里只會(huì)出現(xiàn)一次。但在日常使用各種 App 的時(shí)候,我們也會(huì)多次看到同一個(gè)功能,在不同的地方。


有時(shí)候,能看到三次,比如搜索,在微信、知乎和網(wǎng)易云音樂(lè)都出現(xiàn)了三次,我們也不會(huì)覺(jué)得哪里不對(duì)勁兒。實(shí)際上,搜索雖然出現(xiàn)了三次,但也沒(méi)有引起我們的特別注意。


還有一些功能,是出現(xiàn)了兩次。我們?cè)诘诙慰吹降臅r(shí)候,會(huì)有點(diǎn)煩躁,心想怎么又來(lái)了;有時(shí)候會(huì)有點(diǎn)困惑,心想下次我該用哪一個(gè),哪一個(gè)最快捷。


這中間有什么原則可以參考嗎?


先來(lái)看下搜索,在微信、知乎和網(wǎng)易云音樂(lè),都是比較高頻的功能。換句話說(shuō),用戶在不同的一級(jí)頻道,都有可能需要搜索一下,所以搜索出現(xiàn)三次,在不同的一級(jí)頻道,是有這個(gè)需求存在的。


搜索以外的功能,個(gè)人認(rèn)為,只有一類適合出現(xiàn)多次,通常兩次足矣。


那就是,此類功能確實(shí)比較高頻,同時(shí)路徑又比較長(zhǎng),使用起來(lái)不夠方便。這時(shí)候,就適合給此類功能一個(gè)快捷入口。這個(gè)快捷入口,一般是出現(xiàn)在標(biāo)題欄。



一個(gè)功能,如果只是單純的重復(fù)出現(xiàn)兩次,兩次都沒(méi)出現(xiàn)在標(biāo)題欄。那給用戶的感覺(jué),就是,App 并不是在給我提供快捷入口,而可能只是通過(guò)重復(fù)的方式來(lái)強(qiáng)推這個(gè)功能,就容易產(chǎn)生煩躁和困惑的負(fù)面情緒。



文章來(lái)源:站酷    作者:SnowDesign
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)

淺析用戶體驗(yàn)四維度

純純

用戶體驗(yàn)四維度的概念、價(jià)值以及相互之間的關(guān)系

用戶體驗(yàn),是用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種純主觀感受。

 

解讀用戶體驗(yàn),可以有很多視角。本文提供一個(gè)以人為本的視角:用戶體驗(yàn)四維度。具體如下。

 

HI X:Human Interface Experience,人與界面的交互體驗(yàn)。

HC X:Human Content Experience,人與內(nèi)容的交互體驗(yàn)。

HH X:Human Human Experience,人與人的交互體驗(yàn)。

HB X:Human Brand Experience,人與品牌的交互體驗(yàn)。


用戶體驗(yàn)四維度

 

 

01 四維度的概念

 

怎樣判斷一款產(chǎn)品有幾個(gè)維度?這就要從四維度的概念說(shuō)起。

 

1. HI X(人與界面的交互體驗(yàn))

 

HI X 是指用戶在瀏覽、閱讀、操作界面過(guò)程中產(chǎn)生的主觀感受。

 

HI X 既受信息架構(gòu)、交互設(shè)計(jì)和UI設(shè)計(jì)的影響,也受根需求和功能架構(gòu)的影響。主要依托手機(jī)和電腦的互聯(lián)網(wǎng)產(chǎn)品,天然存在界面。所以,HI X 屬于基礎(chǔ)屬性,所有產(chǎn)品都有。

 

2. HC X(人與內(nèi)容的交互體驗(yàn))

 

HC X 是指用戶在消費(fèi)內(nèi)容時(shí),內(nèi)容本身帶給用戶的主觀感受。

 

這里的內(nèi)容,既包括衣服、鞋子等實(shí)體商品,也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴(yán)選等電商產(chǎn)品,以及公眾號(hào)、Instagram、抖音等 UGC 產(chǎn)品,都具備 HC X 屬性。

 

3. HH X(人與人的交互體驗(yàn))

 

HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時(shí)產(chǎn)生的主觀感受,或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。

 

所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間,是指當(dāng)用戶扎堆或溝通交流時(shí),交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間,是指當(dāng)產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務(wù)時(shí),產(chǎn)品工作人員的服務(wù)行為帶給用戶的主觀感受。

 

關(guān)于第一層含義,不管是更強(qiáng)調(diào)社區(qū)屬性的產(chǎn)品,比如天涯社區(qū)、豆瓣小組、百度貼吧,還是更強(qiáng)調(diào)內(nèi)容屬性的產(chǎn)品,比如公眾號(hào)、微博、小紅書(shū)的筆記,都具備 HH X 屬性。

 

關(guān)于第二層含義,常見(jiàn)的 HH X 由客服人員提供。如果是電商產(chǎn)品,提供人員還包括快遞員和售后人員等。

 

4. HB X(人與品牌的交互體驗(yàn))

 

HB X 是指當(dāng)用戶想起、談?wù)撈鹌放?,或使用品牌的產(chǎn)品、體驗(yàn)品牌的服務(wù)時(shí),品牌帶給用戶的主觀感受。

 

只要一款產(chǎn)品做成了品牌,它就有 HB X 屬性。

 

HB X 會(huì)直接影響到我們是否信任、喜歡一個(gè)品牌,以及是否會(huì)使用它的產(chǎn)品和服務(wù)。所以,我們對(duì) HB X 往往會(huì)有一個(gè)抓重點(diǎn)的綜合評(píng)價(jià)。就像一個(gè)外向活潑的女生,雖然在外向程度方面和一個(gè)內(nèi)向安靜的男生不一致,但雙方也可能會(huì)選擇在一起,因?yàn)閮?nèi)向、外向并非雙方關(guān)注的重點(diǎn)。

 

因?yàn)?HB X 牽涉到對(duì)品牌的綜合評(píng)價(jià),所以就像工作都有一段試用期、戀愛(ài)都有一段了解期一樣,HB X 的形成往往也需要較長(zhǎng)時(shí)間,通常至少要 3~5 年。

 

 

02 四維度的價(jià)值

 

每一個(gè)維度,各有什么價(jià)值?

 

1. HI X(人與界面的交互體驗(yàn))

 

作為基礎(chǔ)屬性,HI X 的價(jià)值主要體現(xiàn)在以下兩方面。

如果是一款只具有 HI X 屬性的工具型產(chǎn)品,比如視頻會(huì)議產(chǎn)品 Zoom,那于這款產(chǎn)品而言,HI X 就是一切,這款產(chǎn)品的成敗也幾乎完全取決于 HI X。

 

如果是一款同時(shí)具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品,比如 B 站、快手這些視頻類產(chǎn)品,那此時(shí)的 HI X 就會(huì)扮演一個(gè)類似交通出行(基礎(chǔ)設(shè)施)的角色。如果 HI X 比較差,這個(gè)“出行”過(guò)程就會(huì)像出去玩時(shí)的塞車(chē)一樣,讓人難受;如果 HI X 很優(yōu)秀,這個(gè)“出行”過(guò)程就會(huì)像準(zhǔn)點(diǎn)的高鐵、飛機(jī)一樣,又快又爽。

 

2. HC X(人與內(nèi)容的交互體驗(yàn))

 

HC X 主要從內(nèi)容層面影響用戶滿意度。

 

如果 HC X 比較好,用戶消費(fèi)時(shí)的決策時(shí)間就會(huì)被大大縮減,同時(shí)用戶滿意度也會(huì)比較高。比如淘寶上就有一些原創(chuàng)設(shè)計(jì)、質(zhì)量不錯(cuò)、價(jià)格不貴的精品小店,很受歡迎。我們?nèi)ゾW(wǎng)易嚴(yán)選、優(yōu)衣庫(kù)天貓旗艦店這些質(zhì)量不錯(cuò)、設(shè)計(jì)不錯(cuò)、價(jià)格適中的店鋪買(mǎi) 東西時(shí),也會(huì)很快很省心。

 

以上說(shuō)的是電商產(chǎn)品,對(duì)于 UGC 類的內(nèi)容產(chǎn)品,也是類似的道理。比如站酷上的首頁(yè)推薦和編輯推薦,相對(duì)而言,HC X 比較不錯(cuò),所以看這些內(nèi)容的用戶也會(huì)比較多。

 

3. HH X(人與人的交互體驗(yàn))

 

HH X 是用戶情緒的最大影響因素,在情感方面對(duì)用戶具有最大吸引力。物以類聚,人以群分。HH X 良好的產(chǎn)品,會(huì)像一場(chǎng)談笑風(fēng)生、其樂(lè)融融的聚會(huì),吸引用戶去扎堆。

 

良好的 HH X 往往意味著良好的氛圍,它不僅能帶給我們諸如輕松、愉快等積極情緒,還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果,就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好,具體而言就是彈幕氛圍比較歡樂(lè)友好,這樣的氛圍帶給用戶的感覺(jué)是比較好的,用戶也喜歡在 B 站就著彈幕看視頻。

 

4. HB X(人與品牌的交互體驗(yàn))

 

HB X 事關(guān)品牌能不能以正面形象住進(jìn)用戶心里。

良好的 HB X,往往意味著良好的品牌美譽(yù)度和忠誠(chéng)度。HB X 良好的產(chǎn)品,就像你信任和喜歡的男/女朋友一樣,他/她會(huì)在你心里占據(jù)一定的分量和地位,讓你樂(lè)意介紹給家人和朋友認(rèn)識(shí)。比如蘋(píng)果的 Mac,就有很高的品牌美譽(yù)度和忠誠(chéng)度,用戶也很樂(lè)意把 Mac 推薦給身邊的朋友。

 

 

03 四維度的關(guān)系

 

四維度之間存在怎樣的關(guān)系?

 

1. HI X 是另外三個(gè)維度的基礎(chǔ)

 

HI X 作為基本維度,相當(dāng)于“水之源,木之本”。如果把用戶體驗(yàn)四維度比作一個(gè)金字塔的話,塔底的基石一定是 HI X,塔尖則是 HB X。

 

2. HC X 通常是 HH X 的基礎(chǔ)

 

HH X 的產(chǎn)生,通常離不開(kāi) HC X。也就是說(shuō),通常得有一個(gè)合適的“內(nèi)容”或“主題”,才能把人聚攏過(guò)來(lái)。比如結(jié)婚的時(shí)候,你可以邀請(qǐng)到很多親朋好友來(lái)參加婚禮,但在平時(shí),你很難邀請(qǐng)到這么多人。我們?cè)?B 站看視頻的時(shí)候,彈幕通常比較歡樂(lè)友好,氛圍不錯(cuò),但如果沒(méi)有這些視頻,也就不會(huì)有這些彈幕,以及不錯(cuò)的社區(qū)氛圍。

 

3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎(chǔ)

 

HC X、HH X 和 HI X 一樣,都可以成就 HB X。

 

以早期 Keep 為例,剛開(kāi)始只有課程這個(gè)功能,也就是說(shuō)只有 HI X 和 HC X 這兩個(gè)屬性。其中,HI X 還可以,HC X 比較優(yōu)秀。在此基礎(chǔ)上,慢慢發(fā)展出了社區(qū)功能(HH X 屬性),而且做得不錯(cuò)。再往后,有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下,Keep 有了不錯(cuò)的品牌美譽(yù)度和忠誠(chéng)度。也就是說(shuō),HC X、HH X 和品牌精神等因素,一起成就了良好的 HB X。

 

4. HB X 也可以僅有 HI X 這一個(gè)基礎(chǔ)

 

有些產(chǎn)品并不具有 HC X 和 HH X 這兩個(gè)屬性,而是僅有 HI X 這一個(gè)屬性。單憑一個(gè)良好的 HI X,也可以成就良好的 HB X。

 

比如 Zoom,作為一款開(kāi)視頻會(huì)議的工具應(yīng)用,它最初只有 HI X 這一個(gè)屬性。但是因?yàn)楹芎糜茫琀I X 很優(yōu)秀,所以如今的 Zoom 即便沒(méi)有內(nèi)容(HC X)和社區(qū)(HH X)屬性,依然成了一個(gè)在全球都很受歡迎的品牌,擁有了不錯(cuò)的 HB X。

 

總的來(lái)說(shuō),在四維度的金字塔里面,它們的關(guān)系如下圖所示。


文章來(lái)源:站酷    作者:SnowDesign

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

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)


產(chǎn)品用戶體驗(yàn)案例分析

純純

目錄


1.百度網(wǎng)盤(pán) :會(huì)員標(biāo)識(shí)

2.當(dāng)當(dāng):搜索記錄隱藏

3.當(dāng)當(dāng):分享動(dòng)效 ? 一鍵制作朋友圈分享海報(bào)

4.抖音:點(diǎn)擊復(fù)制 ID

5.飛書(shū):效率工作—語(yǔ)言自動(dòng)轉(zhuǎn)化

6.美團(tuán):優(yōu)惠卷新到提示

7.墨跡天氣:一鍵登錄(大部分應(yīng)用已上線該功能,部分應(yīng)用仍未上線)

8.起點(diǎn)讀書(shū):長(zhǎng)按可進(jìn)行互動(dòng)

9.騰訊視頻:亮度調(diào)節(jié)的動(dòng)效設(shè)計(jì)

10.微博:點(diǎn)贊動(dòng)效設(shè)計(jì)

11.知乎:刪除搜索記錄

12. QQ:可隱藏會(huì)話

13. QQ 音樂(lè):搜索入口的聽(tīng)歌識(shí)曲

14. QQ 閱讀:長(zhǎng)按復(fù)制的放大設(shè)計(jì)


一、百度網(wǎng)盤(pán):會(huì)員標(biāo)識(shí)別


在開(kāi)通會(huì)員后百度網(wǎng)盤(pán)會(huì)進(jìn)行對(duì)于應(yīng)用圖標(biāo)的更換,使得應(yīng)用圖標(biāo)更加高級(jí),在分享鏈接時(shí)也會(huì)加入會(huì)員分享的標(biāo)識(shí)。


屬于用戶激勵(lì)體系中的一個(gè)板塊,增強(qiáng)用戶的標(biāo)識(shí)和身份。




二、當(dāng)當(dāng)搜索記錄隱藏


搜索隱藏功能設(shè)定。


我們?cè)谑褂酶鞔髴?yīng)該的搜索功能時(shí)總會(huì)遇到過(guò)這樣的場(chǎng)景,當(dāng)你要某人或者在某種場(chǎng)景下需要進(jìn)行搜索時(shí),來(lái)不及刪除自己的搜索記錄出現(xiàn)社死的情況。


而當(dāng)當(dāng)?shù)乃阉麟[藏就可以完美的解決這個(gè)問(wèn)題,退一步講我們可以思考一下為什么別的成熟型應(yīng)用,沒(méi)有采用這樣的方式。大部分是沒(méi)有這個(gè)功能,其余則是在搜索這一個(gè)功能上已經(jīng)添加了其余用戶體驗(yàn)的設(shè)計(jì)。所以在這一塊就沒(méi)法加入這個(gè)設(shè)計(jì)。




三、當(dāng)當(dāng):分享動(dòng)效 ? 一鍵制作朋友圈分享海報(bào)


在當(dāng)當(dāng)應(yīng)用中點(diǎn)擊分享進(jìn)入頁(yè)面后不同于傳統(tǒng)的分享頁(yè)面,而是把分享到微信和分享到朋友圈進(jìn)行了動(dòng)態(tài)設(shè)計(jì)。并且在分享到朋友圈的右上角加上了海報(bào)的標(biāo)識(shí)。我們點(diǎn)擊會(huì)自動(dòng)跳轉(zhuǎn)生成海報(bào)。


這樣的設(shè)計(jì)可以更加吸引用戶的眼球并且自動(dòng)生成海報(bào)可以激發(fā)用戶在朋友圈轉(zhuǎn)發(fā)的次數(shù)。



動(dòng)效展示



四、抖音:點(diǎn)擊復(fù)制 ID


主頁(yè) ID 點(diǎn)擊可進(jìn)行復(fù)制  很多應(yīng)用都有 ID 。但是當(dāng)我們要進(jìn)行 ID 搜索的時(shí)候,我們便需要一遍一遍的反復(fù)查看或者記住這個(gè) ID 然后再進(jìn)行搜索。


目前部分的應(yīng)用也上線了類似的功能,讓用戶點(diǎn)擊 ID 區(qū)域可進(jìn)行復(fù)制。對(duì)于用戶體驗(yàn)的提升有著很顯著的效果。




五、飛書(shū):效率工作語(yǔ)言自動(dòng)轉(zhuǎn)化


飛書(shū)屬于一款協(xié)同辦公類的應(yīng)用


在飛書(shū)的設(shè)置用有語(yǔ)音直接轉(zhuǎn)換文字的說(shuō)明,飛書(shū)本身便是一款協(xié)同辦公類的產(chǎn)品。此產(chǎn)品效率便是產(chǎn)品關(guān)鍵詞之一,所以加入這樣的設(shè)置可極大的提升用戶的體驗(yàn)。




六、美團(tuán):優(yōu)惠卷新到提示


有提示用戶新到多少?gòu)垉?yōu)惠卷的提示


可以促進(jìn)用戶消費(fèi)的同時(shí)能幫助和提醒用戶去使用消費(fèi)卷不僅提高了商家的銷量還使得用戶在消費(fèi)中發(fā)現(xiàn)自己的優(yōu)惠卷及時(shí)使用




七、墨跡天氣:一鍵登錄(大部分應(yīng)用已上線該功能,部分應(yīng)用仍然未上線)


一鍵登錄


應(yīng)用登陸中目前主流為(1.第三方登錄,登陸之后需要再次綁定手機(jī)號(hào)。2.手機(jī)號(hào)注冊(cè)登陸,登陸之后可選擇是否綁定第三方。3.一鍵登錄,登陸之后可以選擇是否綁定第三方)在設(shè)計(jì)流程中,設(shè)計(jì)開(kāi)發(fā)者需要盡可能的減少對(duì)流程的復(fù)雜化。


一鍵登錄在為看來(lái)是最喜歡的一種登陸方式。導(dǎo)致現(xiàn)在如果需要各種注冊(cè)綁定,除非必要的情況下,我會(huì)直接放棄這款應(yīng)用。





八、起點(diǎn)讀書(shū):長(zhǎng)按可以進(jìn)行互動(dòng)


長(zhǎng)按頁(yè)面可以框選當(dāng)前的段落,并且出現(xiàn)互動(dòng)選項(xiàng)。

 

增加用戶和用戶之間,用戶和作者之間的互動(dòng)。使得用戶在讀書(shū)的同時(shí)有著較強(qiáng)的參與感。




九、騰訊視頻:亮度調(diào)節(jié)的動(dòng)效設(shè)計(jì)


滑動(dòng)可調(diào)節(jié)亮度

 

左邊的小動(dòng)效的設(shè)計(jì)加上右邊的漸變進(jìn)度條,使用戶可以更加明確的知道自己所處于一個(gè)什么樣的觀看環(huán)境,并且加入了漸隱漸現(xiàn)的出場(chǎng)和入場(chǎng)。

 

用一個(gè)小巧的動(dòng)效設(shè)計(jì)幫助用戶確定自己的亮度屬性,




動(dòng)效展示




十、微博:點(diǎn)贊動(dòng)效設(shè)計(jì)


點(diǎn)擊點(diǎn)贊會(huì)出現(xiàn)彩色的波浪并且不斷擴(kuò)散的同時(shí)有小表情彈出。


增加趣味性和互動(dòng)性。




動(dòng)效展示




十一、知乎:刪除搜索記錄


清空時(shí)會(huì)在進(jìn)行確認(rèn),再次點(diǎn)擊全部刪除方可刪除。


在下方列表中可逐一刪除,上面清空中不是點(diǎn)擊后就全部清空。而是再次出現(xiàn),起強(qiáng)調(diào)和確認(rèn)的作用。


增加用戶體驗(yàn),幫助用戶進(jìn)行二次確認(rèn)和防止用戶誤觸。作為一款咨訊類應(yīng)用用戶的搜索記錄也是比較重要的。




十二、QQ:可隱藏會(huì)話


前幾天發(fā)現(xiàn)的一個(gè)神級(jí)功能(雖然我已經(jīng)不用 QQ 進(jìn)行社交了),當(dāng)時(shí)我外甥和我講述了這個(gè)功能他么00后戲稱為養(yǎng)魚(yú)神器。


在好友的設(shè)置中可隱藏會(huì)話,開(kāi)啟隱藏會(huì)話以后。此聯(lián)系人發(fā)來(lái)的消息不會(huì)顯示在聯(lián)系人列表。需要自己手動(dòng)去設(shè)置隱藏會(huì)話列表去尋找。


應(yīng)用的功能更加多樣化滿足多種不同的需求。




十三、QQ 音樂(lè):搜索入口的聽(tīng)歌識(shí)曲


在搜索入口加入了聽(tīng)歌識(shí)曲且進(jìn)入界面后可進(jìn)行聽(tīng)歌識(shí)曲和哼唱識(shí)別的切換


搜索歌曲界面的使用場(chǎng)景為:1.用戶得知該歌曲的名稱或者歌詞進(jìn)行搜索。2.用戶聽(tīng)到了某一首很好聽(tīng)的歌曲想進(jìn)行搜索。此時(shí)在場(chǎng)景二的情況下,正好可以進(jìn)行聽(tīng)歌識(shí)曲。聽(tīng)歌識(shí)曲此功能在比較舊的版本屬于主頁(yè)中的一個(gè)模塊,把聽(tīng)歌識(shí)曲放到搜索入口處更加符合用戶場(chǎng)景。


對(duì)用戶場(chǎng)景進(jìn)行細(xì)致的研究,增加了用戶體驗(yàn)。




十四、QQ 閱讀:長(zhǎng)按復(fù)制的放大設(shè)計(jì)


長(zhǎng)按復(fù)制會(huì)有放大鏡設(shè)計(jì)


當(dāng)用戶處于復(fù)制文案的場(chǎng)景下時(shí),由于復(fù)制需要拖動(dòng),在拖動(dòng)的過(guò)程中會(huì)按壓住自己所處于的復(fù)制內(nèi)容位置。所以在用戶進(jìn)行復(fù)制時(shí)加入放大鏡的設(shè)計(jì)會(huì)使得用戶清楚的明白自己復(fù)制到哪里,不需要后續(xù)用戶在進(jìn)行刪減。


極大的加強(qiáng)了此場(chǎng)景下的用戶體驗(yàn)


動(dòng)效展示


文章來(lái)源:站酷    作者:張陽(yáng)光Designer

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

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)


交互設(shè)計(jì)之探索GUI和VUI

純純

一、GUI和VUI的定義:


1.1GUI


GUI(Graphical UserInterface)圖形界面,市面上最常見(jiàn)的交互方式。點(diǎn)觸,滑動(dòng),作為主要輸入方式。圖像顯示作為主要輸出方式。




1.2VUI


VUI(Voice User Interface)語(yǔ)音界面,常見(jiàn)沒(méi)有屏幕的智能音箱/耳機(jī),靠語(yǔ)言輸入和交流,如我們常見(jiàn)的小艾同學(xué),天貓精靈等。





二、GUI和VUI的發(fā)展歷程:


2.1GUI的發(fā)展歷程


1973年第一個(gè)可視化操作的Alto電腦在施樂(lè)帕洛阿爾托研究中心(Xerox PARC)完成。Alto是第一個(gè)把計(jì)算機(jī)所有元素結(jié)合到一起的圖形界面操作系統(tǒng)。它使用3鍵鼠標(biāo)、位運(yùn)算顯示器、圖形窗口、以太網(wǎng)絡(luò)連接。

1981年施樂(lè)公司推出了Alto的繼承者Star,Alto曾首次使用了窗口設(shè)計(jì)。

1983年蘋(píng)果電腦公司推出Apple Lisa個(gè)人電腦,是全球第一款搭載圖形用戶界面(GUI)的個(gè)人電腦。

1984年蘋(píng)果電腦公司推出Macintosh。

1986年首款用于Unix的窗口系統(tǒng)X Window System發(fā)布。

1988年IBM發(fā)布OS/2 1.10標(biāo)準(zhǔn)版演示管理器(Presentation Manager),這是第一種支持Intel計(jì)算機(jī)的穩(wěn)定的圖形界面。

1992年微軟公司發(fā)布Windows 3.1,增加了多媒體支持。

1995年微軟的Windows 95發(fā)布,其窗口操作系統(tǒng)的外觀基本定型。

1996年微軟發(fā)布Microsoft Bob,此軟件具有動(dòng)畫(huà)助手和有趣的圖片。

1996年IBM發(fā)布OS/2 Warp 4,它的交互界面得到顯著改善,至今仍有不少ATM機(jī)運(yùn)行這樣的系統(tǒng)。

1997年KDE和GNOME兩大開(kāi)源桌面項(xiàng)目啟動(dòng)。

1997年蘋(píng)果電腦公司發(fā)布Mac OS 8,這個(gè)系統(tǒng)具有三維外觀并提供了SpringLoaded Folder功能。

2000年蘋(píng)果電腦公司推出Mac OS X系統(tǒng)的默認(rèn)外觀Aqua。

2001年微軟發(fā)布Windows XP,實(shí)現(xiàn)了主題支持。

2003年Mac OS X v10.3提供了一鍵單擊訪問(wèn)任何已打開(kāi)窗口的功能。

2003年Sun公司的Java桌面系統(tǒng)為GNOME桌面添加了和Mac類似的效果。

2006年微軟發(fā)布Windows Vista,對(duì)此前其視窗操作系統(tǒng)的外觀作了較大的修改,實(shí)現(xiàn)了Aero功能。



2.2VUI的發(fā)展歷程


20世紀(jì)90年代,誕生了第一個(gè)可行的、非特定的(每個(gè)人都可以對(duì)他說(shuō)話)的語(yǔ)音識(shí)別系統(tǒng),交互式語(yǔ)音應(yīng)答(Interactive Voice Response,IVR)系統(tǒng)的出現(xiàn)代表了VUI的第一個(gè)重要時(shí)期。人通過(guò)電話線路進(jìn)行交互并執(zhí)行任務(wù),如機(jī)票預(yù)訂、銀行轉(zhuǎn)帳、業(yè)務(wù)查詢等。


目前很多像siri、Google這類集成了視覺(jué)和語(yǔ)音信息的APP,以及Amazon Echo這類純語(yǔ)音的設(shè)計(jì)產(chǎn)品,逐步發(fā)展并成為主流。隨著語(yǔ)音識(shí)別技術(shù)、AI技術(shù)、互聯(lián)網(wǎng)技術(shù)的發(fā)展,我們已經(jīng)可以在手機(jī)設(shè)備中用語(yǔ)音處理很多事情,但還有很多事情目前無(wú)法通過(guò)語(yǔ)音完成,需要我們探索。




三、GUI和VUI的設(shè)計(jì)要領(lǐng):


3.1GUI



        交互的多樣性:


不同于PC機(jī)通過(guò)鼠標(biāo)來(lái)點(diǎn)擊,在觸控設(shè)備上通過(guò)手指點(diǎn)按,由于手指的精確度相對(duì)于鼠標(biāo)指針差很多,所以子啊移動(dòng)頁(yè)面設(shè)計(jì)當(dāng)中的交互元素一定得辨識(shí)作用,手機(jī)并沒(méi)有懸停操作所以圖標(biāo)如果特征不明顯時(shí)一定要加文字識(shí)別,設(shè)計(jì)時(shí)也應(yīng)注意圖標(biāo)和菜單元素的尺寸。


拖拽和移動(dòng)是很相似的交互工作,被拖拽的元素始終跟隨著緊貼屏幕的指尖


除了使用單指之外,還可以用兩個(gè)手指放大,縮小圖片,如果設(shè)計(jì)了一些新的多指交互一定要給用戶提示和指導(dǎo)。


3.2VUI


3.3VUI的適用場(chǎng)景


智能家居

在智能家居領(lǐng)域VUI應(yīng)用越來(lái)越廣泛,相信在不久的將來(lái)我們一定能夠享受到更多的VUI所帶給我們的便利。


輔助駕駛

車(chē)載語(yǔ)音交互系統(tǒng)使得我們可以在開(kāi)車(chē)的同時(shí)接聽(tīng)電話、聽(tīng)廣播等。


企業(yè)應(yīng)用

未來(lái)大型企業(yè)中將會(huì)多領(lǐng)域應(yīng)用VUI,用于書(shū)寫(xiě)、記錄等工作。


醫(yī)療教育

智能記錄病例、管理病例的出入。


四、VUI的語(yǔ)言設(shè)計(jì)注意事項(xiàng)


過(guò)多的聲音干擾,不但會(huì)增加用戶的心智負(fù)擔(dān),將會(huì)引起用戶感到厭煩,尤其是,語(yǔ)音在資訊的負(fù)荷量上又比單純的聲音來(lái)的更多,考量是否存在存在的必要性就放在格外重要。而言,可以尋找替代的方式,透過(guò)震動(dòng)和燈光甚至狀態(tài)變化來(lái)提示,減少使用者的認(rèn)知負(fù)荷,并確保聲音只會(huì)在特定的時(shí)間點(diǎn)出現(xiàn),并提供使用者自行設(shè)定關(guān)閉聲音的功能


除了聲音本身的設(shè)計(jì)外,還要考慮整體環(huán)境的影響因素,可能周遭受非常的吵雜。換句話說(shuō),在KTV的包廂,吵雜的環(huán)境,會(huì)使用者無(wú)法聽(tīng)到消防警鈴響,而容易造成危險(xiǎn)事件的產(chǎn)生。也因?yàn)槿绱?,消防警鈴的聲音頻率設(shè)計(jì)就應(yīng)該介于2kM到4kM,因?yàn)檠芯恐赋鋈祟惖亩鋵?duì)于這個(gè)范圍的聲音最敏感


從音量的角度來(lái)看,耳朵對(duì)不同頻率的音量有不同的感知程度,有些聲音聽(tīng)起來(lái)很響亮,有些則是很沉悶因人而異,但比較客觀的量化體驗(yàn)指標(biāo)就是分貝(decibel,dB) ,在尺度上超過(guò)70分貝以上,會(huì)讓人產(chǎn)生憂慮不安,并引發(fā)各種癥狀,因此要盡量避免尺寸大小過(guò)大的設(shè)計(jì), ,,降低主動(dòng)的侵入性?;谶@些因素總和來(lái)說(shuō),還要考量到用戶和產(chǎn)品間的距離,與產(chǎn)品愈近,對(duì)于體積的需求量較大,反之為然


在聲音體驗(yàn)設(shè)計(jì)(Amber Case,2018)一書(shū)指出,當(dāng)警告或提示音出現(xiàn)的頻率愈高,就應(yīng)該設(shè)計(jì)成愈短,但不足就是,如果把聲音設(shè)計(jì)成短而急促,從而使用者需要集中相反地,事件發(fā)生時(shí)間間隔長(zhǎng)且久,則聲音提示更需要明顯且激烈的聲音來(lái)提醒用戶,例如手機(jī)鈴聲響時(shí),需要告知用戶

文章來(lái)源:站酷    作者:張陽(yáng)光Designer

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

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)

關(guān)于設(shè)計(jì)中的組件化思維

純純

組件化思維對(duì)于一個(gè)設(shè)計(jì)師來(lái)說(shuō)十分重要,它能夠幫助你更好的去進(jìn)行產(chǎn)品的設(shè)計(jì),那么組件化思維對(duì)于設(shè)計(jì)者都起到什么作用?

1.符合產(chǎn)品功能邏輯,組件化的設(shè)計(jì)理念能幫助設(shè)計(jì)符合產(chǎn)品功能邏輯。

 

2.有助于保持交互一致性,在一個(gè)項(xiàng)目里,選擇日期應(yīng)該是統(tǒng)一的交互方式,在整個(gè)產(chǎn)品中就應(yīng)該只有一種存在形式。所以時(shí)間選擇器就是一個(gè)組件,一個(gè)可以復(fù)用的組件,如果你沒(méi)有組件化思維,很可能出現(xiàn)好幾個(gè)不同的時(shí)間選擇器,一會(huì)兒是流輪撥盤(pán),一會(huì)兒是日歷,一會(huì)兒又是下拉列表,這樣的設(shè)計(jì)絕對(duì)是不能上線的。當(dāng)然該統(tǒng)一的地方還有很多,比如:錯(cuò)誤提示的形式,講度條的交互方式,導(dǎo)航欄和按鈕的樣式。表單,下拉菜單等等。

 

3.減少開(kāi)發(fā)工程師的工作量,開(kāi)發(fā)時(shí)使用不同的技術(shù),了解不同技術(shù)之間的差異,設(shè)計(jì)時(shí)按照每個(gè)開(kāi)發(fā)軟件的組件來(lái)做設(shè)計(jì)極大的減少了開(kāi)發(fā)的時(shí)間.

 

4.保持視覺(jué)風(fēng)格的統(tǒng)一,在同個(gè)項(xiàng)目不同頁(yè)面按鈕等組件的樣式上應(yīng)該保持統(tǒng)一。

 

5.便于多設(shè)計(jì)師協(xié)作組件化設(shè)計(jì)是大型設(shè)計(jì)項(xiàng)目的必要條件,多人協(xié)作完成項(xiàng)目時(shí),應(yīng)當(dāng)保持視覺(jué)統(tǒng)一規(guī)范,組件化建立就起到了至關(guān)重要的作用。

 

6.便于修改設(shè)計(jì),設(shè)計(jì)總是需要修改優(yōu)化的,只需要根據(jù)需求調(diào)整需要調(diào)整組件即可。

 

針對(duì)各種組件的開(kāi)發(fā)軟件做了以下介紹,歡迎在評(píng)論區(qū)進(jìn)行補(bǔ)充與探討!

 

echarts
 幫助各行業(yè)進(jìn)數(shù)據(jù)處理以及分析,一鍵生成餅圖,柱狀圖,甘特圖,折線圖等多種圖表;簡(jiǎn)道云的圖表分析

 

各種圖示效果樣式案例可供設(shè)計(jì)者參考

 

https://echarts.apache.org/examples/zh/index.html#chart-type-line

 


Ant Design

ant通過(guò)模塊化解決方案,降低冗余的生產(chǎn)成本,讓設(shè)計(jì)者專注于更好的用戶體驗(yàn),規(guī)范設(shè)計(jì)的設(shè)計(jì)思維,有豐富的設(shè)計(jì)資源與組件,對(duì)設(shè)計(jì)樣式的表達(dá)起到非常好的參考作用

https://ant.design/index-cn

 

Element

Ant Design稍加相似,可供設(shè)計(jì)者作為輔助參考

 

https://element.eleme.cn/#/zh-CN/guide/design

 

 

另外其它的開(kāi)發(fā)工具:

React是用于構(gòu)建用戶界面的JavaScript庫(kù),起源于Facebook的內(nèi)部項(xiàng)目

 

Hook 可以中文譯為“掛鉤”或者“鉤子”,逆向開(kāi)發(fā)中改變程序運(yùn)行的一種技術(shù),在逆向開(kāi)發(fā)中是指改變程序運(yùn)行流程的技術(shù),通過(guò)Hook在別人的程序中。需要了解其Hook原理,這樣就能夠?qū)阂獯a攻擊進(jìn)行有效的防護(hù)

 

 

Umi 是一個(gè)可插拔的企業(yè)級(jí) react 應(yīng)用框架。 插件化 umi 的整個(gè)生命周期都是插件化的,甚至其內(nèi)部實(shí)現(xiàn)就是由大量插件組成

 

 可擴(kuò)展 Umi 實(shí)現(xiàn)了完整的生命周期,并使其插件化,Umi 內(nèi)部功能也全由插件完成。此外還支持插件和插件集,以滿足功能和垂直

 

Vue 有兩大特點(diǎn):響應(yīng)式編程、組件化。其優(yōu)勢(shì)為:輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快。

vue是單頁(yè)面應(yīng)用,使頁(yè)面局部刷新,不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom,這樣大大加快了訪問(wèn)速度和提升用戶體驗(yàn)。它的第三方ui庫(kù)很多節(jié)省開(kāi)發(fā)時(shí)間。https://cn.vuejs.org/v2/guide/index.html

 

 

vue是我們的常用框架,大多數(shù)客戶的選擇。ant?react?hook?umi,中后臺(tái)這個(gè)也比較多,最近的項(xiàng)web端的基本上是這兩種選型。

其它常設(shè)計(jì)有wpf/qt/mfc/開(kāi)發(fā),在c++c#下運(yùn)行的客戶端程序

 

 

其它例如:

Bootstrap Twitter推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。是基于 HTMLCSS、JAVASCRIPT ,它簡(jiǎn)潔靈活,使得 Web 開(kāi)發(fā)更加快捷

https://getbootstrap.com/docs/5.1/examples/


developermaterial匯聚了ios、安卓組件框架及人機(jī)交互指南,相關(guān)鏈接:

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

 

藍(lán)藍(lán)設(shè)計(jì)——    作者:純純

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

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)

交互設(shè)計(jì)九大定律

純純


先舉個(gè)例子來(lái)理解一下:我要點(diǎn)擊手機(jī)上的確認(rèn)按鈕所需要的時(shí)間,和 手與按鈕的距離(D)   按鈕的大?。⊿)有關(guān)。  當(dāng)距離越長(zhǎng),所需要的時(shí)間越長(zhǎng)。當(dāng)按鈕越大,所需要的時(shí)間越短。

undefined


自我理解:我們將日常看到的界面元素進(jìn)行去色彩和去信息化,把這些控件/元素等都變成灰色色塊,其實(shí)也就變成了最簡(jiǎn)單的原型圖。這些灰色色塊拋開(kāi)了視覺(jué)上的屬性,其實(shí)有兩大最基本的屬性,即色塊的位置和大小。  菲茲定律告訴我們,要通過(guò)控制色塊或者說(shuō)界面元素的    大小和位置(絕對(duì)距離和相對(duì)距離)   來(lái)進(jìn)行界面布局,進(jìn)而控制交互時(shí)間,達(dá)到我們?cè)O(shè)計(jì)或者業(yè)務(wù)層面的目的。

     

a  合理的自身大小

這里是說(shuō)合理的大小。一般來(lái)講越大用戶越容易到達(dá),但是屏幕的大小是一定的,某一按鈕/目標(biāo)越大就會(huì)降低其他按鈕/目標(biāo)的大小。所以大小是相對(duì)制衡的,要根據(jù)具體情景和需求制定合理的大小(包括肉眼大小和實(shí)際熱區(qū)大?。?。但是關(guān)于手指點(diǎn)擊的最小熱區(qū)有規(guī)定是44x44px,一般的圖形的熱區(qū)大小都要高于這個(gè)大小,才能便于點(diǎn)擊。其他大小要根據(jù)功能需求進(jìn)行制定。

undefinedundefined


b 控制合理的相對(duì)距離

相對(duì)距離指的是界面內(nèi)部各個(gè)元素與控件之間的距離。一般通過(guò)研究 整個(gè)流程 的交互動(dòng)作,相互關(guān)聯(lián)的操作元素/操作手勢(shì) 距離會(huì)相對(duì)比較近,這樣能有效減少操作的時(shí)間。

undefined

undefined



c 特殊的絕對(duì)位置:屏幕邊界

屏幕邊界是可以確定的(鼠標(biāo)向某一方向一直移動(dòng)終會(huì)停留在屏幕邊界),但是屏幕中央確是較難確定的(四個(gè)方向鼠標(biāo)均能延展出去)。一些重要和主要的操作放在屏幕的邊界,可以方便用戶快速到達(dá),也是菲茨定律的普遍應(yīng)用。

undefinedundefined



d  反向設(shè)計(jì):增加時(shí)間來(lái)達(dá)成業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)有時(shí)候是與用戶目的是相違背的,也需要根據(jù)具體場(chǎng)景來(lái)判斷菲茨定律的使用走向。在特殊情境下也會(huì)通過(guò)距離和自身大小來(lái)反向增加使用時(shí)間來(lái)完成目的。

undefined

undefinedundefined


自我理解:席克定律也在研究交互時(shí)間。我們需要通過(guò)控制席克定律所總結(jié)的兩大因素:數(shù)目和復(fù)雜程度 進(jìn)而去左右界面布局的形式,從而縮短交互時(shí)間,達(dá)成良好的體驗(yàn)。


a 精簡(jiǎn)選擇的余地

選擇增加也就意味著事情可以發(fā)展的方向更加多元化,用戶就需要權(quán)衡事情該往哪個(gè)方向發(fā)展,而這就需要時(shí)間。不要讓你的用戶思考太多,所以一般給出的選項(xiàng)在滿足需求的情況下要盡可能的少。(這里注意:一般情況下要少但也不能太少,強(qiáng)迫用戶也是不可取。)

undefined


undefinedundefined


b  減少事情的復(fù)雜程度

事情越復(fù)雜,越難處理。盡可能的將復(fù)雜的事件通過(guò)交互或者版式等手段進(jìn)行簡(jiǎn)化,讓用戶覺(jué)得容易把握,而不是大量事物/流程/元素的堆砌。

undefined

undefined

undefined


undefined


undefined


自我理解:米勒定律對(duì)人的記憶數(shù)目進(jìn)行了定量的研究,即 5-9 個(gè)是人腦接受起來(lái)比較合適的,多了就容易混亂。


a 控制選項(xiàng)的數(shù)量

同一類型或者同一層級(jí)的元素出現(xiàn),數(shù)目一般控制在5-9個(gè)。

undefined


b 將多信息進(jìn)行分段處理,便于理解記憶

面對(duì)有大量信息的時(shí)候(數(shù)字/文字/段落)將其分割到5-9個(gè)等大腦容易記住的數(shù)量。

undefined

undefined


c 順應(yīng)時(shí)代的取舍

看到了有一些設(shè)計(jì)并沒(méi)有按照米勒定律去執(zhí)行,因?yàn)殡S著時(shí)代的發(fā)展,有一些定律并不是萬(wàn)能適用的。定律不可照搬,要根據(jù)具體情境去做取舍,以最終效果為導(dǎo)向。

undefined


undefined


自我理解:和四大基本原則的親密性原則類似,即在界面布局的時(shí)候性質(zhì)相同的事物要相接近,不相同的要遠(yuǎn)離,這樣更符合人們的既定認(rèn)知。


a 將相近的功能的分為一組

在面臨很多復(fù)雜功能時(shí),簡(jiǎn)單的堆砌顯得啰嗦,需求又不能隨意刪減。這時(shí)候就可以將相類似的功能放在同一個(gè)組別里面進(jìn)行收納整理,這與席克定律也相接近。

undefined


b 按照事物性質(zhì)和關(guān)聯(lián)程度嚴(yán)格把握布局的間距

這里與視覺(jué)設(shè)計(jì)也有很多重疊,即落實(shí)到頁(yè)面的高保真的細(xì)節(jié)。保證內(nèi)容想接近的元素間距要小,內(nèi)容有區(qū)分的間距要大。

undefined

undefined

undefined


自我理解:任何事物都有其復(fù)雜性,不可避免。某些事物一旦失去其復(fù)雜性,其作用本質(zhì)就可能失去效果。不要抱怨某些流程和工作,他們的復(fù)雜性是其發(fā)揮作用所必然帶來(lái)的。所以才需要你來(lái)優(yōu)化和簡(jiǎn)化。

a 把復(fù)雜性降到最低點(diǎn)

事物的復(fù)雜性是固定,但是要思考你所面對(duì)的是最簡(jiǎn)程度的復(fù)雜性么。首先優(yōu)化內(nèi)部系統(tǒng)的整個(gè)流程和不必要的步驟能夠有效降低系統(tǒng)本身的復(fù)雜性。

undefined


b 把復(fù)雜性進(jìn)行轉(zhuǎn)移 組合 隱藏

再把復(fù)雜性降低到最低程度之后,事物/流程仍然表現(xiàn)出一定復(fù)雜性時(shí)。就要考慮造成復(fù)雜的元素是什么,是否要將造成復(fù)雜的元素進(jìn)行收納組合,甚至隱藏。

undefined

undefined


自我理解:在相同前提下我們選擇最簡(jiǎn)單有效的。單純的炫技是可恥的。


a 給用戶清晰的引導(dǎo)

想清楚這張界面的主要目的是什么,順著這個(gè)目標(biāo)去引導(dǎo)用戶,其他元素的視覺(jué)層級(jí)要讓步,來(lái)讓用戶抓住重點(diǎn)。


b 少即是多

少代表流程/步驟/界面元素的減少,多意味著用戶量的增加 體驗(yàn)感的增強(qiáng)。

undefined


c 衡量產(chǎn)品功能的取舍

產(chǎn)品在功能迭代改版上,會(huì)出現(xiàn)大量不同的聲音和方向。但功能不是越多越好,用戶的時(shí)間是確定的,在某一功能上消耗的時(shí)間長(zhǎng),在其他功能上就短了。奧卡姆剃刀就要求我們找到主功能點(diǎn),其他功能點(diǎn)要做出讓步妥協(xié)甚至砍掉。



自我理解:關(guān)于防錯(cuò)定律和我的上一篇文章入門(mén)(一)的放錯(cuò)和容錯(cuò)原則基本近似,只是分類的更細(xì)致一些,分解到了操作的前中后階段來(lái)防止錯(cuò)誤。上一篇有更多解釋。


a  操作前  禁止操作或者預(yù)告結(jié)果

有一些功能在你操作之前就禁止操作,避免了錯(cuò)誤的發(fā)生。或者通過(guò)告知操作之后會(huì)產(chǎn)生的不良后果

undefined


b 操作中 提醒用戶

在操作過(guò)程中,進(jìn)行錯(cuò)誤提醒,有效避免錯(cuò)誤的進(jìn)行


c 操作后給用戶彌補(bǔ)錯(cuò)誤的機(jī)會(huì)

用戶在使用app的過(guò)程進(jìn)入錯(cuò)誤的路線,需要給用戶彌補(bǔ)的機(jī)會(huì)




自我理解:這一點(diǎn)主要體現(xiàn)在產(chǎn)品設(shè)計(jì)上,通過(guò)對(duì)未完成任務(wù)的提醒,來(lái)去博得用戶的注意力,進(jìn)而達(dá)到商業(yè)目的。


a 倒計(jì)時(shí)/讀條等交互反饋

倒計(jì)時(shí)會(huì)給人一種緊促感,逼迫用戶去注意,無(wú)形之中給用戶規(guī)定了任務(wù),這個(gè)任務(wù)也就是咋們的業(yè)務(wù)目標(biāo)。倒計(jì)時(shí) 讀條等交互方式也應(yīng)該謹(jǐn)慎恰當(dāng)使用,因?yàn)椴皇敲恳粋€(gè)任務(wù)場(chǎng)景都需要給用戶緊迫感。

undefined


b 定向反饋提醒

這一點(diǎn)也是利用未完成任務(wù)的相關(guān)信息反饋達(dá)到讓用戶去完成任務(wù)的業(yè)務(wù)目的。

undefined



自我理解:在上一篇一致性原則里面講到了和競(jìng)品保持一致/和迭代版本保持一致,其實(shí)是我拓展的。這一定律是明確指出了一致的根本原因。在產(chǎn)品設(shè)計(jì)的時(shí)候,用戶的心理就是我希望你的使用方式/操作和主流一致,超出預(yù)期的就會(huì)有人群不接受,就會(huì)有用戶流失。


a 能不創(chuàng)新就不創(chuàng)新

創(chuàng)新意味著改變,改變的不僅僅是你的界面還有用戶習(xí)慣和長(zhǎng)久以來(lái)的認(rèn)知模型。破壞習(xí)慣重建習(xí)慣是有很大風(fēng)險(xiǎn)的。

undefined

undefined


其實(shí)能看到很多Dribble頁(yè)面很有特點(diǎn),也不是完全沒(méi)有落地性,但是實(shí)際國(guó)內(nèi)產(chǎn)品并沒(méi)有看到這樣的設(shè)計(jì),原因就是不符合雅各布定律。


b 好的的產(chǎn)品都是創(chuàng)新的 不同的

這一點(diǎn)好像和上一點(diǎn)有點(diǎn)相悖。但是其實(shí)也不違背,有很多分寸的拿捏往往不是理論能完全決定的。微信后來(lái)居上絕不是因?yàn)檎瞻醧q,如果新的創(chuàng)新帶來(lái)的優(yōu)勢(shì)能夠彌補(bǔ)不相同所帶來(lái)的不足,也是可以嘗試的。

undefined


文章來(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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ù)



交互設(shè)計(jì):如何做到驚喜?

純純

保持好奇,巧妙融合,追求卓越,自然而然

一家之言,未必全面,甚至未必正確。歡迎交流探討。


01
交互設(shè)計(jì)的驚喜,是什么?

之前的文章,有簡(jiǎn)單定義過(guò)交互設(shè)計(jì)的“驚喜”,即為:超出用戶預(yù)期,并讓用戶開(kāi)心。

具體而言有兩類,分別是:小驚喜、大驚喜。

1 小驚喜

所謂小驚喜,是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。


先說(shuō)趣味性。常見(jiàn)的有兩類,第一類是比較好玩的動(dòng)效,第二類是一些小功能。第二類有時(shí)也會(huì)包含第一類。

動(dòng)效這塊,大家比較熟悉的,有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動(dòng),仿佛是嚇的發(fā)抖,也可能是在搖頭求饒;還有移動(dòng)端登錄 B 站、輸入密碼時(shí),動(dòng)畫(huà)人物的捂眼捂臉動(dòng)作。

(B 站登錄頁(yè)面)

小功能這塊,也可以分成兩類。一類是隱藏的小功能,一類是有趣的小功能。


很多隱藏功能,頭幾次用的時(shí)候,多少會(huì)有一些驚喜之感。

比如在訂閱號(hào)消息列表頁(yè),某個(gè)公眾號(hào)你已經(jīng)幾個(gè)月沒(méi)看過(guò),對(duì)它失去了興趣和信任。這時(shí),嘗試長(zhǎng)按這個(gè)公眾號(hào)的頭像或名稱,會(huì)呼出一個(gè)包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號(hào)消息列表)

還有些隱藏功能,既能讓用戶覺(jué)得驚喜和方便,又能引發(fā)用戶思考。這種思考,可能會(huì)讓用戶感嘆設(shè)計(jì)之妙,也可能也會(huì)給用戶一種猜對(duì)謎語(yǔ)的欣喜之感。

比如用墨刀的時(shí)候,嘗試按數(shù)字鍵 1,會(huì)呼出“內(nèi)置組件”這個(gè)使用頻率非常高的功能,會(huì)讓人覺(jué)得墨刀很聰明。

如果再仔細(xì)看一下,會(huì)發(fā)現(xiàn),“內(nèi)置組件”的縮略圖標(biāo),和其他 4 個(gè)諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo),并成一列。這 5 個(gè)縮略圖標(biāo)的排列順序(上到下),和它們快捷鍵("、"鍵和數(shù)字鍵1、2、3、4)的排列順序(左到右),是完全一致的。不得不說(shuō),這是一個(gè)簡(jiǎn)單又巧妙的設(shè)計(jì)。


再比如朋友圈里,某個(gè)不熟的好友每天都發(fā)集贊的小廣告,搞的我們不勝其煩。長(zhǎng)按其頭像,會(huì)呼出設(shè)置權(quán)限(屏蔽等)的功能。

有意思的是,長(zhǎng)按好友名字,則不會(huì)呼出這個(gè)功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁(yè)的;另外剛才那個(gè)例子,長(zhǎng)按公眾號(hào)頭像或名字,也都能呼出取關(guān)的彈窗。

個(gè)人的理解,生活中,我們用力長(zhǎng)按一個(gè)人,通常是表達(dá)強(qiáng)烈不滿,比如打架時(shí)。比起長(zhǎng)按名字,長(zhǎng)按頭像更像是長(zhǎng)按真人,所以也更能表達(dá)我們的不滿。


說(shuō)完隱藏的小功能,再說(shuō)下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布,微信給朋友發(fā)生日快樂(lè)后漫天飄落的蛋糕,拍照軟件里的貼紙,等等。

最后說(shuō)下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見(jiàn)的有如下類型:幫助弱勢(shì)、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。


幫助弱勢(shì)這塊,比如 iPhone 的輔助功能,里面有針對(duì)視力障礙的放大鏡功能、有針對(duì)不識(shí)字群體的旁白功能。

關(guān)照情緒這塊,很重要的一點(diǎn),就是避免引起用戶的負(fù)面情緒。比如微信的刪好友是單方面刪除,被刪時(shí)我們很難察覺(jué)到,而且微信也不會(huì)通知我們。個(gè)人覺(jué)得,微信之所以不通知我們,其中一點(diǎn),就是不給我們添堵。類似的還有,微信消息沒(méi)有“已讀”功能,這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊,比較為人所知的例子,5 月 20 號(hào)這天,微信紅包的限額,從 200 元升到了 520 元。還有一個(gè)例子,在微信聊天里發(fā)一個(gè)“ohh”,長(zhǎng)按并點(diǎn)翻譯,結(jié)果也是一個(gè)驚喜。

保護(hù)隱私這塊,比如借助 iPhone 的“引導(dǎo)式訪問(wèn)”功能,可以讓小朋友只能訪問(wèn)你的某個(gè)視頻應(yīng)用來(lái)看動(dòng)畫(huà)片。再比如別人用你電腦的時(shí)候,如果你不想讓對(duì)方看到你的微信,就可以通過(guò)手機(jī)微信來(lái)鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜,是指那些系統(tǒng)性大創(chuàng)新,并且能夠引領(lǐng)潮流、代表未來(lái)的交互設(shè)計(jì)。通常而言,這些大驚喜,最開(kāi)始給用戶的感覺(jué),就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,帶來(lái)了當(dāng)時(shí)的大屏幕:3.5 寸屏幕,以及純觸摸屏,和極為靈敏的觸控體驗(yàn)。

2011 年,Siri 同 iPhone 4S 一起問(wèn)世,為我們帶來(lái)了語(yǔ)音交互。如今,在 100 元就能買(mǎi)到品牌類智能音響的情況下,依靠語(yǔ)音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時(shí)代的 iPhone 創(chuàng)新不如以前,但不可否認(rèn)的是,時(shí)至今日,iPhone 依然在引領(lǐng)潮流,在給我們大驚喜。比如這幾年流行的手機(jī)無(wú)線充電和以 AirPods 為代表的極簡(jiǎn)的無(wú)線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì),還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購(gòu)一條床單,但是不知道床的尺寸,家里又沒(méi)有尺子。這時(shí),打開(kāi) iPhone 里的測(cè)距儀這款 App,就可以量出床的尺寸,會(huì)不會(huì)覺(jué)得有點(diǎn)酷。

(測(cè)距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹(shù),比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時(shí)又不用下載的產(chǎn)品,也正在引領(lǐng)新一輪的潮流。

還有一個(gè)比較酷的功能,就是以圖搜圖。筆者最早用過(guò)百度和谷歌的相關(guān)功能,主要是在電腦上搜索相似的圖片,使用頻率極低。

假設(shè)一個(gè)場(chǎng)景,比如在路上看到一個(gè)陌生人的外套很好看,但又不好意思上前問(wèn),就可以拿起手機(jī),利用淘寶的拍立淘功能,拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒(méi)有搜到類似商品,還可以用微信的掃一掃識(shí)物。和拍立淘相比,區(qū)別之處有兩點(diǎn)。第一,不用拍,直接能識(shí)別,不過(guò)通常得等 1-3 秒;第二,識(shí)物結(jié)果里面,除了商品,可能還會(huì)有百科詞條和資訊。


02
交互設(shè)計(jì):如何做到驚喜?

個(gè)人覺(jué)得,有 4 個(gè)要點(diǎn):既要有好奇心,又要有卓越心;既要天馬行空,又要保持自然。

聽(tīng)起來(lái)可能有點(diǎn)亂,且聽(tīng)筆者一一道來(lái)。


1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩,發(fā)現(xiàn),當(dāng)大人聊天時(shí),特別是談?wù)聲r(shí),小孩特別喜歡坐在旁邊聽(tīng),而且聽(tīng)的很認(rèn)真。小孩有時(shí)也會(huì)說(shuō)兩句,或是問(wèn)問(wèn)題,或是發(fā)表自己的看法。

看得出來(lái),小孩對(duì)成年人的世界,懷有極大的好奇心。實(shí)際上,不止于成年人的世界,小孩對(duì)周遭世界都有比較強(qiáng)烈的好奇心。

整體而言,成年人對(duì)周遭世界的好奇心,遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì),有什么關(guān)系?

交互設(shè)計(jì),某種程度上,也是一種創(chuàng)作。好的創(chuàng)作,一定來(lái)自生活。這就需要我們?nèi)ビ^察生活。

觀察生活,非常重要的一點(diǎn),就是好奇心,對(duì)周遭人、事、物要有足夠的好奇心。

比如上文提到的例子,在 iPhone 上刪除應(yīng)用前,應(yīng)用圖標(biāo)會(huì)抖。這種抖是一種趣味隱喻,既可以理解成嚇的發(fā)抖,也可以理解成搖頭求生。如果對(duì)生活沒(méi)有足夠的好奇心,是很難留意到這種生活細(xì)節(jié),并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心,還有一種特質(zhì),也是在小孩身上表現(xiàn)突出,同時(shí)也和本文主題有關(guān),那就是:童趣。

還是上文的例子,在 B 站 App 上輸入登錄密碼時(shí),動(dòng)畫(huà)人物會(huì)捂眼睛。這個(gè)設(shè)計(jì),可能不會(huì)打動(dòng)所有用戶,但至少一部分用戶會(huì)覺(jué)得比較有趣。如果我們內(nèi)心沒(méi)有一點(diǎn)童趣,可能也會(huì)覺(jué)得,這個(gè)設(shè)計(jì),沒(méi)啥意思。

玩是人的天性。對(duì)于比較好玩的交互設(shè)計(jì),大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上,據(jù)筆者觀察,我們大部分從業(yè)者是有童趣的。我們比較缺的,是好奇心。

那么,怎樣判斷自己是否擁有足夠的好奇心,其標(biāo)志是什么?

個(gè)人觀點(diǎn),有兩個(gè)標(biāo)志。第一,是對(duì)與個(gè)人利益無(wú)關(guān)的生活小事的關(guān)注,遠(yuǎn)多于對(duì)個(gè)人利益本身的關(guān)注。第二,觀察和思考,遠(yuǎn)多于評(píng)價(jià)和自大;追本和溯源,遠(yuǎn)多于偏見(jiàn)和傲慢。

為什么會(huì)提到個(gè)人利益?

因?yàn)椋ǔ6?,個(gè)人利益,尤其是短期利益(比如少花時(shí)間設(shè)計(jì)和修改原型),往往會(huì)和用戶體驗(yàn)存在一個(gè)此消彼長(zhǎng)的關(guān)系。

如果過(guò)于關(guān)注個(gè)人利益,不僅很難照顧到用戶體驗(yàn),甚至?xí)τ脩趔w驗(yàn)。至于給用戶帶來(lái)驚喜,就更無(wú)從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時(shí)代洪流面前,好奇心的兩個(gè)標(biāo)志,顯得很難,該如何實(shí)現(xiàn)?

關(guān)鍵在于找到背后的源動(dòng)力。這個(gè)源動(dòng)力,在筆者看來(lái),有兩點(diǎn),分別是:求知若渴、淡泊寧?kù)o。


求知若渴,可以源源不斷的驅(qū)動(dòng)我們?nèi)ビ^察、去思考萬(wàn)事萬(wàn)物的規(guī)律和聯(lián)系。

淡泊寧?kù)o,正如諸葛亮在《誡子書(shū)》中所說(shuō),“非淡泊無(wú)以明志,非寧?kù)o無(wú)以致遠(yuǎn)”。人的心力和精力終歸是有限的,如果我們沉迷名利、物欲、享樂(lè),就難有興趣和精力去琢磨萬(wàn)事萬(wàn)物了。

所以,只要找回自己童年的那種求知若渴,同時(shí)修身養(yǎng)性到淡泊寧?kù)o,這份好奇心,就會(huì)回來(lái)。

2 巧妙融合

某種程度上,很多帶給我們驚喜的交互設(shè)計(jì),都是一種巧妙融合。

筆者把這種巧妙融合,初步分成了三類,分別是:簡(jiǎn)單融合、直接融合、委婉融合


簡(jiǎn)單融合,最常見(jiàn)的就是隱藏功能。把一個(gè)較為簡(jiǎn)單的操作動(dòng)作,比如長(zhǎng)按、雙擊、下拉、左滑等,和一個(gè)合適的功能,融合在一起。用電腦時(shí)我們常說(shuō)的快捷鍵,也屬于這一類。

通常而言,操作對(duì)應(yīng)什么功能,講究的是合適,并無(wú)固定章法束縛。比如在微信朋友圈,發(fā)表文字的功能可以靠長(zhǎng)按(相機(jī)圖標(biāo))喚起,設(shè)置權(quán)限的功能也可以靠長(zhǎng)按(好友頭像)喚起。所以,簡(jiǎn)單融合這塊,可供我們發(fā)揮的空間很大。

另外,簡(jiǎn)單融合最常見(jiàn)的形式——隱藏功能,既實(shí)現(xiàn)了界面的簡(jiǎn)潔,又帶來(lái)了一定驚喜。

簡(jiǎn)單融合,既簡(jiǎn)單,又實(shí)用。建議大家充分開(kāi)發(fā)這一塊。

直接融合,是指將生活中的趣味性,直接搬到軟件中,搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布,以及漂流瓶、抽獎(jiǎng)等。

這一類融合,有點(diǎn)像商場(chǎng)里的電玩城,雖然我們不會(huì)經(jīng)常去玩,但確實(shí)比較好玩。

委婉融合,是指用明喻或隱喻的手法,將生活中微不足道的一些細(xì)節(jié),移植到交互設(shè)計(jì)中。

這種移植,有時(shí)是直白的。比如 Mac 上打開(kāi)應(yīng)用時(shí),其圖標(biāo)會(huì)在 dock 欄里有規(guī)律的彈跳,這會(huì)讓我們聯(lián)想到皮球的彈跳。

這種移植,有時(shí)是隱晦的。比如 iPhone 上刪除應(yīng)用前,其圖標(biāo)會(huì)抖。這種抖,是害怕還是求饒,任憑我們想象。

這種移植,有時(shí)是無(wú)聲的。比如在朋友圈,要想呼出隱藏的設(shè)置權(quán)限功能,只能長(zhǎng)按頭像,長(zhǎng)按名字則不行。這個(gè)設(shè)計(jì),不乏想象空間。如果不嘗試長(zhǎng)按名字,則不會(huì)發(fā)現(xiàn)這個(gè)細(xì)節(jié)。

委婉融合,有時(shí)會(huì)帶一些趣味性。更為重要的是,它能夠引發(fā)我們的思考和想象,所以是一種很出彩的融合。這種融合,也會(huì)賦予交互設(shè)計(jì),一種禪的味道。

整體而言,筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜,則保持好奇心、并做到巧妙融合,基本足矣。

如果目標(biāo)是大驚喜,則需要雄心壯志,需要舍我其誰(shuí),需要追求卓越。

日常工作中,可能會(huì)有這樣的對(duì)話?!斑@個(gè)動(dòng)效/功能,實(shí)現(xiàn)不了”。

大驚喜里的幾個(gè)例子,比如初代 iPhone 的觸控體驗(yàn),iPhone 里的測(cè)距儀,微信的掃一掃識(shí)物。這種設(shè)計(jì),意味著要修一條最好的長(zhǎng)城,背后往往有很多技術(shù)難題要攻克,有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì),那么,“實(shí)現(xiàn)不了”這句話,估計(jì)就聽(tīng)不到了。取而代之的,可能是:“還在研究中”,“下個(gè)大版本能上”。

4 自然而然

提到驚喜,還有一款值得研究和學(xué)習(xí)的產(chǎn)品,那就是錘子手機(jī)的 Smartisan OS。

個(gè)人觀點(diǎn),在小驚喜方面,Smartisan OS 頗有建樹(shù)。在大驚喜方面,Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說(shuō)小驚喜,比如華麗而細(xì)膩的桌面翻頁(yè)動(dòng)畫(huà),比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能,比如靜音可以設(shè)置時(shí)間,比如方便的長(zhǎng)截屏。

(靜音可設(shè)置時(shí)間)

(長(zhǎng)截屏)

再說(shuō)大驚喜。2016 年 10 月發(fā)布的一步和大爆炸,是比較大比較系統(tǒng)的功能,在當(dāng)時(shí)也很新。錘子公司也一直有宣傳這兩個(gè)功能。所以相對(duì)而言,這兩個(gè)功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī),身邊也有朋友在用錘子手機(jī)。以一步為例,這個(gè)功能,筆者體驗(yàn)過(guò)很多次。但平常很少用,身邊朋友的情況也類似。

(一步)

根據(jù)使用情況和主觀感受,個(gè)人覺(jué)得,一步這個(gè)大驚喜,還存在進(jìn)步空間,主要有兩個(gè)方面。

第一,宏觀層面。一步作為新生事物,好比一顆新種子。種子破土而出時(shí),是一顆嫩芽,而不是一棵大樹(shù)。新生的一步功能繁多,猶如一棵破土而出的大樹(shù),一方面有違自然規(guī)律,另一面因?yàn)楣δ芊倍?,很多用戶無(wú)法一下子看懂,看不懂可能就不想用了。

第二,微觀層面。一步這棵新大樹(shù),結(jié)了很多不同的果子,比如拖拽圖片到其他應(yīng)用、切換后臺(tái)應(yīng)用、展示最近圖片/文件等。這些果子,是用戶真正需要的嗎?這個(gè)是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個(gè)設(shè)計(jì)。通常而言,我們發(fā)到朋友圈的圖片都是精挑細(xì)選的,會(huì)占用一定量的時(shí)間,比如旅游或聚會(huì)結(jié)束后發(fā)的照片。一步解決的是效率問(wèn)題。發(fā)朋友圈的時(shí)候,少點(diǎn)幾下這種效率問(wèn)題,優(yōu)先級(jí)是比較靠后的,我們沒(méi)那么在乎。

還有拖拽圖片/文件這個(gè)交互動(dòng)作,大家通常在電腦上用的比較多,在手機(jī)上是沒(méi)有這個(gè)習(xí)慣的,實(shí)際上應(yīng)用場(chǎng)景也少。在手機(jī)上,大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺(tái)應(yīng)用這塊,大家第一個(gè)想到的,一定是系統(tǒng)自帶的,已經(jīng)用慣了。而且喚起速度比一步快,點(diǎn)擊面積也比一步大。

總的來(lái)說(shuō),微觀層面上,比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后,總結(jié)一下。對(duì)于領(lǐng)先時(shí)代、引領(lǐng)潮流的交互設(shè)計(jì),需要做到自然。

具體而言,就是,大驚喜是一種系統(tǒng)性的大功能,好比一棵大樹(shù)。這棵大樹(shù),最好有一個(gè)從種子到果子的生長(zhǎng)過(guò)程,這樣最自然,生命力也會(huì)最旺盛。

因?yàn)?,從破土而出的嫩芽階段,就可以通過(guò)用戶反饋和數(shù)據(jù)來(lái)檢驗(yàn),這種嫩芽,是不是真的對(duì)用戶有價(jià)值。如果價(jià)值不大或沒(méi)有價(jià)值,還可以再調(diào)整。如果長(zhǎng)成大樹(shù)結(jié)滿果子,再去調(diào)整,就很難了。


結(jié)語(yǔ)

交互設(shè)計(jì)小細(xì)節(jié),如果有一定的趣味性或人文屬性,則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì),如果最初感覺(jué)很酷,而且能引領(lǐng)潮流、代表未來(lái),則是大驚喜。

始終保持孩童身上那種非功利的好奇心,用心觀察并思考生活中的小事;

將生活小事和交互設(shè)計(jì)巧妙融合起來(lái);

以上兩點(diǎn),可以幫我們做出小驚喜類的交互設(shè)計(jì)。

追求卓越,獨(dú)立思考,做最酷最好的交互設(shè)計(jì);

酷是結(jié)果也好,是目標(biāo)也好,都不是最重要的。最重要的是,避免刻意和心切。醞釀大驚喜,猶如培養(yǎng)一個(gè)新生的孩子,需要投入極大耐心和精力,需要讓孩子自然成長(zhǎng)。沒(méi)有家長(zhǎng)會(huì)教半歲的孩子唱歌、把 3 歲的孩子送到高中念書(shū)。

再加上以上兩點(diǎn),可以幫我們做出大驚喜類的交互設(shè)計(jì)。

最后,用愛(ài)因斯坦的一句話來(lái)共勉。

想象力比知識(shí)更重要。

文章來(lái)源:站酷    作者:SnowDesign
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)m.yvirxh.cn )是一家專注而深入的界面設(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è)人資料

存檔