首頁(yè)

手機(jī)appUI界面設(shè)計(jì)賞析(十三)

前端達(dá)人

一個(gè)優(yōu)秀界面設(shè)計(jì)中重要的兩點(diǎn)的就是產(chǎn)品本身的UI設(shè)計(jì)和用戶體驗(yàn)(UE/UX),只有這兩者完美融合才能算作優(yōu)秀設(shè)計(jì)作品。目前用戶對(duì)手機(jī)界面設(shè)計(jì)的要求也是很高的,我們知道應(yīng)用市場(chǎng)很多APP功能差不多,但我們使用的只是一款就夠了,而這一款肯定是擁有優(yōu)秀的界面設(shè)計(jì)以及良好的用戶體驗(yàn)

要想提高我們目前的UI設(shè)計(jì)水平,最好的方法就是參考一些相關(guān)手機(jī)界面設(shè)計(jì)作品,國(guó)外現(xiàn)在有很多作品都非常優(yōu)秀,今天設(shè)計(jì)達(dá)人網(wǎng)為大家分享12個(gè)優(yōu)秀用戶體驗(yàn)的手機(jī)界面設(shè)計(jì)作品,希望能給你帶來(lái)靈感。


jhk-1605579239628.png



藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設(shè)計(jì)公司,公司對(duì)UI設(shè)計(jì)的追求一向很高,致力于為卓越的國(guó)內(nèi)外企業(yè)提供卓越的ui創(chuàng)意設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì),用戶研究、交互設(shè)計(jì)等服務(wù)。

jhk-1605781665730.png

jhk-1605781714003.png


藍(lán)藍(lán)設(shè)計(jì)秉承設(shè)計(jì)優(yōu)秀,不斷超越的理念,誠(chéng)信敬業(yè)、專業(yè)耐心的工作作風(fēng),一直堅(jiān)持注重用戶心理體驗(yàn)及“設(shè)計(jì)與營(yíng)銷”等領(lǐng)域的理論與實(shí)踐相結(jié)合。10余年專注努力,300+案例磨練。我們?cè)趗i創(chuàng)意設(shè)計(jì),用戶體驗(yàn)與交互設(shè)計(jì),各種類型軟件界面設(shè)計(jì),國(guó)際化標(biāo)準(zhǔn)和流行趨勢(shì),進(jìn)行過(guò)不斷的學(xué)習(xí)和實(shí)踐。藍(lán)藍(lán)設(shè)計(jì)提供的是可以信賴的ui設(shè)計(jì)服務(wù),我們內(nèi)部有一套管理要求,比如去客戶現(xiàn)場(chǎng)每周一次的檢視和溝通、內(nèi)部提案會(huì)議、每天下班前的整理反饋成果發(fā)郵件、隨時(shí)溝通的qq、電話,階段性的匯報(bào)和進(jìn)度記錄整理。多勞多得的獎(jiǎng)勵(lì)機(jī)制,客戶滿意度評(píng)價(jià)獎(jiǎng)勵(lì)機(jī)制,鼓勵(lì)大家用心、平和、耐心、勤奮、創(chuàng)新的做事.

WechatIMG751.png

WechatIMG752.png

北京藍(lán)藍(lán)設(shè)計(jì)團(tuán)隊(duì)來(lái)自清華美院,工作多年,行業(yè)經(jīng)驗(yàn)豐富,專業(yè)性很強(qiáng)。我們是熱愛設(shè)計(jì),設(shè)計(jì)不僅是我們的專業(yè),我們的職業(yè),還是我們的愛好。每一個(gè)藍(lán)藍(lán)設(shè)計(jì)的設(shè)計(jì)師都希望自己的設(shè)計(jì)越來(lái)越好,以高標(biāo)準(zhǔn),敬業(yè)用心的態(tài)度、專業(yè)的技藝得到客戶的認(rèn)可。為此,我們不惜代價(jià),愿意額外的付出時(shí)間、精力,去學(xué)習(xí)、去嘗試、去研究、去探索。工作賣力,玩的開心。做好卓越的界面設(shè)計(jì),成為這個(gè)領(lǐng)域的資深專家,幫助客戶取得成功,是我們的目標(biāo)。

WechatIMG761.png

WechatIMG760.png

WechatIMG759.jpeg

WechatIMG758.png

WechatIMG757.jpeg

WechatIMG756.png

WechatIMG753.jpeg




--手機(jī)appUI設(shè)計(jì)--



  更多精彩文章:

       手機(jī)appUI界面設(shè)計(jì)賞析(一)

       手機(jī)appUI界面設(shè)計(jì)賞析(二)

       手機(jī)appUI界面設(shè)計(jì)賞析(三)

       手機(jī)appUI界面設(shè)計(jì)賞析(四)

       手機(jī)appUI界面設(shè)計(jì)賞析(五)

       手機(jī)appUI界面設(shè)計(jì)賞析(六)

       手機(jī)appUI界面設(shè)計(jì)賞析(七)

       手機(jī)appUI界面設(shè)計(jì)賞析(八)

       手機(jī)appUI界面設(shè)計(jì)賞析(九)

        手機(jī)appUI界面設(shè)計(jì)賞析(十)

       手機(jī)appUI界面設(shè)計(jì)賞析(十一)

       手機(jī)appUI界面設(shè)計(jì)賞析(十二)


花了很多時(shí)間做設(shè)計(jì)分析,但對(duì)畫稿子沒(méi)什么幫助?

ui設(shè)計(jì)分享達(dá)人

如何產(chǎn)出一個(gè)對(duì)實(shí)際落地更有指導(dǎo)性的設(shè)計(jì)分析?本文結(jié)合實(shí)際項(xiàng)目中常常會(huì)遇到的一些問(wèn)題,總結(jié)了前期設(shè)計(jì)分析的一些實(shí)踐經(jīng)驗(yàn)。

設(shè)計(jì)分析是作為交互設(shè)計(jì)師必備的一項(xiàng)基礎(chǔ)能力,一套有效的分析思路可以幫助我們找準(zhǔn)設(shè)計(jì)發(fā)力點(diǎn),更效率的推導(dǎo)出合理的設(shè)計(jì)方案,它是一種思維能力,也是一種方法工具,但是在我們的實(shí)際項(xiàng)目中,常常會(huì)遇到這樣幾種場(chǎng)景:

  • 新手設(shè)計(jì)師或者第一次做活動(dòng)的設(shè)計(jì)師,設(shè)計(jì)分析不知道要如何入手

  • 花了很多時(shí)間做分析,但感覺(jué)對(duì)實(shí)際畫稿子并沒(méi)有什么幫助

  • 分析過(guò)程中發(fā)散了很多很好的點(diǎn),但最后大多都落不了地

這些情況常常會(huì)導(dǎo)致設(shè)計(jì)分析流于形式,套用了很多方法、花了很多時(shí)間、輸出了很長(zhǎng)的文檔,內(nèi)容看上去似乎很豐富,但落地的方案卻平平無(wú)奇,甚至也會(huì)自我懷疑設(shè)計(jì)分析真的有用嗎?

總結(jié)下來(lái),會(huì)出現(xiàn)這些場(chǎng)景的原因有兩點(diǎn):首先是設(shè)計(jì)分析太泛,沒(méi)有聚焦到核心問(wèn)題;其次是時(shí)間分配不合理,沒(méi)有抓到發(fā)力重點(diǎn)。那么結(jié)合我們目前的項(xiàng)目來(lái)看,怎樣做一個(gè)更有用的設(shè)計(jì)分析呢?

活動(dòng)中常見的項(xiàng)目類型

根據(jù)活動(dòng)產(chǎn)品化設(shè)計(jì)思路,可以把我們的日常項(xiàng)目分為兩類:迭代型項(xiàng)目以及探索型項(xiàng)目。

迭代型項(xiàng)目是指過(guò)往已有過(guò)積累的成熟項(xiàng)目,例如大促主會(huì)場(chǎng)、我的專屬會(huì)場(chǎng)、榜單會(huì)場(chǎng)、攻略等等,通常是一些已經(jīng)比較固化的經(jīng)典業(yè)務(wù),或基礎(chǔ)的功能類業(yè)務(wù);探索型項(xiàng)目則是一些全新的業(yè)務(wù)方向,例如下沉?xí)?chǎng)、直播會(huì)場(chǎng)等等,剛處于進(jìn)入期或成長(zhǎng)初期。

undefined

如何完成一個(gè)有效的設(shè)計(jì)分析

1. 迭代型項(xiàng)目

迭代型項(xiàng)目容易陷入的一個(gè)誤區(qū)是時(shí)間分配不合理,沒(méi)有抓到發(fā)力重點(diǎn),尤其是對(duì)于很多新手設(shè)計(jì)師來(lái)說(shuō),往往大部分的精力花在重復(fù)之前已經(jīng)做過(guò)的內(nèi)容,比如花了很多時(shí)間重新去分析用戶、分析方向、分析行業(yè)趨勢(shì)等等,但是對(duì)于已經(jīng)比較穩(wěn)定的迭代型項(xiàng)目來(lái)說(shuō),這部分背景內(nèi)容相對(duì)來(lái)說(shuō)已經(jīng)比較固化(除非有明顯的變化),這就可能會(huì)導(dǎo)致重復(fù)分析出來(lái)的結(jié)論跟之前的差別并不大,也很難帶來(lái)實(shí)際業(yè)務(wù)提升。

undefined

既然迭代型項(xiàng)目過(guò)往已有過(guò)經(jīng)驗(yàn)和策略的沉淀,也經(jīng)歷過(guò)多輪的數(shù)據(jù)迭代,核心思路應(yīng)該是先定義要解決什么問(wèn)題、然后才是如何解決,這樣才能找準(zhǔn)關(guān)鍵發(fā)力點(diǎn)。

要解決什么問(wèn)題

