亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

首頁

用戶體驗(yàn)度量模型

周周

本文介紹了幾個(gè)關(guān)于用戶體驗(yàn)度量的模型,UES模型、適合網(wǎng)站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型,它們各有切入點(diǎn),也各有其適應(yīng)場(chǎng)景。對(duì)各個(gè)模型的概念和它們相應(yīng)的維度做了詳細(xì)的介紹。

7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

純純

失敗的網(wǎng)頁設(shè)計(jì)各不相同,但是優(yōu)秀的網(wǎng)頁設(shè)計(jì)則有著共通的特點(diǎn)。你需要思考人們想要的是什么,什么東西能夠觸動(dòng)他們,讓他們欲罷不能,無法忘懷。

聽起來似乎很簡(jiǎn)單,不是嗎?取悅用戶的關(guān)鍵在于像用戶一樣思考。并不是每一次創(chuàng)新、每一次重塑、每一種新技術(shù)都能讓用戶愉悅,那些真正易于理解、便于使用、降低難度的技術(shù)、設(shè)計(jì)手法和抓人的視覺元素,才是一切的關(guān)鍵。下面總結(jié)的7項(xiàng)秘訣,會(huì)讓你的網(wǎng)頁脫穎而出的。

1、定制化

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

定制化,或者說個(gè)性化,是今天網(wǎng)頁設(shè)計(jì)中最典型的趨勢(shì)之一。用戶希望瀏覽網(wǎng)頁的時(shí)候獲得更加私人的瀏覽體驗(yàn),無論是玩頁游還是購物。

看看世界上最著名的那些網(wǎng)站是怎么做的吧。Amazon 為用戶提供基于購買歷史的產(chǎn)品推薦,Netflix 則會(huì)推薦相關(guān)的作品、有待觀看的下一部,并且基于用戶 Twitter 上的內(nèi)容來進(jìn)行推薦。

每一個(gè)微小的自定義設(shè)計(jì),都能讓用戶感覺這些用戶體驗(yàn)設(shè)計(jì)是為他們而做的。同時(shí),這種設(shè)計(jì)也會(huì)給用戶一種參與感和溝通的體驗(yàn),從而加深用戶的忠誠度。如此一來,用戶會(huì)更好地融入整個(gè)網(wǎng)站的用戶群或者社區(qū)。

2、簡(jiǎn)練的動(dòng)效

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

另外一個(gè)大熱的流行趨勢(shì),就是動(dòng)效設(shè)計(jì)。它不僅能為用戶帶來驚喜,而且具備強(qiáng)大的引導(dǎo)性。

動(dòng)效設(shè)計(jì)的精髓在于簡(jiǎn)單。令人頭暈或者不知所措的動(dòng)效,應(yīng)該不是你要的東西吧?動(dòng)效應(yīng)該是有目的性的,和其他所有的設(shè)計(jì)元素一樣,有針對(duì)性,達(dá)成目標(biāo)是它存在的意義。

對(duì)動(dòng)效或者說動(dòng)畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯(cuò)覺:迪士尼動(dòng)畫》中,就詳細(xì)總結(jié)了創(chuàng)造今天動(dòng)畫的12個(gè)原則:

·擠壓和拉伸
·預(yù)期
·登臺(tái)
·連續(xù)動(dòng)作和姿態(tài)對(duì)應(yīng)
·緩進(jìn)緩出
·弧形運(yùn)動(dòng)
·次要?jiǎng)幼?br /> ·時(shí)序
·夸張
·立體刻畫
·吸引力

3、使用約定俗成的設(shè)計(jì)模式

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

對(duì)于常見的問題,設(shè)計(jì)模式就是可靠且可復(fù)用的解決方案。簡(jiǎn)而言之,最常見的信息和交互方式被整合到一個(gè)界面當(dāng)中,比如點(diǎn)擊按鈕,滾動(dòng)頁面,滑動(dòng)解鎖,它們都是設(shè)計(jì)師模式。

你需要熟悉這些常見的設(shè)計(jì)模式,并且在設(shè)計(jì)界面和交互的時(shí)候?qū)⑺鼈冇眠M(jìn)去。這符合用戶在體驗(yàn)上的訴求,也是易用性的最基本構(gòu)成。

同時(shí)你也要在自己的設(shè)計(jì)中創(chuàng)造設(shè)計(jì)模式,在不同的頁面中使用相同、相似或者規(guī)則化的設(shè)計(jì),讓用戶習(xí)慣。比如,不同頁面中的CTA按鈕的色彩保持一致,卡片式的元素使用相同的樣式,等等等等。

4、給設(shè)計(jì)以性格

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

沒人會(huì)喜歡單調(diào)無聊的設(shè)計(jì)。你的網(wǎng)站應(yīng)當(dāng)同你的品牌保持一致的性格,擁有獨(dú)特的氣息。

要做到這一點(diǎn),通常需要用到微妙走心的文案和親切自然的語調(diào)如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(請(qǐng)注意他們的文本和圖片是如何無縫地連接到一起的)

5、在屏幕內(nèi)思考

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

用戶同網(wǎng)站交互都是在屏幕內(nèi)進(jìn)行的,無論是桌面端還是移動(dòng)端,整個(gè)體驗(yàn)都是圍繞著屏幕進(jìn)行的。

這并不是一句廢話。屏幕是一個(gè)區(qū)域,它界定范疇,賦予概念,創(chuàng)造隱喻。這也解釋了為什么視差滾動(dòng)和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個(gè)容器中,讓用戶隨之同下一個(gè)元素進(jìn)行互動(dòng)。

如何運(yùn)用好這個(gè)概念其實(shí)并不是那么容易。一個(gè)屏幕內(nèi)應(yīng)當(dāng)承載多少信息,需要仔細(xì)考慮。一個(gè)桌面端頁面所能承載的信息量在移動(dòng)端屏幕上,可能需要?jiǎng)澐值綆讉€(gè)頁面當(dāng)中去。

從屏幕的角度來考慮問題,可能會(huì)讓你的計(jì)劃更加龐大復(fù)雜,但是這種考量是有價(jià)值的,這種基于屏幕或者基于設(shè)備的考慮能讓用戶感覺更加便捷貼心。

6、一體化的內(nèi)容和交互

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

視頻、游戲、測(cè)試都爭(zhēng)取讓用戶能與之進(jìn)行互動(dòng),這種互動(dòng)的目的在于驅(qū)動(dòng)用戶參與到設(shè)計(jì)中來。用戶與界面交互的越多,用戶所獲得的體驗(yàn)就越好。

不過,有趣的元素能讓這一切截然不同。

讓交互內(nèi)容盡量簡(jiǎn)單,不要牽扯太多,讓用戶可以一目了然,讓他們輕松獲得反饋的信息,不用在冗雜的體驗(yàn)中淪陷。這其實(shí)和美劇的5分鐘原則有著異曲同工之妙。

7、輕松有序的設(shè)計(jì)

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

最后一個(gè)秘訣并非不重要,它甚至可以說是最基礎(chǔ)的原則:讓你的設(shè)計(jì)保持干凈、整潔和有序。使用柵格可以讓每一個(gè)頁面元素都有準(zhǔn)確的位置。將響應(yīng)式設(shè)計(jì)落實(shí)到每一個(gè)元素,能讓頁面能從一個(gè)設(shè)備兼容到另一個(gè)設(shè)備。

簡(jiǎn)約風(fēng)和極簡(jiǎn)風(fēng)能成為設(shè)計(jì)趨勢(shì)是有道理的。用戶可以更輕松理解這一切。簡(jiǎn)約的視覺設(shè)計(jì)更容易交互。沒有復(fù)雜信息并且被精心設(shè)計(jì)的界面能更好地運(yùn)作,賦予更好的體驗(yàn)。

蘋果的官方App Store 和Google Play 都推薦過的游戲 Two Dots 就是個(gè)典型案例。誰都可以拿起手機(jī)毫無障礙地開始玩兒,它設(shè)計(jì)簡(jiǎn)單干凈,容易互動(dòng),視覺元素周圍有足夠的空間,無需擔(dān)心誤觸。同時(shí),其他游戲所具備的東西它也有——有趣好玩,可以共享得分,能分享到社交媒體。

結(jié)語

界定一個(gè)網(wǎng)站的體驗(yàn)與否有的時(shí)候并不是單一的標(biāo)準(zhǔn),而今天所推薦的7條秘訣本身也更接近于基本的Guideline,了解用戶,熟悉趨勢(shì)才能提供優(yōu)秀的體驗(yàn)。

文章來源:優(yōu)設(shè)  作者:陳子木
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

純純

一、為什么動(dòng)?

首先,為什么要?jiǎng)??可能你?huì)想到以下幾條理由:

  1. 這讓我的作品看起來很炫酷,碉堡了!
  2. 動(dòng)效會(huì)帶來流量,助我完成KPI!
  3. 別人都這么做了,我也得做!
  4. 編輯讓我這么干的!

呵呵,你要這么想就完了。

那么該如何衡量一個(gè)動(dòng)效是否應(yīng)該出現(xiàn)呢,我們認(rèn)為有幾個(gè)考核標(biāo)準(zhǔn):

1. 這個(gè)動(dòng)效是否會(huì)影響性能?

首先,這個(gè)動(dòng)效是否會(huì)影響性能?這個(gè)是最重要的,添加任何動(dòng)效前都要考慮是否會(huì)影響產(chǎn)品的性能,如果一個(gè)很酷炫的動(dòng)效會(huì)拖累性能,使體驗(yàn)變得卡頓不流暢,那么必須毫不猶豫的砍掉或簡(jiǎn)化。

