首頁

花了很多時間做設(shè)計分析,但對畫稿子沒什么幫助?

ui設(shè)計分享達人

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

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

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

  • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

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

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

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

活動中常見的項目類型

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

迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經(jīng)比較固化的經(jīng)典業(yè)務(wù),或基礎(chǔ)的功能類業(yè)務(wù);探索型項目則是一些全新的業(yè)務(wù)方向,例如下沉?xí)觥⒅辈龅鹊龋瑒偺幱谶M入期或成長初期。

undefined

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

1. 迭代型項目

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

undefined

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

要解決什么問題

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

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

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

undefined

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

undefined

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

undefined

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

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

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

其次是要跳出來從整體來看優(yōu)先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節(jié),有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關(guān)注到整體優(yōu)先級,因此要學(xué)會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

2. 探索型項目

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

undefined

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

確定分析框架

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

undefined

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

undefined

在很多設(shè)計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應(yīng)用。以下是根據(jù)我們?nèi)粘m椖渴崂淼囊恍┏S梅治隹蚣堋?

undefined

縱向深挖如何得到有價值的策略

有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

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

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


文章來源:站酷  作者:大蔥設(shè)計

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

4個案例教會你如何像設(shè)計師一樣解決問題

周周

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

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

周周

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

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

ui設(shè)計分享達人

柵格系統(tǒng)知識點 


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


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

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

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


柵格中的列


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


柵格中的槽


邊距

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


柵格中的頁邊距和靈活邊距


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

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


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


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


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


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


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

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


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


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


響應(yīng)點

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


柵格縮放和堆疊


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


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

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

固定柵格

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


固定寬度柵格


流動或全寬柵格

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


流動?xùn)鸥?


混合柵格

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


混合柵格


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


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

電腦視窗

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


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

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


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


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


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

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


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


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


移動視窗

在移動端使用流動?xùn)鸥?,槽和頁邊距的寬度推薦設(shè)置成16px。因為移動設(shè)備的屏幕分辨率較小,若再分成12個獨立的列、槽和邊距的話,設(shè)計起來也會很麻煩。


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


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


平板視窗

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


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


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


布局樣式

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


單列布局

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


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


雙列布局

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



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


三列布局

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


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

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


側(cè)邊欄固定布局


移交開發(fā)

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


自定義柵格


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


文章來源:站酷   作者:UX辭典

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

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

ui設(shè)計分享達人

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

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


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


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


但我們還是無法抑制點擊圖標的沖動,這僅僅是因為它具有未讀的計數(shù)或紅點提示,即使我們已經(jīng)知道當中的內(nèi)容并不重要。


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


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


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


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


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


通知的組成部分


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


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


被動只讀型,是指該信息可讀,但不可進行操作;操作反饋型,是指用戶可對該通知進行操作,如某寶訂單支付成功后的地址信息確認通知。


所以在梳理組件的時候也要注意掉這個差異。


1.消息中心

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


所以它是一個匯總表。但也有可能它就是信息來源點,比如一些系統(tǒng)通知,告知要升級,因為它沒有其他功能可承載,所以只會在消息中心里出現(xiàn)。


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


2.通知指示符

它可以是點,也可以是計數(shù)器,只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數(shù)人養(yǎng)成強迫癥的罪魁禍首。


3.信息標題

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


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


4.推送時間

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


5.通知圖標

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


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


6.閱讀指示器

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


7.操作行為

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


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


8.小結(jié)


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

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


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


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

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


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


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


通知的使用方法


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


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


1.用戶信息類通知


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


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


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


說明


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

如果沒有到達刪除好友的程度,也可對該好友的信息進行屏蔽,甚至對該好友信息做已讀而實際上未讀的處理;或者對重要信息做未讀而實際上已讀的處理。


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


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


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


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


對于這類通知,用戶大多無法進行設(shè)置,因為它們比較強制,沒有可以商量的余地,類似于告知用戶:我們有新的消息,比較重要,你來看看,即使你不打算更新或執(zhí)行也來看下。


說明


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


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


3.通用推送類通知


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


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


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