首先要思考是不是真的有問(wèn)題,沒(méi)有問(wèn)題的項(xiàng)目也可以不用再花時(shí)間做分析,效率做即可,例如像全部會(huì)場(chǎng),本身的業(yè)務(wù)模式就比較簡(jiǎn)單,過(guò)往的效果也相對(duì)比較穩(wěn)定,如果不考慮進(jìn)行突破性的創(chuàng)新,通常是可以效率復(fù)用的,這種時(shí)候則不需要再去做分析,畢竟也要考慮投入產(chǎn)出比。

那么怎么定義要解決什么問(wèn)題呢?有三個(gè)常用的思路:看數(shù)據(jù)、看用戶反饋、看運(yùn)營(yíng)策略。

第一,從數(shù)據(jù)分析中找到關(guān)鍵問(wèn)題,例如根據(jù)618的項(xiàng)目數(shù)據(jù)復(fù)盤,我們發(fā)現(xiàn)預(yù)售會(huì)場(chǎng)、品牌會(huì)場(chǎng)的頁(yè)面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進(jìn)行分析,從而推導(dǎo)出更有針對(duì)性的設(shè)計(jì)策略。

undefined

第二,根據(jù)用戶反饋來(lái)找到關(guān)建問(wèn)題,例如過(guò)往的主會(huì)場(chǎng),用戶調(diào)研一直都會(huì)反饋主推樓層太長(zhǎng)而找不到感興趣的內(nèi)容,那么可以圍繞“如何更好的進(jìn)行需求匹配?”“如何提升屏效?”來(lái)思考和分析,解決實(shí)際存在的問(wèn)題,才更有可能提升體驗(yàn)和數(shù)據(jù)。

undefined

第三,結(jié)合運(yùn)營(yíng)策略,很多業(yè)務(wù)雖然已經(jīng)相對(duì)穩(wěn)定,但隨著每次大促戰(zhàn)略的變化,運(yùn)營(yíng)策略上也會(huì)有一些新的需求,那么就根據(jù)這些差異化的訴求去找到發(fā)力點(diǎn)。例如針對(duì)我的專屬會(huì)場(chǎng),在原會(huì)場(chǎng)定位不變的情況下,在近兩次大促中運(yùn)營(yíng)側(cè)都提出需要由這個(gè)會(huì)場(chǎng)來(lái)承載平臺(tái)服務(wù)內(nèi)容曝光的訴求,那么服務(wù)內(nèi)容如何匹配“專屬”會(huì)場(chǎng)的用戶心智,則是這個(gè)會(huì)場(chǎng)可以重點(diǎn)解決的問(wèn)題。

undefined

如何判斷真正有效的解決方案

在定義清楚核心要解決的問(wèn)題后,就可以按照常用的設(shè)計(jì)方法進(jìn)行方案的推導(dǎo),在發(fā)散解決方案的過(guò)程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們?cè)O(shè)計(jì)分析有價(jià)值的關(guān)鍵,因此總結(jié)了兩個(gè)常用的技巧。

首先要理解業(yè)務(wù)邏輯,減少無(wú)用的策略發(fā)散,很多時(shí)候我們的方案很難推動(dòng)落地的原因,是沒(méi)有考慮到業(yè)務(wù)的訴求,越能夠深入的了解業(yè)務(wù),才能更好的解決業(yè)務(wù)側(cè)的顧慮,保證方案的可落地性。

其次是要跳出來(lái)從整體來(lái)看優(yōu)先級(jí),我們?cè)谶M(jìn)入自己的思維邏輯中時(shí),會(huì)比較容易陷入細(xì)節(jié),有時(shí)候自己覺(jué)得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因?yàn)槲覀兊姆桨覆粔蚝?,而是沒(méi)有關(guān)注到整體優(yōu)先級(jí),因此要學(xué)會(huì)看全局,通過(guò)多溝通多評(píng)估的方式來(lái)讓自己的判斷更加準(zhǔn)確。

2. 探索型項(xiàng)目

探索型的項(xiàng)目沒(méi)有過(guò)往的參考依據(jù),相當(dāng)于需要從零開始去探索如何做,對(duì)于設(shè)計(jì)分析的能力要求會(huì)更高,那么常常容易陷入兩種極端相反的誤區(qū),要不就是容易被方法論套路,設(shè)計(jì)分析過(guò)泛但得不出實(shí)際有價(jià)值的結(jié)論,要不就是完全沒(méi)有頭緒,屬于想一步做一步的類型,分析的內(nèi)容之間缺乏邏輯。

undefined

因此,探索型項(xiàng)目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過(guò)程一樣,需要先定義交互框架,縱再進(jìn)行交互細(xì)節(jié)的打磨,才能夠保證設(shè)計(jì)效率及效果。

確定分析框架

確定分析框架的過(guò)程主要分為兩步,一是先想清楚要分析哪些內(nèi)容,包括哪些環(huán)節(jié)是必要的,哪些是重點(diǎn)的,時(shí)間要怎么分配。例如當(dāng)我們第一次做寵物品類活動(dòng)時(shí),需要對(duì)這個(gè)品類有深入的理解,因此我們?cè)谇捌谛枰シ治鲳B(yǎng)寵人群的特征、寵物行業(yè)的發(fā)展現(xiàn)狀、京東寵物貨品的優(yōu)勢(shì)等內(nèi)容,而如果我們做的是一次大促的綜合會(huì)場(chǎng),其主要用戶群體如果跟常規(guī)站內(nèi)主流群體并無(wú)差異時(shí),則不需要再花費(fèi)大量的時(shí)間單獨(dú)去分析用戶畫像,因此,需要結(jié)合項(xiàng)目情況先想清楚需要分析的內(nèi)容、以及這些內(nèi)容的必要性和優(yōu)先級(jí)。

undefined

第二步是梳理清楚內(nèi)容之間的邏輯關(guān)系,常見的邏輯結(jié)構(gòu)有兩種,一是遞進(jìn)式的推導(dǎo)(A→B→C),分析維度之間是先后關(guān)聯(lián)的,通過(guò)嚴(yán)謹(jǐn)?shù)倪壿嫴讲酵茖?dǎo)而來(lái),例如先梳理用戶畫像、才能進(jìn)行用戶行為痛點(diǎn)的分析、進(jìn)而推導(dǎo)解決方案;另一種邏輯結(jié)構(gòu)是進(jìn)行綜合歸納(A+B→C),即通過(guò)幾個(gè)不同的維度綜合推導(dǎo),例如經(jīng)典的五導(dǎo)家分析方法,結(jié)合用戶目標(biāo)以及業(yè)務(wù)目標(biāo)綜合推導(dǎo)出設(shè)計(jì)目標(biāo)。

undefined

在很多設(shè)計(jì)分析中,我們也會(huì)參考一些方法論,其實(shí)方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應(yīng)用。以下是根據(jù)我們?nèi)粘m?xiàng)目梳理的一些常用分析框架。

undefined

縱向深挖如何得到有價(jià)值的策略

有了分析框架后,接下來(lái)就可以進(jìn)入每個(gè)模塊的具體分析了,如果要得到有價(jià)值的策略,同樣有兩個(gè)小技巧。

首先,策略要足夠具體、有差異化,盡量避免提出過(guò)于籠統(tǒng)的結(jié)論。例如針對(duì)如何提升流量利用率比較泛的策略就是要進(jìn)行流量精細(xì)化運(yùn)營(yíng),這個(gè)大的方向沒(méi)有錯(cuò),但如果只到這一步是很難指導(dǎo)具體內(nèi)容落地的,所以需要細(xì)化到流量的渠道有哪些、這些渠道有什么樣的特征、針對(duì)不同的渠道用戶可以用怎樣的內(nèi)容吸引他們,才能夠更準(zhǔn)確的判斷是否會(huì)存什么問(wèn)題。

其次,策略最好能夠關(guān)聯(lián)驗(yàn)證指標(biāo),可以參考UGD數(shù)據(jù)增長(zhǎng)思路,在推導(dǎo)策略時(shí)要能預(yù)判它能帶來(lái)哪些數(shù)據(jù)指標(biāo)的提升,以保證設(shè)計(jì)分析的結(jié)論是有理有據(jù)的。


文章來(lái)源:站酷  作者:大蔥設(shè)計(jì)

藍(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ù)

信息無(wú)障礙研究與應(yīng)用

資深UI設(shè)計(jì)者

互聯(lián)網(wǎng)設(shè)計(jì)師如何著手發(fā)起無(wú)障礙優(yōu)化?

信息無(wú)障礙,是指任何人在任何情況下都能平等地、方便地、無(wú)障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來(lái)越廣,對(duì)于身體有局限的群體而言,更加迫切通過(guò)互聯(lián)網(wǎng)獲取信息,而這就需要互聯(lián)網(wǎng)產(chǎn)品進(jìn)行信息無(wú)障礙的優(yōu)化。在我國(guó)其受益人群至少包括:8500多萬(wàn)殘障人士,2億多60歲以上的老年人,數(shù)量龐大。率先考慮信息無(wú)障礙能為產(chǎn)品增加優(yōu)勢(shì)而帶來(lái)更多用戶。


如今智能手機(jī)掀起了一場(chǎng)無(wú)障礙輔助工具的革命,而站在這個(gè)關(guān)鍵點(diǎn)的互聯(lián)網(wǎng)設(shè)計(jì)師,也要開始行動(dòng)起來(lái),先從以下這幾個(gè)容易實(shí)現(xiàn)的事情開始著手進(jìn)行無(wú)障礙的優(yōu)化吧。




關(guān)于讀屏


對(duì)視障用戶來(lái)說(shuō),是用聽取讀屏語(yǔ)音來(lái)了解你設(shè)計(jì)的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛,它的原理是直接讀出界面里的文字,如果icon按鈕未加無(wú)障礙標(biāo)簽讀屏?xí)x為"無(wú)法發(fā)音",那么視障者就無(wú)法獲取這些信息,自然也就無(wú)法使用你設(shè)計(jì)的功能。


解決的辦法是:


1.需要在產(chǎn)品代碼中添加無(wú)障礙標(biāo)簽(Android :contentDescription ; iOS:accessibilityLabel在對(duì)應(yīng)的開發(fā)者文檔里很容易找到,可以發(fā)給你合作的研發(fā)同學(xué))。


