2022-8-12 純純
其實(shí)說(shuō)到設(shè)計(jì)的價(jià)值，它是非常大的，可以從很多不同的維度去出發(fā)，每一個(gè)小點(diǎn)都可以作為閃亮的發(fā)光點(diǎn)去助力產(chǎn)品獲得價(jià)值，并且現(xiàn)在互聯(lián)網(wǎng)時(shí)代，多元化思維越發(fā)重要，我們不僅需要在本職范圍內(nèi)去發(fā)光，還需要拓展更多的能力。
但是我也發(fā)現(xiàn)目前普遍存在一個(gè)很?chē)?yán)重的問(wèn)題，有很多小伙伴設(shè)計(jì)一個(gè)紅包也能扯出一堆增長(zhǎng)模型，這也是因?yàn)殡S著全鏈路、全棧設(shè)計(jì)的噱頭出現(xiàn)，以及一系列的模板化思維體系所影響。
設(shè)計(jì)思維本沒(méi)有對(duì)錯(cuò)，但是需要合理的運(yùn)用，并且將設(shè)計(jì)點(diǎn)需要落在實(shí)際的內(nèi)容上，像我們常見(jiàn)的用戶(hù)畫(huà)像、體驗(yàn)地圖、情緒版等等，那么我們應(yīng)該如何有效的將設(shè)計(jì)點(diǎn)落實(shí)在內(nèi)容上呢？
眾所周知，在整個(gè)產(chǎn)品設(shè)計(jì)中，視覺(jué)感受是最直觀的，也是我們作為一名UI設(shè)計(jì)師能直接去影響的，而視覺(jué)層面的內(nèi)容基本可以劃分為六個(gè)點(diǎn)，也就是我們常常所說(shuō)的 - 形色字構(gòu)質(zhì)動(dòng)
在很多的設(shè)計(jì)運(yùn)用場(chǎng)景中，這六點(diǎn)都是作為比較基礎(chǔ)的內(nèi)容，像一些視覺(jué)語(yǔ)言制定上，而產(chǎn)品設(shè)計(jì)的過(guò)程中，縱使有再多的方法論和思維體現(xiàn)，最終都需要通過(guò)視覺(jué)的表現(xiàn)，所以我打算利用這幾點(diǎn)去深入挖掘，也許可以找到更多的設(shè)計(jì)發(fā)力點(diǎn)。
形也就是設(shè)計(jì)中最基礎(chǔ)的圖形元素，在平面和品牌設(shè)計(jì)中經(jīng)常可以見(jiàn)到，像一些點(diǎn)線(xiàn)面、圖形構(gòu)成等等，而回到產(chǎn)品設(shè)計(jì)中呢，最典型的形就是我們經(jīng)常見(jiàn)到的圖標(biāo)，那除此之外，形還有哪些體現(xiàn)方式呢？
圖形的設(shè)計(jì)表現(xiàn)中，我第一個(gè)聯(lián)想到的就是插畫(huà)，但是插畫(huà)的類(lèi)型和使用方式也分為很多種。
首先我們先設(shè)想一個(gè)場(chǎng)景，當(dāng)我們接觸到一個(gè)新鮮的事物時(shí)，我們首先需要快速的了解他，我們可以通過(guò)產(chǎn)品說(shuō)明書(shū)、產(chǎn)品結(jié)構(gòu)圖，場(chǎng)景使用模擬等不同的方式來(lái)表現(xiàn)。
因此在一些服務(wù)頁(yè)面或新功能介紹中，都會(huì)適當(dāng)?shù)娜谌牍δ懿瀹?huà)，而這種表現(xiàn)形式可以使得界面展示更直觀，快速的讓用戶(hù)理解所描繪的功能含義，減少用戶(hù)學(xué)習(xí)成本。
像一些頁(yè)面中還可以利用場(chǎng)景插畫(huà)去表現(xiàn)，不僅可以打造內(nèi)容的差異性，還可以快速讓用戶(hù)融入到場(chǎng)景中，進(jìn)一步提升用戶(hù)的情感體驗(yàn)。
品牌設(shè)計(jì)的目的就是為了利用圖形化的元素，去加強(qiáng)用戶(hù)的記憶，而隨著產(chǎn)品發(fā)展成熟，為了可以非常有效的去強(qiáng)化品牌，形成產(chǎn)品間的差異性，設(shè)計(jì)在表現(xiàn)層可以利用不同的形式去強(qiáng)化品牌。
設(shè)計(jì)表現(xiàn)上可以賦予產(chǎn)品非常明確的設(shè)計(jì)風(fēng)格，例如抖音的故障風(fēng)格，在圖標(biāo)、插畫(huà)、活動(dòng)頁(yè)面都有很好的延展，這也賦予了很深的產(chǎn)品印象，甚至有很大一部分用戶(hù)看到故障風(fēng)格就會(huì)聯(lián)想到抖音。
除此之外也可以利用品牌元素進(jìn)行一定的延展設(shè)計(jì)，像Logo圖形可以用到很多的圖標(biāo)和默認(rèn)圖上，或者也可以使用品牌形象，在一些界面的提示信息、內(nèi)容引導(dǎo)、以及一些插畫(huà)繪制上，都可以進(jìn)行有效的融入，進(jìn)一步達(dá)到品牌延展的功能。
那么說(shuō)到延展，其實(shí)我們也可以針對(duì)一種元素進(jìn)行適當(dāng)?shù)难诱梗瑢⑺枰w現(xiàn)的內(nèi)容進(jìn)行強(qiáng)滲透，從而進(jìn)一步打造內(nèi)容的專(zhuān)屬調(diào)性，以及強(qiáng)化用戶(hù)的心智。
下面的案例來(lái)自攜程精選榜單，而在整個(gè)入口、詳情頁(yè)，均采用鉆石元素貫穿到整個(gè)頁(yè)面當(dāng)中，不僅可以使得畫(huà)面更加具有視覺(jué)沖擊力，也可以使得鉆石品質(zhì)的氛圍在頁(yè)面中多次露出，進(jìn)而加深頁(yè)面品質(zhì)感。
圖形的表現(xiàn)還有一個(gè)非常重要的內(nèi)容體現(xiàn)，那就是數(shù)據(jù)圖表。在一些工具型或B端產(chǎn)品中，都會(huì)有著大量數(shù)據(jù)，而為了讓產(chǎn)品使用更高效，我們可以利用這種形式來(lái)展示。
但每一個(gè)結(jié)構(gòu)不同的圖表，所側(cè)重的功能都是不一樣的，有的偏向于于數(shù)據(jù)對(duì)比，有的偏向于連續(xù)變化數(shù)據(jù)，有的偏向于占比情況等等，因此在使用的過(guò)程中需要區(qū)分內(nèi)容的側(cè)重以及用戶(hù)對(duì)數(shù)據(jù)使用的傾向。
在現(xiàn)實(shí)中，顏色賦予了這個(gè)世界繽紛多彩，它是我們?nèi)庋圩钪庇^的感受。在設(shè)計(jì)中，顏色是尤為關(guān)鍵的一部分，它賦予了內(nèi)容不同的表現(xiàn)形式。
顏色的學(xué)問(wèn)也比較廣泛，除了我們常說(shuō)的色彩關(guān)系、顏色搭配等等一系列之外，色彩上到心理學(xué)、下到用戶(hù)體驗(yàn)，涉及的范圍十分全面，那接下來(lái)我們就來(lái)感受一下色彩的美妙吧～
生活中有著不同的顏色，例如黃昏與清晨、深夜與極光，都有著不同的色彩傾向。除此之外，色彩心理學(xué)中介紹，不同的顏色給予用戶(hù)不同的心理感受。
例如我們常常所說(shuō)的金色表示尊貴，這就好比現(xiàn)實(shí)生活中的金銀銅牌，他們利用不同的顏色去體現(xiàn)內(nèi)容的品質(zhì)，我們恰好可以利用這種顏色運(yùn)用到會(huì)員、勛章等內(nèi)容中，去凸顯會(huì)員的尊享感、情感化，進(jìn)一步強(qiáng)化用戶(hù)的身份感知。
顏色的感受也可以利用到全局的設(shè)計(jì)配色上，我相信大家肯定都非常熟悉前段時(shí)間非?；鸨陌岛谀Ｊ?，這就是利用不同的顏色來(lái)打造特殊的模式，而暗黑模式可以使得用戶(hù)在黑夜也能舒適的使用產(chǎn)品，并且一定程度上節(jié)約手機(jī)的電耗。
但不是所有的深色系產(chǎn)品都是暗黑模式，我們也可以利用這種顏色搭配打造不同的產(chǎn)品氛圍與特色。例如抖音、MOO音樂(lè)等等。
并且隨著互聯(lián)網(wǎng)的發(fā)展，用戶(hù)群體逐漸龐大，其中也有部分身體有局限的用戶(hù)，對(duì)于他們來(lái)說(shuō)更加迫切通過(guò)互聯(lián)網(wǎng)獲取信息，因此越來(lái)越多大公司注重到這一方向，而這也是我們作為一名設(shè)計(jì)師，更應(yīng)該去優(yōu)化的方向。
可以采用無(wú)障礙色系，以及顏色的色差處理，針對(duì)性的服務(wù)于色盲和色弱群體，使得他們可以在信息閱讀上更符合他們的習(xí)慣，從而進(jìn)一步打造更人性化的產(chǎn)品體驗(yàn)。
色彩搭配講究顏色統(tǒng)一、協(xié)調(diào)，在一些界面中，我們可以利用這種色彩技巧去營(yíng)造氛圍，可以有效的提高界面沉浸感，但是產(chǎn)品中由于內(nèi)容的差異無(wú)法固定顏色，而這也會(huì)導(dǎo)致顏色統(tǒng)一性較難處理，因此可以利用代碼的能力判斷封面色彩傾向，從而進(jìn)行填色，例如豆瓣app。
不僅如此，我們也會(huì)市場(chǎng)看到頭部背景圖和banner圖的色彩也會(huì)統(tǒng)一處理，這是單獨(dú)配置了一張背景圖，從而達(dá)到頁(yè)面頭部的協(xié)調(diào)性。
字體在設(shè)計(jì)中占有很重要的一部分，在UI設(shè)計(jì)中也是最為關(guān)鍵的信息傳遞載體之一，而關(guān)于字體的內(nèi)容也是十分廣泛的，下面我將從字體排版、字體設(shè)計(jì)和字體內(nèi)容三個(gè)方向來(lái)分享我的心得。
字體排版中的字體行高、間距、段落等等，這些都是一名設(shè)計(jì)師必須去掌握的基礎(chǔ)，但是有一些看似簡(jiǎn)單的規(guī)則，卻常常會(huì)被忽略。
例如下面案例中的結(jié)尾標(biāo)點(diǎn)符號(hào)在首，這個(gè)是避首位法則中最關(guān)鍵的內(nèi)容，那為了解決這種方式，我們可以利用「推出式避頭尾」，這也是目前主流的方式之一，利用這種換行的形式避免問(wèn)題，但是往往會(huì)形成句尾參差不齊。
因此我們可以利用「優(yōu)先推入式」標(biāo)點(diǎn)擠壓的方式，將標(biāo)點(diǎn)符號(hào)進(jìn)行空間擠壓，這樣可以在很大程度上確保文字在合適的版心內(nèi)整齊一致。
空格是我們平時(shí)接觸最多的一種字符了，常使用與內(nèi)容分割中，但是在排版中有很多場(chǎng)景也會(huì)用到空格。
例如英文排版中的點(diǎn)號(hào)后面需要加空格，不然會(huì)導(dǎo)致語(yǔ)句之間過(guò)于擁擠，而中英文結(jié)合的時(shí)候，之間也是需要空格進(jìn)行分割處理，除此之外中文和數(shù)字之間也是如此。
字體的類(lèi)型分為很多種，而常規(guī)的界面信息展示中，一般都采用無(wú)襯線(xiàn)字體，但個(gè)別產(chǎn)品利用特殊字體去傳遞產(chǎn)品的氣質(zhì)，例如閱讀產(chǎn)品中采用襯線(xiàn)字體。
除此之外， 大廠(chǎng)也紛紛設(shè)計(jì)屬于自己的專(zhuān)屬字體，通過(guò)這樣的方式去強(qiáng)化自身的品牌感。
一年前的MIUI11版本更新，最重磅的內(nèi)容即是推出動(dòng)態(tài)字體，用戶(hù)可以自由選擇字體粗細(xì)，同時(shí)為了讓界面的美觀度及文本識(shí)別性不會(huì)被破壞掉。
既然聊到字體，那我們順便再來(lái)談?wù)劷诒容^火的微文案，雖說(shuō)內(nèi)容聽(tīng)起來(lái)側(cè)重于文案策劃，但是其目的是為了優(yōu)化用戶(hù)體驗(yàn)，甚至提高轉(zhuǎn)化率等等，那么作為一名設(shè)計(jì)師，我們更應(yīng)該去關(guān)注這樣的內(nèi)容。
而微文案的體現(xiàn)也分為兩個(gè)部分，例如下圖中所展示的情感文案，百度網(wǎng)盤(pán)的會(huì)員到期提示，擬用“藏頭詩(shī)”的形式，渴望留住用戶(hù)。
除了上面所描述情感文案外，我們還可以利用文案內(nèi)容來(lái)影響用戶(hù)行為，往往是這種越細(xì)節(jié)的地方越是存在著成就或破壞用戶(hù)體驗(yàn)和轉(zhuǎn)化率的因素，而這些文案一般出現(xiàn)于，提示文案，引導(dǎo)文案，彈窗文案等等，不僅可以解決用戶(hù)的疑惑，還能進(jìn)一步引導(dǎo)操作。
說(shuō)到結(jié)構(gòu)，我們一般都會(huì)聯(lián)想到用戶(hù)體驗(yàn)五要素中的結(jié)構(gòu)層，他在產(chǎn)品設(shè)計(jì)中更多體現(xiàn)于信息布局和內(nèi)容結(jié)構(gòu)布局，而對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，更多的感覺(jué)就好像畫(huà)面中的布局與排版。
結(jié)構(gòu)的內(nèi)容相對(duì)來(lái)說(shuō)還是比較廣泛的，我主要是圍繞界面布局來(lái)進(jìn)行分析，講一些我覺(jué)得還不錯(cuò)的優(yōu)秀案例，希望從這幾個(gè)角度出發(fā)，可以帶給大家一些啟發(fā)。
場(chǎng)景化設(shè)計(jì)是體驗(yàn)設(shè)計(jì)中較好的發(fā)力點(diǎn)，也是我最近一直在研究的方向，后續(xù)有空我會(huì)單獨(dú)寫(xiě)一篇文章再進(jìn)行深入分析?？偟膩?lái)說(shuō)呢，場(chǎng)景化設(shè)計(jì)分為多個(gè)側(cè)重點(diǎn)，今天分享的內(nèi)容主要圍繞著用戶(hù)分層，為不同的用戶(hù)設(shè)計(jì)。
像我們常見(jiàn)的一些首頁(yè)布局中，其實(shí)有也簡(jiǎn)單的分層，我們可以根據(jù)用戶(hù)不同的目的來(lái)進(jìn)行布局拆分。
下面的案例從上到下依次為，目的明確的搜索用戶(hù)、分類(lèi)明確的用戶(hù)以及只想隨便看看的用戶(hù)，這樣的話(huà)，可以有效的服務(wù)與不同用戶(hù)的目的，也可以快速實(shí)現(xiàn)流量分發(fā)的作用。
而這兩個(gè)界面都屬于功能服務(wù)類(lèi)界面，用戶(hù)去完成某件事的行為也可能會(huì)存在差異，所以我們也可以對(duì)于功能進(jìn)行合適的分層布局。
下面的案例從上倒下依次為，想快速申請(qǐng)貸款或者快速完成任務(wù)獲取現(xiàn)金的用戶(hù)，我們提供了直接操作區(qū)域，并且置于頭部進(jìn)行業(yè)務(wù)屬性強(qiáng)化，中間融入了更多的分類(lèi)與內(nèi)容引導(dǎo)，進(jìn)一步激發(fā)用戶(hù)的興趣，最后可以再通過(guò)不同的形式適當(dāng)?shù)臏p少用戶(hù)顧慮，例如優(yōu)惠券的福利（強(qiáng)化申請(qǐng)貸款），為新用戶(hù)提供發(fā)帖示例（確保社區(qū)的內(nèi)容品質(zhì)）
雖然兩個(gè)界面的內(nèi)容差異較大，但是結(jié)構(gòu)拆分的方式以及目的都是大同小異的，主要還是為了滿(mǎn)足不同行為的用戶(hù)，進(jìn)一步輔助他們完成功能服務(wù)。
而關(guān)于用戶(hù)分層的場(chǎng)景設(shè)計(jì)中，我們還可以區(qū)分用戶(hù)不同的狀態(tài)/身份來(lái)對(duì)界面進(jìn)行差異化布局，下面的案例來(lái)自于百度網(wǎng)盤(pán)會(huì)員界面。
我們都了解會(huì)員他分為很多不同的階段，而不同階段的用戶(hù)，對(duì)于內(nèi)容的關(guān)注上也存在很大的差異的，我們可以從這個(gè)角度出發(fā)，區(qū)分用戶(hù)的會(huì)員狀態(tài)，進(jìn)一步來(lái)進(jìn)行差異化設(shè)計(jì)。從而有效的提高不同階段用戶(hù)的行為決策。
論最出色的界面布局結(jié)構(gòu)，那滴滴的 xpanel 必定讓人印象深刻，它是一個(gè)將卡片附著于第一信息架構(gòu)層級(jí)上，內(nèi)容上分為“消息卡片”“主體卡片”“拓展卡片”三個(gè)維度，通過(guò)這種方式將一屏內(nèi)搶占的空間通過(guò)簡(jiǎn)易的交互模式補(bǔ)償回來(lái)了，這樣既不打破用戶(hù)的核心體驗(yàn)，同時(shí)又增強(qiáng)了運(yùn)營(yíng)、功能的玩法與拓展。
所以我們會(huì)發(fā)現(xiàn)在大部分的打車(chē)、導(dǎo)航產(chǎn)品中，均會(huì)采用這樣的結(jié)構(gòu)布局，這也是對(duì)特定場(chǎng)景垂直領(lǐng)域的深耕和挖掘，尋找“接觸點(diǎn)”，幫助獲取更多的功能、內(nèi)容、服務(wù)，實(shí)現(xiàn)業(yè)務(wù)的“有效增長(zhǎng)”。
而對(duì)于一個(gè)設(shè)計(jì)點(diǎn)，在歷經(jīng)了一段時(shí)間的發(fā)展后，也演變出了一系列的其他內(nèi)容，我從這個(gè)點(diǎn)深入出發(fā)，圍繞著內(nèi)容和布局進(jìn)行延展。
眾所周知，產(chǎn)品和運(yùn)營(yíng)都希望我們能在有限的空間中去展示更多的信息，并且有效的給其他功能進(jìn)行導(dǎo)流，因此我們可以根據(jù)長(zhǎng)尾效應(yīng)，在無(wú)限長(zhǎng)的信息流當(dāng)中，利用不同的卡片布局，給予不同的活動(dòng)、功能進(jìn)行導(dǎo)流。
上面所說(shuō)到的xpanel，是將卡片附著與信息之上，跟著這個(gè)思路發(fā)展，我們便產(chǎn)生了下圖所示中的半模態(tài)卡片布局，雖然追波之前出現(xiàn)一大批疊上疊上疊中疊的布局，但通過(guò)線(xiàn)上的實(shí)際使用最終發(fā)現(xiàn)，疊一層才是比較合理的方式，而這種布局有著良好的空間收納能力與信息拓展能力。
質(zhì)感是設(shè)計(jì)師在表現(xiàn)的時(shí)候最直觀的體現(xiàn)，也可以稱(chēng)為設(shè)計(jì)風(fēng)格，但風(fēng)格近幾年間也發(fā)生了很大的變化，從起初的擬物到扁平，而最近也有很多不同“流派”的質(zhì)感表現(xiàn)，下面我將舉例給大家欣賞一番。
前段時(shí)間流行了一段時(shí)間的新擬態(tài)，一度被扣上有望成為未來(lái)趨勢(shì)主流的設(shè)計(jì)風(fēng)格，但由于質(zhì)感表現(xiàn)上細(xì)節(jié)過(guò)多，影響信息內(nèi)容，并且局限性太大，因此并沒(méi)有被廣泛流傳，但是在視覺(jué)設(shè)計(jì)上，是一個(gè)不錯(cuò)的設(shè)計(jì)表現(xiàn)。
磨砂玻璃的質(zhì)感表現(xiàn)其實(shí)很早很早在iOS的界面設(shè)計(jì)中就已經(jīng)存在，但當(dāng)時(shí)并沒(méi)有廣泛普及，而最近這種風(fēng)格又以一種全新的姿態(tài)回到我們的視線(xiàn)中，他給我們最直觀的感受就是虛虛實(shí)實(shí)。
在用戶(hù)界面中，這種虛實(shí)的變化可以有效的創(chuàng)建視覺(jué)層次結(jié)構(gòu)，增加自然精心的細(xì)節(jié)，并且在多復(fù)雜內(nèi)容中能讓用戶(hù)全面感知與處理信息，有效傳達(dá)信息，讓信息可閱讀、易閱讀。
隨著大屏手機(jī)的興起，單屏顯示高度也明顯增高，而大部分頁(yè)面內(nèi)容并不能占據(jù)一屏空間，因此利用設(shè)計(jì)手法去強(qiáng)化頁(yè)面頭部，除了元素裝飾外，就是這種淡淡的色彩漸變效果，起初只運(yùn)用于少部分頁(yè)面中，但慢慢的這種效果開(kāi)始流行起來(lái)，越發(fā)廣泛。
動(dòng)效設(shè)計(jì)，顧名思義就是動(dòng)起來(lái)的效果，這種表現(xiàn)形式使得靜態(tài)的頁(yè)面可以更加靈活的動(dòng)起來(lái)，不僅可以使得操作體驗(yàn)更加順暢，也可以在某種程度上吸引、引導(dǎo)用戶(hù)。
在動(dòng)效的編排中，轉(zhuǎn)場(chǎng)是非常關(guān)鍵的一部分，我之前也專(zhuān)門(mén)寫(xiě)過(guò)一篇《交互動(dòng)效-轉(zhuǎn)場(chǎng)的那些事兒》，感興趣的朋友可以再碰個(gè)場(chǎng)，支持下。
用戶(hù)操作進(jìn)入新頁(yè)面后，通常會(huì)比較關(guān)注入場(chǎng)元素，像一些金融產(chǎn)品、數(shù)據(jù)圖表，都會(huì)采用短暫的動(dòng)態(tài)效果，強(qiáng)化元素的展示效果，進(jìn)一步吸引用戶(hù)關(guān)注數(shù)據(jù)與內(nèi)容。
在很多優(yōu)秀的設(shè)計(jì)網(wǎng)站上，我們可以發(fā)現(xiàn)大多數(shù)交互動(dòng)效都是對(duì)持續(xù)元素進(jìn)行特殊處理，他們不僅可以讓動(dòng)效更加特別，還可以提高產(chǎn)品的流暢度。
例如下面的案例，前后頁(yè)面的內(nèi)容關(guān)系比較大，因此操作后可以采用持續(xù)效果，進(jìn)一步引導(dǎo)用戶(hù)的視線(xiàn)，提高視覺(jué)體驗(yàn)，強(qiáng)化交互流暢感。
在整個(gè)動(dòng)效編排中，除了關(guān)注入場(chǎng)和持續(xù)元素之外，停留元素也是非常值得關(guān)注且可以深入打磨的內(nèi)容。
例如下面的案例，在整個(gè)搜索體驗(yàn)的鏈路中，我們可以發(fā)現(xiàn)搜索框提示文字、輸入的單詞等等均在進(jìn)行了停留處理，確保在頁(yè)面切換時(shí)，減少用戶(hù)的視覺(jué)跳轉(zhuǎn)，可以有效提供用戶(hù)的專(zhuān)注度，打造更加輕松的體驗(yàn)。
產(chǎn)品設(shè)計(jì)中都希望在足夠的空間內(nèi)可以展示更多的信息，但這樣往往會(huì)帶來(lái)信息過(guò)載的問(wèn)題，因此我們需要在設(shè)計(jì)的過(guò)程中對(duì)信息展示進(jìn)行區(qū)分，利用行動(dòng)觸發(fā)結(jié)合動(dòng)效的形式，輔助信息布局更合理。
下圖的案例來(lái)自vivo全新的原子隨身聽(tīng)，利用現(xiàn)實(shí)生活中音樂(lè)播放器的樣式，將同類(lèi)app進(jìn)行收納，完美的體現(xiàn)了，在較小的空間布局下如何展示更多的內(nèi)容。
與此同時(shí)也會(huì)發(fā)現(xiàn)很多產(chǎn)品中利用容器來(lái)承載信息，典型的案例就是FAB按鈕，用戶(hù)操作后再利用動(dòng)效的形式進(jìn)行反饋，其實(shí)和上面的相差不大，只不過(guò)他屬于不同信息共用同一區(qū)域。
網(wǎng)頁(yè)端有一個(gè)不同于移動(dòng)端的交互，那就是hover，因此我們可以利用這種交互方式，去處理信息的重要層級(jí)，然后根據(jù)用戶(hù)的操作再進(jìn)行詳細(xì)露出，很大程度上優(yōu)化了信息空間展示。
隨著產(chǎn)品體量越來(lái)越大，功能繁多的同時(shí)，頁(yè)面結(jié)構(gòu)也變得十分復(fù)雜，為了確保用戶(hù)體驗(yàn)過(guò)程中，更清楚頁(yè)面層級(jí)，以及操作后的流程，所以我們可以通過(guò)動(dòng)效合理安排交互流程，助力用戶(hù)的舒適體驗(yàn)。
我之前也專(zhuān)門(mén)寫(xiě)過(guò)一篇《交互流程中的三大重點(diǎn)》，感興趣的朋友可以再碰個(gè)場(chǎng)，支持下。
利用動(dòng)效的形式，提升用戶(hù)在交互流程中的操作預(yù)知，例如下圖的分類(lèi)圖表，充分的體現(xiàn)內(nèi)容的含義，進(jìn)一步強(qiáng)化用戶(hù)操作前的預(yù)知性。
在一些結(jié)構(gòu)復(fù)雜的頁(yè)面中，我們可以通過(guò)合理安排交互動(dòng)效，轉(zhuǎn)場(chǎng)方式、狀態(tài)反饋等等一系列的設(shè)計(jì)，有效的對(duì)界面層級(jí)路徑梳理。
其實(shí)設(shè)計(jì)師的發(fā)力點(diǎn)不單單只是我們平時(shí)看到的產(chǎn)品分析、用戶(hù)畫(huà)像、體驗(yàn)地圖，其實(shí)從設(shè)計(jì)的角度出發(fā)，也有很多價(jià)值點(diǎn)，我們作為一名設(shè)計(jì)師，更應(yīng)該根據(jù)產(chǎn)品現(xiàn)狀去制定明確的設(shè)計(jì)目標(biāo)，深入挖掘，利用有效的設(shè)計(jì)價(jià)值觀，正確的驅(qū)動(dòng)設(shè)計(jì)前行，最終通過(guò)設(shè)計(jì)去提高產(chǎn)品體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：三石設(shè)計(jì) 來(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.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com