例子:化身間諜

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)例子,這是一個(gè)穿越情景的過場(chǎng)動(dòng)畫,隨著年份的倒轉(zhuǎn)背景出現(xiàn)各個(gè)歷史大事件,給人以歷歷在目的感覺,設(shè)計(jì)師考慮到了多張圖片會(huì)出現(xiàn)卡頓的可能性,所以特意降低了每張圖的清晰度,因?yàn)閮?nèi)容本身就是老照片的風(fēng)格,所以這種降低畫質(zhì)的手法反而增強(qiáng)了畫面的真實(shí)感。

2. 這個(gè)動(dòng)效是否會(huì)提高產(chǎn)品的可用性?

任何動(dòng)效的出現(xiàn)都必須帶有明確的目的性,能夠解決用戶在使用過程中的困惑,而不是炫技。單純的炫技只會(huì)分散用戶的注意力,弱化內(nèi)容,變得適得其反。

例子:翻頁提示

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)上滑提示。不用解釋,用戶一看知道該做什么。動(dòng)效增加了產(chǎn)品的可用性,所以這樣的動(dòng)效是非常有意義的!

3. 這個(gè)動(dòng)效是否會(huì)給你的產(chǎn)品帶來獨(dú)特氣質(zhì)?

這里所說的氣質(zhì)是動(dòng)效本身會(huì)有助于增強(qiáng)用戶對(duì)于產(chǎn)品的認(rèn)知和情緒帶入。一個(gè)相得益彰的動(dòng)效會(huì)為你的產(chǎn)品錦上添花,深化你的主題和功能,注意,一定是與主題相關(guān)的,牽強(qiáng)的搭配只會(huì)叫人覺得莫名其妙,毫無意義。

例子:人生四時(shí)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

再看這個(gè)例子,人生四時(shí),四根火柴依次燃燒,慢慢燃盡,這種油盡燈枯的感覺很切合的體現(xiàn)了產(chǎn)品生老病死的主題。

4. 重新審視第一條,看你的動(dòng)效是否影響性能

所以,合理的動(dòng)效不應(yīng)是花拳繡腿,而應(yīng)該是解決問題的手段。

二、哪里動(dòng)?

好,我們?cè)倏纯茨睦镄枰獎(jiǎng)有?,這里舉幾個(gè)例子:

1. 加載

首先是出現(xiàn)在加載環(huán)境,不管是網(wǎng)頁還是H5都不可避免的會(huì)出現(xiàn)讓用戶等待的情況,在等待的過程中為了讓用戶知道他的手機(jī)沒有死機(jī)以及網(wǎng)絡(luò)是通暢的,我們應(yīng)該在這個(gè)時(shí)候加入一些與主題相關(guān)的動(dòng)效來提醒他內(nèi)容正在加載中。

例子:化身間諜H5 loading

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這是一個(gè)穿越類的H5,所以設(shè)計(jì)師在設(shè)計(jì)loading的時(shí)候選用了蟲洞的理念,與內(nèi)容本身緊密貼合。

2. 轉(zhuǎn)場(chǎng)

第二個(gè)情景是轉(zhuǎn)場(chǎng)。具有意義的轉(zhuǎn)場(chǎng)會(huì)降低產(chǎn)品割裂感,我們看兩個(gè)例子就明白了。

例子:QQ會(huì)員觀影特權(quán)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這個(gè)例子里元素在默認(rèn)狀態(tài)下會(huì)做上下浮動(dòng)的效果,當(dāng)我們滑動(dòng)時(shí)候,元素很自然的做了一個(gè)出場(chǎng)入場(chǎng)的效果。很自然,沒有割裂感。對(duì)吧?

3. 頁面元素的互動(dòng)

也可以為網(wǎng)頁元素增加一些必要的動(dòng)效。

例子:好聲音第四季首頁:

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

看下好聲音的專題頁面,在網(wǎng)頁上的能夠點(diǎn)擊的按鈕或者文字鏈,在鼠標(biāo)經(jīng)過時(shí)都有點(diǎn)變化,這個(gè)十分必要。因?yàn)楸砻嫔系淖兓瘯?huì)給用戶一種心理暗示,那就是點(diǎn)擊后也會(huì)有變化。

4. 心理需要

這里所說的心理需求是指氣氛和情景的營造,例如節(jié)日,游戲活動(dòng)等產(chǎn)品,是需要一些動(dòng)效去滿足用戶心理需求的。大家都知道在微信里輸入“生日快樂”是會(huì)掉下生日蛋糕的,這個(gè)動(dòng)效就比干巴巴的文字有趣多了。

例子:一封家書

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

一封家書,注意看,背景有飄落的雪花,漫天大雪勾起思鄉(xiāng)情,對(duì)吧,合情合理,有情有義!

三、怎么動(dòng)?

好,說完哪里動(dòng),我們現(xiàn)在看看怎么動(dòng)。

1. 基于真實(shí)形態(tài)的模擬

基于真實(shí)的動(dòng)畫會(huì)叫人看起來自然流暢,符合規(guī)律,比如物體運(yùn)動(dòng)時(shí)的加速度現(xiàn)象。

例子:Look

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

注意看這個(gè)筆畫的動(dòng)勢(shì),是有快有慢的,模擬了寫字時(shí)起筆收筆的那種節(jié)奏感,所以看起來是自然真實(shí)的。

2. 人物動(dòng)作夸張化

在H5的設(shè)計(jì)中,經(jīng)常會(huì)出現(xiàn)各種各樣的人物形象,夸張的人物動(dòng)作會(huì)生動(dòng)你的形象,增加趣味性,給用戶以驚喜。

例子:巴菲特這一年

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

巴菲特老爺爺,動(dòng)作很親切。

3. 給元素賦予彈性

有彈性的物體會(huì)叫用戶覺得具有生命感和真實(shí)性,彈的程度取決于你對(duì)元素軟硬度的設(shè)定。

例子:拍個(gè)大頭鬼

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

三個(gè)小鬼一跳一跳,彈性賦予了他們頑強(qiáng)的生命力。

4. 蒙太奇

這是一種類似蒙太奇的手法,通過快速切換的畫面來形成一種奇妙后現(xiàn)代感覺。

例子:傳奇硬箱

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

炫酷了,節(jié)奏很快,提氣!

好,以上只是一些基本的動(dòng)效手法,在實(shí)際的應(yīng)用中其實(shí)有很多手段,在這里我建議大家可以去看看迪士尼和皮克斯的動(dòng)畫,應(yīng)為動(dòng)畫本身是一種對(duì)于動(dòng)作行為高度概括的手段。雖然這些都是電影,但是他們使用的手段和遵循的理念是非常值得我們?nèi)W(xué)習(xí)和借鑒的。注意觀察這些大牛們的作品,你會(huì)發(fā)現(xiàn)他們的作品中充滿了走心的細(xì)節(jié)。

四、結(jié)語:

簡(jiǎn)單來說,當(dāng)用戶打開一個(gè)界面,注意力首先會(huì)被動(dòng)態(tài)的物體吸引,然后才會(huì)把注意力轉(zhuǎn)向顏色對(duì)比強(qiáng)的部分,最后才是形狀。這一過程是人在進(jìn)化過程中形成的本能反應(yīng),基本適用所有用戶。同時(shí)一個(gè)非常重要且容易被忽略的原則:用戶的注意力是有限的,而且越來越少。很可能在用戶注意到一段動(dòng)效之后,注意力和耐心已經(jīng)用盡,無法看到其他內(nèi)容就著急去下一個(gè)界面了。

所以,對(duì)于動(dòng)效這樣一個(gè)非常強(qiáng)勢(shì)的工具,一定要用在希望用戶注意的部分,并且認(rèn)真打磨。真正做到“不為動(dòng)而動(dòng)”。



文章來源:優(yōu)設(shè)   作者:程遠(yuǎn)


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

超全面的UI界面字體選取與使用指南

純純

最初的圖形界面

文字和排版可以追溯到五千年前,而圖形化界面僅僅只有40年的歷史。最關(guān)鍵的轉(zhuǎn)折點(diǎn)出現(xiàn)在1973年的施樂,最早的圖形化界面出現(xiàn)在了他們的Alto電腦上,而這個(gè)設(shè)計(jì)就是現(xiàn)如今圖形化界面設(shè)計(jì)的基礎(chǔ)。在Alto 的界面誕生后的10年里,幾乎是它一家獨(dú)大,并且它也被大家視作為數(shù)字技術(shù)的未來。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

早期的Alto 在80年代進(jìn)化為著名的施樂之星,而施樂的這個(gè)設(shè)計(jì)方案也成為了第一個(gè)商用的操作系統(tǒng)圖形化界面。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

不過不論是Alto 還是施樂之星,都沒能真正意義上崛起。不過施樂的圖形化界面最終深深的影響了蘋果和微軟的道路,比爾蓋茨和喬布斯先后在施樂的研發(fā)中心觀摩了施樂之星的運(yùn)作,而喬布斯更是在1984年先人一步發(fā)布了著名的Macintosh 系統(tǒng),也就是后來我們所熟知的Mac OS。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

Macintosh 的發(fā)布不僅僅意味著相對(duì)成熟的GUI的出現(xiàn),而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統(tǒng)內(nèi)置了許多以著名城市命名的字體,也正是在此之后才有越來越多的著名字體的數(shù)字版本在數(shù)字平臺(tái)上發(fā)布并應(yīng)用。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