2.裝飾性icon可隱藏標(biāo)簽不讀,提升讀屏效率。不建議不做處理也不加標(biāo)簽,那么用戶聽到的就是“無(wú)標(biāo)簽”,這樣會(huì)讓用戶以為這里有什么重要信息讀不到而感到不安。


3.標(biāo)簽語(yǔ)義簡(jiǎn)短準(zhǔn)確,盡可能使用動(dòng)詞。


4.必要時(shí)需要走查焦點(diǎn)順序,確保不會(huì)被錯(cuò)誤的焦點(diǎn)順序誤導(dǎo)頁(yè)面含義。 



并且最好由設(shè)計(jì)師進(jìn)行語(yǔ)義的標(biāo)注,因?yàn)樵O(shè)計(jì)師才是對(duì)頁(yè)面里圖形應(yīng)用最了解的人。避免出現(xiàn)“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。 





關(guān)于色彩


顏色可以用來(lái)區(qū)分信息數(shù)據(jù)的類別和維度,也可以幫助傳達(dá)情緒等重要信息。然而,世界上有超過(guò)8%的男性和0.4%的女性都被色覺(jué)障礙的問(wèn)題困擾。我們通常籠統(tǒng)的稱這類人群為“色盲”,他們是典型的識(shí)別顏色有問(wèn)題的群體。


"色彩"的目標(biāo)是"易于感知",指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對(duì)任何人來(lái)說(shuō),都應(yīng)該擁有足夠高的辨識(shí)度和舒適度,我從以下4個(gè)方向進(jìn)行介紹。 

 

1.更安全的配色


a.色盲人群:


設(shè)計(jì)師在進(jìn)行設(shè)計(jì)配色時(shí)應(yīng)時(shí)刻自測(cè),避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色,因?yàn)檫@樣的配色勢(shì)必會(huì)造成色盲用戶的可讀性問(wèn)題。并且,紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對(duì)他們來(lái)說(shuō)顯得非常深,而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強(qiáng)調(diào)字,從而遺漏關(guān)鍵信息(設(shè)計(jì)時(shí),可利用此插件模擬色盲眼中的顏色:Color Oracle) 。




b.文化差異:


因?yàn)樯试诓煌瑖?guó)家文化中代表不同含義,所以對(duì)于國(guó)際用戶來(lái)說(shuō)也是存在障礙的。在西方文化里,紅色通常用于表示消極趨勢(shì),而綠色則表示積極趨勢(shì),但在東方文化中卻正相反。


c.特殊群體:


臨床醫(yī)學(xué)研究表明對(duì)于部分自閉癥患者來(lái)說(shuō),高飽和高對(duì)比度的顏色,甚至只是黃色都會(huì)讓他們感到不舒服和不安,因此在自閉癥康復(fù)中心是不會(huì)出現(xiàn)過(guò)于對(duì)比刺激的顏色的。


另外,老年群體隨著年齡的增長(zhǎng),晶狀體變黃變渾濁,會(huì)選擇性的吸收藍(lán)光,從而導(dǎo)致老年人對(duì)藍(lán)色的鑒別能力下降明顯,如果你的主流用戶是老年人,請(qǐng)盡量避免將藍(lán)色運(yùn)用到重要的按鍵中去。



2.更強(qiáng)的文本對(duì)比度


文本對(duì)比度與可讀性息息相關(guān),它測(cè)量的文本顏色和背景色之間的明度差。WCAG AA對(duì)于文本對(duì)比度的規(guī)范是:4.5:1,若字號(hào)夠大(>18pt,或粗體>14pt)時(shí),標(biāo)準(zhǔn)可降到3:1。如果滿足4.5:1這個(gè)標(biāo)準(zhǔn)會(huì)讓你的頁(yè)面視覺(jué)看起來(lái)不那么優(yōu)雅,可以嘗試局部加強(qiáng)可視性的方法:



關(guān)于可讀性其他需要注意的點(diǎn):盡量不要在圖片上疊加文字,除非你能保證圖片背景顏色單一且對(duì)比度足夠高。



Material Design設(shè)計(jì)規(guī)范建議,需要淡淡的遮罩確保上層文字的可讀性;并且不建議極高對(duì)比度的文本,因?yàn)檫@樣會(huì)使一部分視障者看到的字旋轉(zhuǎn)模糊。


 

3.更多樣的視覺(jué)變量 


顏色是數(shù)據(jù)可視化中最常用的視覺(jué)變量之一。但是對(duì)于無(wú)法辨別顏色的用戶,如果顏色作為的唯一的提示信息,他們可能將無(wú)法理解你傳達(dá)的信息。那么有什么改善的方法呢?


a. 不讓顏色成為唯一的視覺(jué)變量:除顏色外,我們可以追加圖標(biāo)、紋理或者文字來(lái)加以標(biāo)注。



b.色盲模式:Trello作為一款工具產(chǎn)品,在標(biāo)注信息時(shí),提供色盲模式可打開和關(guān)閉,并用不同紋理加以區(qū)別,色盲友好模式是一個(gè)很好的范例,它可以有效幫助色盲,又不會(huì)妨礙非色盲用戶。


c.以明度飽和度為度量:雖然色盲人士對(duì)色相的辨識(shí)能力較弱,但卻對(duì)明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息??催@個(gè)例子:傳統(tǒng)熱力圖習(xí)慣用暖色代表熱力高冷色代表熱力低,Google Analaytics的熱力圖采用深藍(lán)色顯示熱度高的時(shí)段、淺藍(lán)色顯示熱度低的時(shí)段,簡(jiǎn)單有效。




關(guān)于控件


控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的HTML元素。控件太小或彼此太靠近可能會(huì)給用戶帶來(lái)糟糕的體驗(yàn)問(wèn)題。


比如對(duì)于無(wú)法用指尖定位的用戶(有顫抖疾病的用戶),或因年齡而導(dǎo)致靈活性降低的老年用戶,都會(huì)難以點(diǎn)擊過(guò)小控件。


為了給用戶足夠的間距來(lái)準(zhǔn)確選擇控件,Material Design建議至少48×48dp,iOS設(shè)計(jì)系統(tǒng)將目標(biāo)熱區(qū)尺寸最小值定為44 x 44pt,而WCAG對(duì)WEB的規(guī)范則建議至少44×44px。一個(gè)控件可以在視覺(jué)上是24 x 24px,但是在所有邊上都會(huì)有一個(gè)額外的填充使它達(dá)到44×44px。并且太靠近的控件可能會(huì)因誤點(diǎn)擊而帶來(lái)挫敗感,所以同時(shí)還建議控件之間的空間足夠遠(yuǎn)以減少誤觸。Microsoft給pc的建議是至少有8px的間距,而Material Design推薦的控件至少間隔8dp。我們可根據(jù)以上規(guī)范來(lái)審視自己設(shè)計(jì)的控件。




關(guān)于文字


1.文字大?。?/strong>


有視覺(jué)障礙的用戶可能會(huì)把字號(hào)調(diào)得很大。你需要保證你的設(shè)計(jì)在大字號(hào)的情況下內(nèi)容不會(huì)溢出或排版錯(cuò)亂。做設(shè)計(jì)的時(shí)候,可以使用2倍以上的字體測(cè)試你的設(shè)計(jì)。


在互聯(lián)網(wǎng)早期,設(shè)計(jì)了字號(hào)在9-14px之間的網(wǎng)頁(yè),如今已與20年前不同,瀏覽器已經(jīng)可以在任何尺寸設(shè)備上使用,小到智能手表大到4K熒幕,我們不能再使用固定的字號(hào)來(lái)設(shè)計(jì)產(chǎn)品了。字號(hào)應(yīng)該與設(shè)計(jì)本身一樣具有響應(yīng)性。例如可以允許用戶自定義字號(hào)、行高或字間距等以達(dá)到舒適的閱讀水平。


 

2.文字樣式:


文字作為傳達(dá)信息的重要載體,對(duì)于許多用戶來(lái)說(shuō),裝飾字體或草書字體都是比較難閱讀的。且用過(guò)細(xì)的、過(guò)小的、斜體和全大寫文本,也會(huì)降低識(shí)別度。




關(guān)于動(dòng)效


有效的動(dòng)畫可以給頁(yè)面帶來(lái)生命感,但如果濫用動(dòng)效不僅會(huì)分散用戶注意力,嚴(yán)重的話對(duì)某些用戶來(lái)說(shuō)來(lái)說(shuō)可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激)。


1997年的一天,日本電視臺(tái)正在播放《精靈寶可夢(mèng)》第38集“電腦戰(zhàn)士3D龍”,但就在這天晚上發(fā)生了600多名兒童昏倒在家中集體送醫(yī)事件,轟動(dòng)了動(dòng)畫界,任天堂的股價(jià)也隨之大跌。原來(lái),為了達(dá)到震撼效果,3D龍的背景運(yùn)用了“藍(lán)-紅-藍(lán)”的快速閃爍來(lái)表現(xiàn)爆炸,這樣高頻率的閃爍刺激了孩子們脆弱的眼睛,導(dǎo)致他們集體患上了急性光敏癥。也因?yàn)檫@件事日本開始著手對(duì)動(dòng)畫片的制作制定規(guī)范。Twitter在2019年為了保護(hù)對(duì)閃爍圖像敏感的人員安全,也采取了禁用APNG動(dòng)圖格式的措施。


另外WCAG 2.3.3官方說(shuō)明,一些用戶會(huì)因滾動(dòng)頁(yè)面的動(dòng)效(例如緩動(dòng)和視差滾動(dòng))而觸發(fā)大腦前庭疾病從而產(chǎn)生頭暈的癥狀,所以iOS、Mac、Windows 10都具有關(guān)閉動(dòng)效的功能。


為了避免給特殊人群造成困擾,設(shè)計(jì)師在開始做動(dòng)效之前,應(yīng)該看看以下四條是否滿足:


1.動(dòng)效每秒閃動(dòng)不超過(guò)3次,發(fā)生的閃光區(qū)域不超過(guò)超過(guò)25%否則,光敏癲癇患者會(huì)有發(fā)病的風(fēng)險(xiǎn)。


2.避免過(guò)于夸張的視差和運(yùn)動(dòng)效果,因?yàn)榇竽X前庭失調(diào)者會(huì)引發(fā)眩暈。


3.避免有多個(gè)元素通過(guò)不斷移動(dòng)、閃爍而分散注意力,因?yàn)檫@可能會(huì)讓注意力缺陷者產(chǎn)生困擾 。


4.如果有上述情況,需提供一些控件或選項(xiàng)來(lái)暫停、隱藏或者更改任何動(dòng)畫或效果的頻率。




結(jié)語(yǔ)


作為體驗(yàn)設(shè)計(jì)師,研究無(wú)障礙會(huì)讓我們收獲良多。當(dāng)然,目前所做的改進(jìn)并非一勞永逸,而是我們與更廣范圍的用戶保持持續(xù)對(duì)話的開端。不斷改進(jìn)產(chǎn)品的無(wú)障礙體驗(yàn),讓產(chǎn)品更友善,讓美妙的互聯(lián)網(wǎng)的世界變得更平等,我們希望能不斷向這一目標(biāo)前進(jìn)。


文章來(lái)源:站酷   作者:百度MEUX

藍(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ù)

優(yōu)秀網(wǎng)站設(shè)計(jì)賞析

前端達(dá)人

很多網(wǎng)站仍然在使用老舊的頁(yè)面設(shè)計(jì),比如國(guó)內(nèi)一些企業(yè)官網(wǎng),萬(wàn)年不變的相類似的模板,外國(guó)的則是hero頁(yè)面,帶CTA按鈕,三欄式的布局。這些設(shè)計(jì)不能說(shuō)是不好的設(shè)計(jì),很實(shí)用,用戶能夠預(yù)測(cè)展示的內(nèi)容,也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測(cè),用戶沒(méi)有新鮮感,沒(méi)有期待,所以我們找了一些不僅打破常規(guī),也依然有良好用戶體驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設(shè)計(jì)公司,公司對(duì)UI設(shè)計(jì)的追求一向很高,致力于為卓越的國(guó)內(nèi)外企業(yè)提供卓越的手機(jī)app/安卓ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì),用戶研究、交互設(shè)計(jì)服務(wù)。

接下來(lái)是精彩的UI設(shè)計(jì)賞析

jhk-1605781847488.png

jhk-1605858507124.png

jhk-1605858621125.png

jhk-1605858643110.png

jhk-1605858651660.png

北京藍(lán)藍(lán)設(shè)計(jì)團(tuán)隊(duì)來(lái)自清華美院,工作多年,行業(yè)經(jīng)驗(yàn)豐富,專業(yè)性很強(qiáng)。我們是熱愛設(shè)計(jì),設(shè)計(jì)不僅是我們的專業(yè),我們的職業(yè),還是我們的愛好。每一個(gè)藍(lán)藍(lán)設(shè)計(jì)的設(shè)計(jì)師都希望自己的設(shè)計(jì)越來(lái)越好,以高標(biāo)準(zhǔn),敬業(yè)用心的態(tài)度、專業(yè)的技藝得到客戶的認(rèn)可。為此,我們不惜代價(jià),愿意額外的付出時(shí)間、精力,去學(xué)習(xí)、去嘗試、去研究、去探索。工作賣力,玩的開心。做好卓越的界面設(shè)計(jì),成為這個(gè)領(lǐng)域的資深專家,幫助客戶取得成功,是我們的目標(biāo)。

jhk-1605858672127.png


藍(lán)藍(lán)設(shè)計(jì)秉承設(shè)計(jì)優(yōu)秀,不斷超越的理念,誠(chéng)信敬業(yè)、專業(yè)耐心的工作作風(fēng),一直堅(jiān)持注重用戶心理體驗(yàn)及“設(shè)計(jì)與營(yíng)銷”等領(lǐng)域的理論與實(shí)踐相結(jié)合。10余年專注努力,300+案例磨練。我們?cè)趗i創(chuàng)意設(shè)計(jì),用戶體驗(yàn)與交互設(shè)計(jì),各種類型軟件界面設(shè)計(jì),國(guó)際化標(biāo)準(zhǔn)和流行趨勢(shì),進(jìn)行過(guò)不斷的學(xué)習(xí)和實(shí)踐。藍(lán)藍(lán)設(shè)計(jì)提供的是可以信賴的ui設(shè)計(jì)服務(wù),我們內(nèi)部有一套管理要求,比如去客戶現(xiàn)場(chǎng)每周一次的檢視和溝通、內(nèi)部提案會(huì)議、每天下班前的整理反饋成果發(fā)郵件、隨時(shí)溝通的qq、電話,階段性的匯報(bào)和進(jìn)度記錄整理。多勞多得的獎(jiǎng)勵(lì)機(jī)制,客戶滿意度評(píng)價(jià)獎(jiǎng)勵(lì)機(jī)制,鼓勵(lì)大家用心、平和、耐心、勤奮、創(chuàng)新的做事.



(以上圖片均來(lái)源于網(wǎng)絡(luò))

(精美流程圖設(shè)計(jì))



  藍(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ù)



  更多精彩文章:

       ui界面設(shè)計(jì)之網(wǎng)站設(shè)計(jì)案例欣賞(一)

       超贊的創(chuàng)意頁(yè)面排版設(shè)計(jì),打造“視”不可擋的網(wǎng)頁(yè)設(shè)計(jì)

      超贊的網(wǎng)頁(yè)設(shè)計(jì)+精美流程圖賞析

       超贊的網(wǎng)站設(shè)計(jì)賞析


4個(gè)案例教會(huì)你如何像設(shè)計(jì)師一樣解決問(wèn)題

周周

好的設(shè)計(jì)是能夠解決不少問(wèn)題的,具備設(shè)計(jì)思維不僅僅對(duì)設(shè)計(jì)師很重要,對(duì)我們來(lái)說(shuō)同樣不可忽視。那么,什么是設(shè)計(jì)思維呢?我們又應(yīng)該如何用設(shè)計(jì)思維來(lái)解決問(wèn)題?本文作者通過(guò)這四個(gè)案例,教會(huì)我們?nèi)绾蜗裨O(shè)計(jì)師一樣解決問(wèn)題

寫出好創(chuàng)意的方法論,都在這了!

周周

運(yùn)營(yíng)人的日常工作,是與創(chuàng)意分不開的。無(wú)論是寫文案還是設(shè)計(jì)頁(yè)面,無(wú)論是拉新促活,還是管理社群,都需要在以往的基礎(chǔ)上進(jìn)行突破,而這就需要進(jìn)行頭腦風(fēng)暴了。創(chuàng)意這種捉摸不定的東西,如果沒(méi)有方法論的支撐,則會(huì)浪費(fèi)時(shí)間和精力。接下來(lái),本文作者為我們總結(jié)了一套寫出好創(chuàng)意的方法論

辭典精譯 | 怎么做響應(yīng)頁(yè)面?柵格系統(tǒng)來(lái)幫忙!

ui設(shè)計(jì)分享達(dá)人

柵格系統(tǒng)知識(shí)點(diǎn) 


使用柵格系統(tǒng)很有幫助,它有助于在不同布局之間保持一致性,并加快設(shè)計(jì)決策的速度。柵格可更地控制不同屏幕尺寸之間的對(duì)齊方式及布局。本文重點(diǎn)介紹響應(yīng)式柵格的重要知識(shí)點(diǎn),以及產(chǎn)品設(shè)計(jì)師如何在設(shè)計(jì)工作流中調(diào)整柵格。


柵格結(jié)構(gòu)

柵格由3個(gè)主要組件構(gòu)成,包括列、槽和邊距。

列是虛構(gòu)的垂直塊,用于對(duì)齊內(nèi)容。我們用百分比(%)或固定值定義列寬。


柵格中的列


它是列與列之間的空間,有助于分隔內(nèi)容,我們將槽的寬度定義成固定值。


柵格中的槽


邊距

邊距是內(nèi)容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值,該值決定每個(gè)屏幕尺寸的最小空間。彈性邊距指的是列,槽和側(cè)邊距組成柵格后剩下的空間,它會(huì)根據(jù)不同的屏幕尺寸而變化。


柵格中的頁(yè)邊距和靈活邊距


如何使用柵格設(shè)計(jì)界面?

信息內(nèi)容(圖像,文本或UI元素)常常會(huì)被放置于可見和不可見的內(nèi)容塊中??梢妰?nèi)容塊具有明顯的邊框或填充區(qū),而不可見內(nèi)容塊則不具備,多數(shù)是透明底??梢姷母讣?jí)內(nèi)容塊包括卡片,橫幅等組件。


卡片形式的可見內(nèi)容塊


不可見的內(nèi)容塊包括文本或功能按鈕。


內(nèi)容塊應(yīng)與列的邊緣對(duì)齊,避免與槽邊緣對(duì)齊。內(nèi)容塊中的信息是獨(dú)立的,不一定非要與列對(duì)齊。


內(nèi)容塊的列對(duì)齊


列結(jié)構(gòu)

用于構(gòu)成柵格的列數(shù)稱為列結(jié)構(gòu)。8、12、16和20是用于響應(yīng)式布局的一些最常見的列結(jié)構(gòu),設(shè)計(jì)師可以根據(jù)設(shè)計(jì)要求選擇具體結(jié)構(gòu)。


8/12/16/20列柵格結(jié)構(gòu)


12列結(jié)構(gòu)是最靈活的,它可以進(jìn)一步分解成為4–4–4或3–3–3–3大小的內(nèi)容塊。


響應(yīng)點(diǎn)