說明


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


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

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


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


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


4.智能推送類通知


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


雖然這類通知還算不上多少智能,但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知,因為用戶可能會想不起來通過哪類產(chǎn)品來查找附近美食。當這么一條通知出現(xiàn)的時候,正好解決了用戶的問題,反而提升了用戶對于產(chǎn)品的好感度。


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


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


5.小結(jié)


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


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


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


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

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


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


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

小結(jié)


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

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

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

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

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


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


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

ui組件系列之文本框和表單設(shè)計

ui設(shè)計分享達人

當你在設(shè)計表單時,是否對文本框和表單的規(guī)則有疑惑?本文的一些簡單的規(guī)則將幫助你完成設(shè)計用戶希望完成的表單。

上圖是表單的發(fā)展歷程,由石刻上的表單到紙質(zhì)表單再到電腦上輸入的表單。印刷式的表單已存在多年,我們可以從其設(shè)計中學(xué)到一些技巧。


一、文本框剖析

文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對話框中。文本字段組件設(shè)計應(yīng)為交互提供明確的可見性,使字段在布局中好發(fā)現(xiàn),填充且容易理解。



這些是基本文本字段的重要元素:


1.容器-可交互輸入文本的區(qū)域

2.輸入文本-輸入文本字段

3.標簽文本(標題)-告訴用戶給定表單字段中屬于什么信息

4.占位符文本-是所需信息的描述或示例,在用戶輸入文本后會被替換

5.幫助提示或驗證文本(可選) -提供其他上下文或驗證消息

6.頭部圖標(可選) -描述文本字段所需的輸入類型

7.尾部圖標(可選) —對輸入的文本的附加控制,例如清除,隱藏/顯示等


二、文本框類型

它們大多數(shù)基于基本文本框,為了更好地展示特定類型的信息而做的演變,例如輸入信用卡號的文本框。以下是我們創(chuàng)建的整個UI中最常用的輸入類型的一些示例:

三、使用恰當?shù)妮斎肟蝾愋蛠硎占瘮?shù)據(jù)

為收集的數(shù)據(jù)提供正確的文本框類型,將幫助用戶以正確的格式輸入信息,并避免錯誤,從而使填寫過程盡可能簡單。

四、文本框需要根據(jù)狀態(tài)和用戶的交互來及時變化外觀

可以通過提供視覺上的變化來傳達文本框的狀態(tài)。輸入文本字段可以具有以下狀態(tài)之一:未激活,懸停,激活,禁用,校驗,報錯。大家在做表單設(shè)計時最好的做法就是遵循這些狀態(tài)的變化,不要挑戰(zhàn)已經(jīng)形成的用戶思維模型。

五、選擇最佳的文本框樣式

通常,文本框的標題有三種常用的位置可選擇:頂部,左側(cè)對齊和右側(cè)對齊。采用哪種樣式將取決于表單的主要目標和表單的大小,組件庫以及要設(shè)計的平臺。它們各自具有一些優(yōu)點和缺點。

我已經(jīng)根據(jù)大型設(shè)計研究的研究結(jié)果進行了匯總,最開始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是,同一項研究表明,用戶更喜歡帶有圓角的輸入。

(1)標題左對齊

當用戶不熟悉所要填寫的內(nèi)容時,這是一個不錯的選擇


優(yōu)點:標題易于拓展;充分利用垂直空間

缺點:標題和相應(yīng)的輸入內(nèi)容之間的距離過長,而且不一致的距離會增加文本輸入的完成時間

(2)標題右對齊

與左對齊的標題相比,完成時間快將近兩倍


優(yōu)點:文本的標題和輸入內(nèi)容的位置更緊密,減少了了眼睛的運動次數(shù),從而縮短了完成時間

缺點:難以快速掃描表單并了解所需的所有信息

(3)標題頂對齊

這是在大多數(shù)情況下最快的時間和最全面的選擇。在移動端上效果很好,因為它們不需要很多水平空間。


優(yōu)點:能夠讓用戶單一眼球移動即可了解輸入標題和輸入文本,能夠更快的完成