仔細(xì)觀察這些早期的字體,我們能夠發(fā)現(xiàn),雖然已經(jīng)是圖形化的界面,但是其中絕大多數(shù)的界面元素都還是以純文本的形式而存在,它們以一種奇妙的方式被整合到一個(gè)界面當(dāng)中。循著界面的發(fā)展歷程沿路看過來,不難發(fā)現(xiàn),文本和排版幾乎是貫穿始終的主線,它是一個(gè)不容忽視的核心類別。

文本即界面

界面中的每一個(gè)文字、每一個(gè)字符都很重要。好的文本是好的設(shè)計(jì)。文本是最根本的界面,是我們?cè)O(shè)計(jì)師來塑造和打磨這些信息。

看看下面的天氣界面的設(shè)計(jì),想象一下將所有界面元素都擺在桌上會(huì)是什么樣的效果:無非就是兩張圖,幾個(gè)圖標(biāo)和一大堆文本。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

作為設(shè)計(jì)師,工作并不是將一堆隨機(jī)的內(nèi)容和元素排布在屏幕上,讓它們看起來夠漂亮就行了。真實(shí)的情況是,我們要從最核心的內(nèi)容和文本開始著手,然后從這里著手細(xì)化,并完善出其他的部分。這就是我們工作的核心。

文本的清晰度同樣扮演著關(guān)鍵性的角色。如果我們的大腦花費(fèi)一兩秒鐘單純只是分辨一個(gè)字形,那么清晰度上的微小差異是無傷大雅的??墒钱?dāng)它們組合成為大段的文本,不同的字母組合構(gòu)成不同的詞匯、段落的時(shí)候,清晰度的影響就更大了,排版的重要性也顯得更加明顯了。

當(dāng)然,影響界面設(shè)計(jì)的文本屬性還有很多,比如平衡性,定位和層次結(jié)構(gòu),但是好的文案和排版的影響至少占據(jù)整體影響的95%。

在偉大的設(shè)計(jì)師眼里,文本不僅承載內(nèi)容,而且可以構(gòu)成界面。
– Oliver Reichenstein

我們?nèi)绾伍喿x

既然屏幕上的文本顯示是如此的重要,那么我們應(yīng)當(dāng)先了解人們是如何閱讀的,而文本顯示又是如何影響我們?cè)O(shè)計(jì)決策的。

讀過Billy Whited 的文章《Setting Type for User Interface》之后,讓我對(duì)于文本閱讀的效率有了更深的認(rèn)知。一個(gè)少于20個(gè)字母的獨(dú)立單詞放在句子中會(huì)更快被理解,而單獨(dú)放置的時(shí)候我們需要耗費(fèi)更長(zhǎng)的時(shí)間來識(shí)別。

其實(shí)這個(gè)研究結(jié)果也表明我們閱讀較長(zhǎng)句子的時(shí)候,并非是逐個(gè)單詞地閱讀,而是跳躍著閱讀功能性的詞匯,我們將這種閱讀方式稱為離散跳躍式閱讀,俗稱掃視。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

掃視讓我們的閱讀能力更強(qiáng),我們甚至?xí)^短的功能性詞匯。

我們應(yīng)當(dāng)記住這一關(guān)鍵特征,因?yàn)槲覀兊慕缑嬷兴休d的詞匯大多是孤立的單詞。簡(jiǎn)單說來,界面是無法利用掃視這種方式來獲取信息的。

總的來說,單詞在閱讀中發(fā)揮著無比重要的作用,無論是作為內(nèi)容還是作為界面元素,均是如此。無疑,選擇合適的字體就相當(dāng)重要了。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

過去,人們常常認(rèn)為眼睛和大腦是通過單詞的外輪廓(Bouma Shape)來識(shí)別單詞,當(dāng)然,后來的研究證明這個(gè)想法是錯(cuò)的,單詞的可讀性和易讀性的影響因素不止是外輪廓,字母本身的形態(tài)、細(xì)節(jié)和清晰度同樣深入的影響著它的識(shí)別度。

是什么讓字母清晰可讀?

其實(shí)這個(gè)問題一開始并不是那么好回答。閱讀很大程度上依賴于我們的習(xí)慣,越常見的內(nèi)容對(duì)我們而言越容易識(shí)別。這樣一來,我們就不那么容易判斷讓字母清晰易讀的影響因素了。為了了解這一點(diǎn),我們需要將句子分割為單詞,分解單詞為字母,在字母中查看細(xì)節(jié)。

早在2008年,維多利亞大學(xué)心理學(xué)系根據(jù)測(cè)試結(jié)果得出結(jié)論,大寫和小寫的拉丁文字母是最容易識(shí)別的,也最易于閱讀。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

這項(xiàng)研究有趣的地方在于,它揭示了一個(gè)事實(shí):每個(gè)字母延伸出來的線性端點(diǎn)是最易于識(shí)別的地方,也是每個(gè)字母的特點(diǎn)所在。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

上面的圖片標(biāo)識(shí)出了這些最易于識(shí)別的部分。每一款字體在這些部分應(yīng)當(dāng)設(shè)計(jì)為最通用、最為人所熟悉的樣式,同樣的,它們也應(yīng)該強(qiáng)調(diào)每個(gè)字母的差異。

在2010年的時(shí)候,另一項(xiàng)由 Sofie Beier 和 Kevin Larson 開啟了一個(gè)新的研究項(xiàng)目,這項(xiàng)研究專注于測(cè)試經(jīng)常被誤讀的字母和字符的識(shí)別度。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

這項(xiàng)研究表明,在相同的字體和相同的尺寸、相同字重的情況下,有些字體或者變體的細(xì)節(jié)確實(shí)比其他的更加清晰、更易于識(shí)別。這項(xiàng)研究的結(jié)果說明,纖細(xì)的字體加粗之后識(shí)別度效果會(huì)明顯會(huì)增強(qiáng),而字母的X高度如果能夠占據(jù)上伸區(qū)或者下探區(qū)的空間,識(shí)別度會(huì)更好。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

為了更好的理解字體的清晰度的概念,你可以下載我所開發(fā)的這款工具 Legibility APP 來測(cè)試不同字體在模糊、炫光等多種不同情況下的清晰度和辨識(shí)度。這是一款處于測(cè)試階段的工具,可以在Chrmoe、Opera和Safari 中運(yùn)行。

UI中的字體使用

理解了用戶閱讀的方式和字體可讀性的影響因素之后,我們應(yīng)當(dāng)開始了解UI中的字體的幾個(gè)關(guān)鍵因素。下面是UI中字體使用的10個(gè)關(guān)鍵因素。

1、可讀性

可讀性是UI中字體所需考慮的首要因素。字母字形必須清晰可辨,作為UI元素,其中不同的字母必須可以被用戶輕松辨別出差異。許多經(jīng)典的字體,甚至包括 Helvetica ,都沒辦法清晰分辨 字母 i 的大寫形態(tài) I,和大寫字母 L的小寫形態(tài) l,這在界面設(shè)計(jì)中無疑是有影響的。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

上圖中,左邊的字體為 Source Sans Pro , 右邊為 Helvetica,無疑對(duì)于 Illiterate 這個(gè)詞Helvetica 字體下前三個(gè)字母完全無法分辨。有部分用戶也同意Helvetica 并不適合作為UI界面的顯示字體而存在,因?yàn)檫@款字體終究是為平面印刷顯示而設(shè)計(jì)的,并非為屏幕而生。

在iOS 7 時(shí)代,蘋果短暫地將 Helvetica 作為系統(tǒng)的主要顯示字體的時(shí)候,曾對(duì)特定的用戶群體造成過信息識(shí)別的困擾。這也最終催生了我們現(xiàn)在所看到的蘋果官方字體 San Francisco。舊金山是為UI界面而生的字體,它的x高度比Helvetica 更高,字母間距更寬,字母間的識(shí)別度更高。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

2、適度

一款理想的UI界面所用的字體,不應(yīng)當(dāng)過于“顯眼”,而該是悄無聲息,“隱型”的。當(dāng)用戶在試圖完成某項(xiàng)任務(wù)的時(shí)候,字體不應(yīng)當(dāng)給用戶以“出戲”或者“顯眼”的感覺,也就是說,字體不應(yīng)當(dāng)超出用戶的認(rèn)知負(fù)荷,而內(nèi)容和信息才應(yīng)該成為真正的關(guān)注點(diǎn)。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

3、靈活

給UI界面使用的字體應(yīng)當(dāng)具有靈活性。我們?cè)?jīng)為 Medium 做過用戶體驗(yàn)設(shè)計(jì),作為一個(gè)網(wǎng)頁博客平臺(tái),我們很難去控制用戶的能力、內(nèi)容、瀏覽器、屏幕尺寸、網(wǎng)絡(luò)帶寬和連接速度,包括輸入法。

所以我們最終為它所選取的字體應(yīng)當(dāng)支持大量不同的內(nèi)容,在不同的尺寸下?lián)碛辛己玫淖R(shí)別度,能夠兼容不同的設(shè)備,尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

4、x高度的上限

x高度的參考標(biāo)準(zhǔn)是小寫字母x的高度,同等尺寸下,x高度更大的字體更易于識(shí)別。不過x高度也不是越大越好,當(dāng)x高度超過一定限度的時(shí)候,小寫字母n和小寫字母h就很難分辨了,這一點(diǎn)應(yīng)當(dāng)注意。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

5、更大寬高比

字母的寬度和高度的比例也是相當(dāng)重要的一個(gè)屬性。寬度和高度比例越高,字母在小屏幕上的識(shí)別度就越高。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

6、寬松的字間距

字母之間的間距和字母內(nèi)部的空間同樣是影響字母可讀的因素。字母間距太小同樣會(huì)影響整體的可讀性,而好的顯示字體會(huì)更好的控制字母間距,確保單詞在視覺上的“透氣性”,甚至可以營造出一種韻律感。