當(dāng)屏幕尺寸到達(dá)響應(yīng)點(diǎn),那么頁(yè)面布局也會(huì)有對(duì)應(yīng)更改,以實(shí)現(xiàn)最佳的布局視圖。列結(jié)構(gòu),列寬,槽寬度和邊距都取決于響應(yīng)點(diǎn)。內(nèi)容塊則根據(jù)不同的響應(yīng)點(diǎn)堆疊或縮放,以重新調(diào)整獲得最佳視圖。


柵格縮放和堆疊


如果較小的屏幕具備足夠空間來(lái)呈現(xiàn),其實(shí)縮小比例就能展示完整了。如果屏幕實(shí)在是太小,就會(huì)垂直堆疊成一列。


柵格的呈現(xiàn)類型

柵格有3種呈現(xiàn)形式,一起來(lái)看下吧!

固定柵格

固定柵格有固定寬度的列以及頁(yè)面邊距,且固定的柵格具有固定的內(nèi)容塊寬度,該寬度在響應(yīng)點(diǎn)范圍內(nèi)不會(huì)出現(xiàn)變化,并且頁(yè)面邊距會(huì)占據(jù)剩余的空間。


固定寬度柵格


流動(dòng)或全寬柵格

流動(dòng)?xùn)鸥窳械膶挾仁遣欢ǖ?,但槽和?yè)面邊距都是固定的。流體柵格具有靈活的內(nèi)容塊寬度,該寬度根據(jù)屏幕大小來(lái)變化。流體柵格中,列會(huì)隨著可用空間變大或是縮小。


流動(dòng)?xùn)鸥?


混合柵格

混合柵格同時(shí)具有流動(dòng)寬度和固定寬度。在現(xiàn)代布局中,一些元素會(huì)完全脫離柵格。常見的例子比如頁(yè)眉,頁(yè)腳,或是出血的圖片內(nèi)容塊。


混合柵格


如果內(nèi)容塊寬度大于可用的屏幕尺寸,則固定柵格會(huì)轉(zhuǎn)變?yōu)榱鲃?dòng)?xùn)鸥駚?lái)適應(yīng)屏幕。


如何在原型制作工具中設(shè)置柵格系統(tǒng)?

電腦視窗

不要以1440×900、1600×900或1920×1080等高分辨率進(jìn)行設(shè)計(jì)。1280×800是電腦端內(nèi)最小的分辨率,以1280×800設(shè)計(jì)的流動(dòng)與固定寬度的布局都可以適應(yīng)更大的屏幕。


固定寬度柵格設(shè)置

要設(shè)置固定寬度的柵格,我們對(duì)槽和列都應(yīng)固定好數(shù)值。建議設(shè)置列寬為74px、槽寬32px以及16px的邊距。


固定寬度柵格設(shè)置


列寬74px、槽寬32px可以生成1240px的內(nèi)容塊寬度(不包括兩端的16px側(cè)邊距),最大化的利用了可用屏幕尺寸。在不同的響應(yīng)點(diǎn),固定內(nèi)容寬度大于當(dāng)前屏幕尺寸時(shí),則固定寬度柵格開始變?yōu)榱鲃?dòng)?xùn)鸥瘛?


流動(dòng)?xùn)鸥裨O(shè)置

要設(shè)置流動(dòng)寬度柵格,對(duì)槽使用數(shù)值,對(duì)列使用自動(dòng)計(jì)算的值(以%為單位)。


流體布局柵格設(shè)置


流動(dòng)?xùn)鸥窭谜麄€(gè)屏幕尺寸作為主要內(nèi)容的寬度,每側(cè)留出16px的側(cè)邊距。


移動(dòng)視窗

在移動(dòng)端使用流動(dòng)?xùn)鸥?,槽和?yè)邊距的寬度推薦設(shè)置成16px。因?yàn)橐苿?dòng)設(shè)備的屏幕分辨率較小,若再分成12個(gè)獨(dú)立的列、槽和邊距的話,設(shè)計(jì)起來(lái)也會(huì)很麻煩。


移動(dòng)端的流動(dòng)?xùn)鸥裨O(shè)置


因此,我們將3列中的每列合并以創(chuàng)建4個(gè)粗列,從而使布局柵格既簡(jiǎn)潔又方便,快速對(duì)齊。


平板視窗

平板設(shè)置柵格的方式與移動(dòng)設(shè)備非常相似,推薦槽寬和邊距分別設(shè)置為32px與16px,可以在768×1024大小的畫板上為平板設(shè)計(jì)界面。


平板電腦流動(dòng)?xùn)鸥裨O(shè)置


將12列優(yōu)化成6列,讓柵格清晰明了,谷歌的材質(zhì)設(shè)計(jì)曾建議使用24px寬的槽與頁(yè)邊距,實(shí)際應(yīng)用時(shí),不妨都試下看哪個(gè)效果更好。


布局樣式

柵格布局的變化決定了主要內(nèi)容的結(jié)構(gòu),針對(duì)不同的布局要求,使用不同的柵格系統(tǒng),而頁(yè)面中的內(nèi)容塊數(shù)量決定了頁(yè)面布局的變化。


單列布局

單列布局或全寬布局,是著陸頁(yè)和首頁(yè)的風(fēng)格之一。還可以合并12列來(lái)創(chuàng)建一個(gè)單列內(nèi)容塊,也可以將12列分配到父級(jí)內(nèi)容塊中。


一級(jí)頁(yè)面常應(yīng)用單列或全寬柵格布局


雙列布局

該布局有兩個(gè)內(nèi)容塊。通常,其中的一個(gè)內(nèi)容塊會(huì)占據(jù)比較多的區(qū)域進(jìn)行信息展示。



在雙列布局中,列要么分布在9–3或8–4父級(jí)內(nèi)容塊中,其中的一個(gè)組合列區(qū)域,用來(lái)創(chuàng)建主要內(nèi)容。帶有單個(gè)邊欄的界面是兩列布局的常見呈現(xiàn)形式。


三列布局

三列布局具有三個(gè)內(nèi)容塊,主要內(nèi)容塊占據(jù)最大的展示區(qū)域,在三列布局中,列分布在3–6–3或2–8–2父級(jí)內(nèi)容塊中。


固定寬度的側(cè)邊欄布局

固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應(yīng)點(diǎn)范圍內(nèi)固定,剩余空間由固定寬度或流動(dòng)寬度的內(nèi)容塊占用。


側(cè)邊欄固定布局


移交開發(fā)

在原型工具中,設(shè)計(jì)布局和編碼有很大的不同。代碼可以合并列或?qū)⑵涠询B,比如合并12列以創(chuàng)建單個(gè)列布局,或?qū)?2列分布到一組,用來(lái)創(chuàng)建不同布局變化的內(nèi)容塊。在原型設(shè)計(jì)工具中設(shè)計(jì)布局時(shí),你需要確保開發(fā)人員清楚了解電腦端,移動(dòng)設(shè)備和平板設(shè)備上設(shè)置的列寬、槽寬及邊距。像Bootstrap,Zurb Foundation等開發(fā)軟件,其中對(duì)柵格值的設(shè)置會(huì)有出入。


自定義柵格


設(shè)計(jì)師可以多嘗試不同的柵格值設(shè)置,以找到最適合自己的呈現(xiàn)形式。如果交付開發(fā)的時(shí)間非常緊急,請(qǐng)使用文中建議的數(shù)值,更保險(xiǎn)也不會(huì)出錯(cuò)。


文章來(lái)源:站酷   作者:UX辭典

藍(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ù)

產(chǎn)品問(wèn)答:產(chǎn)品同質(zhì)化怎么破?

資深UI設(shè)計(jì)者

產(chǎn)品該如何避免同質(zhì)化?本文作者依據(jù)工作中項(xiàng)目實(shí)踐的所思所想,從產(chǎn)品同質(zhì)化的產(chǎn)生原因出發(fā),結(jié)合企業(yè)和用戶的具體應(yīng)用案例,就此話題分享了自己的想法,供大家一同參考學(xué)習(xí)。

這篇文章只是想從個(gè)人理解的角度回答下標(biāo)題問(wèn)題,如有不足,歡迎指正和討論。

一、為什么會(huì)有產(chǎn)品同質(zhì)化?

產(chǎn)品是需求實(shí)現(xiàn)的載體,是企業(yè)和用戶實(shí)現(xiàn)價(jià)值交換的媒介。需求是有來(lái)源的并不是憑空可以創(chuàng)造的,這也就意味著可見的、可交換且可盈利的需求在一定程度上(沒(méi)有新元素加入的情況下)是有限的(這和需求本身的無(wú)限性并不沖突)。再也不是移動(dòng)互聯(lián)網(wǎng)初期一片藍(lán)海,站在風(fēng)口就可以起飛的時(shí)代了。

除了這個(gè)外部因素外,新業(yè)務(wù)的試錯(cuò)成本往往比已經(jīng)驗(yàn)證過(guò)可行性的產(chǎn)品來(lái)的高的多。因此,為求穩(wěn),也有不少本身有實(shí)力的公司會(huì)進(jìn)入相同的賽道一爭(zhēng)高下。

但是沒(méi)有差異的產(chǎn)品對(duì)用戶來(lái)說(shuō)由于替代成本低,很難維持穩(wěn)定的用戶群體。本文分別從用戶分析和企業(yè)核心競(jìng)爭(zhēng)力兩個(gè)角度分析,在同質(zhì)化中尋找突破口。僅為作者本人經(jīng)驗(yàn)和觀點(diǎn),如有不足和問(wèn)題,歡迎溝通和指正。

二、從用戶出發(fā),精準(zhǔn)把握產(chǎn)品定位

1. 飛豬 VS 攜程

因?yàn)榍岸螘r(shí)間去成都需要訂酒店,原本是想單純的做下比價(jià)的。但是卻意外的發(fā)現(xiàn)兩個(gè)APP酒店的推薦邏輯差異甚大。

根據(jù)推薦結(jié)果不難發(fā)現(xiàn),攜程的關(guān)鍵詞是商務(wù)型、中端酒店,而飛豬則更偏重于經(jīng)濟(jì)型、酒店公寓(民宿),且兩者在整體均價(jià)上也是拉開了差距的。