缺點:需要更多垂直空間

六、文本框的長度應(yīng)與預(yù)期的用戶輸入內(nèi)容長度成比例

為表單中的所有文本框都使用相同的輸入長度會使它們在視覺展現(xiàn)上令人愉悅,但是卻很難完成填寫。

七、占位符文字不能替代標題

輸入信息后文本框內(nèi)占位文本的消失,會對用戶的短期記憶產(chǎn)生壓力。沒有標題,用戶將無法在提交表單之前檢查他們提供的所有信息。如果您需要極簡的表單設(shè)計,則可以使用“Material design”浮動標題的方法。
表單內(nèi)的占位符文本有時會使用戶感到困惑,最好在字段外使用提示文本。


八、幫助用戶填寫表單

  • 使用自動完成功能幫助解決部分查詢功能,在用戶的輸入框中,用戶可以按Enter或“右箭頭鍵”使用它。

    使用自動聯(lián)想值搜索相關(guān)的關(guān)鍵字和建議使用的內(nèi)容列表。列表以下拉彈層形式顯示多個建議列表。

    預(yù)填充字段并使用智能默認值。通常,您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據(jù)最常見的方案進行分析,我們一般可以定義默認情況下應(yīng)選擇的內(nèi)容。

    提供上下文信息。為了用戶做出正確的決定或避免錯誤,用戶在進行轉(zhuǎn)帳時將需要一些其他信息,例如帳戶余額,如果能夠從上下文中獲取這些信息,就請及時給出。

    九、使用實時校驗

   “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性,而不是在用戶提交表單時一次性檢查全部輸入:

  • 驗證消息顯示在靠近輸入的區(qū)域,并一起顯示

  • 不要太過于激進的方式提示錯誤消息,應(yīng)該告訴用戶如何解決問題,而不是責怪他們

  • 當字段在用戶完成輸入之前就被標記為無效時,請避免“提前驗證”

  • 考慮使用“正向校驗”,可以增加一種愉悅感和成就感

十、讓表單看起來更簡潔

(1)減少字段數(shù)

   它將消除視覺和認知負擔,并且看起來更簡單。

  • 不要將全名和日期之類的文本分成多個字段

  • 不要多次詢問相同的信息

  • 使用標簽和提示復(fù)制以盡可能地縮短它

(2)隱藏不相關(guān)的字段

  我們僅展示基本要點,通過逐步顯示信息的方式來幫助用戶管理信息的復(fù)雜性,在用戶需要的時候再展示出來。比如加個開關(guān)按鈕把不重要的信息隱藏。

(3)使用條件邏輯

使用條件邏輯能夠根據(jù)用戶的答案,自動顯示或隱藏某些字段,并可以在表單中t跳過頁面。這種方法不僅可以減少字段數(shù),而且可以使填寫過程更具個性化和對話性。



(4)相關(guān)字段打組

簡化復(fù)雜表單的最簡單方法之一就是開始對相關(guān)字段進行分組。格式塔心理學(xué)中有多種分組原則,可以使項目感覺相關(guān):接近度,相似度,連續(xù)性,閉合性和連通性。將數(shù)十個非結(jié)構(gòu)化字段分組為幾個可管理的集合將顯著提高表單的可用性。

(5)將復(fù)雜的表單分為幾個簡單的步驟

有時即使刪除了所有不必要的內(nèi)容,某些表單也會很龐大。將大型任務(wù)分解為一系列較小的任務(wù)看起來容易得多,并促使用戶將填寫過程進行到最后。

  • 顯示步驟條,以視覺方式傳達用戶的進度,這可以提高滿意度并激發(fā)用戶繼續(xù)填寫的動力

  • 不要過于細化表單,太多的步驟將無濟于事,只會惹惱用戶

  • 對關(guān)鍵信息進行匯總以減輕用戶的焦慮,最后需要進行復(fù)查

(6)避免使用多個列布局

一列布局為用戶創(chuàng)建了一條清晰的完成路徑。使用多列表單布局的后果包括:用戶跳過他們實際要輸入數(shù)據(jù)的字段;將數(shù)據(jù)輸入到錯誤的字段中;或者只是想暫停一下而可能導(dǎo)致放棄。