不過字間距不是越寬松越好,太過寬松會(huì)讓整個(gè)單詞看起來過于松散。有一個(gè)值得參考的標(biāo)準(zhǔn),就是字母之間的間距應(yīng)當(dāng)比字母內(nèi)的開口縫隙略小一點(diǎn)。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

7、低筆觸對(duì)比度

許多字體不同的筆畫粗細(xì)不同,而對(duì)于UI界面而言,筆觸間的對(duì)比度越小識(shí)別度越好。較大的筆觸對(duì)比度下,字體在小尺寸屏幕上,較細(xì)的筆畫會(huì)難于分辨。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

8、OpenType 功能

OpenType 功能對(duì)于字體而言是相當(dāng)重要的。支持OpenType的字體擁有更大的靈活性,對(duì)于不同的語言和特殊的字符有著更為優(yōu)良的兼容性。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

9、備用字體

接下來要說的情況可能大家多少都碰到過。網(wǎng)頁在完全加載出來之前,部分內(nèi)容因?yàn)樽煮w沒有加載而無法顯示。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

其實(shí)這可以通過先加載本地字體,顯示內(nèi)容,等網(wǎng)頁字體加載好了之后再行替換,以達(dá)到無阻塞顯示。這種方法的缺陷是需要預(yù)先設(shè)定一個(gè)可調(diào)用的本地備用字體。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

10、Hinting

Hinting 指的是為了字體為了保證最大的可讀性而針對(duì)顯示器狀況進(jìn)行調(diào)整的過程。Hinting 可以通過匹配顯示器的像素柵格讓字體顯示更加清晰,降低誤讀的可能性。

這項(xiàng)技術(shù)最初是由蘋果公司所提出的,不過因?yàn)門rueType 字體技術(shù)的出現(xiàn),Hinting 正在消失。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

未來

隨著新的UI標(biāo)準(zhǔn)、排版技術(shù)的提升,字體技術(shù)也在不斷的進(jìn)步,在不遠(yuǎn)的未來,字體會(huì)從傳感器獲得信息,更好的兼容不同的環(huán)境、隨著亮度、設(shè)備、距離而進(jìn)行智能化的調(diào)整,甚至復(fù)雜而龐大的中文字體,也可能作為靈活的網(wǎng)頁字體而存在。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

字體會(huì)讓我們的工作更加便捷

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

讓界面交互更快,更加觸手可及

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

讓UI更加易用

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

更加便捷

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

也更加清晰而高效





文章來源:優(yōu)設(shè)  作者:陳子木

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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

純純

為大家概括性地介紹5種流行移動(dòng)應(yīng)用中常見的界面設(shè)計(jì)模式以供大家在自己的項(xiàng)目中參考。這些設(shè)計(jì)模式有助于大家提高設(shè)計(jì)的可用性,讓界面變得更加直觀。文章將側(cè)重介紹能夠幫助大家進(jìn)行下列各方面設(shè)計(jì)的模式:

  1. 社交分享
  2. 通知
  3. 彈窗
  4. 內(nèi)容更新
  5. 用戶互動(dòng)(滑動(dòng)、點(diǎn)擊等)

一、社交登陸

在這個(gè)社交網(wǎng)絡(luò)盛行的時(shí)代,我們是不是真的還需要用這種陳舊的方式提交個(gè)人資料?社交登陸這一設(shè)計(jì)模式完全可以讓用戶輕松快捷的登陸,從而取代注冊(cè)、填寫表單之類的麻煩工作。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

用戶可以直接登陸自己的社交網(wǎng)絡(luò)賬號(hào)(Facebook、Twitter或者Google等),無需另外創(chuàng)建一個(gè)以后不太可能繼續(xù)使用的賬戶,這樣可以大大提高注冊(cè)效率。除此之外,這一設(shè)計(jì)模式還有下列好處:

  • 使用現(xiàn)有社交網(wǎng)絡(luò)賬號(hào)登陸用戶就不用再多記一套用戶名密碼了。
  • 用戶無需被迫在自己剛剛下載還不熟悉如何使用的應(yīng)用中輸入信息,從而簡(jiǎn)化注冊(cè)流程。
  • 讓用戶通過現(xiàn)有社交網(wǎng)絡(luò)賬號(hào)注冊(cè)也許能讓你獲得一些有關(guān)他們的基本資料。這樣你就能更加有效的根據(jù)用戶的實(shí)際需求調(diào)整應(yīng)用。

注:在國內(nèi)這一設(shè)計(jì)演變成了:您可以使用QQ/微博合作帳號(hào)登錄,然后給你綁定,繼續(xù)回到注冊(cè)界面  – –

二、通知

通知功能可突出顯示近期的活動(dòng)和操作。我們每天要接觸大量的信息,但百忙之中卻沒有時(shí)間(或者不愿意把時(shí)間)花費(fèi)在手機(jī)上。我們都喜歡在盡可能短的時(shí)間內(nèi)完成要做的事,然后馬上知道是否有新的活動(dòng)或者情況能夠引起自己的關(guān)注。因此,對(duì)于通知設(shè)計(jì)模式的透徹理解和妥當(dāng)實(shí)施非常重要。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

很多知名公司的移動(dòng)應(yīng)用采用了下列幾種不同的方法實(shí)施其通知設(shè)計(jì):

  • LinkedIn在有更新內(nèi)容的標(biāo)簽上放置標(biāo)有數(shù)字的徽標(biāo)。
  • Twitter則在時(shí)間軸圖標(biāo)頂部放置一個(gè)小點(diǎn)指示有新活動(dòng)。
  • Facebook使用一個(gè)會(huì)在應(yīng)用內(nèi)垂下的彈出條幅顯示新鮮事推送中的新內(nèi)容通知。

你可以模仿一下你最喜歡的解決辦法,試試這個(gè)辦法是否適合于你和你的用戶。

通知欄該怎么設(shè)計(jì),具體方法右戳學(xué)習(xí):《怕打擾用戶?來看看怎樣設(shè)計(jì)通知欄不會(huì)討人厭》

三、彈窗和層疊窗口

彈窗(也叫層疊窗口)是一種常用于互聯(lián)網(wǎng)廣告的方法。彈窗會(huì)在不創(chuàng)建新窗口的情況下遮蓋住主要內(nèi)容,無法使用攔阻軟件進(jìn)行攔截,因此用戶非看不可。一般來說這種情況很讓用戶討厭,但在有些情況下,彈窗打斷用戶的使用反而能給用戶帶來幫助。例如,用戶可能會(huì)希望在不丟失當(dāng)前用戶界面的情況下查看某些信息。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

下面是一些彈窗設(shè)計(jì)模式幫助解決問題的案例:

  • 在用戶在應(yīng)用中執(zhí)行特定操作或達(dá)到特定時(shí)點(diǎn)時(shí)彈出并顯示與特定操作或場(chǎng)景相關(guān)的信息/控制方法。
  • 應(yīng)用中原來的內(nèi)容或場(chǎng)景仍然在背景中顯示,但彈窗可以讓用戶選擇是否要了解接下來要出現(xiàn)的內(nèi)容。
  • 彈窗可以吸引用戶的注意力并在必要時(shí)提供重要通知。在使用完成后,用戶可以點(diǎn)擊或滑動(dòng)屏關(guān)閉彈窗返回先前活動(dòng)狀態(tài)。

四、下拉刷新

在習(xí)慣了使用Facebook、Twitter或Google等社交網(wǎng)站后,我們都會(huì)很自然的使用下拉手勢(shì)進(jìn)行內(nèi)容更新。第一個(gè)使用這個(gè)設(shè)計(jì)模式的公司是Apple,在此之后這一設(shè)計(jì)就廣為流行開來了。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

當(dāng)用戶需要顯示一列非靜態(tài),但不能自動(dòng)刷新的內(nèi)容時(shí),就可以適用下拉刷新模式。下拉刷新時(shí),屏幕會(huì)滾動(dòng)到頂部,刷新完成后新內(nèi)容將從頂部開始顯示。這種設(shè)計(jì)模式可以節(jié)約空間(不需要使用按鈕)而且簡(jiǎn)單易懂。這種方式還不僅局限于更新內(nèi)容,其還可以用于在一系列短信、圖片或資料更新中加載早先的內(nèi)容。

五、用戶交互(滑動(dòng)、點(diǎn)擊等)

除了下拉刷新手勢(shì)外,滑動(dòng)也是智能手機(jī)上最為常用的手勢(shì)之一。很多應(yīng)用都允許用戶在文章上左右滑動(dòng)來了解詳細(xì)信息或執(zhí)行其他操作。與依賴于點(diǎn)擊鼠標(biāo)的傳統(tǒng)web應(yīng)用相比,這一方法充滿創(chuàng)新意義。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

在Android和iOS上有大量采用了滑動(dòng)、點(diǎn)擊及其他特定用戶交互方式的移動(dòng)應(yīng)用,你可以在自己的項(xiàng)目過程中予以參考。每個(gè)應(yīng)用對(duì)于自己的用戶來說都有不同的意義和價(jià)值。你應(yīng)當(dāng)在畫線框圖的過程中做好規(guī)劃再投入設(shè)計(jì)或開發(fā)流程。在測(cè)試過程中花點(diǎn)時(shí)間思考用戶的反饋、建議和批評(píng)。



文章來源:優(yōu)設(shè)   作者:程遠(yuǎn)



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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

純純

iPhone X 在 2017 年上市以來,全面屏手機(jī)就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機(jī)型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn),物理 Home 鍵都被舍棄改成虛擬按鍵,甚至是沒有虛擬按鍵的手勢(shì)滑動(dòng)操作。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