攜程作為出行行業(yè)的老大哥,在移動(dòng)互聯(lián)網(wǎng)還沒(méi)有普及時(shí),就已經(jīng)占據(jù)旅游出行機(jī)酒業(yè)務(wù)的半壁江山了,特別是商務(wù)出行板塊。而酒店線上預(yù)訂業(yè)務(wù)本身就是偏重于供給型,沒(méi)有資源就沒(méi)有話語(yǔ)權(quán)。

而在這種情況下,飛豬通過(guò)抓住近年旅游行業(yè)爆發(fā)的契機(jī)以及大眾對(duì)民宿接受度的提高,把握年輕群體對(duì)休閑游、窮游的訴求,加之其對(duì)小型公寓酒店、民宿的扶持和曝光(19年成立了菲住酒店聯(lián)盟,實(shí)現(xiàn)聯(lián)盟會(huì)員共享),實(shí)現(xiàn)了這部分用戶和商家的在線交易。

雖然從表象上看產(chǎn)品的形式是相同的,都是酒店預(yù)訂,但是產(chǎn)品本身的定位和底層邏輯的不同,各自圈定了不同的用戶實(shí)現(xiàn)了差異化競(jìng)爭(zhēng)。

2. 巧克力VS口紅

上面攜程和飛豬的例子是基于一個(gè)小的賽道在做細(xì)分,如果只將目光放在這個(gè)層面,那只是在“分餅”,但是這種情況下餅的大小總是有限的,如果不換個(gè)角度“把餅做大”,在競(jìng)爭(zhēng)嚴(yán)峻的當(dāng)下也很難長(zhǎng)久的不被打倒。

之前在阿里媽媽的公開課中看到過(guò)這樣一句話:今天巧克力最大的競(jìng)爭(zhēng)對(duì)手是誰(shuí),不是糖果,不是堅(jiān)果,而是口紅。

這是基于當(dāng)今消費(fèi)并不只基于個(gè)人的需要,而是越來(lái)越多的扮演著情感表達(dá)、場(chǎng)景營(yíng)造的角色(基于阿里媽媽2020消費(fèi)觀察數(shù)據(jù)),25歲男性對(duì)口紅價(jià)格的接受度甚至是女性自用的三倍,口紅逐漸蠶食了巧克力在男女戀愛市場(chǎng)中穩(wěn)固的禮物寶座,想想在口紅一哥李佳琪的一聲聲“OMG,買它”中,多少男性也同時(shí)乖乖的掏出了腰包。

因此,我們差異化的思考不應(yīng)該只局限于品類下人群的思考,也應(yīng)該基于不同的場(chǎng)景去挖掘場(chǎng)景下的用戶群體。

三、從企業(yè)出發(fā),發(fā)揮企業(yè)核心優(yōu)勢(shì)

1. 美團(tuán)優(yōu)選 VS 橙心優(yōu)選 VS 多多拼團(tuán)

今年年初的疫情,雖然對(duì)各大行業(yè)都造成了不同程度的損傷,但是卻“社群團(tuán)購(gòu)”這個(gè)模式看到了曙光。

艾媒咨詢數(shù)據(jù)顯示,在疫情的刺激下,2020年社區(qū)團(tuán)購(gòu)市場(chǎng)發(fā)展迅猛,市場(chǎng)規(guī)模預(yù)計(jì)將達(dá)到720億元,而未來(lái)隨著市場(chǎng)的良好增長(zhǎng)態(tài)勢(shì),2022年中國(guó)社區(qū)團(tuán)購(gòu)市場(chǎng)規(guī)模有望達(dá)到千億級(jí)別。

各大平臺(tái)也在下半年?duì)幭嗉尤脒@個(gè)賽道:美團(tuán)、滴滴、拼多多相繼推出了美團(tuán)友選、橙心優(yōu)選和多多拼團(tuán),均將其作為下個(gè)階段的業(yè)務(wù)重點(diǎn)。

本身社群團(tuán)購(gòu)這個(gè)模式本身是可以成立且存在用戶體量龐大。但是,從松鼠拼拼到呆蘿卜,都昭示著生鮮、社群并不是一個(gè)好啃的骨頭。

從三個(gè)平臺(tái)目前呈現(xiàn)出的產(chǎn)品來(lái)看,產(chǎn)品邏輯是一致的,依然是通過(guò)團(tuán)長(zhǎng)建立社群拉流量下單并獲得提成的模式,前期搶地盤搶團(tuán)長(zhǎng)的價(jià)格戰(zhàn)看來(lái)是在所難免了(某鹿已經(jīng)為能夠薅到羊毛平臺(tái)羊毛開始暗自竊喜了),但是價(jià)格戰(zhàn)始終是雙刃劍,并不是長(zhǎng)久之計(jì)。

這就需要深究,相同的模式,企業(yè)通過(guò)什么實(shí)現(xiàn)差異化競(jìng)爭(zhēng)。這三家平臺(tái)加入這場(chǎng)戰(zhàn)役,憑的到底是什么核心競(jìng)爭(zhēng)力,總不能真的是指望靠燒錢燒到行業(yè)第一吧。

回歸社群團(tuán)購(gòu)這個(gè)模式本身面向的群體是偏價(jià)格敏感型,且因?yàn)樯缛罕旧砜焖賯鞑サ奶刭|(zhì),對(duì)品質(zhì)的要求更為嚴(yán)格了,真正是要求物美價(jià)廉。對(duì)供應(yīng)鏈和履約的要求十分高,也難怪乎有人說(shuō)“社群團(tuán)購(gòu),始于團(tuán)長(zhǎng),終于供應(yīng)鏈”。

對(duì)于美團(tuán)來(lái)說(shuō),O2O的基因是刻在骨子里的,本地現(xiàn)成的數(shù)以萬(wàn)計(jì)的線下商家都是潛在的團(tuán)長(zhǎng),且這些團(tuán)長(zhǎng)是自帶線下流量的;對(duì)于線下B端的管理和運(yùn)營(yíng)也是輕車熟路;此外線下商家支持以供應(yīng)商模式入駐美團(tuán)優(yōu)選為平臺(tái)供貨,對(duì)于平臺(tái)品類的豐富度提升有極大幫助;外賣配送的管理經(jīng)驗(yàn)讓他在物流上也占有相當(dāng)優(yōu)勢(shì)。

滴滴原來(lái)的行業(yè)布局和社群團(tuán)購(gòu)看起來(lái)似乎是毫不相關(guān)的,但其對(duì)在線下司機(jī)的管理、運(yùn)營(yíng)上是有一定沉淀的,而對(duì)于團(tuán)長(zhǎng)的管理在這個(gè)點(diǎn)上是可以互通的,在團(tuán)長(zhǎng)履約上是具有一定保障的。而滴滴因?yàn)橛胸涍\(yùn)的布局,其在物流上是具有一定優(yōu)勢(shì)的,社群團(tuán)購(gòu)雖然時(shí)效要求沒(méi)有外賣高,但也都是要求次日達(dá)的。但在供給上的劣勢(shì)也是十分明顯的。

早期多多是從生鮮水果拼團(tuán)開始做起,不排除他在這塊供應(yīng)鏈的運(yùn)營(yíng)和把控上是有積累的,且從早期的生鮮價(jià)格來(lái)看,其價(jià)格優(yōu)勢(shì)較為明顯。同時(shí)因?yàn)槠炊喽嘣脩羧后w中一大部分都是對(duì)“白牌”價(jià)低質(zhì)優(yōu)商品存在相當(dāng)高接受度的用戶,相信價(jià)格和品牌差異(限于標(biāo)品,非生鮮果蔬類)依然會(huì)延續(xù)成為多多拼團(tuán)的優(yōu)勢(shì)。

但拼多多目前一直只有線上電商業(yè)務(wù),本次社群團(tuán)購(gòu)是其首次轉(zhuǎn)戰(zhàn)線下履約的嘗試,其挑戰(zhàn)難度也是不言而喻的。

所以基于以上的剖析,從我的角度來(lái)說(shuō),這三家中,我個(gè)人目前是更看好美團(tuán)優(yōu)選未來(lái)前景的,他底層在供應(yīng)鏈上的優(yōu)勢(shì)差異是目前另外兩家還無(wú)法達(dá)到的。不過(guò)這個(gè)領(lǐng)域盤子不小,各家發(fā)揮優(yōu)勢(shì)的話后續(xù)還真不好說(shuō)。對(duì)于這場(chǎng)仗,我拭目以待。

總結(jié)

基于以上論述,即使是看似“同質(zhì)”的產(chǎn)品和業(yè)務(wù),但是通過(guò)對(duì)業(yè)務(wù)的理解,對(duì)用戶的挖掘,對(duì)企業(yè)自身優(yōu)勢(shì)的把握而實(shí)現(xiàn)“不大相同”的邏輯,我認(rèn)為這就是身為產(chǎn)品經(jīng)理很重要的意義所在了。希望我們都可以做出各自領(lǐng)域與眾不同的產(chǎn)品來(lái)。

文章來(lái)源:人人都是產(chǎn)品經(jīng)理    作者:麋鹿產(chǎ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ù)

通知系統(tǒng)的設(shè)計(jì)規(guī)則 | 深度解析

ui設(shè)計(jì)分享達(dá)人

本篇文章從通知模塊的組成部分,到通知模塊的設(shè)計(jì)規(guī)則,進(jìn)行了一個(gè)詳細(xì)的講解,幫助讀者更好理解對(duì)于通知的設(shè)計(jì)。

我們通過(guò)門鈴聲兒得知門外有人來(lái)訪,也能通過(guò)電話鈴聲得知正被人呼叫。短信通知也有著類似的作用,包括各類產(chǎn)品的消息推送。


但不同的是,消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大,包括短信現(xiàn)在也大多是垃圾信息。