十一、讓用戶沉浸在表單填寫,盡量少的顯示表單外的功能

如果表單足夠大,可以分成多個步驟,則應(yīng)該為它分配一個單獨的,清晰明確的空間。顯示常規(guī)導(dǎo)航或任何會破壞表單填寫過程的鏈接/按鈕,只會造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。

十二、顯示恰當?shù)逆I盤類型

Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在促進不同類型的輸入。為了簡化數(shù)據(jù)輸入,在編輯文本字段時顯示的鍵盤應(yīng)適合該字段中的內(nèi)容類型。注意鍵盤將出現(xiàn)的位置。為了避免不必要的頁面滾動,請將文本字段放在上方區(qū)域。


十三、停止荒謬的密碼創(chuàng)建設(shè)計

  • 允許用戶取消隱藏密碼,而不是要求他們輸入兩次密碼,這對于生成密碼的應(yīng)用程序也將更有效

  • 始終顯示密碼要求,并顯示用戶在滿足填寫條件方面的進度。嘗試簡化對用戶的要求

  • 使用強度計量條以鼓勵用戶創(chuàng)建更強的密碼


    文章來源:站酷     作者:ZZiUP

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


輕量化設(shè)計總結(jié)

ui設(shè)計分享達人

「輕量化」是近兩年來設(shè)計圈一個比較火的話題,什么是輕量化?從字面意思上來看「輕量」的反義詞就是臃腫、拖沓,反映到產(chǎn)品設(shè)計中就是界面內(nèi)容過載,操作步驟繁瑣。如果非要用一個字來定義,那就是“多”,內(nèi)容多,步驟多。


我們需要清楚,“多”來自于用戶的主觀感受,我們無法給出一個具體的數(shù)據(jù)指標來判定到底是不是“多”。用戶會在什么時候覺得多呢?日常生活經(jīng)驗告訴我,當對方覺得你沒用的時候,你就會顯得多余。如果這個界面中的每一個功能對于用戶來說都是高頻操作,那么用戶是不會嫌多的。所以「輕量化設(shè)計」的主要思路可以歸納為:在用戶不需要你的時候不要出來瞎得瑟。


場景


問題來了:用戶什么時候需要我?首先我們應(yīng)該從功能層面入手,因為產(chǎn)品是一個個功能的組合體。頁面內(nèi)容臃腫問題的源頭是功能過載,在這個問題上,很多設(shè)計師吐槽自己扮演的是一個背鍋俠的角色。其實我也不想在這個頁面里塞這么多東西,但是這些功能我們必須展示給用戶啊,要不然用戶都不知道還有這個功能。


要解決這個問題,我們需要引入「場景」的概念。什么是場景?我們可以將場景理解為「外部環(huán)境」。


外部環(huán)境影響用戶的感知,感知決定了用戶的行為。只有身處于特定的場景,用戶的行為才會被觸發(fā)。在有網(wǎng)場景下,用戶啟動網(wǎng)易云音樂,進入的是首頁。在無網(wǎng)場景下,用戶進入的是我的音樂。因為有網(wǎng),用戶“聽新歌”行為的可能性更大,無網(wǎng)聽已經(jīng)下載好的歌曲。


功能也是一樣,用戶需要這個功能,但并不是每一個場景都需要這個功能。有些比較冷門的功能,用戶只有在特定的場景才會想起使用,那么我們就可以只在那個特定的場景中展示該功能。


我們看一下兩款競品的歌曲播放界面,我們可以很明顯的發(fā)現(xiàn),酷我音樂的界面更加簡潔明了。當然你可能會說,那是因為酷狗音樂給用戶提供了更多的功能。

undefined

其實并沒有,兩款產(chǎn)品提供的功能都是一樣多的。只是酷我音樂做了場景化區(qū)分,以K歌功能為例,酷我音樂的處理方案是:當用戶點擊查看歌詞的時候才會展示“K歌”的話筒圖標,因為當用戶查看歌詞的時候,提醒引導(dǎo)用戶去K歌更加合適。


