国产高清在线无码不卡,精品亚洲永久免费精品导航,国产又粗又大又湿视频

<dl id="e2kso"></dl>

體驗設(shè)計進階技巧-教你打磨頁面細節(jié)

2022-5-5 純純

隨著體驗設(shè)計的持續(xù)發(fā)展，行業(yè)內(nèi)各領(lǐng)域的體驗設(shè)計質(zhì)量都有了很大的提升，并且各個競品之間的差距越來越小。而更高的界面細節(jié)設(shè)計質(zhì)量不僅是各個大廠產(chǎn)品體驗設(shè)計的追求，也是我們拉開競品差距的關(guān)鍵一環(huán)。我們平時可能閱讀了很多理論知識文章，但往往在實際工作中卻較少運用。學(xué)習(xí)掌握理論基礎(chǔ)知識固然是很重要的，但在設(shè)計執(zhí)行時掌握設(shè)計技巧也更能提升工作的效率和質(zhì)量。那么在設(shè)計執(zhí)行層遇到問題有沒有一些立竿見影的解決方案呢？本篇文章分別從視覺、內(nèi)容和交互三個角度總結(jié)了十個界面細節(jié)設(shè)計點，希望可以幫助你遇到問題時另辟蹊徑，延伸更好的設(shè)計思路。

在封面和背景圖設(shè)計的場景中，我們?yōu)榱俗尫饷嫔系男畔⒛軌蚋菀卓辞澹ǔ谖淖窒绿砑右粚雍谏胪该骰蛘邼u變蒙層，但你有想過這個蒙層可以不止是黑色的嗎？

在設(shè)計社區(qū)話題詳情頂部背景圖時，我們采用封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。當(dāng)用純黑色作為蒙層時淺色背景可能會顯得很臟，這時可以改用深灰色讓背景看起來不會太臟，加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#000000、30%不透明度，右邊是深灰#333333、30%不透明度?？梢钥闯鲇疫叿桨傅男Ч黠@更清爽一些。當(dāng)然更好的方案是通過客戶端拾取背景圖顏色后生成對應(yīng)色相的深色蒙層，但這個方案設(shè)計相對比較復(fù)雜。需要制定一系列拾色和生成對應(yīng)色值的規(guī)范，并且開發(fā)成本偏高。有條件的話也可以考慮應(yīng)用。

界面中使用圓角設(shè)計更能讓用戶感到親和力和舒適感，所以運用場景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場景，在一些細節(jié)的處理運用圓角也能提升設(shè)計品質(zhì)。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運用常規(guī)的切割邊角就比較尖銳，會略顯生硬。

而添加了圓角處理后視覺上會更加柔和更協(xié)調(diào)，對比一下前后的方案不難發(fā)現(xiàn)圓角的效果更勝一籌。不要看只是一點很小的細節(jié)，其實也體現(xiàn)了設(shè)計師對細節(jié)的細心追求，用戶看了也會體會到設(shè)計師的用心。

另外再介紹一下我個人在sketch中快速繪制這類圓角銜接的方法。以下圖為例，首先頭像的圓形描邊需要單獨畫一個白色的圓形圖層，而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設(shè)為聯(lián)集，再將圖層路徑合并。然后在兩個銜接處的兩邊各添加一個錨點，注意兩個錨點和銜接點的距離一定要相等，這個距離決定了圓角的大小，可以根據(jù)需要來調(diào)整。之后把銜接點的錨點類型改為“筆直”，再給這個錨點添加圓角半徑。這樣銜接點的圓角繪制就完成啦。另外運用布爾運算來畫出圓角也是可以的，具體方法可以根據(jù)個人習(xí)慣來選擇。

我們在頁面取色時經(jīng)常會給背景色和陰影等結(jié)合場景帶有一些顏色傾向，以達到更舒適的視覺效果，其實這個方法也適用于文字。為了提升效率，我們習(xí)慣了在選擇字色時使用一套設(shè)計規(guī)范里的顏色，比如#333333、#999999等等。但是個別的特殊模塊我們是可以根據(jù)實際情況調(diào)整以獲得更好的視覺效果的。比如下面這個案例是一個熱帖榜單的入口模塊，為了提高信息層級讓頁面更有活力，這里選擇用淺黃色作為背景。如果使用規(guī)范的字色與背景的結(jié)合會相對不太協(xié)調(diào)，這里選擇字色時就可以讓文字顏色和背景顏色帶有相同的色相，選用高飽和度低明度的顏色，并且次級信息同時可以帶一點不透明度。讓整個模塊視覺更統(tǒng)一，信息與背景更融合。