而這些手機(jī)都有一個(gè)共同的特點(diǎn),就是屏幕尺寸越來越大。屏幕尺寸變大后,手握手機(jī)的方式和界面交互操作方式也隨之改變,那對(duì)于設(shè)計(jì)而言,是否也應(yīng)該隨之進(jìn)行改變呢?

拇指的操作范圍

想單手點(diǎn)擊屏幕的操作,需要手足夠靈活進(jìn)行一輪操作才能夠到屏幕上方,過程中稍有不慎,手機(jī)隨時(shí)會(huì)砸地上。作者的手機(jī)屏幕已經(jīng)修了幾次,差不多趕上一臺(tái)二手機(jī)的價(jià)格了。

在 2013 年,國外設(shè)計(jì)師 Steven Hoober 發(fā)表了一篇《手機(jī)界面設(shè)計(jì)》的研究報(bào)告中,對(duì)一千三百名手機(jī)使用者進(jìn)行量化研究數(shù)據(jù):

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

據(jù)當(dāng)時(shí)研究的數(shù)據(jù)可以看出,有近半的用戶是單手使用手機(jī)(現(xiàn)在肯定不止)。當(dāng)用戶單手操作的時(shí)候,實(shí)際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域,黃色區(qū)域是拇指能觸碰到的最大限度范圍,紅色區(qū)域是觸摸比較困難的區(qū)域。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

然而這份研究報(bào)告的數(shù)據(jù)是在 2013 年發(fā)布,當(dāng)時(shí)還沒有全面屏的出現(xiàn),如果把上面研究結(jié)論的區(qū)域,套用到如今的手機(jī)屏幕尺寸上,頂部的紅色區(qū)域會(huì)占更大比例。以 iPhone 11 尺寸比例作為參考,如下圖:

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

拇指可操作范圍大約在 3 分之 2 的區(qū)域,可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因?yàn)檫@份報(bào)告只適合當(dāng)時(shí)的手機(jī)市場(chǎng)情況,在當(dāng)今已經(jīng)不適用了,因此需要重新去考慮如何為大屏幕手機(jī)進(jìn)行界面設(shè)計(jì)。

為拇指區(qū)域設(shè)計(jì)

根據(jù) 2020 年手機(jī)UX設(shè)計(jì)趨勢(shì),大屏幕設(shè)計(jì)將會(huì)成為熱點(diǎn)。根據(jù)數(shù)據(jù)報(bào)告中有說明,2018 年 10 月使用大屏手機(jī)的用戶比例是16.3%,到 2019 年 12 月,該數(shù)據(jù)已經(jīng)上升到 41%,并且會(huì)在未來更多新機(jī)型的出現(xiàn)中持續(xù)上漲。

那隨著大屏幕手機(jī)的普及,就意味著設(shè)計(jì)師在設(shè)計(jì)界面的時(shí)候,要為大屏幕手機(jī)的使用場(chǎng)景進(jìn)行界面調(diào)整,避免用戶難以使用的體驗(yàn)問題。以下是我整理的一些設(shè)計(jì)建議方案:

1. 頭部區(qū)域設(shè)計(jì)更高

通過將標(biāo)題欄的信息區(qū)域放大,盡量把主要操作內(nèi)容向拇指區(qū)域靠近。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

2. 常用導(dǎo)航與操作居于底部

比起導(dǎo)航欄放在頂部,更適合大屏幕手機(jī)的方式是將導(dǎo)航和重要操作盡量往屏幕底部放置。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

3. 手勢(shì)操作頁面切換與返回

抖音和 Instagram story 等短視頻應(yīng)用界面都是通過手勢(shì)滑動(dòng)屏幕的方式,對(duì)頁面進(jìn)行切換,操作的學(xué)習(xí)成本很低,而且主要操作也在屏幕底部。這種操作方式也會(huì)在今年越來越多地被使用。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

4. 提示彈窗從底部升起

常用的彈窗,很多是設(shè)計(jì)在屏幕中間彈出,為了適配大屏幕,不妨嘗試從底部彈出,關(guān)鍵選項(xiàng)都能輕松選擇,提高轉(zhuǎn)化率。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

5. 使用大卡片

屏幕尺寸變大以后,使用整張大卡片可以讓用戶瀏覽內(nèi)容更專注,大面積的配圖和留白,也能提高用戶的點(diǎn)擊欲望。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

除此以外,作為手機(jī)廠商,在發(fā)布大屏幕手機(jī)的時(shí)候,就有對(duì)界面操作做了一些對(duì)應(yīng)系統(tǒng)級(jí)的設(shè)計(jì)調(diào)整,比如界面下拉懸停,鍵盤單手模式,屏幕邊緣滑動(dòng)返回等等。

總結(jié)

大屏幕尺寸已經(jīng)是趨勢(shì),屏幕大意味著內(nèi)容可以更大限度地得到展示,有利于產(chǎn)品提供更多的服務(wù),不再糾結(jié)首屏無法展示完主要內(nèi)容。在這個(gè)信息爆炸的時(shí)代,用戶也不再滿足于小屏幕的瀏覽方式??梢哉f,大屏幕已經(jīng)是無法改變的趨勢(shì)。與其擔(dān)心問題到來,設(shè)計(jì)師更應(yīng)該思考如何去適應(yīng)產(chǎn)品的快速迭代,不斷更新自己的設(shè)計(jì)思維模型,更全面思考問題,產(chǎn)出更合理、體驗(yàn)更好的設(shè)計(jì)方案。

文章來源:優(yōu)設(shè)   作者:布萊恩臣

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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)產(chǎn)品的 10 個(gè) UI/UX 啟示

純純

Peter Drucker 說過:「量化才能管理?!惯@個(gè)格言后來成為了我的信條。我決定將我的目標(biāo)量化,將它分解成為最基礎(chǔ)的習(xí)慣來執(zhí)行,并且以每天一定量的執(zhí)行,來實(shí)現(xiàn)最終的目標(biāo)。

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

我們先構(gòu)建了一個(gè)免費(fèi)的 Chrome 插件 Confetti ,這是一個(gè)能夠幫你追蹤日常習(xí)慣的工具,每次完成一個(gè)任務(wù),都會(huì)有五彩繽紛的紙屑效果出現(xiàn),祝賀你守住了習(xí)慣,達(dá)成目標(biāo)。

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

以下見解希望對(duì)你有所幫助!

1、一開始就要界定好產(chǎn)品特性

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

一開始,我和 Wilson 就決定使用3屏的主要功能,并構(gòu)建了一個(gè)粗糙的原型。但是,我們沒有足夠的遠(yuǎn)見,無法設(shè)想我們的產(chǎn)品最終的方向,也沒有對(duì)全部的想法進(jìn)行深入的打磨。

最終,我們向后退了一步。我們回過頭來,確定了最小可執(zhí)行原型的發(fā)布日期,以及真正的核心功能。我們?cè)?Notion 上創(chuàng)建了一個(gè)文檔,并且開始梳理和管理哪些功能是「必需品」,哪些功能「如果有了會(huì)更好」。比如,登錄、注冊(cè)、新用戶引導(dǎo)是必不可少的功能。但是,我們認(rèn)為「重新排列習(xí)慣」是一個(gè)提升體驗(yàn)但是并不亟需的功能。

我們基于這一點(diǎn),我們開始抓住核心功能,盡可能讓它們足夠易用,強(qiáng)化核心特性。通過確定核心功能的優(yōu)先級(jí),并且確定發(fā)布日期,借此緩解我們的精神壓力,確定我們不會(huì)被成堆的功能所淹沒。這也似地我們有足夠的動(dòng)力解決核心功能。

2、有很多流程和狀態(tài)需要搞定

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

在設(shè)計(jì)產(chǎn)品的時(shí)候,我經(jīng)常被提醒要處理好每一個(gè)邊緣情況,填好每一個(gè)坑,確保體驗(yàn)的順暢。從零開始構(gòu)建產(chǎn)品是一把雙刃劍:基于自己的構(gòu)想來創(chuàng)造產(chǎn)品是令人興奮的,但是相應(yīng)的,我需要經(jīng)常在舒適區(qū)以外處理問題。

我一直在 Skookum 從事產(chǎn)品設(shè)計(jì)的工作,而這些工作通常都是在一定的約束條件下進(jìn)行的,但是現(xiàn)在所要處理的產(chǎn)品則不同。之前的產(chǎn)品都可以借助現(xiàn)成的設(shè)計(jì)系統(tǒng),有早已搭建好的設(shè)計(jì)語言,有完整的組件,有明確的 UI 狀態(tài),有非常明確的基礎(chǔ)架構(gòu),但是這次是我自己的產(chǎn)品,所有的這些都沒有。而且,這個(gè)產(chǎn)品還可能會(huì)存在幾種極端的情況、流程和狀態(tài)。

比如,在注冊(cè)流程中,按鈕會(huì)有默認(rèn)、禁用、激活、填充、錯(cuò)誤、懸停等幾種狀態(tài),但是除了這些之外,我還需要考慮諸如密碼重置的流程和體驗(yàn),這可能會(huì)涉及到 6 個(gè)高度相似的 UI 界面狀態(tài):

  1. 輸入 Email
  2. 重新發(fā)送 Email
  3. Email 通知設(shè)計(jì)
  4. 輸入新的密碼
  5. 錯(cuò)誤界面
  6. 成功界面

這個(gè)過程中,有很多東西都令我一度感到迷惑,這也引發(fā)出我下一個(gè)要說的要點(diǎn)……

3、創(chuàng)建用戶流程

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