undefined

這個方案的確可以簡化界面元素,但是也帶來了另一個問題:如果用戶不查看歌詞,那就不知道原來還有k歌功能,無法給K歌功能做到有效的引流。的確如此,沒有一個完美的設(shè)計方案,任何一個設(shè)計方案都無法做到可以兼顧各方的利益。設(shè)計師的作用就是盡可能去發(fā)現(xiàn)和解決界面中最主要的矛盾點,而不是所有的矛盾點。


我們再來看一個歌曲播放界面的例子,現(xiàn)在很多產(chǎn)品都提供了AI電臺功能,所謂AI電臺就是根據(jù)你的聽歌記錄,分析你的喜愛,據(jù)此來給播放你可能感興趣的歌曲。我們之前聽歌需要手動搜索相關(guān)信息,在搜索結(jié)果(歌曲、專輯、歌單等)里查找。AI電臺的出現(xiàn)大大節(jié)省了用戶的操作步驟,那么我們來思考一個問題:與常規(guī)的場景相比,在AI電臺里播放的歌曲,界面上我們應(yīng)該做哪些改動?


undefined

AI電臺模式最大的區(qū)別就是隨機性。因為這歌是根據(jù)你的喜好隨機推薦的,你不知道會聽到這首歌,也不知道這首歌后面有哪些歌。這個就導(dǎo)致了播放模式這個功能很雞肋,蝦米音樂的AI電臺就沒有提供切換播放模式功能。


1 列表循環(huán) :我都不知道列表里有哪些歌曲,怎么循環(huán)?


2 隨機播放 :現(xiàn)在不就是隨機播放嗎?


3 單曲循環(huán):這是唯一一個用戶有需求的場景;


其實AI電臺推薦的歌曲也是有歌單的,用戶點擊播放列表圖標就可以看到。這里提供了切換歌曲模式的功能,讓用戶看到了播放列表才可以選擇歌曲模式。


undefined


入口


當我們確定了功能的最適用場景,我們接下來的任務(wù)就是如何合理的設(shè)計功能的入口。


1)入口分類


不同的層級的功能,在界面中的展示方式是不一樣的。這里我們可以分為三類:常態(tài)類、更多類和隱藏類。


比較重要的功能一般都在界面中有常態(tài)的入口,而優(yōu)先級比較低的功能,我們會選擇使用臨時視圖來承載,入口放到“更多”類按鈕里,用戶需要點擊才能查看。


undefined

優(yōu)先級的功能在界面中沒有實體的入口,需要用戶的手勢來觸發(fā)。例如,在抖音中,用戶長按視頻可以喚起三個功能:保存、收藏不敢興趣。這三個功能抖音做的如此隱蔽,就是希望用戶不去使用。


undefined

1 保存:為什么保存到手機看?來抖音看吧


2 收藏:既然喜歡這個視頻,為什么只收藏不轉(zhuǎn)發(fā)一下,讓更多人看到


3 不感興趣:emmmm


2)入口分類


哪怕是同一個功能,位于不同的場景,我們也要對入口樣式做出調(diào)整。例如,在音頻類產(chǎn)品中,為了方便用戶在不同的場景都可以快速的進入播放界面,會在界面底部加上播放條。


undefined

但是我們也可以發(fā)現(xiàn)上圖中企鵝FM播放條的空間利用率很低,有大面積的留白。那么到了二級頁面,我們可以嘗試修改播放條的樣式,減少對界面內(nèi)容的遮擋。


undefined

類似的處理方式還有淘寶,當用戶在首頁下滑一屏左右,那么底部欄原首頁圖標變成了火箭,用戶點擊火箭可以直接返回至頂部,不用額外新增一個浮動按鈕作為入口。


undefined


總結(jié)


以上就是我個人對于「輕量化」設(shè)計的簡單思考和總結(jié),如果您有不同的意見或者看法,歡迎留言或者加群討論。

轉(zhuǎn)自-站酷

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計  圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