類似這樣的場景其實還有很多，有時我們也不必拘泥于設(shè)計規(guī)范中，適當(dāng)?shù)母鶕?jù)模塊定制化一些細節(jié)可以達到更好的視覺效果。

我們經(jīng)常會遇到一個頁面中有多個同級圖標(biāo)排列的情況，不管是用宮格排列或是列表排列都需要每個圖標(biāo)整齊有序、尺寸統(tǒng)一。但實際情況下不可能每個圖標(biāo)尺寸都完全統(tǒng)一。一般這種情況我們可以給每個圖標(biāo)統(tǒng)一添加一個相同尺寸的矩形圖層作為背景板，將背景板隱藏后再整體編組，這樣一來就能保證每個圖標(biāo)所在的組都是相同的尺寸就能統(tǒng)一對齊了。

然鵝，我們有時會遇到一些不規(guī)則形狀圖標(biāo)，尺寸是奇數(shù)甚至是帶小數(shù)的。這種情況圖標(biāo)如果要在背景板上完全居中，我們可以打開首選項中的圖層項，關(guān)閉契合像素功能，然后可以拖動圖標(biāo)或者用對齊功能讓圖標(biāo)與背景板對齊。不要忽略這一兩個像素的差別，這些微小的細節(jié)往往決定了界面設(shè)計的嚴(yán)謹(jǐn)和精致程度。

另外，我們可以根據(jù)情況靈活調(diào)整圖標(biāo)在背景板中的位置，例如左右箭頭圖標(biāo)為了與頁面其他內(nèi)容邊距對齊，可以將圖標(biāo)貼合背景板左右兩邊。這樣就能減少后期開發(fā)還原調(diào)整的工作量，提高工作效率。

標(biāo)題信息在界面設(shè)計中使用頻率非常高，而在設(shè)計過程中我們可能會忽略極限字?jǐn)?shù)的情況，導(dǎo)致開發(fā)還原時實際效果不理想。下面以一個案例來分享一下標(biāo)題極限值的處理方法。

在騰訊動漫社區(qū)改版中設(shè)計話題詳情頁的標(biāo)題時，產(chǎn)品規(guī)劃標(biāo)題的字?jǐn)?shù)為12個字符，在右邊有看漫畫按鈕的情況下是顯示不完全的。這個情況就要考慮設(shè)計極限值的顯示方案。常規(guī)的方案有：1、顯示不完全時后面顯示“...”；2、換行顯示?？紤]到詳情頁需要將標(biāo)題完全展示，所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統(tǒng)一。最終經(jīng)過思考決定使用方案三：標(biāo)題顯示不全時左右滾動展示，可以在保證視覺統(tǒng)一同時顯示完整的標(biāo)題。

同樣的，在很多情況下我們由于空間受限無法展示完整信息時，這個方案也不失為一個很好的選擇。

在頁面設(shè)計工作中我們有時會遇到信息容器邊界固定，而容器內(nèi)信息可以滑動的情況。例如下圖中頂部導(dǎo)航和音樂播放的歌詞頁面，這種場景下一般容器邊界不會做明顯的界限，如果內(nèi)容在邊界處是直接被裁切的話體驗的感受就會比較割裂。我們可以嘗試更好的解決方案，在容器邊界增加漸變過渡，這樣信息在邊緣的過渡就變得柔和，頁面整體更協(xié)調(diào)。

這種漸變的過渡的應(yīng)用場景還有很多，比如瀏覽簡介或者文章時，需要隱藏部分內(nèi)容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內(nèi)容，降低用戶的理解成本并且也能夠讓用戶有心理預(yù)期。

另外在sketch上呈現(xiàn)這種漸變過渡也很方便，如果背景是純色的話可以在邊界處添加一個與背景色相同顏色的色塊，然后給色塊添加添加不透明度從0～100的漸變，這個方法比較簡單。如果遇到背景復(fù)雜的情況，也可以繪制一個和容器相同大小的矩形，在矩形邊緣添加不透明度從0～100的漸變，然后建立蒙版把信息剪切到矩形中。