項(xiàng)目開始之后,我很快就遭遇了組織架構(gòu)問題。因?yàn)槲沂窃诠ぷ髦鄟韯?chuàng)建這個(gè)產(chǎn)品,這導(dǎo)致我犯了一個(gè)非常嚴(yán)重的錯(cuò)誤:我沒有按照傳統(tǒng)的產(chǎn)品流程來創(chuàng)建產(chǎn)品,這隨后導(dǎo)致了一系列的問題。

按照標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)流程,我需要從用戶流程開始創(chuàng)建,定義用戶可能會(huì)執(zhí)行的流程,并且針對(duì)主要的流程界面進(jìn)行必要的總結(jié)說明。因?yàn)檫@個(gè)項(xiàng)目和之前的工作不一樣,我一開始就忘記了遵循流程這件事情,我錯(cuò)誤地將它視作為一個(gè)包含幾個(gè)簡(jiǎn)單界面的簡(jiǎn)單項(xiàng)目(是不是聽著特別耳熟?很多所謂的小項(xiàng)目翻車都是從這里開始的)。這樣一來,當(dāng)我開始處理諸多按鈕的不同狀態(tài)和界面變化的時(shí)候,整個(gè)用戶流程變得混亂不堪,并且我很難確定其中的體驗(yàn)漏洞有哪些。

最終我停止了這種隨性的設(shè)計(jì)方式,并且在 Whimsical 當(dāng)中創(chuàng)建了完整的用戶流程。于是我很快清楚了那些環(huán)節(jié)有所缺失,以及整個(gè)界面流程的走向。

按照用戶流程來梳理界面的時(shí)候,可以對(duì)于整個(gè)產(chǎn)品的屏幕狀態(tài)有所了解,并且隨著產(chǎn)品的發(fā)展膨脹,用戶流程的重要性會(huì)隨之增長(zhǎng),成為至關(guān)重要的部分。

4、交互應(yīng)該反饋到UI中

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

的確,在完成整個(gè) UI 之前,不應(yīng)該開始向著項(xiàng)目當(dāng)中添加動(dòng)畫。但是,不添加并不意味著你無需考慮。實(shí)際上,不同的微交互和動(dòng)畫對(duì)于實(shí)際的體驗(yàn)影響是巨大的。你在思考 UI 設(shè)計(jì)的時(shí)候,就應(yīng)該考慮到微交互和動(dòng)畫的使用,避免在后續(xù)動(dòng)效和交互落地的時(shí)候,進(jìn)行不必要的修改。

比如,當(dāng)我在設(shè)計(jì)「達(dá)成成就」這一體驗(yàn)的時(shí)候,我就考慮到了需要用到的微交互的效果,所以在我設(shè)計(jì) UI 的時(shí)候可以順著我自己的喜好來進(jìn)行設(shè)計(jì),并且將可能會(huì)用到的動(dòng)效拖到某個(gè)角落暫時(shí)記下來,避免在設(shè)計(jì) UI 的階段,影響了整體的流程和效果。而后續(xù)加入動(dòng)效的時(shí)候,就會(huì)方便很多。

我認(rèn)為,將 UI 和交互結(jié)合起來考慮是非常重要的,因?yàn)閮烧吖餐ㄋ茉炝梭w驗(yàn)。如果在設(shè)計(jì) UI 的環(huán)節(jié)直接加動(dòng)效,會(huì)讓整個(gè)設(shè)計(jì)過程變得復(fù)雜臃腫。

5、盡早獲得反饋

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

其實(shí)這也是我在這個(gè)項(xiàng)目中犯的一個(gè)大錯(cuò):等了太長(zhǎng)時(shí)間才獲得反饋。

我通常是在晚上回家和周末才有空推進(jìn)這個(gè)項(xiàng)目,在很長(zhǎng)的一段時(shí)間內(nèi),我沒有真正告訴任何人。

當(dāng)我終于同我的家人、朋友、用戶以及網(wǎng)上樂于嘗鮮的用戶公布了這一產(chǎn)品之后,他們?cè)谑褂眠^程中,開始注意到了很多細(xì)節(jié)上顯而易見、但是我并沒有發(fā)現(xiàn)的問題。我意識(shí)到我作為產(chǎn)品的設(shè)計(jì)者,是很容易陷入并沉迷用戶體驗(yàn)當(dāng)中比較孤立的一部分,反而會(huì)忽略很多顯著的問題。

回想一下,如果我能盡早向用戶和朋友展示設(shè)計(jì)和原型,那么我會(huì)在更早的時(shí)候發(fā)現(xiàn)問題,并且在獲得反饋之后才進(jìn)入開發(fā)階段,彌補(bǔ)大量的損失。

6、在別處獲得啟發(fā)很重要

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

很多設(shè)計(jì)師會(huì)認(rèn)為,所有的想法都必須是原創(chuàng)的才行,否則就是欺詐。但是稍微想想,其實(shí)徹底的原創(chuàng)其實(shí)很少的。當(dāng)你看到一個(gè)優(yōu)秀的產(chǎn)品,它優(yōu)秀的配色和恰到好處的交互可能會(huì)讓你覺得:「已經(jīng)有人做出來了,我的想法在它面前完全沒法比擬。」

這種思維方式其實(shí)有著極大的缺陷,并且抑制了你的創(chuàng)造力。

當(dāng)我發(fā)現(xiàn)我的設(shè)計(jì)有缺陷的時(shí)候,我會(huì)竭盡全力去搜索和了解更多網(wǎng)上已有的設(shè)計(jì)。我會(huì)觀察和思考別的公司和產(chǎn)品是如何設(shè)計(jì)新用戶引導(dǎo)流程的,如何管理用戶個(gè)人信息的。我從來都沒有復(fù)制被人的體驗(yàn),但是會(huì)隔三差五去鉆研別人所創(chuàng)造出來的優(yōu)秀細(xì)節(jié),然后將這些細(xì)節(jié)借鑒到我的設(shè)計(jì)當(dāng)中。

我最喜歡的一個(gè)范例,是從模態(tài)狀態(tài)下,旋轉(zhuǎn)退出的效果。這是我偶然在一個(gè)網(wǎng)站上看到的效果,因此我決定將它添加到 Confetti 當(dāng)中,我還在著陸頁的按鈕中加入了類似的特效。

事實(shí)上,一切設(shè)計(jì)都是混搭創(chuàng)造出來的。你借鑒細(xì)節(jié)并不意味著抄襲,不要害怕去發(fā)掘和學(xué)習(xí)別人的優(yōu)勢(shì)和亮點(diǎn),你要學(xué)會(huì)有機(jī)地拆解和借鑒,靈活地運(yùn)用到自己的設(shè)計(jì)當(dāng)中,它就像調(diào)制雞尾酒一樣有趣。

7、勇敢面對(duì)身份的變換

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

當(dāng)我們開始設(shè)計(jì)的產(chǎn)品的時(shí)候,我和 Wilson 頭頂上的身份就一直在變。我們是 UI設(shè)計(jì)師,要負(fù)責(zé)UX,要做交互,也制作動(dòng)效,要進(jìn)行平面設(shè)計(jì),還要考慮市場(chǎng)營銷,要管理產(chǎn)品,我們也要扮演其他的角色。

職責(zé)如此之多,以至于我們不可避免地遇到我們能力范圍之外各種新問題。我們必須承認(rèn)自己陷入了困境,尋求外部幫助成了必要的選擇。

專注于自己專業(yè)的領(lǐng)域,其他不專業(yè)的方面來尋求外部幫助是非常合理的。比如在一個(gè)項(xiàng)目當(dāng)中,一位藝術(shù)家負(fù)責(zé)了絕大多數(shù)的風(fēng)景插畫,另一位藝術(shù)家則完成了肖像畫的部分,這很正常。

我希望產(chǎn)品的外觀和功能能夠保持高度的一致性,并且我確實(shí)做到了。但是不要誤會(huì)我的意思,我并非是不敢走出舒適區(qū)去學(xué)習(xí)代碼開發(fā),而是在這樣的項(xiàng)目當(dāng)中,我并不適合從UI和UX領(lǐng)域延伸出去,畢竟完成項(xiàng)目的開發(fā)優(yōu)先級(jí)比學(xué)習(xí)代碼更高。

8、保持簡(jiǎn)單更重要

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

盡管給 MVP 安排好了發(fā)布時(shí)間,可以防止這個(gè)項(xiàng)目被無限膨脹的功能特性和工作量所淹沒,但是這樣依然無法防止我們基于已有的功能進(jìn)行改進(jìn)。

很多人都喜歡 Reid Hoffman 的一句話:「如果你對(duì)于產(chǎn)品的第一版感覺不尷尬,那你一定是發(fā)布晚了?!共贿^,我們正式發(fā)布的第一版的產(chǎn)品,并不會(huì)顯得太尷尬,但是目前來看,當(dāng)時(shí)那種簡(jiǎn)單直觀的狀態(tài),比起再花費(fèi)好幾個(gè)月時(shí)間反復(fù)打磨之后再發(fā)布,來得更好。

在發(fā)布新產(chǎn)品之前,我們必須考慮2個(gè)問題:

  1. 我們是否相信我們所構(gòu)建的產(chǎn)品,能夠?yàn)橛脩魩韮r(jià)值?
  2. 我們是否竭盡全力了?

這些問題讓我們最終能夠達(dá)成目標(biāo),且按時(shí)發(fā)布,避免分心。專注交付最核心的功能,而不是被一堆冗余的次要特性所壓倒。

9、良好的交接更加省事省時(shí)

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