不要讓我思考: 20 句可用性設(shè)計名言

周周

編輯導(dǎo)讀:想要做好一個設(shè)計師,就要多研究優(yōu)秀人士的作品,取長補短?,F(xiàn)在互聯(lián)網(wǎng)的發(fā)達,很容易就能在網(wǎng)上找到相關(guān)的學(xué)習(xí)資料。本文以史蒂夫·克魯格的名著作為引入,分享20句關(guān)于界面可用性設(shè)計的名言,希望對你有幫助。

設(shè)計,以及許多其他領(lǐng)域,都是建立在優(yōu)秀專業(yè)人士的作品和發(fā)現(xiàn)之上的,每個想要成為某個領(lǐng)域?qū)<业娜私?jīng)常尋求指導(dǎo)來學(xué)習(xí)如何把事情做好。專業(yè)導(dǎo)師的各種書籍和文章現(xiàn)在都可以在互聯(lián)網(wǎng)上免費閱讀,讓努力學(xué)習(xí)知識的人很方便的找到。

我們經(jīng)常會分享來自數(shù)字設(shè)計領(lǐng)域最優(yōu)秀專家的名言和睿智的想法。你會在邁克·蒙泰羅(Mike Monteiro)所著《設(shè)計是一項工作(Design Is a Job)》里找到有關(guān)設(shè)計的短暫洞察,奧倫·沃特爾(Aarron Walter)的《為情感而設(shè)計》(Design for Emotion)以及排版大師埃里克·斯皮克爾曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我們要分享的是史蒂夫·克魯格(Steve Krug)的名著《不要讓我思考(Don’t Make Me Think)》中的一組引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合時代發(fā)展,符合實際需要。史蒂夫·克魯格為界面可用性設(shè)定了一些基本原則,并與該領(lǐng)域的專業(yè)人士分享,這使得本書成為 UX 設(shè)計師推薦的最重要的資源之一。

可用性第一定律——“不要讓我思考”描述了關(guān)于網(wǎng)站可用性的要點、案例和見解。創(chuàng)造不需要用戶過多思考的界面設(shè)計,不僅可以解決問題,而且易于使用。這里有 20 句名言,反映了“不要讓我思考”的一些關(guān)鍵點。

1、如果某件事需要大量的時間投入——或者看起來會這樣——它就不太可能被使用。

2、讓每一頁或每一個屏幕都不言自明,就像商店里都有良好的照明:它會讓所有的商品看起來更好。訪問一個不需要我們思考的網(wǎng)站會讓人感覺毫不費勁,相反,為不相關(guān)的事情多花心思會浪費我們的精力、熱情、還有時間。

3、無用的客套話(“happy talk”)都是一種沾沾自喜的宣傳,你可以在蹩腳的小冊子里找到。與好的宣傳文案不同的是,它沒有傳達任何有用的信息,它一個勁的說我們有多棒,而不是描述是什么讓我們這樣棒的。指示說明必須被消滅。

4、可訪問性(Accessibility)非常重要,它不僅僅是正確的做法,而且是非常正確的做法。關(guān)于無障礙訪問,如果沒有引起足夠的重視,你就無法意識到,它能顯著的改善一些人的生活。僅僅通過把工作做得更好就能顯著改善人們的生活,這難道還不夠厲害嗎?

5、另一個讓人困惑的來源是那些看起來不太明顯的鏈接或者按鈕。作為一個用戶,我永遠不應(yīng)該花哪怕一毫秒的時間來考慮這些東西是否可以點擊。

6、最近幾年里,讓產(chǎn)品更加易用成為幾乎所有人的責任?,F(xiàn)在,視覺設(shè)計人員和開發(fā)人員常常要做交互設(shè)計(決定用戶單擊、按下或滑動時下一步會發(fā)生什么)和信息體系結(jié)構(gòu)(確定應(yīng)該如何組織所有內(nèi)容)之類的事情。

7、可用性(Usability)就是確保讓一個能力和經(jīng)驗一般(甚至低于平均水平)的人,能夠想出如何使用并完成任務(wù),而不必費事。相信我:事情就是這么簡單。