而且,通知越來(lái)越多地通過(guò)各種方式去觸達(dá)用戶。比如消息未讀的紅點(diǎn)提示,或者顯示消息的數(shù)字統(tǒng)計(jì),以及手機(jī)使用過(guò)程中的頂部提示與聲音或震動(dòng)的提醒,等等。


但我們還是無(wú)法抑制點(diǎn)擊圖標(biāo)的沖動(dòng),這僅僅是因?yàn)樗哂形醋x的計(jì)數(shù)或紅點(diǎn)提示,即使我們已經(jīng)知道當(dāng)中的內(nèi)容并不重要。


而我要說(shuō)的是,當(dāng)通知內(nèi)容變得次要且被濫用之后,它仿佛成了一種違背設(shè)計(jì)原則的功能 —— 中斷用戶當(dāng)前行為。因?yàn)樗蚱屏擞脩襞c產(chǎn)品之間的層級(jí)關(guān)系,破局至產(chǎn)品之外來(lái)吸引用戶的注意力,這是一個(gè)非常打擾的行為。如果我在看書,突然收到一條并不重要的消息,那我一定會(huì)非常反感。


所以,為了不被「紅點(diǎn)」支配,以及不讓通知所打擾,我會(huì)把手機(jī)里所有產(chǎn)品的消息推送都給關(guān)了。


但是,以上內(nèi)容并不能說(shuō)明通知的無(wú)用論。同樣有許多用戶還是沉迷于通知的使用上,它所控制的是用戶對(duì)于某個(gè)產(chǎn)品的控制欲,擔(dān)心錯(cuò)過(guò)某條消息,就好像我在豆瓣寫了篇隨筆,就想看別人給我點(diǎn)贊評(píng)論的消息,但我又不可能一直盯著,所以通知這時(shí)候就起到了一個(gè)很好的作用。


以至于對(duì)于優(yōu)秀的產(chǎn)品人或設(shè)計(jì)師,包括運(yùn)營(yíng)來(lái)說(shuō),利用好通知,就能掌握用戶心理,巧妙的將用戶留在產(chǎn)品中。它們甚至有助于與打算放棄產(chǎn)品的用戶建立聯(lián)系并促進(jìn)互動(dòng)。


那么,我們應(yīng)該如何更合理的設(shè)計(jì)通知呢?下面我們通過(guò)「通知的組成部分」以及「通知的使用類型與規(guī)則」來(lái)詳細(xì)做一次拆解。


通知的組成部分


關(guān)于通知的簡(jiǎn)單定義:它是一種吸引用戶注意的功能模式,讓用戶獲悉新事件的信息動(dòng)態(tài)。產(chǎn)品將其發(fā)送給用戶并與用戶產(chǎn)生交流。


因此從這個(gè)定義中我們可以知道,通知有兩種形式,分別是被動(dòng)只讀型和操作反饋型


被動(dòng)只讀型,是指該信息可讀,但不可進(jìn)行操作;操作反饋型,是指用戶可對(duì)該通知進(jìn)行操作,如某寶訂單支付成功后的地址信息確認(rèn)通知。


所以在梳理組件的時(shí)候也要注意掉這個(gè)差異。


1.消息中心

這里的消息中心,是一個(gè)信息匯總中心,但并不一定是信息來(lái)源。意思是,信息來(lái)源可能是有很多用戶在你的文章下面點(diǎn)贊了,而這個(gè)點(diǎn)贊行為被匯總到了消息中心,再用消息中心指引作者去到文章頁(yè)面查看具體詳情。


所以它是一個(gè)匯總表。但也有可能它就是信息來(lái)源點(diǎn),比如一些系統(tǒng)通知,告知要升級(jí),因?yàn)樗鼪](méi)有其他功能可承載,所以只會(huì)在消息中心里出現(xiàn)。


或者類比 iOS 系統(tǒng)的通知中心,如果通知是 App 推送的,那么它會(huì)指引用戶進(jìn)入某個(gè) App;如果通知是系統(tǒng)行為,如勿擾模式,「6:00 前來(lái)電和通知將會(huì)靜音」這個(gè)通知,是只可在通知中心進(jìn)行操作的。想要更改,就需要手動(dòng)打開設(shè)置。


2.通知指示符

它可以是點(diǎn),也可以是計(jì)數(shù)器,只要表明目前消息中心有新的信息就可以。我個(gè)人一直覺(jué)得這就是讓我們多數(shù)人養(yǎng)成強(qiáng)迫癥的罪魁禍?zhǔn)住?


3.信息標(biāo)題

它主要是指該信息來(lái)自于誰(shuí)或?qū)儆谑裁醋宇愋?,比如用戶互?dòng)點(diǎn)贊消息,評(píng)論消息,系統(tǒng)消息等等。用戶可以通過(guò)標(biāo)題來(lái)獲悉該信息類型,再通過(guò)內(nèi)容摘要來(lái)判斷內(nèi)容是否重要。


當(dāng)然,這里的摘要如果過(guò)長(zhǎng),就需要省略處理,引導(dǎo)用戶進(jìn)入消息源或消息中心。


4.推送時(shí)間

推送時(shí)間是一個(gè)看起來(lái)簡(jiǎn)單,實(shí)際上也好像不是很復(fù)雜的邏輯。只要說(shuō)明該通知的發(fā)送時(shí)間即可,但是需要注意的是時(shí)間段問(wèn)題。比如幾分鐘前,幾小時(shí)前,幾天前,這里的邏輯是按照時(shí)間推進(jìn)規(guī)則持續(xù)增加來(lái)告知用戶該消息的推送時(shí)間節(jié)點(diǎn)的。也就是過(guò)得越久,時(shí)間概念就越大。


5.通知圖標(biāo)

上面講到消息類型,我們也經(jīng)常會(huì)在各類產(chǎn)品中發(fā)現(xiàn)不同通知的類型會(huì)匯總在各自的類型下。包括用戶所接收到的信息,通常也會(huì)告知用戶該信息屬于什么類型。有時(shí)候,標(biāo)題可能會(huì)更細(xì),但是用戶通過(guò)圖標(biāo)可以判斷該信息屬于什么類型,甚至都不需要仔細(xì)查看標(biāo)題與內(nèi)容。


但是,并不是所有產(chǎn)品的信息都可以通過(guò)圖標(biāo)來(lái)判斷,有時(shí)候圖標(biāo)只是一個(gè)大方向,如果手機(jī)鎖屏,相對(duì)于用戶來(lái)說(shuō),這條通知只是告訴用戶該信息是由什么產(chǎn)品推送,而并不能指向至該產(chǎn)品的什么類型的信息。所以在使用的過(guò)程中,同樣需要根據(jù)業(yè)務(wù)的場(chǎng)景,謹(jǐn)慎地選擇圖標(biāo)。


6.閱讀指示器

它就像是上面提到的紅點(diǎn),這里指的是進(jìn)入 App 的消息中心之后,所顯示的內(nèi)容。


7.操作行為

這里的操作行為分兩種,分別是 App 外與 App 內(nèi),它們之間的操作邏輯是不同的。iOS 系統(tǒng)通知的清除操作,只是在系統(tǒng)的通知中心將該信息清除,進(jìn)入具體 App 后,這條消息還是會(huì)存在。而在 App 內(nèi)刪除該條信息,則該信息才會(huì)真正消失。


所以從上面可以看到,通知推送,是有兩大類別的,分別是 App 外與 App 內(nèi),它們之間的邏輯關(guān)系與展示形式會(huì)有所差異,需要根據(jù)具體情況進(jìn)行設(shè)計(jì)分析。


8.小結(jié)


對(duì)上面的內(nèi)容進(jìn)行總結(jié),可以得到這樣一幅畫像:

大部分系統(tǒng)或產(chǎn)品的通知組成,都可以通過(guò)此圖概括,唯一不同的是,它們會(huì)隨著不同的業(yè)務(wù)而發(fā)生變化。


比如豆瓣的推送消息告知用戶近期有新的電影上映,那么通知來(lái)源要么是電影模塊的功能詳情頁(yè),要么是通知中心的系統(tǒng)消息;而通知類型就是內(nèi)容更新;詳情則根據(jù)具體內(nèi)容來(lái)組合排列;最后送達(dá)至用戶。


而其中的差別就是,如果是通知中心推送的,用戶點(diǎn)擊之后則是進(jìn)入通知中心列表。如果是具體功能推送的,那么用戶點(diǎn)擊進(jìn)入的就是具體功能頁(yè)面。如下圖所示:

從這里可以看出,通知是有具體模式的。


一旦確定了通知的主要目標(biāo),以及想要解決的問(wèn)題,包括它們?nèi)绾螌?duì)業(yè)務(wù)產(chǎn)生作用以及對(duì)用戶形成吸引力,就可以確定通知的具體樣式了。


在這一節(jié)里只要知道通知的組成部分與通知模式如何指引用戶進(jìn)入 App 即可。后面我來(lái)帶大家理一遍邏輯,以及在設(shè)計(jì)通知時(shí)要注意哪些問(wèn)題。


通知的使用方法


聊完上面的內(nèi)容之后,我相信大家對(duì)通知的組成與使用模式已經(jīng)有了全新的認(rèn)識(shí),但也僅此而已,我們還是不知道一個(gè)優(yōu)秀的通知功能應(yīng)該從哪些方面去提升用戶體驗(yàn)。這里面所包含的不止是表象,還有內(nèi)在的規(guī)則邏輯。所以從這一節(jié)開始,我們仔細(xì)來(lái)梳理一遍。


從我們平時(shí)使用到的,以及上文提到的,可以大概先梳理出幾類常見的通知類型。


1.用戶信息類通知


這種類型的通知有很多,比如微信消息發(fā)送,知乎私信,手機(jī)短信等等,它們主要由用戶主動(dòng)生成發(fā)送至其他用戶被動(dòng)接收,作用就是促進(jìn)用戶與用戶之間的互動(dòng)關(guān)系,以提升用戶使用產(chǎn)品的頻率與時(shí)長(zhǎng)。