從項(xiàng)目一開始我就一直在做項(xiàng)目的管理和組織設(shè)計(jì)素材,以便后面進(jìn)行開發(fā)。不過,由于我一開始就使用了 Zeplin 這樣的協(xié)同工具,確保了我可以輕松地將所有的素材都順暢地交給負(fù)責(zé)開發(fā)的 Wilson。作為一款設(shè)計(jì)系統(tǒng)工具,Zeplin 讓我無需浪費(fèi)時(shí)間對(duì)素材進(jìn)行分類,非常便捷。

在交接的過程中,我還做了一些優(yōu)化:

  1. 將所有的界面都組織到了 Zeplin 當(dāng)中,并且進(jìn)行了處理
  2. 我給所有的畫板進(jìn)行了針對(duì)性的命名,方便檢索
  3. 我在 XD 中標(biāo)注了需要導(dǎo)出的素材
  4. 我保留了舊有的界面存檔,并且確保交付的新版界面是最新的

10、一次寫明所有的UX文案

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

在設(shè)計(jì) UI 的時(shí)候,界面中的文案部分是臨時(shí)編寫的,這促使了一次設(shè)計(jì)完成之后,整體的文案是不一致、不協(xié)調(diào)的。

我很希望一開始就創(chuàng)建了一個(gè)單獨(dú)的文檔,一次性將文案部分全部重寫,包括提醒、注釋、標(biāo)簽、彈出框提醒等等。而實(shí)際上,我的文案都是在設(shè)計(jì) UI 的時(shí)候附帶著寫下來的,導(dǎo)致整體的一致性嚴(yán)重缺乏。

這種文案本身在調(diào)性上的缺乏,導(dǎo)致了整個(gè)產(chǎn)品在語氣和用詞上是混搭式的,一致性很差。

所以,在產(chǎn)品上線發(fā)布之后,一直在對(duì)文案進(jìn)行修修補(bǔ)補(bǔ)。



文章來源:優(yōu)設(shè)(陳子木)   作者:Danny Sapio





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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


UX設(shè)計(jì)全方案思考與呈現(xiàn)

純純


配色/圖標(biāo)什么的是基礎(chǔ)嗎?

之前一直沒有太多關(guān)注過如何定義一個(gè) APP 的配色,或者如何畫一個(gè)漂亮的 icon。曾經(jīng)的上級(jí)指示都是這些基礎(chǔ)對(duì)商業(yè)的不可量化。于是我在思考一個(gè)問題,就是沒有直觀商業(yè)價(jià)值的設(shè)計(jì)要素都失去了意義變成了所謂基礎(chǔ)的事情嗎?

半年前面試字節(jié)的時(shí)候,面試官問了我有關(guān)配色的定義,細(xì)節(jié)到為什么是這個(gè)色值。當(dāng)時(shí)十分震驚于這么細(xì)節(jié)的問題,之后我就想起了之前有位朋友給我發(fā)送過一份有關(guān)支付寶「藍(lán)」的定義 pdf,洋洋灑灑幾十頁就是為了解釋他們?yōu)樯队眠@個(gè)有點(diǎn)臟的藍(lán)色#108ee9 當(dāng)主色。

所以其實(shí) APP 的配色/圖標(biāo)與主品牌是一脈相承的,它是品牌的延續(xù)與象征。它以最直觀的態(tài)度傳達(dá)給用戶,這個(gè)產(chǎn)品以及品牌的調(diào)性,并以此建立最強(qiáng)有力的視覺識(shí)別性。所以我覺得它是可以有條件地展示在我們?cè)O(shè)計(jì)方案里的,但一定注意它的篇幅和表達(dá)的方式,維度在品牌傳達(dá)這一層就對(duì)了。

至于如何展示和定義你的 APP 配色,一般 2 類情況。

1. 在品牌主視覺配色基礎(chǔ)上的適配

這種情況一般適用品牌主視覺方案已經(jīng)設(shè)計(jì)完畢,APP 端作為延續(xù)。這個(gè)時(shí)候一般注意配色從 CMYK 模式到 RGB 的轉(zhuǎn)換,所以作為 APP 的配色,具體色值上可以稍作調(diào)整,使它更適配于 LED 屏的用戶感知與舒適度。

另外可以使用透明度進(jìn)行色彩分階段,一般從 0-100% 分為 10 階就足夠我們?nèi)粘=缑嬖O(shè)計(jì)使用了。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

2. 0-1定義APP配色

這種情況下我們從感性和理性 2 個(gè)角度去定義顏色。

從感性的角度分析:情緒板應(yīng)該大家都熟知的了,根據(jù)不同的行業(yè)和用戶定位得到相應(yīng)的關(guān)鍵詞。對(duì)應(yīng)不同的關(guān)鍵詞再搜集對(duì)應(yīng)的圖片,從圖片和自然感知中提煉出主色。

從理性的角度分析:我們把色彩分為對(duì)比色、近似色、復(fù)合色、單一色、三角對(duì)立色和漸變色六種。根據(jù)產(chǎn)品的類型和定位,我們決定使用什么樣的配色。比如一個(gè)年輕大學(xué)生專用的社交型 APP,我們可能就傾向更多地使用對(duì)比色這樣的撞色得到更多潮流與青春的味道。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

至于圖標(biāo)的話我就更不用多說了,大家肯定都記得那些非常基礎(chǔ)的繪制圖標(biāo)的法則。個(gè)人認(rèn)為圖標(biāo)也不太需要放一個(gè)單獨(dú)的篇幅去展示,除非它有一些新奇有趣的亮點(diǎn)。

界面框架,只是框架而已嗎?

在之前的文章中有寫過,匹配產(chǎn)品定位的界面框架一旦輸出,對(duì)整個(gè) APP 之后的迭代與功能設(shè)計(jì)都有很直接的影響。定義整體的UX 框架方案,是實(shí)踐設(shè)計(jì)目標(biāo)與策略的過程,基本圍繞著這 3 個(gè)出發(fā)點(diǎn):匹配產(chǎn)品定位、滿足業(yè)務(wù)拓展性、符合舒適度美學(xué) 。

1. 定義整體框架

首先我們從宏觀角度分析,一方面產(chǎn)品的業(yè)務(wù)線處于什么情況,是相對(duì)獨(dú)立的業(yè)務(wù)主線產(chǎn)品(舉例:拉勾)?還是平臺(tái)級(jí)產(chǎn)品(里面包含了許多垂直的業(yè)務(wù)線,舉例淘寶)?如果是平臺(tái)級(jí)產(chǎn)品在整體框架設(shè)計(jì)時(shí)就需要考慮跨端跨業(yè)務(wù)的框架拓展型。

舉個(gè)例子,就是在定義平臺(tái)框架的時(shí)候要考慮這個(gè)框架與容器是不是同時(shí)適用于底下的子業(yè)務(wù)線,同時(shí)當(dāng)這個(gè)框架到了 H5、小程序、PC 的時(shí)候需要做哪些適配調(diào)整,是否都可以很好地進(jìn)行兼容適配。

另一方面,整體框架設(shè)計(jì)的類型是否符合設(shè)計(jì)目標(biāo)。舉個(gè)例子,無框式超大留白的框架設(shè)計(jì)雖然看上去很厲害,但在大部分商業(yè)產(chǎn)品中它的實(shí)用性卻非常低的。假設(shè)說我們今天需要做一個(gè)電商類的 app,設(shè)計(jì)目標(biāo)是希望能夠提升業(yè)務(wù)轉(zhuǎn)化以及購買效率,那么展示效率與功能分區(qū)就顯得尤為重要,它就更適合一個(gè)相對(duì)緊湊的卡片式為主的框架設(shè)計(jì)。

其次從微觀的角度來說,遍地就都是細(xì)節(jié)了。舒適度美學(xué)這一說,其實(shí)難免有些抽象,我們把它轉(zhuǎn)為相對(duì)合理一些的落地原理就會(huì)清晰很多,像大家熟知的間距 4 倍數(shù)原理、對(duì)齊原則等等。但是這些微觀的內(nèi)容不建議大家放到方案展示里,因?yàn)樗]有針對(duì)單個(gè)方案的特殊性,更像一種大眾共識(shí)。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

△ 多說無益,直接上最終的效果圖,方便大家參考

2. 具體容器解析

我們特地把單獨(dú)的容器部分拿出來解析,是因?yàn)樽远x容器是展示核心業(yè)務(wù)最主要思考呈現(xiàn),同時(shí)還可以配合運(yùn)營做很多提升業(yè)務(wù)效率的配置。在做具體設(shè)計(jì)的時(shí)候,我們需要區(qū)分「端上固定」模塊和「運(yùn)營配置」模塊之間的差別。

「端上固定」模塊

顧名思義就是開發(fā)端上需要寫死的模塊。寫死的模塊意味著,無論一個(gè)配圖還是一句文案,也只有開發(fā)童鞋修改后通過發(fā)版才能實(shí)現(xiàn)內(nèi)容變更。一般適用于相對(duì)固定的產(chǎn)品功能以及 UGC 用戶生產(chǎn)內(nèi)容。比如:拉勾上傳簡(jiǎn)歷功能、斗魚的直播間列表。

「運(yùn)營配置」模塊

相對(duì)「端上固定」,「運(yùn)營配置」就不需要跟著發(fā)版,可以隨時(shí)后臺(tái)上傳替換模塊內(nèi)的內(nèi)容,適用于需要 PGC 生產(chǎn)的內(nèi)容。說到這里很多童鞋可能馬上就聯(lián)想到 banner,彈窗的運(yùn)營位了,但其實(shí)除了這些之外還有很多容器模塊是需要靈活配置為「運(yùn)營配置」模塊才能更有效地提升運(yùn)營業(yè)務(wù)價(jià)值。

