1. 界面中的設(shè)計(jì)細(xì)節(jié)
在用戶使用APP的第一直觀感受,便是我們所設(shè)計(jì)的ui界面,所以界面的信息閱讀的舒適感、顏色配色是否合理都是在第一時(shí)間直接的傳遞給用戶,我們?cè)诮缑孢@塊需要注意的設(shè)計(jì)細(xì)節(jié):1.用戶的閱讀效率 2.視覺舒適度 3.產(chǎn)品品質(zhì)感。
1.10 用戶閱讀效率
在界面設(shè)計(jì)中,界面能否準(zhǔn)確的將信息傳達(dá)給用戶,讓用戶在使用產(chǎn)品的過程中對(duì)信息的接受比較快速,所以界面的信息呈現(xiàn)的清晰度是設(shè)計(jì)師必備的能力,也是基礎(chǔ)能力,我們通過細(xì)節(jié)處的把控,讓設(shè)計(jì)助力用戶對(duì)界面信息的理解,也許我們下的心思用戶可能不會(huì)注意,但是它確確實(shí)實(shí)起到了作用,關(guān)于提升用戶的閱讀效率,我們可以從以下幾方面去入手:1.視覺降噪 2.視覺聚焦 3.容器整合。
1.11 視覺降噪
要讓用戶能清晰的理解我們的產(chǎn)品的第一步是需要整理界面中信息,把干擾用戶的信息都要進(jìn)行處理,關(guān)于視覺降噪我們可以入手的細(xì)節(jié)有:1.弱化小面積色彩 2.減少次要對(duì)比 3.整合半透明 4.弱化分隔 5.元素圖形化。
(1)弱化小面積色彩
小面積的色彩我們?cè)谝曈X上會(huì)將他看作為點(diǎn),當(dāng)點(diǎn)在界面中比較多的時(shí)候,會(huì)將用戶的視線分散,給用戶閱讀上造成不好體驗(yàn),所以我們?cè)谠O(shè)計(jì)界面中的標(biāo)簽或者有圖標(biāo)的顏色的區(qū)分的時(shí)候,我們盡量要控制顏色的種類,不宜太多,另外如果帶顏色的小標(biāo)簽也會(huì)給用戶一種是按鈕的心理暗示,所以,我們?cè)谠O(shè)計(jì)中需要考慮到用戶的使用場(chǎng)景和表意。
(2)減少次要信息對(duì)比
在APP中會(huì)有很多復(fù)用的板塊以及功能相似的板塊,我們盡量需要讓他們?nèi)ケ3纸y(tǒng)一,比如像feed流這樣通用的樣式,只要有差不多的feed列表出現(xiàn),我們需要在通用組件里去調(diào)用這個(gè)feed列表,其次是我們?cè)诿總€(gè)列表和卡片中有不同種類的信息字段,并不是每次出現(xiàn)新的信息我們都要在樣式上作出區(qū)分,我們需要盡量的衡量表意和層次,盡量讓字段文字能保持統(tǒng)一,從而提升閱讀的舒適感。
(3)整合半透明
一般的半透明浮層都是為了區(qū)分頁(yè)面的層級(jí),例如在支付時(shí)候,彈窗的半透明的選項(xiàng)卡,這些在視覺的Z軸的層級(jí)都是最高的,優(yōu)點(diǎn)是可以強(qiáng)化浮層與底部的關(guān)聯(lián)性,缺點(diǎn)是會(huì)使得視覺上不夠整齊,所以當(dāng)功能層面關(guān)聯(lián)性不強(qiáng)的時(shí)候,我們盡量不要去使用半透明的設(shè)計(jì)形式,所以半透明的浮層通常會(huì)用戶一些輔助的流程和體量比較好的任務(wù)型頁(yè)面,這樣的會(huì)讓交互效率和層級(jí)都是比較清晰。
(4)弱化分隔
界面的設(shè)計(jì)都是以板塊去區(qū)分每個(gè)功能層級(jí)模塊的不一樣,所以合理的設(shè)計(jì)分隔的樣式對(duì)于設(shè)計(jì)師也是一種細(xì)節(jié)處的考慮。我們?cè)诜指畹闹匾獙蛹?jí)也是有區(qū)分的,分割層級(jí)最高的是卡片分割,其次是分割條,在其次就是分割線,而分割線也有種,一種是通欄的分割線,另外一種是不通欄的分割線,所以分割線的層級(jí)區(qū)分是通欄的高于不通欄的分割線,還有一種情況是通過間距(留白)來區(qū)分層級(jí),一般是通過留白沒辦法去區(qū)分頁(yè)面層級(jí)的時(shí)候,我們才會(huì)考慮用分割線來區(qū)分。
①點(diǎn)線面的合理運(yùn)用
在APP界面中,也會(huì)有點(diǎn)線面的區(qū)別,一般文字我們會(huì)將它看為點(diǎn),分割線是線,圖片我們會(huì)把它看為面,所以一般情況下,如果當(dāng)我們?cè)O(shè)計(jì)界面的時(shí)候,當(dāng)點(diǎn)太多的時(shí)候,我們需要用線來進(jìn)行整合,所以界面中點(diǎn)和點(diǎn)(文字和文字之間)直接是需要用線來分隔的,而圖片和圖片直接,我們通常用間距來表示,所以圖片和圖片直接一半不會(huì)使用分割線。
隨著APP的普及開來,我們用戶對(duì)信息分割處理的認(rèn)知已經(jīng)升級(jí),現(xiàn)在的分割也是越來越弱,而當(dāng)一個(gè)列表有文字和頭像一起出現(xiàn)的時(shí)候,分割線往往也都在文字部分出現(xiàn),因?yàn)轭^像是圖片,是一個(gè)面,文字是點(diǎn),面是不需要線去分割的,而文字卻需要分割線去分割。
②狀態(tài)提升線需點(diǎn)到為止
我們現(xiàn)在的APP主要目的是傳達(dá)內(nèi)容本身,所以為了讓用戶更專注于內(nèi)容的閱讀,所以一般界面中的狀態(tài)的提升線的意義是為了讓用戶去了解當(dāng)前所處界面的層級(jí)和狀態(tài)。以前在做設(shè)計(jì)的時(shí)候,會(huì)習(xí)慣將提升線做的比較長(zhǎng),但是隨著設(shè)計(jì)趨勢(shì)的發(fā)展,人們習(xí)慣了短而精致的提升線,所以,過長(zhǎng)或者過粗的提示線在當(dāng)前的設(shè)計(jì)審美下會(huì)成為影響界面美感的因素了。
(5)元素形狀化
我們?cè)贏PP中看到一個(gè)陌生的形狀的時(shí)候,這個(gè)會(huì)在界面中形成視覺噪音,“人們?cè)谟^察熟悉的視覺形象時(shí),會(huì)把不完整的局部形象“作一個(gè)整體的形象來感知,這種知覺上的結(jié)束,稱之為閉合。如果局部形象過于陌生或者簡(jiǎn)略,則不會(huì)產(chǎn)生整體閉合聯(lián)想,這時(shí)大腦會(huì)產(chǎn)生負(fù)面體驗(yàn)”。
所以我們?cè)诮缑嬷械脑財(cái)[放通常會(huì)將它們擺放成人們生活中比較常見的形狀,便于用戶去聯(lián)想,來提升用戶的閱讀效率。
1.12 視覺聚焦
在用戶打開APP去瀏覽的時(shí)候,在沒有干擾的情況下,用戶是根據(jù)自己的喜好去瀏覽頁(yè)面,用戶對(duì)板塊內(nèi)容的偏好決定用戶注意力的所在之處,更多的時(shí)候,我們想要用戶根據(jù)我們?cè)O(shè)定的瀏覽路徑去瀏覽,我們就需要在設(shè)計(jì)的時(shí)候給用戶埋下“陷阱”。關(guān)于設(shè)計(jì)聚焦,我們可以從以下三個(gè)角度上入手:一.焦點(diǎn)放大 , 二. 瀏覽形式的選擇 三. 對(duì)齊基線。
焦點(diǎn)放大
在提升用戶閱讀效率的設(shè)計(jì)中,比較重要的就是主次要分明,將需要讓用戶了解到重要信息需要放大,讓用戶的視覺動(dòng)線有落地點(diǎn),所以關(guān)于設(shè)計(jì)焦點(diǎn)放大我們可以從以下三個(gè)角度上入手:①視覺中的“席克海曼定律”、②增加視覺上的對(duì)比。
① 視覺中的“席克海曼定律”
我們都知道席克定律吧!給予用戶的選擇越多,用戶做出決定的時(shí)間就越長(zhǎng)。在APP設(shè)計(jì)和頁(yè)面設(shè)計(jì)的時(shí)候也是一樣的,當(dāng)用戶進(jìn)入頁(yè)面后,我們的視覺動(dòng)線的排列也可以基于席克定律,放大想要讓用戶關(guān)注的信息點(diǎn),其他輔助信息可以稍微小點(diǎn),讓用戶可以直觀的區(qū)分去主次的層級(jí),讓用戶帶有預(yù)期性的閱讀,可以提升用戶的瀏覽效率。
自從ios11之后,大字重的風(fēng)格就大行其道了,越來越多的產(chǎn)品開始采用大字重的對(duì)比風(fēng)格,目的也是為了讓用戶明確自己瀏覽的頁(yè)面,然后帶著目標(biāo)在繼續(xù)往下去看。那為什么大字重的風(fēng)格會(huì)流行呢?
- 增加視覺上的對(duì)比
對(duì)比是設(shè)計(jì)美感的來源。我們?cè)谝郧白鯱i設(shè)計(jì)的時(shí)候,最小的字號(hào)大多數(shù)都還是11pt,最大的字重是20pt左右,而現(xiàn)在我們?cè)诳纯?,由于蘋果ios大字重風(fēng)格的影響,標(biāo)題的引入大字重風(fēng)格后,最大的字號(hào)提升至32pt,有的設(shè)置于到了34pt,由于最大的字號(hào)上限提升了。我們?cè)?2-34pt之間可以選擇的字號(hào)就比較多了,很明顯這種強(qiáng)烈而又低頻率的對(duì)比從視覺上就更具層次了。
- 增加字號(hào)的選擇范圍
以前頁(yè)面導(dǎo)航文字較小時(shí),板塊標(biāo)題以及列表標(biāo)題也都相對(duì)較小,假如導(dǎo)航文字大小為18pt,那么如果頁(yè)面內(nèi)的板塊標(biāo)題為20pt,就會(huì)顯得比較突兀,因?yàn)橐曈X上會(huì)感覺壓不住,層級(jí)較為混亂。現(xiàn)在由于最大的字號(hào)變大了,我們可以選用的字號(hào)就變多了,方便了視覺層級(jí)上的對(duì)比。
② 瀏覽形式的選擇
UI界面的排版往往需要考慮到不同字段的重要層級(jí)而去采用不同的設(shè)計(jì)樣式。由于我們很多APP的品類的不同,每個(gè)產(chǎn)品都很難遵循常規(guī)頁(yè)面布局來設(shè)計(jì)。盡管沒有一種布局方法適合所有目的,但回到設(shè)計(jì)的基礎(chǔ)上并理解諸如“ F”和“ Z”之類的視覺模式可以幫助簡(jiǎn)化產(chǎn)品布局,并使產(chǎn)品能夠更有效地與用戶進(jìn)行交流。
- F型瀏覽模式
F模式是一種簡(jiǎn)單的布局,旨在根據(jù)根深蒂固的人類行為引導(dǎo)用戶的眼睛查看您希望他們看到的信息。在這種情況下,F(xiàn)模式植根于我們的閱讀方式“從左至右”。
F模式就是指,用戶通常會(huì)沿著左側(cè)重直瀏覽而下,先去尋找 文章中每個(gè)段落開頭的興趣點(diǎn),這時(shí),如果用戶發(fā)現(xiàn)了他喜 歡的,他就會(huì)從這里開始水平線方向的閱讀。
- Z型瀏覽模式
Z型瀏覽模式模式相似,因?yàn)樗裱脩舻难劬淖蟮接胰缓笤傧蛳碌囊苿?dòng),但是當(dāng)使用較少的內(nèi)容時(shí),路徑會(huì)簡(jiǎn)化為鋸齒形。下面的示例演示了大型設(shè)計(jì)元素(而不是文本塊)如何將用戶從左上方的徽標(biāo)引導(dǎo)到右上方的CTA,然后向下引導(dǎo)至下一個(gè)主要設(shè)計(jì)元素。
Z模式的瀏覽模式在于用戶首先關(guān)注的頁(yè)頭水平方向上的內(nèi) 容。當(dāng)視線抵達(dá)底部時(shí),又遵循著從左到右的習(xí)慣模式,重復(fù)再水平掃視頁(yè)尾的最底部的內(nèi)容。
③ 文字的對(duì)齊基線
通常我們?cè)谠O(shè)計(jì)界面的時(shí)候,在文本需要對(duì)齊的時(shí)候,不需要強(qiáng)制性的與列表最邊緣對(duì)齊,并且當(dāng)文字出現(xiàn)兩列時(shí),需要設(shè)計(jì)師主動(dòng)控制第二列視覺起點(diǎn),保證符合視覺對(duì)齊基線。而在有輸入的表單的標(biāo)題的長(zhǎng)短不一致的時(shí)候,我們也是歸檔一端的對(duì)其基線,來穩(wěn)定基本的視覺舒服感。
1.13 容器收納
我們每個(gè)APP都會(huì)承載大量文字、圖片、視頻的各種操作控件,UI設(shè)計(jì)師的職責(zé)便是將他們按照美的形式來排版設(shè)計(jì)和歸類,其中歸類信息承擔(dān)的責(zé)任便是用戶對(duì)信息的理解和吸收,所以,這是我們不可忽視的一步。關(guān)于容器收納我們可以通過以下設(shè)計(jì)策略進(jìn)行:一.接近性原則歸納法,二.卡片既是容器,三.同屬性板塊整合。
(1)接近性原則歸納法
單個(gè)視覺元素之間無限接近,視覺上會(huì)形成一個(gè)較大的整體。距離近的單個(gè)視覺元素會(huì)溶為一個(gè)整體,而單個(gè)視覺元素的個(gè)性會(huì)減弱。如果相關(guān)的元素不夠緊湊,用戶瀏覽時(shí)就需要根據(jù)內(nèi)容進(jìn)行主觀上的判斷,降低閱讀效率,所以在設(shè)計(jì)的時(shí)候,我們盡量要將相關(guān)聯(lián)的元素靠的比較近,不相關(guān)的元素隔的比較遠(yuǎn)。
(2)卡片既是容器
當(dāng)產(chǎn)品中的圖標(biāo)字段和文字和字段比較多的時(shí)候,我們想要將他們有序的區(qū)別開,且不會(huì)很凌亂,這個(gè)時(shí)候我們可以考慮用卡片的來分隔頁(yè)面,這樣板塊與板塊直接會(huì)更加清晰明朗,而且列表中的信息比較多的時(shí)候,通常是采用卡片的形式進(jìn)行劃分,讓界面看起來更為整潔。
(3)同屬性板塊整合
我們用戶在同一個(gè)板塊看到的相關(guān)的元素和列表的時(shí)候,我們潛意識(shí)會(huì)將他們認(rèn)為他們是有關(guān)聯(lián)的,所以,為了避免用戶出現(xiàn)認(rèn)知斷層,我們盡量要將界面中不相關(guān)的元素不要放在一起,不然會(huì)影響用戶在使用過程中對(duì)自己信息的判斷。
1.20 視覺舒適度
視覺的舒適度是用戶對(duì)于產(chǎn)品比較直觀的感覺,它在于我們?cè)O(shè)計(jì)對(duì)產(chǎn)品顏色的把控、圖標(biāo)的細(xì)節(jié)以及其他細(xì)節(jié)方面的處理。關(guān)于視覺舒適度我們可以通過以下設(shè)計(jì)策略進(jìn)行:1.色彩的協(xié)調(diào)感,2.圖形體現(xiàn)細(xì)節(jié)。
1.21 色彩的協(xié)調(diào)感
我們產(chǎn)品中一般所包含的顏色的種類會(huì)比較多,而協(xié)調(diào)感是人類生理上和心理安全感的需求,也是受眾時(shí)間持久閱讀的色彩保障。關(guān)于色彩的協(xié)調(diào)感我們可以通過以下設(shè)計(jì)策略進(jìn)行:一.品牌色的延續(xù),二.讓配色有規(guī)律,三.紋理解決配色的極端場(chǎng)景。
(1)品牌色的延展
我們生活比較常見的黑色,除了將眼睛閉上,一般不會(huì)有純黑的顏色,純黑色會(huì)給與人一種比較悶的感受,比如黑色的夜空不會(huì)是純黑色的,黑色的電腦顯示器也不是純黑色的,顯示器上我們?nèi)g覽的字體,也不會(huì)給我們純黑色的的。
所以我們?cè)诋a(chǎn)品中對(duì)黑色的文字的處理也不應(yīng)該去選用純黑的,純黑的色彩的選用會(huì)給我們用戶的視覺來一次斷層的處理,感覺這個(gè)顏色會(huì)比較突兀,所以,我們較早之前為了避免純黑色文字的出現(xiàn)會(huì)采用“高級(jí)灰”的文字色彩,即在純黑色上偏灰色的色相,隨著用戶體驗(yàn)設(shè)計(jì)的水漲船高,我們現(xiàn)在為了避免文字出現(xiàn)比較純的黑色一般會(huì)黑色上往自己產(chǎn)品的主色調(diào)去偏移,這樣既不會(huì)出現(xiàn)純黑色的不好體驗(yàn),也可以對(duì)自家產(chǎn)品色的一個(gè)顏色,提升對(duì)品牌的感知度。
(2)讓配色有規(guī)律
一般在我們APP產(chǎn)品的配色中,讓人感覺配色不協(xié)調(diào)因素主要有兩個(gè),一個(gè)是色彩選用的過多和過雜,會(huì)讓人感覺顏色的突然出現(xiàn)會(huì)比較突兀,第二個(gè)是頁(yè)面中的色彩缺少關(guān)聯(lián)性,讓用戶看起來哪個(gè)顏色都是新出現(xiàn)的,使用起碼比較容易在當(dāng)前的產(chǎn)品跳出,感覺進(jìn)入了一個(gè)全新的產(chǎn)品。
所以我們?cè)诋a(chǎn)品中是色彩的選用,盡量定好一組常用的色彩,然后便可以在界面中的圖標(biāo)、插畫中去復(fù)用,提升色彩在產(chǎn)品中的規(guī)律,讓色彩在頁(yè)面中能有呼應(yīng)。
(3)紋理解決配色的極端場(chǎng)景
我們?cè)谌粘5脑O(shè)計(jì)工作的交接過程中,經(jīng)常會(huì)聽到領(lǐng)導(dǎo)這樣的說,“這個(gè)背景配色太單薄了,不夠豐滿”這樣的言語(yǔ),這個(gè)時(shí)候我們可以采用點(diǎn)綴的紋理來裝飾,通過使用同類色來增加點(diǎn)綴的元素從而讓視覺上更加協(xié)調(diào),來增加產(chǎn)品的通透感,使得我們產(chǎn)品的搭配呈現(xiàn)上會(huì)更加的立體。
1.22 圖形體現(xiàn)細(xì)節(jié)
圖形體現(xiàn)細(xì)節(jié)不是說我這個(gè)圖形在畫的時(shí)間有多長(zhǎng),而是你的思考點(diǎn)需要深,有些地方是別人想不到的,圖形體現(xiàn)細(xì)節(jié)我們思考的點(diǎn)是將圖標(biāo)的設(shè)計(jì)流程化,標(biāo)準(zhǔn)化。
圖標(biāo)設(shè)計(jì)的流程化
圖標(biāo)在我們?cè)诮缑嬷姓加信e足輕重的地位,它花費(fèi)的時(shí)間是僅次于我們運(yùn)營(yíng)插畫的設(shè)計(jì),所以我們需要花心思做思考,去設(shè)計(jì),圖標(biāo)的風(fēng)格也會(huì)帶領(lǐng)界面的風(fēng)格的走向,所以,圖標(biāo)的設(shè)計(jì)也是ui設(shè)計(jì)師的基本功。
圖標(biāo)設(shè)計(jì)有科學(xué)的流程,每一次產(chǎn)品中圖標(biāo)的迭代改變圖標(biāo)都是經(jīng)過千錘百煉的,在設(shè)計(jì)圖標(biāo)的過程中,有一套科學(xué)的流程,我們?cè)谔岚钢v訴的過程中,會(huì)更加人信服。
- 窮舉關(guān)鍵詞
我們?cè)谠O(shè)計(jì)圖標(biāo)的過程中,一個(gè)圖標(biāo)可以代表很多意思,我們?cè)趺纯梢哉页鲎詈线m當(dāng)前產(chǎn)品表意的關(guān)鍵詞呢?這個(gè)時(shí)候我們就需要用到窮舉關(guān)鍵詞,將能想到的關(guān)鍵詞都列出來,例如我們需要去設(shè)計(jì)一款租房類的APP,里面有一個(gè)“意見反饋”的圖標(biāo),這個(gè)圖標(biāo)比較常見,能傳遞這種意思的圖標(biāo)也有很多,我們需要用窮舉關(guān)鍵詞將他們都列出來。
- 圖標(biāo)設(shè)計(jì)
當(dāng)窮舉完圖標(biāo)表意后,需要列出最佳的詞語(yǔ),我們需要根據(jù)用戶在生活中比較常見的圖片或者類似的圖標(biāo)進(jìn)行造型提取,然后就是完善顏色和細(xì)節(jié),再其次就是要保證其他圖標(biāo)在設(shè)計(jì)中也需要有相同的元素,保證圖標(biāo)的一致性。
- 用戶測(cè)試
用戶測(cè)試是需要確定在我們?cè)O(shè)計(jì)的圖標(biāo)中去選擇一個(gè)最能傳遞當(dāng)前表意的圖標(biāo),可以是自己公司其他部門的人,,例如程序員或者銷售部,也可以邀請(qǐng)用戶來參加,需要說出選擇當(dāng)前圖標(biāo)的理由。
- 規(guī)范制定
當(dāng)圖標(biāo)確定后,我們應(yīng)該對(duì)圖標(biāo)的細(xì)節(jié)部分進(jìn)行復(fù)盤,保證以后新增或者迭代過程中,有一個(gè)可以衡量的標(biāo)尺,方便團(tuán)隊(duì)協(xié)助和復(fù)盤設(shè)計(jì)過程。
1.30 產(chǎn)品品質(zhì)感
在設(shè)計(jì)中,如何可以做到產(chǎn)品品質(zhì)感高級(jí)呢?這是我們經(jīng)常會(huì)遇到的問題,其實(shí)高級(jí)感可以理解為一種可以傳遞感染力的設(shè)計(jì),那么哪些界面中設(shè)計(jì)元素會(huì)影響人呢?例如我們的色彩等。另一種高級(jí)感就是Dieter Rams(迪特?拉姆斯)在“設(shè)計(jì)十戒”中提到的“好的設(shè)計(jì)是盡可能是無設(shè)計(jì)”,我們可以理解為,在設(shè)計(jì)中我們需要克制,讓產(chǎn)品統(tǒng)一且簡(jiǎn)潔。所以我們產(chǎn)品的品質(zhì)感可以從以下兩個(gè)策略入手:一.界面中的相同與區(qū)分 ,二.品牌融入
1.31 界面中的相同與區(qū)分
(1)區(qū)分相似和相同
我們?cè)谏钪?,有些花費(fèi)了很長(zhǎng)時(shí)間和精力去做的品牌在人們心智中早已建立了,例如,茅臺(tái)的包裝早已經(jīng)深入人心,但是最近有一個(gè)奶茶品牌山寨了茅臺(tái)的包裝,就會(huì)讓人感覺很廉價(jià),像是山寨的。
在我們的產(chǎn)品設(shè)計(jì)中,如果兩個(gè)功能不一樣,但是意思相近,那我們所需要用到的圖標(biāo)要絕對(duì)的不一樣,避免用戶誤解功能,用戶在心理上可能會(huì)把它們歸類為一個(gè)功能,如果我們要區(qū)分開,要很明確的區(qū)分,不會(huì)有18和17字號(hào)的對(duì)比。
(2)定義產(chǎn)品的角色性格
一般工作時(shí)間比較長(zhǎng)的同學(xué),都會(huì)有這樣的困惑,每天就是原型美化工,找不到自己的價(jià)值,特別是原型和競(jìng)品的差不多的時(shí)候,那我們?cè)趺慈?chuàng)新呢?我們可以思考這樣的一個(gè)問題,我們?nèi)粘I钪械淖雷?,店?nèi)顯示器或者汽車,也都是有固定的樣式,沒人會(huì)把汽車的輪子做成方的,方向盤做成三角形的,所以,我們做的APP都是用戶日常生活中的工具,是沒必要做顛覆性的創(chuàng)新的 ,在某些細(xì)節(jié)做創(chuàng)新,例如寶馬的車燈,凱迪拉克的鉆石切割工藝。
所以,我們UI設(shè)計(jì)的創(chuàng)新,絕對(duì)也不是在功能上做出差異化,也是需要在細(xì)節(jié)處體現(xiàn)我們的品牌,怎么設(shè)計(jì)讓我們的產(chǎn)品在打開后看起來和別人不一樣,但是又不會(huì)影響使用,這個(gè)時(shí)候,我們要把產(chǎn)品都可以看作是一個(gè)有意識(shí)的生命,我們將產(chǎn)品想象成服務(wù)者,為我們的用戶去服務(wù),產(chǎn)品有自己獨(dú)立的性格,行為動(dòng)作,我們將這些代入到產(chǎn)品的每一個(gè)細(xì)節(jié)中。
例如我們常用的美團(tuán)外賣,我們想要去定義它的設(shè)計(jì)風(fēng)格,首先要用性格孵化模型去定義產(chǎn)品的性格,我們要通過我們用戶的主要目標(biāo)用戶群去定義產(chǎn)品的性格,將它想象成一個(gè)具體的角色,然后具體落地成一個(gè)可以代表產(chǎn)品的ip形象,我們產(chǎn)品的設(shè)計(jì)、文案都應(yīng)符合它的定義。
1.32 品牌的延展
除了產(chǎn)品的性格外,我們的產(chǎn)品都基本會(huì)有自己的產(chǎn)品線形象或者產(chǎn)品的LOGO,我們?cè)O(shè)計(jì)師可以做的便是放大產(chǎn)品LOGO的記憶點(diǎn),然后在產(chǎn)品的每個(gè)角落中去體驗(yàn),這樣也可以極大的提升產(chǎn)品的品質(zhì)感。
比如,我們的京東的機(jī)械狗隨著產(chǎn)品的迭代,慢慢的變胖了,我們可以發(fā)現(xiàn),除了京東的吉祥物發(fā)生了變化之外,京東的圖標(biāo)也是慢慢的變得比較圓潤(rùn)且通透,仿佛也是在呼應(yīng)著產(chǎn)品的變化,京東吉祥物狗的微笑也是被提煉到產(chǎn)品的每一個(gè)細(xì)節(jié)中,這種彷佛產(chǎn)品陪伴著用戶在成長(zhǎng)的變化,也是一種潤(rùn)物細(xì)無聲的品質(zhì)感。
1.33 口語(yǔ)化文案
我們可以將我們產(chǎn)品中的提示文案可以想象成產(chǎn)品的ip形象在對(duì)用戶講話,在融入產(chǎn)品形象的性格因素,賦予了產(chǎn)品的生命力,同時(shí),體驗(yàn)層也可以極大提升品質(zhì)感。
2. 交互中的細(xì)節(jié)
一個(gè)成功的產(chǎn)品,除了需要有好看的外部,實(shí)用的細(xì)節(jié)也是比較重要的,一個(gè)產(chǎn)品的交互決定了這個(gè)產(chǎn)品在使用過程中的流暢度,交互中的細(xì)節(jié)便是我們今天要說的微交互,一個(gè)好的微交互在使用過程中,可以給用戶留下深刻的印象,我們作為一個(gè)體驗(yàn)設(shè)計(jì)師,在設(shè)計(jì)方案的時(shí)候,不僅需要考慮視覺層面的舒適度,也需要考慮到交互層面使用的流暢性和信息的傳遞。
2.10 微交互的起源
計(jì)算機(jī)科學(xué)家拉里·特斯勒(Larry Tesler)在為施樂Xerox電腦的文字處理軟件Gypsy設(shè)計(jì)程序時(shí),突發(fā)奇想,給軟件Gypsy加入了鼠標(biāo)操作和GUI圖形界面,這樣便大大的方便了Gypsy作為文字處理軟件的實(shí)用性與便捷性,于是在不斷體驗(yàn)與嘗試的過程中,于是拉里·特斯勒在改版的時(shí)候,給Gypsy加入了復(fù)制、粘貼功能鍵。這些概念隨后成為了文本編輯與計(jì)算機(jī)操作系統(tǒng)用戶界面的基石之一。
拉里·特斯勒其實(shí)當(dāng)初設(shè)計(jì)復(fù)制和粘貼的思路便是較少用戶操作的阻力,讓用戶在使用過程中不會(huì)被其他的事物所打斷,往后的數(shù)十年,拉里都為了這個(gè)目標(biāo)在奮斗,所以“復(fù)制”和“粘貼”便是精心設(shè)計(jì)過的微交互,沒有任何提示和阻力,一氣呵成的便捷交互。
交互設(shè)計(jì)以及人機(jī)交互在不斷的發(fā)展的歷史,實(shí)際上就是微交互的歷史。今天,我 們?cè)谧烂婧凸P記本電腦中、在移動(dòng)設(shè)備中習(xí)以為常的那些交互方式, 都曾引發(fā)過微交互設(shè)計(jì)的革命。無論是保存文檔,還是把文件拖放到 文件夾,還是連接到Wi-Fi網(wǎng)絡(luò),都曾經(jīng)是精心設(shè)計(jì)的微交互。就連滾動(dòng)和打開多個(gè)窗口這么“基本的”交互方式,也都要經(jīng)過設(shè)計(jì)。技術(shù)在快速發(fā)展,不斷對(duì)微交互提出創(chuàng)新的要求。用戶習(xí)慣了拿來就 用,他們只會(huì)關(guān)注更好的交互方式,或者是那些由于技術(shù)發(fā)展催生的、或強(qiáng)制必須使用的微交互方式。
所以,好的微交互就像“Ctrl+C””Ctrl+v”那樣方便,會(huì)改善我們的使用體驗(yàn)。
2.20 移動(dòng)端微交互應(yīng)用場(chǎng)景的發(fā)展歷程
還是“復(fù)制”“粘貼”的例子,我們?cè)诠δ軝C(jī)的時(shí)代,我們想要把一段文字從一個(gè)軟件復(fù)制到另外一個(gè)軟件上,我們通常要在兩個(gè)軟件不停止的去切換,然后通過記憶內(nèi)容然后在來輸入,這樣的效率和精準(zhǔn)度都不是很高,而且要是需要復(fù)制的內(nèi)容過于龐大,想要完成便是一件讓人頭疼和心累的事情。
但是在進(jìn)入移動(dòng)智能機(jī)的時(shí)代,該功能的微交互便發(fā)生的天翻地覆的變化,第一步我們只需用長(zhǎng)按需要復(fù)制的文字,調(diào)出復(fù)制按鈕,第二步,選中我們需要復(fù)制的文本內(nèi)容,第三步便是切換到需要粘貼文字的APP,第四步,長(zhǎng)按調(diào)出粘貼按鈕,選擇粘貼文字,這與之前僅靠人肉記憶去輸入文字無論在效率上還是在準(zhǔn)確度上都有了不小的飛躍。
但是隨著技術(shù)的革新和從業(yè)者對(duì)于用戶體驗(yàn)的理解更加深刻,我們的操作追求更高效,更精準(zhǔn),于是,該場(chǎng)景的交互又迎來的一次技術(shù)的變革,為了跟上時(shí)代的發(fā)展與用戶的訴求,在2016年10月19日的錘子手機(jī)發(fā)布會(huì)上,它推出了兩個(gè)功能:“Big Bang”和“One Step”?!癇ig Bang”的功能是長(zhǎng)按一段文字,可以根據(jù)算法自動(dòng)將文字的內(nèi)容分割獨(dú)立的詞語(yǔ)按鈕,只需點(diǎn)擊這些分割的按鈕就可以選擇想要的內(nèi)容。而“一步”可以直接將所選內(nèi)容拖動(dòng)到其他目標(biāo)應(yīng)用程序中,而無需在應(yīng)用程序之間切換。這兩個(gè)功能的結(jié)合,將之前需要四個(gè)步驟的功能簡(jiǎn)化為只有兩個(gè)步驟:第一步是按下選擇內(nèi)容;第二步,拖動(dòng)到目標(biāo)應(yīng)用程序。
在2021年6月8日凌晨,一年一度的蘋果WWDC大會(huì)在線上正式舉行,ios帶來了類似于“big bang”的功能:live text,也宣告著這個(gè)小小復(fù)制粘貼功能又完成了一次新的進(jìn)化,所以,無論是“Blive text”還是“Big Bang”,這兩個(gè)功能本質(zhì)其實(shí)就是微交互的進(jìn)化,只不過用了兩個(gè)不同的名字去代表而已。
2.30 交互與微交互的差異性
交互設(shè)計(jì)是串聯(lián)起產(chǎn)品各個(gè)頁(yè)面與功能反饋的基礎(chǔ)工作,如果缺少了某個(gè)交互環(huán)節(jié)可能會(huì)導(dǎo)致產(chǎn)品的BUG或其他負(fù)面情況,交互設(shè)計(jì)簡(jiǎn)單的來說就是滿足了產(chǎn)品的可用性。然而微交互的存在是為了給產(chǎn)品提升易用性與好用性,能起到錦上添花的作用。
2.40 微交互為什么這么重要?
自喬布斯在2010年06月08日發(fā)布了iPhone 4開始,我們的手機(jī)便宣告進(jìn)入了移動(dòng)智能機(jī)的時(shí)代,我們手機(jī)從僅僅可以打電話到可以上網(wǎng)玩游戲等等,所以為了搶占用戶的空閑時(shí)間,用戶體驗(yàn)就越來越被企業(yè)所看重,細(xì)微且無處不在的微交互也掌握著用戶體驗(yàn)的核心–細(xì)節(jié)。
在早期,我們一直會(huì)覺得安卓手機(jī)不如蘋果手機(jī)好用,會(huì)覺得比較卡斷和粗糙,其實(shí)就是因?yàn)樘O果的微交互會(huì)做的比較好,無論是在手機(jī)解鎖后的圖標(biāo)入場(chǎng)動(dòng)效還是點(diǎn)擊APP后的轉(zhuǎn)場(chǎng)效果,細(xì)膩舒適的微交互便一度成為蘋果公司的象征。
我們會(huì)發(fā)現(xiàn),微交互幾乎無處不在,它可能是一次震動(dòng)提醒通知、播放下一首歌曲、登錄一次網(wǎng)站、在手機(jī)應(yīng)用里查詢一次天氣、微信回復(fù)一條信息、朋友圈點(diǎn)一次贊,如果這些交互設(shè)計(jì)過渡得順滑流暢又自然的話,幾乎很容易就會(huì)忽略他們的存在。雖然微交互近乎隱形,且很容易被人忽視,但它的重要性卻不容小覷。我們知道,移動(dòng)產(chǎn)品交互設(shè)計(jì)時(shí)考量的因素有兩個(gè)——功能和細(xì)節(jié)。功能吸引用戶使用產(chǎn)品,細(xì)節(jié)則是留住用戶成為回頭客。好的微交互,可以變無聊為有趣, 把沒有生命力的 app 變得生動(dòng)好玩,讓用戶感受到參與感和愉悅性,給用戶留下深刻的印象甚至上癮。偉大的產(chǎn)品和平庸的產(chǎn)品之間,區(qū)別就在于微交互。
3. 微交互的構(gòu)成
那怎樣才能做好“微交互”呢?丹·賽弗在他的著作《微交互:細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品》中,提出了好的微交互應(yīng)該有的結(jié)構(gòu): 觸發(fā)器、規(guī)則、反饋、循環(huán)與模式 。我們一個(gè)個(gè)來講。
3.10 觸發(fā)器
觸發(fā)器,是啟動(dòng)微交互的“扳機(jī)”,是微交互啟動(dòng)的原點(diǎn)。要把識(shí)別“扳機(jī)”的成本,降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經(jīng)典臺(tái)詞一樣“你過來呀”,簡(jiǎn)單且易于識(shí)別。
觸發(fā)器一般是分為兩種,就像平時(shí)打游戲一樣,有主動(dòng)技能和被動(dòng)技能,觸發(fā)器也被分為手動(dòng)觸發(fā)-即用戶主動(dòng)去觸發(fā)的,被動(dòng)觸發(fā)-即系統(tǒng)被動(dòng)觸發(fā)的。
3.11 手動(dòng)觸發(fā)器
手動(dòng)觸發(fā)器一般是用戶自主的去點(diǎn)擊,所以我們盡量要去保證觸發(fā)器的識(shí)別性,以及用戶在點(diǎn)擊前的一些心里預(yù)期的管控。
(1)降低識(shí)別成本
觸發(fā)器是微交互啟動(dòng)的第一步,在使用場(chǎng)景下必須要讓用戶能識(shí)別出來,用戶才能去點(diǎn)擊,所以觸發(fā)器要足夠清晰明顯。
比如,我們?cè)跒g覽和使用視頻屏網(wǎng)站或者視頻APP的時(shí)候,網(wǎng)頁(yè)或APP上的視頻中間都有個(gè)碩大的“播放”按鈕,比如,攝像機(jī)上的錄像鍵,總是最明顯的紅色;這些都是觸發(fā)器在提示你應(yīng)該點(diǎn)我,且外觀樣式都是采用通俗易懂的外觀樣式。
(2)對(duì)用戶的預(yù)期管控
我們一般去一家陌生的商店的時(shí)候,有的商店會(huì)玻璃門,比較高級(jí)的是自動(dòng)的,一般的店鋪都會(huì)是手動(dòng)的,這時(shí)候,一般的手動(dòng)的玻璃在門上都會(huì)貼上這個(gè)門是用推的形式開還是用拉的形式去關(guān),這樣,我們便知道這樣去推或者拉門,是肯定可以把門打開的。
所以我們的觸發(fā)器需要讓用戶知道我點(diǎn)了之后會(huì)去到哪里,在形式的設(shè)計(jì)上需要明確,比如我們的微信或郵件APP的一角會(huì)顯示未讀郵件的數(shù)量,提示用戶在點(diǎn)擊后肯定有未讀的郵件或消息。
(3)考慮用戶的使用場(chǎng)景
在我們平時(shí)工作和娛樂中使用的鍵盤,我們鍵盤的按鍵的大小都是根據(jù)用戶在日常使用場(chǎng)景的頻次和設(shè)計(jì)大小的,例如,用戶的最多的空格鍵,是最大的,其次是回車鍵,使用的最少的開關(guān)和其他的控制鍵是最小的,這都是考慮到我們生活中的使用場(chǎng)景去設(shè)計(jì)的。
我們?cè)谠O(shè)計(jì)觸發(fā)器的時(shí)候也是一樣的,需要考慮到用戶在日常生活操作的具體情況來對(duì)觸發(fā)器的大小位置來進(jìn)行設(shè)計(jì)擺放,盡量讓用戶操作起來比較合適。
所以我們APP的按鈕會(huì)根據(jù)使用頻次來確定圖標(biāo)的大小的層級(jí),方便用戶憑借第一反應(yīng)去點(diǎn)擊使用。
3.12 系統(tǒng)觸發(fā)器
系統(tǒng)觸發(fā)器的微交互一般需要用戶滿足了某些條件才會(huì)觸發(fā)的,例如我們平時(shí)在工作時(shí)間設(shè)置的起床鬧鐘,我們微信的朋友圈的更新提示,都是屬于系統(tǒng)觸發(fā)器,在滿足了某些系統(tǒng)設(shè)定的規(guī)則之后才會(huì)觸發(fā)的。
系統(tǒng)觸發(fā)器通常會(huì)讓用手動(dòng)設(shè)置何時(shí)觸發(fā),觸發(fā)的頻率狀況,比如,我最近想學(xué)習(xí),不想被朋友圈的信息影響,我可以選擇關(guān)閉朋友圈紅點(diǎn)提示,比如,我的鬧鐘設(shè)置的是周一到周五的工作時(shí)間去響鈴,我周三晚上加班太晚了,第二天中午十二點(diǎn)去上班,這個(gè)時(shí)候我就可以單獨(dú)的選擇周四這天鬧鐘不響。
3.20 規(guī)則
規(guī)則,用來規(guī)定微交互的過程,是整個(gè)微交互的核心。好的規(guī)則,應(yīng)該順乎人性、體貼方便。簡(jiǎn)單的來說,規(guī)則就是要按套路出牌,不然就會(huì)讓用戶感覺到出其不意。
(1)動(dòng)詞和名詞
一般的規(guī)則都是通過流程圖去演示,理解起來成本比較大,丹·賽弗 (Dan Saffer)提出一個(gè)理論:動(dòng)詞=用戶行為=交互目標(biāo),名詞=操作對(duì)象=解決方案。
舉個(gè)例子我看在電視劇的時(shí)候,看到一些不太喜歡的地方,準(zhǔn)備去快進(jìn),這個(gè)時(shí)候視頻的進(jìn)度條就是名詞,而用戶準(zhǔn)備快進(jìn)這個(gè)動(dòng)作便是動(dòng)詞。
所以在制定規(guī)則的時(shí)候,我們需要把復(fù)雜的流程給簡(jiǎn)化下來,弄清楚動(dòng)詞和名詞,我們便可以開始制定規(guī)則了。
(2)及時(shí)反饋當(dāng)前的狀態(tài)
好的微交互盡量在一個(gè)屏幕內(nèi)能去展示完成,不需要用戶去跳轉(zhuǎn),這樣便是符合人性的微交互的設(shè)計(jì),所以我們?cè)谠O(shè)計(jì)為微交互的流程的時(shí)候,盡量通過不同的狀態(tài)去給用戶傳遞消息,這樣可以使用戶感知界面的微交互不會(huì)太細(xì)碎。
(3)選項(xiàng)的防呆設(shè)計(jì)
規(guī)則,是微交互的核心。要仔細(xì)打磨,反復(fù)測(cè)試,每個(gè)環(huán)節(jié)的問題都需要考慮到。所以,我們?cè)谠O(shè)計(jì)微交互的時(shí)候,要更加注重細(xì)節(jié)上的體驗(yàn),給予用戶操作上的舒適感。
① 聰明的默認(rèn)項(xiàng)和有限的選項(xiàng)
什么是“有限的選項(xiàng)”?簡(jiǎn)單的說,我們提供給用戶的選項(xiàng)越少,規(guī)則越少,用戶便更輕松理解這種交互操作。什么是“聰明的默認(rèn)項(xiàng)”呢?簡(jiǎn)單的說,當(dāng)給予用戶的選項(xiàng)比較少的時(shí)候,我們通常要給用戶一個(gè)默認(rèn)的選項(xiàng),因?yàn)檫@個(gè)選項(xiàng)是用戶最有可能采取的下一個(gè)操作,因此有必要提示用戶。
簡(jiǎn)單的可以理解為,提供的選項(xiàng)越少,用戶越容易選擇。所以,在設(shè)計(jì)方案中:提供默認(rèn)選項(xiàng)>提供有限選項(xiàng)>提供多種選項(xiàng)。
- 聰明的默認(rèn)項(xiàng)
默認(rèn)項(xiàng)和有限的選項(xiàng)是相互關(guān)聯(lián)的,正常的情況,在有限的選項(xiàng)中為用戶提供默認(rèn)項(xiàng)。而默認(rèn)項(xiàng)應(yīng)該是大部分用戶最常用的那個(gè)選項(xiàng)。
例如我們?cè)谕顺龌蛘邉h除的時(shí)候需要二次確認(rèn),正常的會(huì)將確認(rèn)放在我們比較好操作的位置且會(huì)高亮放大展示,一般的電商平臺(tái)上的產(chǎn)品也是種類繁多,所以一般的電商平臺(tái)都會(huì)有分類區(qū),將不同的商品歸類為不同默認(rèn)的選項(xiàng),來供用戶選擇。
- 有限的選項(xiàng)
有限的選項(xiàng)我們將他分為兩種,一種是只在需要的時(shí)候出現(xiàn),另外一種是只提供需要的選項(xiàng)
-
- 1)只在需要的時(shí)候出現(xiàn)
通常我們手機(jī)更新系統(tǒng)的按鈕,在沒有新的版本的時(shí)候發(fā)表,這個(gè)下載按鈕是不會(huì)出現(xiàn)的,只有當(dāng)我們手機(jī)廠家發(fā)布了新版本,下載的按鈕才會(huì)被解鎖,出現(xiàn)在界面中。
-
- 2)只提供需要的選項(xiàng)
例如我們國(guó)內(nèi)的搜索百度,主界面上只有搜索框和百度一下,簡(jiǎn)潔明了,讓用戶一看就知道產(chǎn)品的主要功能,在例如,當(dāng)我們因?yàn)檐浖B接上車上的藍(lán)牙后,便進(jìn)去的車載的模式,因?yàn)殚_車的時(shí)候需要集中注意力去開車,所以車載模式下,很多不必要的功能便會(huì)被隱藏起來,只會(huì)提供必須的功能選項(xiàng)按鈕。
3.30 反饋
反饋,是向用戶說明規(guī)則。用戶并不知道你設(shè)計(jì)了什么規(guī)則,你要通過反饋友好地讓他知道。
Twitter在這點(diǎn)上,做得非常好,它在你輸入密碼時(shí),在右邊用文字給你實(shí)時(shí)反饋,向你說明規(guī)則。
你輸入字?jǐn)?shù)太少,它顯示:需要6個(gè)以上字符;你輸入簡(jiǎn)單單詞,它顯示:密碼太好猜了;符合要求,它會(huì)按照密碼的強(qiáng)度,逐級(jí)顯示:弱,不錯(cuò),強(qiáng),很強(qiáng)!
3.31 解釋規(guī)則
反饋的作用之一就是向用戶去解釋我們所設(shè)置的規(guī)則,比如,我們工程師所設(shè)置的密碼的規(guī)則:要有6個(gè)以上字符,最好有大寫、小寫和數(shù)字。不要用生日、紀(jì)念日等。但用戶不知道啊,你要把規(guī)則,用反饋告訴他。
(1)反饋與用戶操作相關(guān)的信息
我們給與用戶的反饋要盡量與用戶本次的操作的相關(guān),比如,用戶下載文件,我們需要給與用戶的反饋信息是,已開始下載,下載的進(jìn)度和下載完成,如果反饋再細(xì)節(jié)點(diǎn),我們?cè)谙螺d的過程中可以提升用戶,”下載過程中會(huì)占用大量的帶寬,也許用影響您瀏覽網(wǎng)頁(yè)或者其他是上網(wǎng)操作”,反饋越是細(xì)節(jié),用戶在體驗(yàn)微交互的過程中的負(fù)面情緒就越少。
(2)反饋信息簡(jiǎn)單清晰
微交互的反饋直觀也是比較重要的因素之一,可以讓用戶更好的理解規(guī)則,降低用戶的認(rèn)知成本,我們反饋給用戶的信息應(yīng)該都是準(zhǔn)確且重要的,例如我們的消息提醒,一般都是在有幾條就提醒幾條消息,消息的傳遞需要做到少即是多,信息越是重要,反饋的層級(jí)就要越高。
(3)反饋信息具有幽默感
我們?cè)谌粘I钪卸疾惶矚g直來直去的人,都喜歡和幽默、風(fēng)趣的人聊天,我們對(duì)用戶的反饋信息也是一樣,需要避免機(jī)械化的回復(fù),回復(fù)需要讓用戶感覺我不是在和一臺(tái)冰冷的機(jī)器溝通,所以我們的信息反饋更多的是對(duì)氛圍的一種調(diào)節(jié),比如,搜狗輸入法在檢測(cè)到網(wǎng)絡(luò)不佳的情況下,會(huì)用一種比較風(fēng)趣的口吻說“哎呀!汪仔去太空旅游了”
3.40 循環(huán)與模式
循環(huán)與模式,我們可以將它理解為是規(guī)則的分支。比如,鬧鐘是你每天接觸的第一個(gè)“微交互”了吧。眼睛還沒睜開,鬧鐘就響了。你重重拍下去,這時(shí)就啟動(dòng)了“再睡一會(huì)兒”這個(gè)分支的規(guī)則,也就是“模式”。如何設(shè)計(jì)這個(gè)分支,最合理呢?你可以讓它5分鐘后再響,如果再拍下去,就別叫醒他了?!澳阌肋h(yuǎn)叫不醒一個(gè)裝睡的人”。這樣合理嗎?
也許不合理。更合理的做法是,拍第一次,5分鐘后再響,拍第二次,3分鐘后再響,拍第三次,縮短為1分鐘。然后就一直響。因?yàn)槟闩牡拇螖?shù)越多,越有可能因?yàn)樨澦`事。
循環(huán)與模式,就是一次性的或者循環(huán)的分支規(guī)則。
循環(huán)的分類
① 計(jì)數(shù)循環(huán)
即我們?cè)诮o用戶反饋前需要來回檢查規(guī)定好的次數(shù),發(fā)現(xiàn)了問題在給用戶反饋,例如,我們的微信在網(wǎng)絡(luò)不穩(wěn)定的情況在,我們會(huì)看到微信的刷新的狀態(tài)會(huì)連續(xù)好幾次的出現(xiàn)刷新,然后才會(huì)給用戶網(wǎng)絡(luò)不好或者斷網(wǎng)的提示。
② 條件循環(huán)
即在限定的條件下的循環(huán),比如,我們手機(jī)上的鬧鐘,它便是會(huì)在我們?cè)O(shè)定的時(shí)間內(nèi)會(huì)準(zhǔn)時(shí)的叫我們起床,如果當(dāng)天沒有設(shè)定鬧鐘或者手機(jī)沒電了,這個(gè)循環(huán)便不會(huì)執(zhí)行下去。
③ 集合循環(huán)
即循環(huán)的核對(duì)數(shù)值,然后停止,和前面的計(jì)數(shù)循環(huán)有相似之處,例如我們短信系統(tǒng),會(huì)對(duì)收到的信息進(jìn)行系統(tǒng)的統(tǒng)計(jì),然后發(fā)現(xiàn)有未讀的信息,便會(huì)在角標(biāo)上記錄數(shù)值1.
④ 無窮循環(huán)
即循環(huán)開始后,除非人為的干預(yù)讓它停止或者系統(tǒng)出問題的時(shí)候才會(huì)停止,否則會(huì)一直的循環(huán)下去,就像永動(dòng)機(jī)一樣。無窮循環(huán)分為兩種一種是開放循環(huán),另外一種是封閉循環(huán)。
⑤ 開放循環(huán)和封閉循環(huán)
- 1)開放循環(huán)
即在滿足條件后,執(zhí)行一次便結(jié)束,miui有個(gè)功能是可以設(shè)定手機(jī)每天早上什么開始,當(dāng)每次到達(dá)這個(gè)時(shí)間后,我們?cè)咎幱陉P(guān)機(jī)狀態(tài)的手機(jī)便會(huì)開機(jī),這個(gè)指令執(zhí)行一次便不會(huì)在執(zhí)行了。
- 2)封閉循環(huán)
即在滿足條件執(zhí)行后,可以進(jìn)行自行的內(nèi)部條件,比如,當(dāng)我們手機(jī)開機(jī)后,我們的手機(jī)屏幕的亮點(diǎn)會(huì)根據(jù)環(huán)境光而去調(diào)節(jié)。
- 3)長(zhǎng)循環(huán)
長(zhǎng)循環(huán)可以理解為是一種陪伴用戶在使用我們產(chǎn)品時(shí)候記錄的一種微交互,使用的時(shí)間越長(zhǎng),這種記錄就越多,比喻我們軟件的搜索記錄和瀏覽記錄便是一種長(zhǎng)循環(huán)。
- 4)漸進(jìn)揭示或漸進(jìn)減少
長(zhǎng)循環(huán)的另外一種情況便是當(dāng)用戶長(zhǎng)期使用后對(duì)軟件越來越熟悉后,我們可以對(duì)有經(jīng)驗(yàn)的用戶開放更加進(jìn)階的玩法。
長(zhǎng)循環(huán)的另外一種情況便是漸進(jìn)較少,即當(dāng)我們的用戶熟悉了我們的軟件后,有些界面上的說明解釋的提示可以適當(dāng)?shù)娜サ?,?jiǎn)化界面,對(duì)用戶而言,干擾少了,也會(huì)提升使用的效率和交互的速度。
4. 微交互的三種層次
微交互在產(chǎn)品中的應(yīng)用場(chǎng)景也是比較豐富的,一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗(yàn),其次深入體驗(yàn)后是功能交互層的體驗(yàn),最后體驗(yàn)的是一個(gè)比較好的容錯(cuò)性、比較好的交互后得到的心理上的愉悅,也就是情感層。
視覺層主要給予用戶感官層面的體驗(yàn),交互層是給予使用上的效率體驗(yàn),情感層主要是讓用戶體驗(yàn)后心理上有滿足或者愉快的感受。
但是這些層面又不是絕對(duì)獨(dú)立的,每個(gè)微交互設(shè)計(jì)都能在上述三個(gè)層面中找到單獨(dú)或者組合,比如雙擊屏幕的反饋,就滿足了視覺層面、功能層面與情感層面的三層優(yōu)化。
視覺層
在視覺層,考慮的轉(zhuǎn)場(chǎng)交互動(dòng)作是否足夠流暢,視覺是否美觀,反饋交互是否有創(chuàng)意,是否加深品牌印象。
交互層
通過控制轉(zhuǎn)場(chǎng)樣式,反饋樣式與反饋時(shí)間是否可提高交互效率,幫助用戶認(rèn)知,提升產(chǎn)品數(shù)據(jù)。
情感層
通過趣味幽默化的轉(zhuǎn)場(chǎng)與反饋動(dòng)畫是否可以降低產(chǎn)品的負(fù)面體驗(yàn)或者讓用戶產(chǎn)生愉悅感
4.10 微交互的應(yīng)用場(chǎng)景
微交互不是刻意的。而是被動(dòng)發(fā)現(xiàn)問題的優(yōu)化過程,當(dāng)靜態(tài)設(shè)計(jì)不能滿足的時(shí)候,可以考慮動(dòng)態(tài)的微交互設(shè)計(jì),
所以,我們的微交互設(shè)計(jì)需要滿足用戶的操作體驗(yàn),微交互是否幫產(chǎn)品的數(shù)據(jù)上有提升,設(shè)計(jì)角度上微交互是否有創(chuàng)意。
4.20 微交互視覺層的應(yīng)用
(1)相同的元素串聯(lián)轉(zhuǎn)場(chǎng)
推拉搖移是攝像中的術(shù)語(yǔ)。推指把鏡頭變焦到長(zhǎng)焦端,使景物更近,拉則是相反,把鏡頭變焦到廣角端,使景物顯得更遠(yuǎn),搖指鏡頭跟隨運(yùn)動(dòng)的物體做同方向的轉(zhuǎn)動(dòng),移指鏡頭跟隨動(dòng)體做平行移動(dòng)。這些手法都是經(jīng)歷過前人的無數(shù)字的實(shí)踐所總結(jié)出來的道理
我們?cè)谧鼋换マD(zhuǎn)場(chǎng)也是一樣,合適轉(zhuǎn)場(chǎng)是讓產(chǎn)品添姿增色的重要手段之一,在iOS默認(rèn)的轉(zhuǎn)場(chǎng)效果就是頁(yè)面從左往右去進(jìn)場(chǎng),但是想要在讓你交互轉(zhuǎn)場(chǎng)看起來比較舒服,就需要在細(xì)節(jié)上下功夫,其中比較常見的手法就是界面中有相同的元素的時(shí)候,讓他們將他們串聯(lián)起來,這樣的交互轉(zhuǎn)場(chǎng)會(huì)讓你產(chǎn)品看起來更舒適。
(2)卡片推開周圍的元素
在安卓的Material Design提出Z軸的概念,在扁平化的界面上讓產(chǎn)品有三維的層次感(三維就是X軸(左右)、Y軸(上下)、Z軸(前后)組成的立體世界,而二維就是只有X和Y軸的平面世界。)我們知道手機(jī)的界面是一個(gè)平面和二維的空間,Material Design通過一些二維的表現(xiàn)手段,比如投影和動(dòng)態(tài)效果,來構(gòu)建Z軸(前后)的概念。
在這個(gè)基礎(chǔ)上,我們可以在微交互上下功夫,例如當(dāng)界面中的卡片比較多的話,我們想讓產(chǎn)品的體驗(yàn)更具有層次感,我們可以通過卡片與周圍元素的變化產(chǎn)生關(guān)聯(lián),營(yíng)造微交互中的產(chǎn)品層次感。
(3)專屬的元素動(dòng)畫樣式
我們?nèi)颂焐加泻闷嫘?,?duì)新鮮的事物都有嘗試的心理,我們?cè)谖⒔换サ脑O(shè)計(jì)中,也需要具有創(chuàng)新精神,讓用戶在視覺體驗(yàn)層有與其他產(chǎn)品有不一樣的觀感,這樣有利于樹立我們產(chǎn)品的品牌感知。
比如,我們?cè)邳c(diǎn)擊TAP時(shí)候的特殊的動(dòng)畫呈現(xiàn),點(diǎn)贊時(shí)候獨(dú)特的反饋。都會(huì)在視覺層面給用戶留下比較深刻的印象。
(4)強(qiáng)化操作過程中的趣味性
下拉刷新是我們?cè)诋a(chǎn)品中日常會(huì)使用的交互,現(xiàn)在的產(chǎn)品一般都不會(huì)使用默認(rèn)的“菊花”的下拉刷新,一般會(huì)使用自己的IP或者更加有趣的MG動(dòng)畫,都是為了讓用戶在使用我們的產(chǎn)品時(shí)候在視覺層有新的體驗(yàn),與其他的產(chǎn)品去拉來差距。
(5)循環(huán)動(dòng)畫強(qiáng)化產(chǎn)品氛圍
我們?cè)诰瓢?57的時(shí)候,酒吧都會(huì)有氣氛組,來讓新來的客人比較快的融入到酒吧愉快的氛圍中,或者一般商業(yè)區(qū)過節(jié)的時(shí)候,都會(huì)將街道和廣場(chǎng)裝扮與節(jié)日相符的燈光,都是為了讓客戶快速的融入到氣氛中。
我們?cè)诋a(chǎn)品中也是,有的功能想吸引用戶的目光,或者想讓用戶快速的融入到某節(jié)日到氛圍中,都是可以通過循環(huán)都動(dòng)畫去引導(dǎo)用戶。
4.30 微交互交互層的應(yīng)用
(1)交互行為主動(dòng)聯(lián)動(dòng)性
我們都知道,我們手機(jī)的屏幕空間是有限的,有時(shí)候的功能布局方面可能不是那么的合理,這個(gè)時(shí)候,我們的微交互就可以起作用了,比喻,我們手機(jī)上滑當(dāng)時(shí)候,就可以將某些用戶比較常用的功能常駐在屏幕上方,當(dāng)用戶想去操作的時(shí)候,不用在滑回去在去操作,在體驗(yàn)上減少了用戶的操作步驟,提升了用戶在產(chǎn)品用戶過程中的舒適感。
(2)合適的元素出現(xiàn)在適當(dāng)?shù)臅r(shí)機(jī)
我們經(jīng)歷過這樣的時(shí)候,當(dāng)陌生人來找我們做某些事情的時(shí)候,我們的第一反應(yīng)力都是比較抗拒的,但是熟人的話我們可能會(huì)因?yàn)楦鞣N原因不可以拒絕。
產(chǎn)品設(shè)計(jì)中也是一樣,如果我們想讓用戶去應(yīng)用商店去給我們的產(chǎn)品一個(gè)好評(píng),肯定是不能一上來就給用戶引導(dǎo)去評(píng)價(jià),這樣會(huì)極有可能會(huì)導(dǎo)致差評(píng)的,但是,我們可以利用用戶“啊哈時(shí)刻”去提升用戶的好評(píng)動(dòng)機(jī),例如,當(dāng)用戶覺得某內(nèi)容不錯(cuò)的時(shí)候點(diǎn)贊了,收藏了,我們這個(gè)時(shí)候讓用戶去好評(píng),這樣好評(píng)的幾率會(huì)大點(diǎn),起碼不會(huì)引起用戶的逆反心理。
所以,當(dāng)我們想要用戶去為我們做某些事情的時(shí)候,一定需要找準(zhǔn)時(shí)機(jī),結(jié)合微交互,提升用戶去完成某件事情的意愿,例如,當(dāng)用戶在瀏覽商品的時(shí)候,我們可以給用戶發(fā)放優(yōu)惠券,我們想讓用戶去分享我們的內(nèi)容的時(shí)候,可以在用戶在快看完的時(shí)候,出現(xiàn)分享按鈕,都是可以通過微交互去讓用戶幫我們?nèi)プ瞿承┦虑?,以達(dá)我們想要的結(jié)果。
我們的知道豆瓣是一個(gè)社區(qū)內(nèi)的產(chǎn)品,它是希望用戶在豆瓣來發(fā)表自己的想法的,所以,當(dāng)用戶看到評(píng)論區(qū)的時(shí)候,它用將評(píng)論區(qū)給展開放大,吸引用戶的注意力,從而加大用戶互動(dòng)的意愿。
(3)進(jìn)場(chǎng)告知用戶隱藏的功能和操作
我們做設(shè)計(jì)的時(shí)候可能經(jīng)常會(huì)遇到一些無理的要求,例如,這個(gè)功能需要強(qiáng)化,但是又不能去干擾用戶,每次遇到這種需求,我們?cè)O(shè)計(jì)師往往都是比較痛苦的時(shí)候,例如當(dāng)用戶沒有開通會(huì)員的時(shí)候,我們想給用戶去展示會(huì)員的一些特權(quán)和首次開通的優(yōu)惠,但是,用戶要是沒有開通,我們是沒辦法很好的去展示的,這個(gè)時(shí)候,我們可以通過微交互,在進(jìn)場(chǎng)的時(shí)候,將隱藏的信息展開,然后過收起來,這樣用戶即看到信息,又不會(huì)影響接下來的操作。還有就是當(dāng)我們上新某些功能的時(shí)候,想讓用戶去快速的去了解這個(gè)功能,這個(gè)時(shí)候我們可以通過演示動(dòng)畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。
(4)元素跟隨頁(yè)面的形態(tài)改變
我們的產(chǎn)品在操作的時(shí)候難免會(huì)出現(xiàn)各種狀態(tài),為了讓每個(gè)狀態(tài)出現(xiàn)的時(shí)候都比較符合用戶的操作的習(xí)慣,這個(gè)時(shí)候我們需要考慮用戶的場(chǎng)景來改變頁(yè)面的布局,例如快手它的戰(zhàn)略是一個(gè)內(nèi)容分享的社區(qū),它注重的是用戶與主播之間的溝通,所以,正常的軟件,當(dāng)視頻在播放的時(shí)候,完們想看評(píng)論,這個(gè)時(shí)候的步驟只能側(cè)中一個(gè),但是,快手它考慮到用戶的體驗(yàn),當(dāng)用戶在上滑的時(shí)候,為了不打斷用戶繼續(xù)觀看視頻,視頻內(nèi)容會(huì)慢慢變小,然后固定,這個(gè)時(shí)候用戶可以在看視頻的時(shí)候也可以查看評(píng)論,方便用戶與主播之間的溝通,強(qiáng)化了內(nèi)容社區(qū)的氛圍。
(5)照顧邊緣場(chǎng)景
一個(gè)產(chǎn)品它的交互是否比較好,我們看的是它是不是能滿足用戶大部分的使用的場(chǎng)景,所以,有的時(shí)候,當(dāng)靜態(tài)的交互無法去滿足用戶的一些比較特殊的場(chǎng)景的時(shí)候, 我們這個(gè)時(shí)候就可以考慮微交互的設(shè)計(jì),讓產(chǎn)品的交互體驗(yàn)?zāi)芨采w的場(chǎng)景比較全面。
例如,當(dāng)我們?cè)谖⑿磐ㄓ嶄浵敫鶕?jù)用戶的首字母去查找人的時(shí)候,一般左邊的字母都會(huì)做的比較小,無法精準(zhǔn)的查看到我們現(xiàn)在看到哪個(gè)字母,所以,當(dāng)我們的手去點(diǎn)的時(shí)候,到了某個(gè)字母的時(shí)候會(huì)放大,比如,我們因?yàn)殚_會(huì)將手機(jī)調(diào)成靜音或者音量關(guān)了的時(shí)候,我們?nèi)ゲシ盼⑿诺恼Z(yǔ)音或者看視頻的時(shí)候,這個(gè)時(shí)候,APP會(huì)提升我們音量未開之類的,這都是考慮到極端的場(chǎng)景,讓用戶的體驗(yàn)更加順暢。
4.40 微交互情感層的應(yīng)用
(1)幽默拉近用戶
當(dāng)我們看到有趣的東西的時(shí)候總是想和身邊的人去分享我們的喜悅,這是人們比較底層的邏輯,我們的APP產(chǎn)品也是這樣的,當(dāng)我們想讓用戶持續(xù)去體驗(yàn)我們的產(chǎn)品或者想要用戶去主動(dòng)的分享我們的產(chǎn)品,那么,我們可以將產(chǎn)品做的有趣一點(diǎn)。
比如,轉(zhuǎn)轉(zhuǎn)在登陸的時(shí)候?yàn)榱宋脩舻淖⒁饬?,它?huì)在用戶登錄的時(shí)候做一個(gè)比較有趣的小動(dòng)畫,也消除用戶在多一步操作時(shí)候的負(fù)面的情緒。
(2)轉(zhuǎn)場(chǎng)加載占位符
我們?cè)谌粘5腁PP使用中,總會(huì)遇到像信號(hào)不好的情況,這個(gè)時(shí)候,我們心里是比較著急的,特別是比較緊急的情況,負(fù)面的情緒是比較大的,我們需要將這點(diǎn)考慮進(jìn)去,為了避免用戶在等待時(shí)候的焦慮感和負(fù)面的情況,我們一般會(huì)使用加載的占位符和加載的進(jìn)度條,讓用戶知道我們的軟件是在工作中,而且是在賣力的工作中,這樣,可以緩解用戶的負(fù)面情緒。
(3)產(chǎn)品的儀式感
對(duì)于我們來說,儀式感是很重要的,比如結(jié)婚紀(jì)念日要去慶祝一下,生日的時(shí)候一定要和朋友去high一下,這都是來自我們生活的中的儀式感。
儀式感在產(chǎn)品中也很重要,他可以提升我們用戶的幸福感,例如微信在給朋友發(fā)送生日快樂的時(shí)候,屏幕中會(huì)掉下蛋糕,在過年的時(shí)候發(fā)送新年快樂,屏幕中也會(huì)掉落紅包,微信將我們?nèi)粘I钪兴枰膬x式感搬到了產(chǎn)品中,通過微交互來提升我們?nèi)粘5男腋8小?
(4)3D touch判斷用戶的情緒
我們?nèi)硕际歉星閯?dòng)物,滿足人們的日常的情緒需求也是很不錯(cuò)的角度,例如facebook的點(diǎn)贊功能可以通過人點(diǎn)擊的力度大小去判斷人當(dāng)天的情緒,例如,點(diǎn)擊的力度越大,說明你的心情比較好,或者對(duì)那個(gè)觀點(diǎn)比較贊同,如果你點(diǎn)擊的比較輕,說明的你心情不怎么好。
5. 總結(jié)
隨著移動(dòng)互聯(lián)網(wǎng)慢慢進(jìn)入下半場(chǎng),我們頭部同品類的產(chǎn)品的布局也是越來越相似,所以,很多細(xì)節(jié)處的地方就是我們?cè)O(shè)計(jì)所能發(fā)力的點(diǎn),無論是產(chǎn)品視覺中還是產(chǎn)品交互中的細(xì)節(jié),都是不可忽視的設(shè)計(jì)細(xì)節(jié),它能提升產(chǎn)品的品質(zhì)和用戶體驗(yàn)。
其次,我們常說魔鬼在細(xì)節(jié),但為什么不說天使在細(xì)節(jié)?因?yàn)榧?xì)節(jié)做得好,也許不能讓我們上天堂,但是細(xì)節(jié)做不好,足以讓我們下地獄。所以打磨細(xì)節(jié)是我們做為設(shè)計(jì)從業(yè)者不可繞過的一個(gè)環(huán)節(jié)。
原文地址:站酷
作者: Endings
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》設(shè)計(jì)師應(yīng)該懂的設(shè)計(jì)細(xì)節(jié)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)