簡單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)。
簡單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì),昨天沒想到幾個小時寫的一篇小文章很受大家歡迎,后續(xù)我多寫一些類似使用技巧,大家多給我點(diǎn)贊一些,支持我繼續(xù)寫下去,那今天再給大家分享幾個設(shè)計(jì)小技巧。希望能幫助到大家。
小輪廓能讓設(shè)計(jì)更精致
電商設(shè)計(jì)中,白色商品圖非常多,很多時候如果細(xì)節(jié)處理不好,就會體驗(yàn)非常糟糕,如上圖就是大家經(jīng)常用到的一個場景。列表中有一個商品圖,這個設(shè)計(jì)有一個很大的問題,就是列表是灰色,商品圖是白色,白色和app的底色白色融為一體了,看起來非常缺乏平衡感。
仔細(xì)分析,你會發(fā)現(xiàn)問題是商品圖頂部有些白色部分和背景頁面的白色融合在一起了,同時卡片背景是灰色,所以色彩白色和灰色非常突兀,那么如何解決。其實(shí)有一個很小的方法就能解決這個問題。
我們直接在商品圖片周邊留出2px的邊框,就能很好的解決這個問題,因?yàn)楸尘笆腔疑?,留出的邊框剛好讓白色圖片看著有一個輪廓,整體更加和諧。
前后效果圖對比,加了一個淺淺的邊框就解決了白色圖片的問題,是不是頁面一下子精致起來。
同樣的原理,在大的商品圖上,留下小的邊框也很好的解決了白色地圖和背景的問題,這個小技巧希望大家能掌握。
善用色彩疊加讓頁面效果更潮
上圖這個場景我想是很多同學(xué)每天工作都在用的,圖片上需要去放一些文字,我們一般處理方式就是在上面疊加一個黑色,給一個透明度,這樣文字就能看清楚。這是一個設(shè)計(jì)手法。
還一種設(shè)計(jì)手法就是在圖片頂部,加一個黑色到透明的一個蒙版,這個大家都會。
但是這兩個設(shè)計(jì)如果對于一些比較年輕,比較潮流的頁面處理,可能就會感覺少點(diǎn)什么,那么這個時候就需要我們大膽一點(diǎn),用一個色彩疊加的方式去設(shè)計(jì),效果就會完全不一樣。
直接在圖片上根據(jù)你產(chǎn)品調(diào)性,疊加一個彩色,然后講顏色模式改為線性光,那么整體的感覺就瞬間不一樣,畫面潮了很多。
我們來看看效果對比,是不是瞬間一個普通的設(shè)計(jì)就潮起來了,當(dāng)然這個效果也需要看你頁面實(shí)際場景去使用。如果你頁面就是一個傳統(tǒng)的設(shè)計(jì),用戶就是普通用戶,那么可以就上面2個方法去設(shè)計(jì),如果你的產(chǎn)品調(diào)性需要傳遞出很潮流,很時尚,那么就可以試試這個方法。
當(dāng)然你也可以在局部去疊加色彩,效果一樣很棒,我最喜歡的音樂軟件Spotify在頁面中就大量使用這種手法在設(shè)計(jì),有興趣同學(xué)可以下載看看。
善用空格和留白
有的時候負(fù)空間非常重要,很多同學(xué)的設(shè)計(jì)稿,非常的擁擠,頁面都像要溢出屏幕了。如上圖,文字和圖片過于緊湊,圖片下面的圖標(biāo),熱區(qū)不夠,看起來非常擁擠。
大家都太吝嗇運(yùn)用空格了,但是留白和空隙是提升設(shè)計(jì)中非常重要的點(diǎn)。能讓你頁面呼吸感更強(qiáng),是優(yōu)化設(shè)計(jì),讓設(shè)計(jì)更精致非常重要的一個小技巧。
簡單優(yōu)化下,把信息分成3部分,然后加大留白,讓信息留白更多,增強(qiáng)設(shè)計(jì)呼吸感。
最后來看下效果,是不是看起來舒服多了,節(jié)奏感和呼吸感更強(qiáng)了,也有例如我們理解信息內(nèi)容。
最后
今天就和大家分享這么幾個小點(diǎn),希望大家都成為一個關(guān)注細(xì)節(jié)的設(shè)計(jì)師。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
對于按鈕控件,Material Design 在規(guī)范中寫下了“突出一個按鈕”原則:布局中應(yīng)包含一個視覺突出按鈕,以使其他按鈕在層次結(jié)構(gòu)中的重要性降低,讓此高強(qiáng)調(diào)按鈕吸引用戶最多的關(guān)注。
依據(jù)用戶體驗(yàn)設(shè)計(jì)的宗旨,把這么長一段話說直白一些,其實(shí)就是:讓按鈕幫助用戶做出最優(yōu)選擇。
越是權(quán)威的設(shè)計(jì)團(tuán)隊(duì),對自家所探尋出來的核心原則越是從一而終。Google 產(chǎn)品線的按鈕設(shè)計(jì),始終遵循著MD規(guī)范這一個標(biāo)準(zhǔn)。我想就這一標(biāo)準(zhǔn),來展開對于「按鈕」設(shè)計(jì)的探索。
Material Design 按照視覺強(qiáng)調(diào)程度將按鈕分為了四個類型:
文字按鈕(低強(qiáng)調(diào)):通常用于次要操作;
輪廓按鈕(中等強(qiáng)調(diào)):描邊讓輪廓按鈕比文本按鈕更突出一些;
填充按鈕(重點(diǎn)強(qiáng)調(diào)):填充按鈕具有視覺重點(diǎn),因?yàn)樗鼈兪褂昧祟伾畛浜完幱埃?/p>
切換按鈕(按鈕組):使用布局將同類按鈕分組。與其他按鈕類型相比,它們的使用頻率較低。
MD規(guī)范之所以如此定義按鈕類型,其實(shí)就是為了滿足設(shè)計(jì)原則中的「對比」原則,足夠差異化的對比才能讓用戶視線有明確的著陸點(diǎn)。
你可以用“較高視覺級+較低視覺級”的按鈕搭配,來引導(dǎo)用戶在當(dāng)前場景做出更重要的操作。
這一手法示例在許多產(chǎn)品中屢見不鮮。例如在一些功能性場景中,出于用戶體驗(yàn),用“較高視覺級”按鈕來輔助用戶進(jìn)行正確操作。
而在一些非功能性場景中,許多產(chǎn)品還使用這個手法來突出重要操作,為業(yè)務(wù)引流。甚至你可以從中去摸索到競品當(dāng)前對哪一塊業(yè)務(wù)更具有側(cè)重點(diǎn)。
例如信用消費(fèi)類金融產(chǎn)品常常用“較高視覺級”按鈕引導(dǎo)用戶對賬單進(jìn)行分期。而京東白條在賬單還款時,也用“較高視覺級”按鈕引導(dǎo)用戶進(jìn)行“小金庫還款”,為自家的金融業(yè)務(wù)引流。
這些案例都是在視覺上幫用戶做出選擇。
但反其道而行之,我們也可以推敲出,當(dāng)當(dāng)前場景的敏感度較高時,我們也可以降低按鈕的視覺對比,不要對用戶進(jìn)行引導(dǎo),讓用戶自行謹(jǐn)慎操作,做出選擇。一般在協(xié)議、隱私條款場景這樣的設(shè)計(jì)會更為常見。
按鈕尺寸是設(shè)計(jì)界老生常談的一個問題了,想必最經(jīng)典的按鈕尺寸標(biāo)準(zhǔn)就是 iOS人機(jī)設(shè)計(jì)規(guī)范提到的“44pt”。除此之外還有MD規(guī)范對安卓按鈕定義的“36dp”、“56dp”等等。
但你是不是也疑惑,為什么我們常??吹桨粹o五花八門的設(shè)計(jì)尺寸?“44pt”真的是按鈕尺寸的標(biāo)準(zhǔn)嗎?
這個回答可以在設(shè)計(jì)師 Scott Hurff 曾寫過一篇關(guān)于按鈕可行性的博文中找到答案。
Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時,遇到了問題:
在我想切歌時,我常常無法一次就點(diǎn)中切歌按鈕,我需要一而再再而三地嘗試。我甚至?xí)蛘`操作而調(diào)高音量,或是按到暫停。
而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。
等到 iOS 10 更新了這一設(shè)計(jì)之后,上述情況改善了許多。同時也提起了 Scott Hurff 對于按鈕設(shè)計(jì)尺寸研究的興趣,并展開了一系列科學(xué)性的論證。
Scott Hurff 搬出了2006年芬蘭奧盧大學(xué)和馬里蘭大學(xué)帕克分校的研究人員合作進(jìn)行的實(shí)驗(yàn)。研究人員測試了兩個場景:
執(zhí)行單個任務(wù)場景(如激活按鈕、點(diǎn)選復(fù)選框或單選按鈕)
執(zhí)行連續(xù)任務(wù)場景(如輸入電話號碼)
在研究過程中,研究人員在每個場景下都測試了一系列不同大小的按鈕。他們發(fā)現(xiàn),當(dāng)按鈕小于9.2毫米時,單個任務(wù)場景的錯誤率顯著增加;當(dāng)按鈕小于9.6毫米時,連續(xù)任務(wù)場景的錯誤率顯著增加。
當(dāng)時這個實(shí)驗(yàn)只確定了按鈕尺寸的合適區(qū)間。但五年后,兩所德國大學(xué)的研究人員又進(jìn)行了另一項(xiàng)研究。這一次他們的目標(biāo)是:確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸。
這一次研究人員發(fā)布了一個Android游戲,該游戲被下載約10萬次,記錄了約1億2千萬次點(diǎn)擊事件。游戲的玩法很簡單:玩家要點(diǎn)擊各種大小、可能出現(xiàn)在屏幕任何地方的浮動圓圈來通關(guān)。
分析游戲中的點(diǎn)擊事件后,研究人員發(fā)現(xiàn)當(dāng)圓圈尺寸小于15毫米,玩家的錯誤率逐步增加;當(dāng)圓圈小于12毫米左右時急劇上升;當(dāng)點(diǎn)擊目標(biāo)小于8毫米時,玩家沒點(diǎn)中圓圈的概率超過40%。
但圓圈的尺寸大于 12毫米時,玩家的正確率也沒有顯著的數(shù)據(jù)變化。即 12毫米 就像一個按鈕尺寸用戶體驗(yàn)的最大臨界點(diǎn)。
通過兩個實(shí)驗(yàn)印證了按鈕尺寸設(shè)計(jì)的科學(xué)性后,提煉出了4個關(guān)鍵數(shù)據(jù):9.2毫米、9.6毫米、12毫米與15毫米。
而通過換算之后經(jīng)過換算可以發(fā)現(xiàn),iOS 的按鈕建議尺寸約為 7毫米;Android 約為 9毫米。但微軟所給到的按鈕規(guī)范建議則直接是以“毫米”為單位的,定義為 13毫米。
經(jīng)過數(shù)據(jù)的換算總結(jié)可以得出以下結(jié)論:
1.Android 所定義的 36pt 按鈕高度約為5.5毫米,在設(shè)計(jì)按鈕時,盡量不要低于這個高度(文字按鈕也應(yīng)該盡量把可點(diǎn)擊熱區(qū)擴(kuò)展到這個高度);
2.36pt、44 pt、56 pt,這些規(guī)范參考數(shù)據(jù)在具體的頁面中需具體分析運(yùn)用,目前各大規(guī)范已放開了按鈕高度的指導(dǎo)建議,并不是一定要讓按鈕保持一個固定的尺寸,只要在合適的可點(diǎn)擊范圍內(nèi),均是合理的;
3.根據(jù)以上的實(shí)驗(yàn)結(jié)論,按鈕尺寸的最大臨界值 12毫米(約為 82pt),大于 82pt后并不能增加用戶可點(diǎn)擊概率,更多是視覺方面的考慮。
合理科學(xué)的按鈕尺寸可以讓用戶準(zhǔn)確地點(diǎn)擊并進(jìn)行操作,能夠避免發(fā)生類似 iOS 9 Apple Music 所遇到的狀況。
我發(fā)現(xiàn)當(dāng)下許多 APP 好像或多或少會忽略按鈕的狀態(tài)樣式設(shè)計(jì)。似乎許多人認(rèn)為移動端按鈕狀態(tài)并沒有 Web 端重要,可能是因?yàn)橐苿佣税粹o沒有 hover(懸?。?態(tài),認(rèn)為按鈕在移動端只有常態(tài)與點(diǎn)擊態(tài),狀態(tài)較少,覺得用戶本身就易于區(qū)分。
但實(shí)際上MD規(guī)范提到按鈕狀態(tài),不但沒有簡單地一筆帶過,還展開了一個專題進(jìn)行了深入研究,可見把UI控件的“狀態(tài)”準(zhǔn)確地反饋給用戶,是多么重要的一件事。
按照MD規(guī)范,按鈕的狀態(tài),一般會發(fā)現(xiàn)有:
Enabled - 激活狀態(tài)(按鈕常規(guī)狀態(tài))
Hover-懸浮狀態(tài)(Web場景下的鼠標(biāo)懸浮狀態(tài))
Focused-聚焦?fàn)顟B(tài)(長按聚焦?fàn)顟B(tài),如長按語音輸入)
Pressed-點(diǎn)擊狀態(tài)(按鈕被點(diǎn)擊按下的狀態(tài))
Disable-禁用狀態(tài)(按鈕不可用的狀態(tài))
Loading-加載狀態(tài)(我自行添加進(jìn)來的,當(dāng)下較為流行的多態(tài)按鈕)
正確地在前期規(guī)范中定義按鈕的狀態(tài)交互及樣式,對按鈕的合理設(shè)計(jì)與用戶體驗(yàn)而言其實(shí)十分重要。按鈕狀態(tài)可以有效地傳達(dá)給用戶當(dāng)前操作狀態(tài),如發(fā)生失誤操作時可以及時止損,減少撤銷/返回操作的成本。
狀態(tài)樣式定義的過程其實(shí)并沒有想象中那么麻煩,一般視覺上可以高度與顏色來營造效果。
· 高度 :界面中往往使用陰影來營造高度視覺差,例如常態(tài)時的陰影能夠營造懸浮、可點(diǎn)擊的效果;禁用狀態(tài)取消陰影,可以營造按鈕觸底,無法點(diǎn)擊的效果。
· 顏色 :顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩,這樣可以確保適量的底色可見性,并且針對每種不同的狀態(tài),應(yīng)調(diào)整顏色遮罩不同的透明度值。MD有一套現(xiàn)成的透明度指導(dǎo)建議,可以進(jìn)行參考。
“幫用戶做出最優(yōu)選擇”說起來很容易,做起來卻容易被忽視或令產(chǎn)品設(shè)計(jì)者糾結(jié)頭疼,不然 Steve Krug 也不會寫一整本《Don’t Make Me Think》來教大家如何揣摩用戶思想的書了。
我盡量從我能考慮得到的方面,聊了關(guān)于按鈕交互的設(shè)計(jì)點(diǎn),可能不太全面,也歡迎補(bǔ)充與校正。至于按鈕的視覺設(shè)計(jì),因?yàn)檫^于個性化,且篇幅原因,我就不再展開討論了。
希望這篇文章能夠幫助到你對按鈕有新的認(rèn)識。我是耍家,我們下期再見。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
在數(shù)字化時代,UI(用戶界面)設(shè)計(jì)的優(yōu)劣直接決定了用戶對產(chǎn)品的第一印象和使用體驗(yàn)。其中,設(shè)計(jì)風(fēng)格與布局是兩大核心要素。
UI 設(shè)計(jì)風(fēng)格豐富多樣,各有獨(dú)特魅力與適用場景。極簡主義風(fēng)格以簡潔為美,去除一切不必要元素,僅保留核心功能與信息。其界面清爽,能讓用戶快速聚焦關(guān)鍵內(nèi)容,如一些資訊類 APP 便常采用,提升瀏覽效率。擬物風(fēng)格則致力于模擬現(xiàn)實(shí)物體外觀與質(zhì)感,給人熟悉親切之感,早期的手機(jī)圖標(biāo)設(shè)計(jì)多運(yùn)用此風(fēng)格,幫助用戶輕松理解功能。還有如今流行的扁平化風(fēng)格,簡潔明了、色彩鮮明,兼具現(xiàn)代感與高效性,在各類移動應(yīng)用中廣泛應(yīng)用。
合理的布局是良好用戶體驗(yàn)的保障。布局需遵循清晰、易用原則。首先要明確信息層級,重要信息置于顯眼位置,如電商 APP 將商品圖片與價格突出展示。常見布局方式有分欄布局,可將不同類型信息有序分隔,適用于內(nèi)容較多的頁面;卡片式布局則將信息以卡片形式呈現(xiàn),便于用戶快速識別與操作,社交媒體 APP 常用此布局展示動態(tài)。此外,響應(yīng)式布局至關(guān)重要,確保界面在不同設(shè)備屏幕上都能完美適配,為用戶提供一致體驗(yàn)。
通過精心的 UI 設(shè)計(jì),從布局、數(shù)據(jù)展示、個性化定制、交互反饋到色彩搭配等多個方面入手,可以有效地突出氣象 APP 的主要功能和特點(diǎn),為用戶打造一個功能強(qiáng)大、操作便捷、視覺舒適且個性化的氣象信息服務(wù)平臺,在競爭激烈的市場中脫穎而出,贏得用戶的青睞與信任。
UI 設(shè)計(jì)公司蘭亭妙微憑借其在色彩運(yùn)用、圖標(biāo)設(shè)計(jì)、布局規(guī)劃、動效設(shè)計(jì)以及個性化定制等方面的創(chuàng)新與突破,為氣象 APP 打造了一個令人驚艷的視覺界面。這不僅提升了氣象 APP 的用戶體驗(yàn)與競爭力,也讓用戶在獲取氣象信息的過程中,能夠感受到科技與藝術(shù)完美融合所帶來的魅力與便捷。在未來的發(fā)展中,相信蘭亭妙微將繼續(xù)以其 UI 妙筆,在氣象 APP 設(shè)計(jì)領(lǐng)域書寫更加輝煌的篇章,為人們的氣象生活帶來更多的精彩與驚喜。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.soiayq.cn