我們可以這樣來區(qū)分「運(yùn)營配置」模塊類型。

一種是純運(yùn)營配置模塊,即設(shè)計(jì)與開發(fā)輸出框架、定好配置字段限制之后,運(yùn)營可以獨(dú)立完成后臺(tái)配置的。比如:資訊 app 0-1 前期的資訊列表內(nèi)容。

另一種是運(yùn)營設(shè)計(jì)配合模塊,即需要設(shè)計(jì)配合運(yùn)營輸出一定的設(shè)計(jì)圖才可以進(jìn)行后臺(tái)配置的。比如:常見的 banner、彈窗、熱門推薦專題等。

在 0-1 的設(shè)計(jì)方案中,更推薦大家展示「運(yùn)營配置」模塊的內(nèi)容與解析,因?yàn)?0-1 是個(gè)以拉新為主的階段,運(yùn)營顯得尤為重要,所以我們的設(shè)計(jì)需要側(cè)重考慮整體的運(yùn)營效率與轉(zhuǎn)化。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

如何展示亮點(diǎn)設(shè)計(jì)?

在我們概述完大部分的整體思考路徑與設(shè)計(jì)方案后,我們需要由面到點(diǎn),從全局提煉細(xì)節(jié),突出自己的設(shè)計(jì)方案亮點(diǎn)。

而如何提煉這個(gè)亮點(diǎn)呢?是挑一個(gè)我設(shè)計(jì)的最好看的界面呢?還是直接放最復(fù)雜的那個(gè)流程?以下是推薦選擇的亮點(diǎn)設(shè)計(jì):

1. 完成理論實(shí)踐,并可以量化價(jià)值的設(shè)計(jì)case

大家應(yīng)該都了解,一些和設(shè)計(jì)息息相關(guān)的數(shù)據(jù) UV/PV/GMV/ 相關(guān)業(yè)務(wù)指標(biāo)等,以及一系列在實(shí)踐中很好應(yīng)用來解釋設(shè)計(jì)方案的理論支撐比如 5W1H、GSM 與五度分析……這些數(shù)據(jù)和理論是支撐我們?cè)O(shè)計(jì)更飽滿更有說服力的重要支點(diǎn)。

雖然在 0-1 的項(xiàng)目里,我們基本不太用得上優(yōu)化數(shù)據(jù)比對(duì)(因?yàn)楫a(chǎn)品初期用戶數(shù)量少,產(chǎn)品體驗(yàn)路徑也是一直處于不斷試錯(cuò)階段),但是我們還是可以借用上文所述的一些方法論或者 A/B test 來完成我們的方案思考過程展示。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

那些你在完成踐行設(shè)計(jì)策略完成設(shè)計(jì)目標(biāo)時(shí)獲得的數(shù)據(jù)指標(biāo)要提前預(yù)知,養(yǎng)成習(xí)慣之后,你就可以快速輕松地察覺到哪里有可以做 A/B test、進(jìn)行埋點(diǎn)數(shù)據(jù)比對(duì)的地方了。

2. 影響上中下游環(huán)節(jié)的設(shè)計(jì)case

除了對(duì)業(yè)務(wù)提升價(jià)值的項(xiàng)目外,我們有時(shí)候也需要注意對(duì)品牌設(shè)計(jì)、產(chǎn)品、運(yùn)營、技術(shù)等上中下游造成影響力的設(shè)計(jì)項(xiàng)目。通常這類設(shè)計(jì)大部分也都是設(shè)計(jì)自驅(qū)發(fā)起的,能起到提升各方人效和業(yè)務(wù)效率的作用。

舉例的話,我能馬上聯(lián)想到的就是多方協(xié)作的大型線上組件庫,可以參考阿里的 Ant design、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加強(qiáng)大的多方協(xié)作 UX 設(shè)計(jì)資源中心。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

規(guī)范與組件庫的定義真的備受關(guān)注?

感覺近期面過的 80% 的公司都對(duì)組件庫的定義非常關(guān)注,所以我們要做的不僅僅只是放一個(gè)視覺規(guī)范或者組件庫的全景圖,而需要對(duì)組件庫進(jìn)行拆解。



文章來源:優(yōu)設(shè)(土撥鼠)   作者:Nana的設(shè)計(jì)錦囊



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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

純純

一.  什么是界面交互動(dòng)效?

界面交互動(dòng)效是展現(xiàn)界面間的轉(zhuǎn)換和界面內(nèi)元素變化的交互反饋。而效果就表現(xiàn)在觸發(fā)與結(jié)束的過程中,表現(xiàn)清晰的層級(jí)關(guān)系,自然的引出與結(jié)束。交互動(dòng)效有著承上啟下的重要作用。

二. 界面交互動(dòng)效是用來干什么的?

  • 讓用戶清晰地感受到當(dāng)前所處場(chǎng)景和層級(jí)關(guān)系。
  • 多種UI元素之間的相互轉(zhuǎn)換。
  • 給用戶制造驚喜感使用戶愉悅。

三. 界面交互動(dòng)效五大注意點(diǎn)

  • 避免動(dòng)效過于花哨、酷炫、標(biāo)新立。
  • 在效率型應(yīng)用中,過度、無意義的動(dòng)畫只會(huì)阻塞任務(wù)流程。
  • 動(dòng)作動(dòng)效不超過1秒。
  • 用戶專注內(nèi)容時(shí),不要用吸引注意的動(dòng)畫去打擾。
  • 出現(xiàn)頻率高的操作動(dòng)效,避免用戶反感,延遲操作時(shí)間。

四. 如何設(shè)置緩動(dòng)曲線與時(shí)間讓動(dòng)效更加自然,可以看下面的一些總結(jié)

  • linear曲線(勻速運(yùn)動(dòng))除了一些特殊場(chǎng)景如加載、很少被使用。
  • easeIn(先緩后快)使用場(chǎng)景較少,主要在掉落、中使用。
  • easeInOut(頭尾緩、中間快)通常在輪轉(zhuǎn)切換的動(dòng)畫中使用,這類動(dòng)畫的觸發(fā)對(duì)象與運(yùn)動(dòng)對(duì)象并不是同一個(gè)元素。
  • easeOut(先快后緩)最常見的效果,其觸發(fā)對(duì)象與運(yùn)動(dòng)對(duì)象往往是同一個(gè)。主要用在展開、收起、出現(xiàn)、移動(dòng)等動(dòng)畫中。當(dāng)不知道用哪個(gè)緩動(dòng)曲線時(shí),用這個(gè)一般不會(huì)錯(cuò)。
  • 曲度主要表現(xiàn)運(yùn)動(dòng)過程的力的大小,曲度越大,啟示力或阻力越大。
  • 回彈則表現(xiàn)的是運(yùn)動(dòng)的劇烈程度及對(duì)象的質(zhì)地。
  • 運(yùn)動(dòng)時(shí)間一般都控制在0.3s-0.8s之間,過長(zhǎng)的時(shí)間會(huì)讓人感覺拖沓,不自然。

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

五. 界面交互動(dòng)效如果以動(dòng)效的表現(xiàn)屬性來分可以分為兩種

第一種:為銜接類型動(dòng)畫

主要針對(duì)不同界面直接的銜接,為帶來更流暢的操作觀感所做的設(shè)計(jì),彌補(bǔ)兩個(gè)界面直接的差異所帶來的用戶感知落差。

第二種:特效類動(dòng)畫

特效的核心目的是為了吸引用戶的注意力,提高信息敏感度,在游戲界面設(shè)計(jì)當(dāng)中使用更為廣泛,能夠帶來更加絢麗的動(dòng)態(tài)畫面。

六.界面交互動(dòng)效如果以界面的維度來說可以分為以下兩類

第一類:界面內(nèi)的交互動(dòng)效

在一個(gè)界面內(nèi)的交互動(dòng)效特別多,例如點(diǎn)擊加號(hào)出現(xiàn)下拉菜單,出現(xiàn)浮層動(dòng)畫提示,點(diǎn)擊舵式導(dǎo)航出現(xiàn)選擇類型和遮罩,點(diǎn)擊按鈕出現(xiàn)評(píng)論點(diǎn)贊,當(dāng)前頁面的展開收起,加載等等。如下圖所示:

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

第二類:界面間的交互動(dòng)效

幾個(gè)界面之間的的交互動(dòng)效通常是平緩過渡到下一頁。常見的有以下幾類:

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△ 硬切到下一頁

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△ 下一頁從右往左推入(上一頁從左往右推出)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△  下一頁從下往上彈出

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△  上一頁的元素過渡到下一頁

總結(jié):

  • 動(dòng)效創(chuàng)意方面的創(chuàng)新要依據(jù)用戶的認(rèn)知模型。單純很炫很酷的動(dòng)效如果脫離了用戶的認(rèn)知模型,那么這樣的交互動(dòng)效對(duì)于整個(gè)產(chǎn)品來說是有害的。
  • 做界面交互動(dòng)效的目的是為了更好地落地。如何更好地高效地表現(xiàn)我們?cè)O(shè)計(jì)的動(dòng)效。同時(shí)使得我們制作的動(dòng)效可以很好的運(yùn)用到實(shí)現(xiàn)落地中,這是很重要的,不然所有的一切都是海市蜃樓。
文章來源:優(yōu)設(shè)  作者:程遠(yuǎn)

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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


超長(zhǎng)篇干貨!如何從交互維度量化用戶體驗(yàn)?

周周

這篇文章,和大家分享一些在產(chǎn)品和交互設(shè)計(jì)中的一些自己的方法。

日歷

鏈接

個(gè)人資料

存檔