8、可用性是有關(guān)人們?nèi)绾卫斫夂褪褂檬挛?,而與技術(shù)無關(guān)。

9、關(guān)于指示說明,你只需要知道一點就夠了:除非“蒙混過關(guān)”多次嘗試失敗,沒有人會去讀它們。

10、你越仔細觀察用戶,并傾聽他們明確表達他們的意圖、動機和思考過程,你就越會意識到,他們對網(wǎng)頁的個人反應(yīng)是基于許多變量的。試圖用一維的“喜歡”或”不喜歡”來描述用戶是徒勞的,而且會適得其反。另一方面,好的設(shè)計會考慮到這種復(fù)雜性。

11、那些設(shè)計網(wǎng)站的人并不在乎讓事情變的明顯和容易,這會削弱我們對網(wǎng)站及其背后公司組織的信心。

12、然而在現(xiàn)實中,大多數(shù)時候我們不會選擇最佳選項,而是選擇了遇到的第一個合理的選項,即所謂的“滿意”(satisficing)策略。

13、大部分的網(wǎng)頁設(shè)計問題(至少是對重要的那些問題來說)都沒有一個簡單的“正確”答案。有效的答案是那些運作良好的、滿足需求的綜合設(shè)計,它們往往經(jīng)過了仔細思考,良好的執(zhí)行和測試。

14、刪掉每頁上一半的文字,然后把剩下的再刪掉一半。

15、設(shè)計師喜歡微妙的線索,因為微妙是復(fù)雜設(shè)計的特征之一。但網(wǎng)絡(luò)用戶通常都很匆忙,經(jīng)常會錯過這些線索。

16、如果你在設(shè)計了很多不同的網(wǎng)站之后只發(fā)現(xiàn)一件事,那應(yīng)該是:幾乎所有的設(shè)計理念——無論一開始多么糟糕——都可以通過足夠的努力,在合適的環(huán)境下變得可用。

17、你的主要職責應(yīng)該是分享你所知道的,而不是告訴人們應(yīng)該怎么做。

18、你的目標應(yīng)該是完全刪除說明文字,讓每項內(nèi)容不言自明,或者盡可能做到這一點。當說明文字絕對必要時,把它們減少到最少。

19、和遵循慣例去設(shè)計相比,設(shè)計師們面臨很大的誘惑去重新發(fā)明輪子。很大程度上是因為他們覺得自己被雇來是要做一些新的、不同的事情,而不是做原有的舊事情。更不用說,來自同事的贊揚、獎勵和高級職位很少是基于“最好地利用慣例”這樣的標準。雖然少數(shù)時候,在重新發(fā)明輪子上花的時間足以制造出新的革命性滾動設(shè)備,但通常情況下,這只是浪費時間而已。

20、如果你想要一個很棒的網(wǎng)站,一定要測試。因為你在這個網(wǎng)站上工作了好幾周,已經(jīng)失去了新鮮感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是測試它。

 

文章來源:人人都是產(chǎn)品經(jīng)理           作者:Alina Arhipova


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

如何產(chǎn)出一個對實際落地更有指導(dǎo)性的的設(shè)計分析

資深UI設(shè)計者

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

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

  • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

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

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

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

活動中常見的項目類型

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

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

undefined

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

1. 迭代型項目

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

undefined

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

要解決什么問題

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

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

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

undefined

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

undefined

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

undefined

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

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

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

其次是要跳出來從整體來看優(yōu)先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節(jié),有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關(guān)注到整體優(yōu)先級,因此要學(xué)會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

2. 探索型項目

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

undefined

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

確定分析框架

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

undefined

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

undefined

在很多設(shè)計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應(yīng)用。以下是根據(jù)我們?nèi)粘m椖渴崂淼囊恍┏S梅治隹蚣堋?

undefined

縱向深挖如何得到有價值的策略

有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

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

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


文章來源:站酷    作者:大蔥設(shè)計


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

設(shè)計師如何構(gòu)建認知體系

資深UI設(shè)計者

文章來源:站酷    作者:兔子大吉


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