至于開發(fā)實現(xiàn)的方案還是要和開發(fā)哥哥具體溝通，確保用最便捷的方案還原出最好的效果。

動態(tài)流是我們非常常見的樣式，是分發(fā)用戶生產(chǎn)內(nèi)容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內(nèi)容。一般情況支持九張圖片或一個視頻，在有多張圖片時，可以如下圖做成宮格的樣式適配，每張圖片截取中間的正方形部分。

而只有一張圖片或者視頻時，為了保證圖片和視頻的預(yù)覽效果，通常會做大尺寸的預(yù)覽圖，而圖片的寬高尺寸并不固定，所以只截取中間方形的方案并不能滿足要求，我們要根據(jù)這個情況做單獨的適配方案。首先我們要設(shè)定一個裁切的比例，比如我們?nèi)∝Q圖最小裁剪寬高比為2:3，橫圖最大裁剪寬高比為3:2（這里的寬高比并不是固定的，可以根據(jù)實際需要自己定義比例，采用4:3、16:9等比例都是可以的）。這樣當(dāng)圖片寬高比小于2:3時，我們可以把圖片中間區(qū)域按寬高2:3裁剪出來；圖片寬高大于2:3并且小于3:2時可以按原圖比例預(yù)覽；而圖片寬高大于3:2時，把圖片中間區(qū)域按寬高3:2裁剪出來。另外要注意要給圖片設(shè)置最大高度，否則圖片高度太高會減少頁面信息承載量，降低閱讀效率，相應(yīng)的也要限制最大寬度，否則會使圖片規(guī)則不統(tǒng)一，從而頁面適配效果不協(xié)調(diào)。

同樣的，這個規(guī)則也適用于視頻，由于全面屏手機占比越來越高，這些手機拍攝的視頻大多是19:9、20:9的寬高比例，相比視頻常用的16:9的比例更加細長，所以橫屏視頻可以統(tǒng)一裁剪為16:9比例，而豎屏視頻可以裁剪為9:16比例。

動態(tài)流圖片適配的核心是制定一個適配的規(guī)范來保證閱讀的舒適度和效率。而這個規(guī)范并不是恒定的，可以根據(jù)自身平臺需要來制定，以上僅作為一個示例供參考哦。

隨著沉浸式設(shè)計的趨勢，很多頁面會采用無標(biāo)題欄的設(shè)計。例如下圖的個人中心頁面，頂部利用背景圖來渲染品牌氛圍。但是這類無標(biāo)題欄頁面的上滑交互普遍有個缺陷，就是如果未經(jīng)處理上滑后內(nèi)容會與頂部電池條者是置頂?shù)陌粹o位置重疊。這種類似“穿幫”的情況給用戶的體驗就是設(shè)計處理不夠嚴(yán)謹(jǐn)。然而這種交互細節(jié)也是可以優(yōu)化改善的。

優(yōu)化的原理也很簡單，就是在上滑過程中添加一個標(biāo)題欄來分割頁面內(nèi)容，從而讓內(nèi)容和頂部元素不重疊。標(biāo)題欄可以隨上滑高度改變不透明度，以達到柔和的過渡從而實現(xiàn)絲滑的交互體驗。

類似的處理方案在各大平臺也有較為廣泛的應(yīng)用。

在用戶體驗發(fā)展的趨勢中，無論是交互的反饋或者是圖片、信息等都趨于由靜態(tài)向動態(tài)發(fā)展。常規(guī)的靜態(tài)圖片承載的信息相對有限，所以在有限的載體內(nèi)讓內(nèi)容動起來展示更大的信息量不失為一個很好的選擇。

在舊版本的iOS12系統(tǒng)中有一個視圖選擇的功能，用戶在這個頁面可以選擇標(biāo)準(zhǔn)視圖和放大視圖，并且有三張圖可以滑動展示不同場景下兩個選項的差異，但是這個方案需要來回切換標(biāo)簽和滑動圖片來對比差異，效率很低。而在之后改版的iOS13系統(tǒng)中，這三張靜態(tài)圖被替換成了兩張動圖，輪流切換三個場景的頁面，用戶不需要再滑動圖片就能更加直觀的對比兩個選項的差異。這個小改動不僅可以讓圖片展示更多的信息，還能減少用戶的操作成本提升操作上的體驗，讓閱讀效率更高。