這種通知,可給予用戶操作也可不給予操作,不操作就是讀取,并回復(fù);操作就是可對(duì)該用戶的信息進(jìn)行屏蔽、已讀、刪除等設(shè)置。


這是最常見的通知類型,在多數(shù)社交產(chǎn)品與有社交特性的產(chǎn)品里都能看到。


說(shuō)明


之所以給予用戶信息的操作行為,是因?yàn)橛脩粜畔⒖煞譃楦信d趣的與不感興趣的,它主要取決于人。不感興趣的人,頻繁的發(fā)送信息,會(huì)影響用戶對(duì)產(chǎn)品的好感度,畢竟有很多用戶消息并不是用戶想要接收的,所以在社交產(chǎn)品里,用戶可刪除好友,或拉黑好友;在有社交屬性的產(chǎn)品里,用戶可拉黑賬戶,以達(dá)到不被騷擾的訴求。

如果沒(méi)有到達(dá)刪除好友的程度,也可對(duì)該好友的信息進(jìn)行屏蔽,甚至對(duì)該好友信息做已讀而實(shí)際上未讀的處理;或者對(duì)重要信息做未讀而實(shí)際上已讀的處理。


當(dāng)然,用戶還能對(duì)群消息做更復(fù)雜的設(shè)置。這就是產(chǎn)品對(duì)這類通知的一種優(yōu)化方式。


2.系統(tǒng)推送類通知


我們經(jīng)常會(huì)在手機(jī)上收到一種系統(tǒng)類通知,或者在 App 中也會(huì)收到類似的系統(tǒng)通知。大多是關(guān)于系統(tǒng)升級(jí),密碼更新等。


這類通知多數(shù)是用戶被動(dòng)接收,且對(duì)于系統(tǒng)與用戶來(lái)說(shuō)是較為重要的。當(dāng)然也有不重要的,比如 App 更新說(shuō)明的通知,告知用戶新功能有什么變化,或系統(tǒng)更新了什么等等。


對(duì)于這類通知,用戶大多無(wú)法進(jìn)行設(shè)置,因?yàn)樗鼈儽容^強(qiáng)制,沒(méi)有可以商量的余地,類似于告知用戶:我們有新的消息,比較重要,你來(lái)看看,即使你不打算更新或執(zhí)行也來(lái)看下。


說(shuō)明


系統(tǒng)類通知,通常來(lái)說(shuō)較為被動(dòng),要么強(qiáng)制用戶執(zhí)行操作,要么就是提醒用戶系統(tǒng)近期做了更新,或者是一些并不重要的信息提示,比如勿擾模式。


強(qiáng)制類系統(tǒng)通知不能頻繁,否則會(huì)給用戶造成控制欲反制的副作用。類似于本身用戶使用產(chǎn)品需要對(duì)產(chǎn)品享有控制權(quán),現(xiàn)在反而被產(chǎn)品控制了。這是不行的。


3.通用推送類通知


這類通知就是第一節(jié)中提到的那些,比如點(diǎn)贊/評(píng)論,內(nèi)容更新等等,這類通知如果是忠實(shí)用戶,那么或許不會(huì)反感它的頻率,當(dāng)然還是需要適當(dāng)。但如果是普通用戶,那么造成的影響就是直接關(guān)閉該 App 的所有通知。


我們現(xiàn)在的很多人,之所以開始反感通知的主要原因,就是這類通知所造成的。內(nèi)容不斷更新,隨著時(shí)間的推移,每天推送多條對(duì)于該用戶來(lái)說(shuō)無(wú)用的通知。包括只適合一些符合條件的用戶參與的活動(dòng)通知也推送給所有人,那么用戶就會(huì)逐漸對(duì)這類產(chǎn)品的通知失去興趣,造成無(wú)法彌補(bǔ)的損失。


即便像某團(tuán)一樣,經(jīng)常彈出開啟通知的彈框,也依然無(wú)法召喚回用戶。這就是很典型的下場(chǎng)。


說(shuō)明


通用型通知,如果是業(yè)務(wù)很復(fù)雜的產(chǎn)品,就必須建立通知推送的功能模塊,給予用戶進(jìn)行選擇接受哪類信息的權(quán)力。允許用戶進(jìn)行相應(yīng)的設(shè)置,如活動(dòng)類推送可拒絕接收。


在很多產(chǎn)品中都已經(jīng)置入這樣的推送模塊設(shè)置,如下圖。

這類內(nèi)容就是針對(duì)于產(chǎn)品的具體業(yè)務(wù)進(jìn)行細(xì)分。


比如興趣精選,私信消息等做好類別劃分。用戶可對(duì)自己感興趣的通知做選擇性的推送接收。


另外就是,在相同賬戶的不同設(shè)備之間,推送應(yīng)該同步推送與被處理。不能這邊推送了,那邊沒(méi)推送,或者這邊處理了,那邊沒(méi)被處理。


4.智能推送類通知


不知道大家是否有印象,在使用如大眾點(diǎn)評(píng)等產(chǎn)品時(shí),只要你切換了城市,產(chǎn)品就會(huì)推送通知告知用戶該城市有哪些值得游玩的景點(diǎn)與品嘗的美食。


雖然這類通知還算不上多少智能,但至少在用戶群體中是存在這類訴求的。而這類訴求有時(shí)候并不能主動(dòng)感知,因?yàn)橛脩艨赡軙?huì)想不起來(lái)通過(guò)哪類產(chǎn)品來(lái)查找附近美食。當(dāng)這么一條通知出現(xiàn)的時(shí)候,正好解決了用戶的問(wèn)題,反而提升了用戶對(duì)于產(chǎn)品的好感度。


現(xiàn)在很多產(chǎn)品的通知都逐漸智能化,不會(huì)像以前那樣,三更半夜發(fā)來(lái)一條無(wú)關(guān)緊要的通知。而出現(xiàn)這類問(wèn)題的主要原因還是在于產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng),在這方面沒(méi)有下過(guò)功夫,只將通知作為一種普通的工具來(lái)使用。導(dǎo)致用戶開始排斥通知,將其強(qiáng)制關(guān)閉。之后,就很難再讓用戶開啟了。同理心效應(yīng),當(dāng)做這類功能的時(shí)候,可以回想一下自己是如何被其他產(chǎn)品打擾的。


隨著大數(shù)據(jù)的發(fā)展,我相信未來(lái)的通知系統(tǒng)會(huì)更加全面,且能做到千人千面的模式,不過(guò)在此之前,各位產(chǎn)品設(shè)計(jì)師,還需要對(duì)通知下一番功夫才是。


5.小結(jié)


我們還可以繼續(xù)舉例說(shuō)明,但是基本大同小異,所以到這里為止,我再對(duì)上面的內(nèi)容做一次總結(jié),梳理出一個(gè)好的通知應(yīng)該是如何設(shè)計(jì)的。


干擾最小化:通知本身具有強(qiáng)制性和干擾性。它的目的是把用戶的注意力吸引到產(chǎn)品上來(lái),所以要認(rèn)真思考發(fā)送通知的內(nèi)容、時(shí)間、頻率;不要提醒用戶當(dāng)前屏幕上已經(jīng)處于展示狀態(tài)的內(nèi)容;也不要推送與用戶無(wú)關(guān)的系統(tǒng)信息。


跨設(shè)備:當(dāng)用戶讀過(guò)了某條信息,這條信息應(yīng)該不再做展示。同理,用戶也應(yīng)該能夠在其它更適合接收消息的設(shè)備上找到已讀信息。用戶通知應(yīng)該在所有設(shè)備上進(jìn)行同步。


允許設(shè)置:允許用戶在「設(shè)置」中禁止或調(diào)整通知的形式。如案例一,通過(guò)選擇推送內(nèi)容,來(lái)影響接收推送的頻率。案例二,可選消息提醒的形式是紅點(diǎn)+數(shù)字,或僅是紅點(diǎn)。

時(shí)效性:良好的通知應(yīng)盡可能實(shí)時(shí)推送。而不是等這件事情都過(guò)去很久了,才推送給用戶知道。


支持匯總:把同類型的通知合并為一條,并顯示信息未讀數(shù)量。也可以考慮一鍵展開通知,顯示信息詳情。


可操作性:把通知和操作結(jié)合在一起,讓用戶不需要打開首頁(yè)就能對(duì)特定通知進(jìn)行常規(guī)操作。操作應(yīng)該清晰明了,且僅在未重復(fù)默認(rèn)操作時(shí)提供。同時(shí)操作應(yīng)該是有意義、實(shí)時(shí)、和內(nèi)容對(duì)應(yīng)的,并且能讓用戶完成某個(gè)任務(wù)。如案例一,可以在不打開郵件的情況下,直接對(duì)通知進(jìn)行管理、查看和清除。案例二中的操作針對(duì)的是未讀郵件,可便捷地在通知板面進(jìn)行回復(fù)、刪除、標(biāo)為已讀或垃圾郵件。

小結(jié)


對(duì)本篇文章的拓展總結(jié):

1.通知具有召喚屬性,但是頻率過(guò)多就會(huì)變成打擾,所以要注意通知的頻率與內(nèi)容重要性;

2.設(shè)計(jì)師或產(chǎn)品經(jīng)理應(yīng)該將通知的內(nèi)容分類梳理出來(lái),以便維護(hù)或新增必要需求可能需要用到的推送信息。

3.通知一般為兩種類型,一類是推送只讀型,一類是操作反饋型;設(shè)計(jì)師需根據(jù)不同類型的通知做好對(duì)應(yīng)的設(shè)計(jì),針對(duì)具體問(wèn)題具體分析;

4.想要利用好「通知」,也需要對(duì)業(yè)務(wù)有詳細(xì)的了解,再代入本文所列舉的注意點(diǎn),就可以設(shè)計(jì)出一個(gè)體驗(yàn)更佳的通知模式。


通知規(guī)則不會(huì)脫離本篇文章的范圍,所以只要詳細(xì)研讀,必會(huì)有所收獲。


轉(zhuǎn)自:站酷-呆總丶

日歷

鏈接

個(gè)人資料

存檔