首頁

10分鐘帶你看懂支付寶的交互設計(首頁篇)

周周

支付寶作為一個“簡單、安全、快速”的支付工具,其交互設計與其他產品有何不同呢?不同的原因為何?

這篇文章是《10分鐘帶你看懂支付寶的交互設計》的(一)首頁篇,后面還會繼續(xù)更新。

下面進入正文:

一、了解支付寶的產品定位

體驗操作系統(tǒng):手機iPhone6s;

支付寶版本號:10.1.58;

在開始產品分析前,我們先來看看支付寶的產品定位。

所謂產品定位,包括以下三方面:使用人群、主要功能、產品特色。如圖1所示:

圖1  產品定位

從百度上支付寶的網(wǎng)頁介紹(圖2)和百度百科(圖3)的介紹中,可以看出支付寶的產品定位為:致力于為廣大用戶提供“簡單、安全、快速”的支付解決方案。

那么支付寶的產品定位可分解為:

  • 使用人群:廣大用戶;

  • 主要功能:支付;

  • 產品特色:簡單、安全、快捷。

圖2  支付寶網(wǎng)頁介紹

圖3  百度百科介紹

二、整體分析

當用戶打開支付寶,看到的第一個界面,就是支付寶的歡迎界面,支付寶的歡迎界面很有特點——停留時間很短(因為時間太短,導致我無法成功截屏,所以這里就不放圖了)。為什么支付寶的歡迎界面從來不像其它APP(如抖音等)一樣會有一個廣告呢(如圖4)?

這與我們之前提到的支付寶的產品定位有關,支付寶作為一個“簡單、安全、快速”的支付工具。當用戶打開它時,多數(shù)場景下,都是用于支付,作為一個以“快速”為特色的工具類產品,就限制了它不能在歡迎界面做太長的停留,也不能做廣告(盡管這種廣告的收入很大),因為這樣會造成用戶極大的不舒適。

舉個例子,當你早上急急忙忙的起了床趕去教室上課,在食堂買早餐時,打開支付寶付款,(原本你的內心就很著急)卻還要像其它APP一樣看一段廣告!我想你此時一定會默默的罵馬云,并且心里會慢慢開始對支付寶產生一種厭惡的情緒。

如果你有一天看見支付寶歡迎界面都開始做廣告的時候,請相信我,支付寶一定活不到102歲那一天!

圖4  抖音歡迎界面的廣告

任何一個成功的APP,用戶進去見到的第一個界面,一定是該產品最想讓你看到的界面,也是存放產品主要功能的界面。在支付寶中,它的首頁就是最主要的界面。

從整個支付寶APP的布局來看,底部采用五個Tab導航,分別是首頁、財富、口碑、朋友、我的,當處于相應界面時,底部導航會變成支付寶的品牌“藍”(圖5所示),這個設計有三個作用:

①在視覺上與其它導航相區(qū)別,表示用戶當前所處頁面;

②利用品牌的顏色加強用戶對品牌的認知;

③增強APP的界面一致性。

圖5  支付寶底部導航

在首頁這一界面,從整體看,總共被劃分為了六個板塊,從上至下分別是核心功能區(qū)、擴展功能區(qū)、信息通知區(qū)、活動展示區(qū)、其它產品區(qū)、導航欄(如圖6)。

整個頁面布局清晰,因為是以塊狀來劃分層次,可擴展性也比較強(可以根據(jù)需要劃分頁面層次,同時界面改變也不會太大,不會影響用戶的正常使用)。

在未來,如果支付寶需要發(fā)展其它重量級產品,就可以很方便的加入首頁。(這里教大家一個方法——如何看出一個界面的模塊劃分,只需要把眼睛瞇起來,不去關注內容,而是關注框架,就可以輕易的看見該界面的層次結構了。)

圖6  支付寶首頁層次劃分

三、核心功能區(qū)

我們按照從上到下的順序來分析支付寶的首頁。

核心功能區(qū)位于頁面頂端,是視覺焦點,又有一個支付寶的品牌“藍”作為底色,一下就成為了視覺重心,很顯然這個位置應該存放支付寶的主要功能,也就是支付功能。

支付寶的支付功能包括哪些呢?限于技術,目前支付寶主要通過識別二維碼進行支付,所以掃一掃自然就是最常用的功能,所以放在第一個,付錢、收錢隨后,敢預言,不管以后支付寶的版本怎么改,他的支付功能始終位于首頁,而且是首頁的視覺焦點。為什么此處卡包也置于頁面最顯眼的位置呢?

與支付寶的很多活動有關,因為很多商業(yè)活動都靠贈送各類卡卷來實現(xiàn)(也就是所謂的商業(yè)需求)。將搜索框置于頂層,看似搶了核心功能的風頭,其實不然,設計師巧妙的在這里進行了處理,首先將搜索框的大小變?。ǖ遣挥绊懹脩舻恼|c擊),然后將掃一掃那一欄的圖標變大,將字號也變大,視覺重心依然回到了掃一掃那一欄。但是為什么會將搜索框置于如此明顯的位置呢?

首先隨著支付寶的功能越來越多,由于頁面的第一層級裝不下,就會根據(jù)優(yōu)先級進行排序,將優(yōu)先級靠后的功能放入后一層級,因此很多功能的層級就會比較深。有了搜索框之后,用戶就可以通過首頁的搜索,快速進入用戶需要的功能(用戶需求),另外一方面,又可以在搜索框進行商業(yè)推廣(商業(yè)需求)。

將通訊錄也置于顯眼位置,是支付寶對于社交功能的探索,從此處可以看出,支付寶對于社交功能的渴望。加號打開是掃一掃、收錢、乘車碼、智能管理,將掃一掃置于該層級,可能是為了方便單手操作的用戶,這樣不管哪只手操作,都能方便的進行使用。

四、擴展功能區(qū)

擴展功能區(qū),也就是支付寶擴展業(yè)務或第三方合作方入口,4*3的設計,與上方掃一掃、付錢、收錢、卡包對齊,增加了整個頁面的整齊度,該區(qū)域的圖標、字號,都相應的減弱,避免喧賓奪主。

大家注意看(圖7),最后一個圖標是更多,擴展性極強,只要有第三方想和支付寶合作,馬云只需要增加一個廣告位,然后笑著用自己的支付寶收錢就好了(我猜后期版本,支付寶會把“更多”這個按鈕做的比其它按鈕更搶眼一點,因為這是一個很大的流量入口,能夠滿足很多商業(yè)需求)。同時,該區(qū)域還有一個很好的交互方式,當用戶進行長按圖標,就可以進行調節(jié),給了用戶自主權。

圖7  首頁—更多

五、信息通知區(qū)

在信息通知這一欄,當有新的信息時,左邊的螞蟻會拿著一個信封微微擺動,不注意根本看不見,但是當你觀察到了,你就會覺得好可愛,支付寶好用心啊,心里默默就會給支付寶一個好評,這就是情感化體驗,給用戶一個小驚喜。同時右邊有一個小紅點,會誘惑你去點擊,去閱讀信息,當你閱讀了信息之后,就只有螞蟻的觸須在動,信封就消失了(見圖8)。

圖8  信息通知區(qū)

六、活動展示區(qū)

在活動展示欄(圖9),雖然這個條目已經(jīng)處于視覺中心以外,但是,聰明的設計師絕不會浪費任何一個可以利用的界面,于是設計師就利用輪播的圖片來吸引你的眼球,輪播的好處在于,一方面可以播放多個廣告(擴展性也比較好),另外一方面運動的物體可以吸引用戶的眼球(這個原理源于在古代我們的祖先為了安全,總是會關注到運動的物體,這也就是為什么大多數(shù)網(wǎng)頁中的廣告都采用動畫的形式,就是為了吸引你的眼球,去點擊它。

圖9  活動展示欄

七、其它產品區(qū)

其它產品區(qū),就是一些活動和商業(yè)推廣的入口(這就純屬于商業(yè)需求,為別的產品引流)。

說一下這里的設計吧,這里的“惠支付”字號比上面都還要大,是不是會搶了風頭,答案是——不會,因為這已經(jīng)是頁面底端了,如果再不通過這種方式來強調這個版塊,可能用戶根本就看不見了。

同時,設計師利用親密性原理——在視覺上挨得近的我們會認為是一組,而沒有采用實線來分割,使整個界面簡約了不少(圖10)。

圖10  “惠支付”

在首頁,為了讓用戶知道下面還有內容,故意漏出一半的內容,告訴用戶下面還有內容,同時,當整個頁面下拉時,掃一掃、付錢、收錢、搜索,加號的圖標就會置于頁面上方,驗證了我之前分析的一些結論(核心功能始終置頂顯示、始終放在用戶一眼就能看見的地方),當滑到低端時,一句文案“我是有底線的”,讓人感覺這個APP還有一點人性、俏皮可愛,同時明確的告訴用戶該頁面已經(jīng)結束了。

可能是因為支付寶是塊狀的結構,為了避免發(fā)生誤觸,所以進行頁面切換時,并不支持左右滑動切,只能通過下方Tab導航進行切換。

八、總結

從對支付寶的首頁界面進行分析,可以看出,在進行交互設計時,不僅要重視用戶體驗,同時要兼顧商業(yè)需求(當然還有技術,但是這里我不做表述),在兩者發(fā)生沖突時,要考慮兩者的優(yōu)先級和重要性,綜合考慮,尋求一個最佳點。

比如歡迎界面的廣告,支付寶就永遠不能做,因為這樣做下來用戶體驗會很差,可能會流失一大批用戶,但是支付寶可以在APP內接入廣告來實現(xiàn)商業(yè)需求,這就是考慮用戶體驗、商業(yè)需求之后做出的決定,從而設計的界面,是一個很好的案例。

很多時候,交互設計更像是做減法,知道哪些該減去,而不應該做加法,把所有功能胡亂疊加,導致用戶體驗極差。用戶體驗差的產品,商業(yè)價值一定是無法實現(xiàn)的。

當然,除了像12306這種強勢的APP……

文章來源:人人都是產品經(jīng)理     作者:交互設計汪

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

用超多產品,解構今日頭條設計背后的邏輯

資深UI設計者

今日頭條的出現(xiàn)顛覆了傳統(tǒng)新聞產品(如網(wǎng)易、新浪和搜狐新聞)。

傳統(tǒng)新聞依靠著編輯人員的推薦,將新聞觸達給用戶,而今日頭條則依靠著新聞算法,拋棄傳統(tǒng)人工分發(fā)的思路,使分發(fā)效率數(shù)以萬計的提升,其迅速崛起,成為頭部新聞資訊產品。

今日頭條作為新聞信息流的頭部產品,里面的設計細節(jié)和設計邏輯值得我們思考和分析。

信息流樣式

什么是信息流?信息流有兩部分組成,信息流=信息+流。

信息指的是內容,這些內容可以是新聞、視頻、圖片等,所呈現(xiàn)的樣式多為列表或卡片。

流指的是瀑布流,可以無限滑動瀏覽。

所以信息流就是可以無限滑動瀏覽內容信息。

信息流的樣式的好壞,會直接影響到信息的展現(xiàn)效率和點擊率,從而影響到用戶獲取信息的效率和整體閱讀時長。

下圖為今日頭條首頁推薦頻道的信息流:

用超多產品,解構今日頭條設計背后的邏輯

將信息流樣式進行簡單分類,使用最多的四種樣式為純文、左文右圖、短內容、大圖視頻。如下圖所示:

用超多產品,解構今日頭條設計背后的邏輯

純文樣式用于新聞中沒有圖片的情況,當文章中沒有圖片時,這時候采用改樣式。列表含有:標題、來源、評論數(shù)、發(fā)布時間。

對于含有圖片時候,采用左文右圖樣式。目前新聞對于含有圖片的列表樣式,一般有3種分別為:左文右圖、左圖右文和三圖。

左圖右文的樣式,強化圖片,弱化標題。對于新聞資訊來說,圖片無法準確的表達其新聞資訊的內容,所以這種樣式目前沒什么產品使用。

目前市面上絕大部分產品都采用左文右圖,例如今日頭條、網(wǎng)易新聞、騰訊新聞、新浪新聞等。只有是搜狐新聞采用左圖右文。

用超多產品,解構今日頭條設計背后的邏輯

三圖則通過圖片吸引用戶點擊查看,更加通過圖片引導用戶點擊,好處是可以提升點擊率,但是整個信息流顯得亂,影響用戶閱讀。

用超多產品,解構今日頭條設計背后的邏輯

和網(wǎng)易相比,頭條信息流閱讀起來更加舒服,視覺壓力減少,這是基于今日頭條三圖樣式占比很少,如下圖所示,網(wǎng)易新聞信息流插入三圖樣式導致整個信息流雜亂。

用超多產品,解構今日頭條設計背后的邏輯

對比下網(wǎng)易新聞和今日頭條信息流樣式,如下圖所示:

純文,今日頭條的標題顏色更深,網(wǎng)易的相對而言淡一些。頭條的列表高度比網(wǎng)易的高,這意味著,頭條的屏幕展示條數(shù)比網(wǎng)易新聞的少,但是整體的空間感和留白呼吸感更舒服。同時今日頭條含有發(fā)布時間,使得用戶觀看新聞資訊時,能夠感知新聞的實時性。

用超多產品,解構今日頭條設計背后的邏輯

左文右圖,頭條的列表比網(wǎng)易的要高一些,對比來看,頭條的標題更加明顯,圖片含有圓角半徑,使得頭條整體看上去更舒服。

用超多產品,解構今日頭條設計背后的邏輯

大圖視頻,兩者的區(qū)別不大,依然是標題文字顏色、封面圓角和發(fā)布時間的差異性。

用超多產品,解構今日頭條設計背后的邏輯

小結:

頭條流整體的空間感、留白,標題顏色對比做的比較好。

留白相對于網(wǎng)易更多一些,相同的屏幕空間,展示的內容信息會少一點,屏幕展示效率會低一些。但用戶在閱讀過程中舒適度更強,同樣的情況下用戶的閱讀時長會變長。

信息流分發(fā)

什么是信息流分發(fā)?通過一定的設計策略,將用戶的流量合理的分配到其他各個地方,從而達到產品的設計目標,促進流量利用最大化。提升流量最大限度的轉化,獲得更大的商業(yè)化價值。

今日頭條的信息流主要包含5個模塊:置頂模塊、資訊列表、廣告模塊、短內容、其他功能模塊的卡片入口。如下圖所示:

用超多產品,解構今日頭條設計背后的邏輯

推薦流頂部的置頂內容,最多置頂兩條,這里是因為相關政策原因。

在正常信息流第一條之后,插入廣告,為平臺做商業(yè)化營收。之后就會根據(jù)用戶的閱讀習慣,給用戶推薦信息內容,并時不時的插入廣告等。

今日頭條沒有編輯運營,所以幾乎所有的新聞都來自于機器算法。少了編輯人員的人工運營,使得今日頭條有巨量的內容按照不同用戶的閱讀習慣推薦用戶不同的內容。

搜索欄

在新聞信息流產品里,搜索欄所承接的使用場景主要有兩個。一個是提供搜索新聞功能,通過關鍵詞對當前或過去的新聞進行搜索。

另一個是在搜索模塊提供熱搜新聞,提供用戶閱讀。

那么如何提升搜索欄的點擊次數(shù)。今日頭條將熱搜新聞以提示語的形式展示在搜索欄滾動,吸引用戶。同時為了更大限度的展示新聞條數(shù),采用一排兩個的設計,保證的提升點擊率。

用超多產品,解構今日頭條設計背后的邏輯

用戶點擊搜索框之后,搜索框里面內置第一條熱搜關鍵詞。用戶可通過鍵盤上的搜索,進行搜索。也可以點擊搜索欄下方的兩個熱搜新聞進行搜索查看。

短視頻

視頻標題內置于播放器中,這樣的好處可以減少卡片高度,讓視頻曝光量提升,缺點是用戶如果想看視頻標題介紹時,則需要點擊下播放器,標題才能再次出現(xiàn)。

用超多產品,解構今日頭條設計背后的邏輯

標題置于播放器里面,頭條可以展示2.5條,而好看視頻將標題置于外面只能展示2條,如下圖所示:

用超多產品,解構今日頭條設計背后的邏輯

對于廣告業(yè)務來說,收入的一個重要指標則是廣告曝光量,為了提升廣告的收入,則必須降低視頻高度,使得廣告曝光效率得到提升,以此提升收入,所以頭條將標題放置于播放器里面符合商業(yè)目標,但是不符合用戶目標。

小視頻

小視頻的布局設計大致有兩種,一種是抖音式布局,采用頭像和操作項位于右側。這樣的好處是,視頻的互動量很明顯的展示出來,可引導用戶互動。但對視頻的內容有一定遮擋影響。

另一種是好看視頻式布局,將頭像昵稱、操作項放在底部,弱化視頻的互動數(shù)據(jù)。讓用戶專注于視頻內容。

用超多產品,解構今日頭條設計背后的邏輯

今日頭條的小視頻采用和抖音一樣的布局。頭像和操作項放于右側。但是為了引導用戶評論,在界面底部加入了輸入框,引導用戶評論,為了讓用戶更加方便的看評論。上滑手勢變成了調起起評論。

用超多產品,解構今日頭條設計背后的邏輯

短內容流

推薦流里面的短內容(微頭條),點擊進入短內容feed流。而非短內容詳情頁。用戶如果想看詳情,那么需要用戶再次點擊。

用超多產品,解構今日頭條設計背后的邏輯

這種設計明顯體驗不好,估計產品為其他短內容導流。這樣的交互設計,可以使得整體的短內容流的曝光量提升好幾倍。

這種做法犧牲了體驗,用戶如果需要看詳情,則需要連續(xù)點擊兩次。這是為了業(yè)務指標作出犧牲的設計。

文章來源:優(yōu)設    作者:Echo的設計筆記 


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

認知偏差與UX設計(設計過程中如何消除偏差)

周周

偏差經(jīng)常不知不覺滲入我們的設計。通過了解、消除這些認知偏見,可以幫助我們改善用戶體驗和服務質量,確保決策的一致和中立性。

文章來源:站酷

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

學會「交互設計五要素」,幫你更快Get到設計關鍵點! 我要投稿

資深UI設計者

B端浪潮下設計師的「尷尬」

供應鏈資源整合是企業(yè)發(fā)展態(tài)勢。企業(yè)對內部多崗位協(xié)作、企業(yè)與企業(yè)間的協(xié)作效率有更多訴求。

企業(yè)級服務系統(tǒng)的智能在線處理、數(shù)據(jù)準確、信息安全等特征,成為企業(yè)實際作業(yè)的得力助手。(以下簡稱B端)

系統(tǒng)提供商也便對業(yè)務型產品、設計、開發(fā)、運營等人才有更多需求。

在C端浪潮中,設計師通過創(chuàng)造用戶流暢和驚喜的體驗,發(fā)揮了顯而易見的價值。

然后B端系統(tǒng)的業(yè)務復雜特性,普遍認知產品經(jīng)理、開發(fā)會體現(xiàn)更大的價值。

設計師作為中間角色,難免「尷尬」,甚至淪為產品經(jīng)理原型的高保真繪制人員,缺少發(fā)言權,或初次接觸對海量信息無從下手。究本質原因:

未直接接觸業(yè)務方和用戶,無法對需求場景有深入的了解,缺少系統(tǒng)性設計分析、設計判斷能力

我在幾年的實戰(zhàn)中,運用辛老師 「交互設計五要素」 基礎原理,融合于B端業(yè)務體系,形成一套自己的思維圖譜。(以下簡稱五要素)

從「五要素」出發(fā),會更快速地get到關鍵設計點,抱著開放的態(tài)度與產品討論方案,總會愉快地達成一致,順利對接開發(fā)。

B端「五要素」詳解

就像我們寫小說「講故事」一樣:時間地點人物、有什么目標、使用什么工具,完成什么事情,故事才完整?;贐端實際業(yè)務場景的五要素,阿飛解說如下:

1. 用戶-角色、權限

角色:

老板、運營、銷售、物流、采購、庫管、財務等(不同崗位日常事項不同)

權限:

主子賬號(涉及到模塊間的操作權限、數(shù)據(jù)權限)

2. 目的

用戶目標:

B端一般是具有明確的作業(yè)目標,更地完成工作。老板一般希望節(jié)約人力成本,且可即時響應客戶需求

商業(yè)目標:

為客戶賦能、提升下單率、支付率、新業(yè)務滲透力、裂變等

業(yè)務目標:

產品會不斷的迭代,了解當下需求中的業(yè)務目標

設計目標:

基于以上目標,設計需符合用戶思維習慣,提高處理效率,同時避免誤操作等

任何場景下,人的行為都是有「目標動機」

當以「目標」為出發(fā)點,可以增強設計判斷力,輸出有效方案。另外真正有價值的商業(yè)目標一般都是和用戶終極目標所吻合。

3. 場景

時間、地點是場景的必要組成

When:

隨時隨地在線或工作日期間,如:售后客服需要隨時在線;財務人員一般工作日處理任務

Where:

辦公室、倉庫、戶外等。需考慮線上線下結合,系統(tǒng)是為用戶的線下作業(yè)場景服務

4. 工具或媒介

臺式電腦、筆記本電腦、手機、平板、掃碼槍、PDA、打印機、肢體、智能運輸車等

互聯(lián)網(wǎng)媒介又包含web網(wǎng)頁端,web客戶端,小程序,H5,App

系統(tǒng)功能承載在媒介中,媒介承載在實際作業(yè)下使用的工具,存在多終端配合使用。比如倉庫移動作業(yè)時,會使用到平板進行盤查核對等。

5. 行為

需要完成什么事?通過典型的任務流分析是否可達到目標

學會「交互設計五要素」,幫你更快Get到設計關鍵點!

△ 倉庫移動作業(yè)場景

「五要素」帶來的機遇和價值

B端復雜業(yè)務下,設計師主動了解用戶實際的場景后,五要素作為必需思考元素,經(jīng)過實戰(zhàn)驗證,帶給設計師的機遇價值至少有2方面:

1. 對設計師自身:

有利于設計分析、判斷思維體系的完善,考慮更全面;所輸出的方案符合用戶思維和習慣,更容易得到各方的認可

2. 對于業(yè)務價值

可作為考量產品方案可行性的判斷準則
另外,產品原型一般基于「功能」本身,而設計師從用戶實際場景規(guī)劃用戶的任務流,可以優(yōu)化產品邏輯,補全缺失場景,也會給予創(chuàng)造性解決方案

舉個實戰(zhàn)栗子

比如「開發(fā)票」功能 :

  • A購買B的服務后,系統(tǒng)會統(tǒng)計時間段內訂單金額;
  • A可向B申請開發(fā)票,B接收到申請工單
  • B線下開票后,上傳發(fā)票憑證,單據(jù)變成已完成狀態(tài)(系統(tǒng)不對接發(fā)票打印接口)

在需求評審中,針對于「A向B申請開票,A撤銷申請不需要B操作同意」這點,我提出建議:「需要B線上同意」

首先確實是要避免無謂的用戶線上流程操作,但針對這點,我分析如下:

  • 用戶是財務人員,「開發(fā)票」是其重要嚴謹?shù)墓ぷ魇马椫?
  • 線上線下場景結合。B看到A的申請單據(jù),極有可能B線下已開發(fā)票還未錄入系統(tǒng)。
  • 此時申請取消開票,若不需要B同意/拒絕,會造成糾紛,平臺需要負責。

所以「A撤銷申請B需要線上操作同意或拒絕」

學會「交互設計五要素」,幫你更快Get到設計關鍵點!

△ 打印發(fā)票

以「五要素」的分析思維的表述,最終與產品、技術達成一致。

在設計中,考慮到「A申請撤銷」的單據(jù),對于雙方都是需要優(yōu)先確認和處理的。所以除有即時消息通知外,列表中我做了2點設計:

  • 會把這批單據(jù)使用淺紅色底,起到提示作用
  • 優(yōu)先放在分頁列表最前面

(若不這樣,在分頁列表中特殊單據(jù)很有可能從第二頁后才出現(xiàn),用戶都發(fā)現(xiàn)不了)

學會「交互設計五要素」,幫你更快Get到設計關鍵點!

△ 狀態(tài)操作參考框架示例-原創(chuàng)

總結

回顧下B端交互設計五要素

  • 用戶:角色、權限
  • 目標動機:商業(yè)、業(yè)務、用戶、設計,
  • 場景:什么時候?在哪里?
  • 工具或媒介:作業(yè)場景中使用各種工具
  • 行為:基于用戶任務流的行為設計

設計師的分析、判斷能力是非常重要,五要素則作為系統(tǒng)性的思維支撐。

B端浪潮中,設計師仍有很大的機遇和價值。基于五要素分析,會對業(yè)務有所優(yōu)化和補充,或提出創(chuàng)造性的解決方案。

設計不僅是一種技能,而是對事物本質的感知和洞察能力

交互設計五要素不僅對設計師有幫助,同時對產品、運營等人員同樣具有價值。

文章來源:站酷    作者:Aber UX設計



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


超贊 時尚簡約 手機APP界面UI設計欣賞 - 藍藍設計(十一)

前端達人

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優(yōu)秀并富有創(chuàng)意的交互作品,為你的產品設計注入靈感。

WechatIMG78.png



WechatIMG102.jpeg

jhk-1589856834298.jpg

jhk-1589856847369.jpg

jhk-1596893249060.png

jhk-1596893316552.jpg

jhk-1596893336786.jpg

jhk-1598335311209.jpg

jhk-1599010550962.png

jhk-1599010555618.png

jhk-1599010562811.png

jhk-1599010576450.png

WechatIMG78.png

WechatIMG79.png

WechatIMG80.jpeg

WechatIMG81.png

WechatIMG82.png

WechatIMG100.png

WechatIMG101.pngWechatIMG102.jpeg

WechatIMG103.jpeg

WechatIMG104.png

--手機appUI設計--

 (以上圖片均來源于網(wǎng)絡)



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



  更多精彩文章:

       手機appUI界面設計賞析(一)

       手機appUI界面設計賞析(二)

       手機appUI界面設計賞析(三)

       手機appUI界面設計賞析(四)

       手機appUI界面設計賞析(五)

       手機appUI界面設計賞析(六)

       手機appUI界面設計賞析(七)

       手機appUI界面設計賞析(八)

      手機appUI界面設計賞析(九)

       手機appUI界面設計賞析(十)



關于導出功能的設計與思考

資深UI設計者

編輯導語:導出功能我們經(jīng)常能夠使用到,看似一個很簡單的功能,實則在設計的過程中需要考慮很多的因素。本文作者對導出功能的全過程進行了思考,為我們分析了兩種解決方案,拆解了導出前和導出時的設計,并且進行了總結。

一、引言

功能(百度釋義):功能是一個漢語詞語,拼音為gōng néng,意指事物或方法所發(fā)揮的有利作用;效能。

綜合以上釋義,我們再從產品的角度對其理解:功能的好壞不僅僅關乎其本身,更重要的要看是否為解決實際問題而服務。

那導出功能,解決了什么樣的問題?我們先來看一個場景。

小A作為一名銷售人員,需要每月向領導匯報一次銷售情況,為了更直觀的讓領導看到銷售情況,小A要對銷售訂單數(shù)據(jù)進行不同維度展示與分析。而目前系統(tǒng)只能查看訂單列表與銷售總額,不支持不同維度的數(shù)據(jù)分析。

從場景中我們可以看到這樣一個問題,由于系統(tǒng)只能查看訂單列表與銷售總額,不支持更全面的數(shù)據(jù)分析,導致小A每次向領導匯報前,只能人工將一個月近5000筆的訂單(此處不考慮后續(xù)不斷增加的訂單量)統(tǒng)計在excel中,從客戶維度計算出銷售額、銷售量,完成客戶維的銷售情況分析。

從產品SKU維度計算出銷售額、銷售量,完成產品SKU維銷售情況分析,導致小A的工作效率很低,同時人工抄錄導致數(shù)據(jù)錯誤的的情況也常會出現(xiàn),最終導致數(shù)據(jù)分析結果錯誤。

針對該問題,我們深入思考一下,小A想要進行更全面的數(shù)據(jù)分析,可以采用以下2種解決方案:

  1. 新增銷售數(shù)據(jù)分析頁面,如使用銷售額排行榜表示客戶貢獻值高低、使用產品SKU的銷售量餅狀圖表示單品的受歡迎程度等;
  2. 導出銷售數(shù)據(jù)到excel,通過excel的數(shù)據(jù)透視功能完成客戶貢獻值分析、單品的受歡迎程度分析等。

二、解決方案分析

目前我們有兩種解決方案可供選擇,那我們采用哪一種解決方案會更好呢?

1. 方案假設論證

1)采用“新增銷售數(shù)據(jù)分析頁面”的解決方案

通過與小A的繼續(xù)溝通發(fā)現(xiàn)數(shù)據(jù)分析的需求并不穩(wěn)定,處于變化的狀態(tài)。當依據(jù)小A的需求完成分析頁面后,過了一段時間發(fā)現(xiàn)產品隨著季節(jié)變化導致銷售額也不穩(wěn)定,從時間維度的分析數(shù)據(jù)沒有參考價值,可能要舍棄這種分析方式。

此時我們發(fā)現(xiàn),小A的需求可持續(xù)的時間極為短暫,不足以支撐一個長期存在的功能,但已經(jīng)將其實現(xiàn)為功能,則意味著功能白做了或沒有產生與成本對應的價值。

2)采用“導出銷售數(shù)據(jù)到excel,通過excel的數(shù)據(jù)透視功能完成數(shù)據(jù)分析”解決方案

導出銷售數(shù)據(jù)到excel,可以規(guī)避因手動抄錄導致的數(shù)據(jù)分析結果錯誤問題,同時也會節(jié)省抄錄數(shù)據(jù)的時間,提高小A工作效率。

數(shù)據(jù)導出后,小A可以通過excel的數(shù)據(jù)透視功能或者其他第三方軟件完成定制化的數(shù)據(jù)分析,即使不開發(fā)數(shù)據(jù)分析功能,也可以滿足小A的“更全面的數(shù)據(jù)分析”需求。

例如,當小A導出如下圖所示的數(shù)據(jù)后:

小A第一步可以先完成不同月份的匯總,在表中添加“月份”字段,添加公式為“=MONTH(A2)”;

第二步:再點擊表格中任意單元格–插入–透視表–新建工作表,將省份拖入數(shù)據(jù)透視表字段的【篩選器】,將月份拖入【行】中,將A、B、C、D產品銷售額(元)拖入【值】中;將行標簽改為月份,每個字段以求和方法計算并修改字段名稱。

第三步:選中透視表中數(shù)據(jù),調整格式為加千分位逗號,保留0位小數(shù)。

第四步:為了讓數(shù)據(jù)展現(xiàn)可視化,插入透視圖。

通過公式篩選、透視表、透視圖的使用,小A可以點擊查看不同地區(qū)、月份、產品的分類匯總數(shù)據(jù),可以很直觀地反映出時間維度的銷售情況、不同地區(qū)的銷售情況、很好地為產品選擇、地域選擇做出數(shù)據(jù)依據(jù)支撐。

數(shù)據(jù)分析功能會從數(shù)據(jù)源、數(shù)據(jù)處理、數(shù)據(jù)的可視化來實現(xiàn),而Excel的透視表對應了數(shù)據(jù)明細(數(shù)據(jù)源),公式能夠完成較多的數(shù)據(jù)計算任務(數(shù)據(jù)處理)。

透視圖可以直觀、清晰的展示各類產品在不同月份、不同地區(qū)的銷售情況及總的銷售情況分析,為產品布局提供指導性參考依據(jù)(數(shù)據(jù)可視化)。

另外當小A從數(shù)據(jù)透視圖看到某個月份銷售額過高,可以直接點擊查看透視表中的數(shù)據(jù)明細是否存在錯誤,當小A想查看每個產品銷售額的占比,可以新建數(shù)據(jù)透視表并將透視圖切換成餅狀圖查看。

由此可見,用Excel來做數(shù)據(jù)分析不僅可以很靈活的滿足需求,而且還很實用、很方便,也不會因功能的限制導致對數(shù)據(jù)無法分析。

2. 方案選擇

通過以上論證,我們發(fā)現(xiàn),既要能夠解決問題又要支撐一個長期存在的功能,還要用較低成本以及最快的方式來完成,我們采用最佳的解決方案:“導出”。

三、導出功能設計

既然已經(jīng)明確最佳解決方案是“導出”,那接下來就從導出的全生命周期看看,如何設計導出功能?

1. 導出前設計

1)明確導出數(shù)據(jù)限制

無論當前的系統(tǒng)數(shù)據(jù)量是多少,建議都要做導出條數(shù)限制。

因2003版的excel 一個sheet表最多導出65535條數(shù)據(jù),2007版的excel是10萬4000多條。如果不設限,當用戶導出的數(shù)據(jù)量超過excel單個sheet的數(shù)據(jù)量時,會出現(xiàn)導出失敗的情況,影響用戶的正常使用,且產生對系統(tǒng)的不信任情緒。

那應該限制到多少條數(shù)據(jù)?

我們先來了解一下導出的技術原理,當用戶點擊導出后,數(shù)據(jù)會被以excel的形式下載到服務器,服務器再通過網(wǎng)絡將文件發(fā)送給用戶。

在這個過程中,導出條數(shù)受限制的原因一個是服務器性能,另一個是用戶的電腦性能以及所使用excel版本,在實際產品設計時,根據(jù)實際情況,制定一個合理的數(shù)據(jù)限制即可。

回到開頭的場景中,用戶不僅要導出數(shù)據(jù)還要做數(shù)據(jù)透視表,假設用戶使用的03版excel,導出30多個字段,使用大量excel公式,最穩(wěn)妥的是限制到1萬條數(shù)據(jù)以內。

做了一組極限測試數(shù)據(jù)供大家參考,使用一臺2核4G的服務器、1個用戶使用、導出條數(shù)是1048576條(導出最大條數(shù))、導出3個字段、使用2010版excel,導出后當使用一個sum公式時,出現(xiàn)了如下圖的錯誤,導致excel異常退出。

2)明確導出格式

數(shù)據(jù)導出格式有.xls和.csv,.xls是二進制的文件用excel才能打開;.csv是文本文件,用記事本就能打開。而當前用戶導出數(shù)據(jù)后要進行的是數(shù)據(jù)分析,故只需支持.xls導出。

3)明確導出需求

導出一個excel一個sheet,還是一個excel多個sheet?

考慮到用戶導出數(shù)據(jù)后要對訂單數(shù)據(jù)進行分析,可以與用戶明確是否需要按某一維度如客戶維度將數(shù)據(jù)拆分成多個sheet,減少用戶操作數(shù)據(jù)的時間以便能把更多精力放在數(shù)據(jù)分析。

如果用戶不需要按照某一維度拆分數(shù)據(jù),則采用導出一個excel一個sheet的方式。

表頭是否需要增加序號列?

當用戶導出訂單數(shù)據(jù)后,為了讓用戶準確操作某一行數(shù)據(jù),需要有唯一代表一行數(shù)據(jù)的標記,而在訂單導出前是以數(shù)據(jù)庫的主鍵來標記,對于導出后的訂單,則需要自動增加序號列方便用戶操作。

是否有內容需要用顏色標注區(qū)別?

在導出訂單數(shù)據(jù)中,為了快速掌握銷售情況,有些數(shù)據(jù)是需要特別關注的、而有些不需要。因此,可以使用顏色標注來做區(qū)別,讓查看人員快速找到自己想要的數(shù)據(jù),如可以標注總計快速查看總銷售額。

是否需要合并單元格?

對于導出后進行數(shù)據(jù)分析,不建議使用合并單元格,因excel中合并單元格后僅保留左上角的值如下圖所示,這樣會使得篩選出現(xiàn)錯誤,也影響批量的公式使用導致透視表無法分析。

如果導出后只查看數(shù)據(jù),可以考慮使用合并單元格。

2. 導出時設計

1)是否需要導出維度

百度釋義:維度是事物“有聯(lián)系”的抽象概念的數(shù)量,如時間維度是以時間作為描述、表達變量的度量尺度。

導出維度是指的按照特定場景下,導出以某個字段為主導數(shù)據(jù)且與該字段相關的其他字段數(shù)據(jù)。

一般來說,財務和倉庫的導出業(yè)務場景不同,財務需要以訂單維度導出,倉庫需要按商品為維度導出,如果無需導出維度,則不需要過度設計。

2)設置表頭導出字段

由于訂單的一條記錄數(shù)據(jù)字段會很多,包括:訂單號、銷售類型、客戶名稱、產品名稱、數(shù)量、單價、收貨人、聯(lián)系電話、賬期、發(fā)貨時間、預約到倉時間、發(fā)貨基地名稱、發(fā)貨方式、合同折讓率、應收款、已收款、未收款、產季等近30個字段。

而訂單分析時,收貨人、聯(lián)系電話、發(fā)貨時間等字段則無需導出。

因此選擇字段導出,可以讓客戶能夠更快速使用并完成分析。導出和查詢均要使用篩選,但呈現(xiàn)結果的方式不同,兩者的使用場景是可以借鑒的,建議可以放置篩選區(qū)。

3)是否需要支持選擇行導出

一般來說,導出數(shù)據(jù)為全量數(shù)據(jù),如果用戶通過字段選擇不出需要的數(shù)據(jù),此時要支持用戶勾選某些行數(shù)據(jù),提示用戶當前勾選數(shù)據(jù)明細及數(shù)據(jù)條數(shù)。

4)其他處理

為了讓客戶清晰的明白訂單是如何導出的,需要在導出時給予導出規(guī)則、導出圖片、附件形式說明文字提示。

  1. 是否需要導出規(guī)則說明;
  2. 導出圖片、附件只能以鏈接形式導出說明;
  3. 導出數(shù)據(jù)中是否存在日期和時間,需針對時間戳提前處理。

5)根據(jù)導出數(shù)據(jù)量,明確數(shù)據(jù)處理方式

從技術的角度說,針對較大數(shù)據(jù)量的導出場景,可以采用異步的處理方式,降低客戶的焦急心理。

所謂異步,就是用戶點擊導出按鈕后,后端接收請求并執(zhí)行讀取任務,用戶可以不用停留在原處等待,離開當前頁面去處理其它工作任務,之后再打開任務頁面查看導出結果。

如果有數(shù)據(jù)可以預先計算,后端可以直接預先計算,同時避免了因采用同步的處理方式導致長時間等待的結果,客戶體驗會更好,工作效率也會更高。

  1. 是否需要異步處理;
  2. 是否需要預先計算。

6)是否需要任務頁面

如果用戶點擊“導出”按鈕后,10秒鐘內不能完成文件打開,會讓用戶產生焦慮心理。為了讓用戶使用體驗更佳,需要有一個固定頁面即任務頁面來承載導出任務列表。

四、總結思考

1. 從導出功能看功能設計流程

功能,是為解決問題而生,而功能的起源是需求,需求是從場景中找到問題。

由此可見,功能設計流程一定會包含場景選定、問題分析并找準需求、解決方案分析、選定功能、功能設計這5個階段。

做功能設計時,時刻問自己三個為什么:為什么這是一個問題(問題具備危害性)?為什么要解決這個問題(被解決的價值)?為什么我選定的功能可以解決這個問題(功能的價值)?

2. 導出能夠解決的問題

導出不僅可以解決文中的“需要更全面的數(shù)據(jù)分析”的問題,還可以解決“數(shù)據(jù)離線使用”的問題,導出后,數(shù)據(jù)以本地文件的形式存在,可離線使用。

另外導出還能解決“數(shù)據(jù)交付系統(tǒng)外部人員”的問題,導出后,數(shù)據(jù)以獨立文件的形式存在,可以復制,傳遞。

3. 可優(yōu)化方向

  1. 當系統(tǒng)頁面越來越多,導出也在多個頁面出現(xiàn)時,可考慮使用一個配置導出頁面統(tǒng)一管理系統(tǒng)中所有的導出;
  2. 當用戶使用導出功能后不停留在原處等待時,出現(xiàn)導出異常,采用短信或郵件通知用戶,讓用戶及時知道導出進度不至于耽誤工作。

文章來源:人人都是產品經(jīng)理    作者:努力的小妖

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



交互設計心理學之 古騰堡原則

ui設計分享達人

寫在前面


在平時的設計過程當中,你可能會有這樣的疑惑,為什么在大部分APP中,當單個按鈕和多個按鈕同時存在時,最重要的按鈕一般都會放置在頁面的右側呢?如果最重要的按鈕放在左側又有什么問題呢?按鈕放在右側的原因是什么呢?它又有什么理論依據(jù)呢?接下來帶著這些疑問,開始我們今天所要介紹的內容:交互心理學之古騰堡原則



古騰堡原則的起源


古騰堡原則是由14世紀西方活字印刷術的發(fā)明人約翰·古騰堡提出,早在20世紀50年代,他在設計報紙的過程中,提出了一項原則,認為人的閱讀方式應該是遵循某種習慣進行的,就像讀書一樣,由左到右,從上到下。這其中蘊含著什么信息呢?經(jīng)過研究最終得出被后人所熟知的結論:古騰堡原則,并附上了一張圖,名為「古騰堡圖」。古騰堡圖將畫面所呈現(xiàn)的內容分成四個象限:


1、第一視覺區(qū)(POA):左上方,用戶首先注意到的地方

2、強休息區(qū)(SFA):右上方,較少被注意到

3、弱休息區(qū)(WFA):左下方,最少被注意到

4、終端視覺區(qū)(TA):右下方,視覺流終點




從圖中可以看出,用戶視線很自然的會從第一視覺區(qū)開始,逐漸移動到終端休息區(qū)。整個閱讀過程視線都會沿著一條方向軸開始從左到右瀏覽。用戶會更容易關注到頁面的開始與結束區(qū)域,而中間的段落則很少被關注到。古騰堡揭示了一個實用的視覺軌跡規(guī)律:閱讀引力是從上到下,從左到右。


遵循古騰堡原則把關鍵信息放在左上角、中間和右下角,能夠更好的體現(xiàn)元素的重要性。例如:我們平時所看到的頁面彈窗、各種證明文件和合同文件等等。



古騰堡圖通過對設計元素的重量與元素布局和組成方式進行調和,指導眼睛的運動軌跡。讓用戶迅速獲取有價值的信息,同時用戶對信息的熟悉程度也是影響眼睛運動軌跡的因素之一。


而隨著互聯(lián)網(wǎng)的興起,古騰堡原則也逐漸被應用到APP設計和網(wǎng)頁設計當中。接下來讓我們來看看他在界面中的實際應用。




在設計中的應用


1.1 底部單個按鈕


這種形式在引導用戶操作的頁面中最為常見,為了能夠保證用戶對內容進行閱讀,所以將按鈕擺放在頁面底部,內容放在頂部,這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產品預期的目標。





1.2 底部垂直雙按鈕


上面我們提到了單個按鈕的擺放思路,接下來看一下垂直雙按鈕的擺放思路是怎么樣的。如果一個界面上同時存在兩個優(yōu)先級不同的按鈕,并且產品希望用戶對每一個按鈕都有足夠的關注度,那么垂直擺放是最佳選擇,雖然垂直雙按鈕在樣式上做了區(qū)分,但用戶同樣會停留一段時間將按鈕的內容進行對比思考。


那么,按照古騰堡原則,重要的按鈕應該放在頁面最底部,原則上它應該是這樣的:



仔細觀察上圖,有沒有發(fā)現(xiàn)淺色按鈕很容易被忽略掉,這樣就違背了產品要保證每一個按鈕都要有足夠關注度的初衷,所以我們要違背古騰堡原則來滿足業(yè)務需求,正如我們所看到的微信授權頁面一樣,




為了保證「同意」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視,并且其中的任意一個按鈕不會被輕易的忽略掉,這里將「同意」按鈕顏色加重,并且放在「拒絕」按鈕之上,讓眼睛原本垂直向下的運動軌跡產生回流的變化。



小結

原則是設計的基礎,并非一成不變,要合理權衡設計原則與產品目標之間的關系。




2、頂部按鈕分析


由于頂部導航欄空間有限,導致按鈕相對較小,并且不便于點擊操作,所以這類頂部按鈕適用于修改內容的編輯頁面,即可以避免誤觸,又可以讓用戶關注內容本身。關鍵按鈕至于頂部,還可以縮短用戶眼睛的運動路徑,讓用戶更容易注意到其狀態(tài)的變化狀態(tài)。




小結

頂部按鈕更關注可編輯的內容區(qū)域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內容。




3、水平按鈕分析


除了上面提到的頂部按鈕和底部按鈕,還有水平擺放的按鈕,比如淘寶詳情頁、京東詳情頁、網(wǎng)易嚴選詳情頁的「加入購物車」和「立即購買」按鈕,界面中的「立即購買」按鈕都放在了右下角,結合古騰堡原則的視覺終點說明,右下角為視覺終端區(qū)域,即視覺最終停留的位置,所以他們都將與轉化率密切相關的「立即購買」按鈕放在了界面的右下角,讓用戶更容易關注到。




再比如比較常見的「取消」和「確認」彈窗樣式,通常是在需要讓用戶確認某種操作行為時出現(xiàn),有可能是提交表單、協(xié)議授權、獲取用戶信息等等,為了防止用戶誤操作,這也是提升產品體驗的小細節(jié)。


平常我們所看到的彈窗,推薦按鈕都是在右側,那么將推薦按鈕放在左側會怎么樣?如下圖所示:






不難看出推薦按鈕放在右側后,視覺在水平方向軸上產生了回流。


彈窗的目的是想讓用戶點擊「確認」按鈕,如果將「確認」放在左側,根據(jù)古騰堡原則,用戶的視線會不由自主的向右側移動,也就是「取消」按鈕的位置,想要回到左側「確認」按鈕位置就需要移動視線,并且眼睛的運動軌跡會在水平方向軸上來回的往復運動,無形中增加了用戶選擇時長。如果將「確認」放在右側,「取消」放在左側則可以為用戶提高操作效率。


在實際產品中的應用案例:




小結

當產品想要讓用戶進行某種操作時,主要按鈕放在右邊




總結


1、古騰堡圖第一視覺區(qū),強休息區(qū),弱休息區(qū),終端視覺區(qū)

2、原則是設計的基礎,并非一成不變,要合理權衡設計原則與產品目標之間的關系

3、頂部按鈕更關注可編輯的內容區(qū)域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內容

4、當產品想要讓用戶進行某種操作時,主要按鈕放在右邊

文章來源:UI中國       作者:Coldrain1

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

想讓交互更走心?這4種可見狀態(tài)微交互技巧一定要學會

周周

在經(jīng)典的尼爾森十大啟發(fā)式當中,「系統(tǒng)狀態(tài)可見性」可以說是如今交互設計領域當中,最為重要的原則之一。通過向用戶展現(xiàn)當前的狀態(tài),讓用戶擁有對系統(tǒng)的控制權,建立用戶對于產品的信任感,這也是這種設計啟發(fā)式的最重要的價值之一。

但是,想要做到可靠、易用,系統(tǒng)狀態(tài)展現(xiàn)的技巧是很講究的。這里梳理了4種最為常用的方法,結合了不少實用的案例,希望對你有所幫助。

1、展示用戶位置、進度的視覺反饋

1.1、讓用戶知道自己在哪

沒有人會喜歡迷失方向,但是無論在現(xiàn)實生活還是在數(shù)字領域當中,這種情況都會發(fā)生。讓用戶知道他們在哪里是創(chuàng)建良好導航體驗的關鍵。應用程序和網(wǎng)站都應該凸顯當前的導航選項,幫助用戶了解他們所在的位置。

Google 的底部導航欄設計

1.2、要經(jīng)過多少步驟來完成任務

這也是一個非?;镜牟僮鳎ㄟ^展現(xiàn)步驟數(shù)量,幫助用戶來預估完成這個過程所需要的時間。

Selecto 的調查問卷的設計

2、輔助用戶交互的視覺反饋

數(shù)字界面畢竟不是現(xiàn)實世界中的真實硬件機構,用戶更多只能借助交互過程中的即時視覺反饋來確定是否完成了操作,即時的視覺反饋因此顯得非常重要。

即時的視覺反饋讓用戶的操作得到了視覺上的「認可」,從而強化了「確信感」,這樣一來一回的確認可以避免錯誤的發(fā)生,比如可以避免用戶因為「感覺沒有點下去」而反復點擊。

這種視覺反饋的設計,最常見的范例就是點擊按鈕按下的微交互動畫,它告知用戶「系統(tǒng)已經(jīng)捕捉到點擊交互了」。

AliAli 所設計的懸停點擊動畫

但是在某些狀況下,按鈕的視覺反饋還有很多不同的呈現(xiàn)形式,有更多可見的、可理解的新形態(tài),可以在原有的基礎上探索更多可能性,比如下面的

2.1、單擊點贊按鈕

Spread love, not viruses ,作者  Charles Patterson

2.2、開關按鈕

這個開關按鈕不僅有點擊動效,而且色彩和按鈕標識也隨之改變,更為清晰地表明狀態(tài),甚至兼顧到了視覺障礙用戶

Switcher XLIV , 作者 Oleg Frolov

2.3、書簽按鈕微交互

這個書簽按鈕通過色彩的虛實變化來呈現(xiàn)書簽已添加的狀態(tài),頗為巧妙。

Bookmark interaction,作者 Oleg Frolov

2.4、添加購物車微交互

在這種情況下,視覺反饋非常明確且優(yōu)雅地告知用戶已經(jīng)添加到購物車里面了。

咖啡下單動效,作者 Nhat M. Tran

3、呈現(xiàn)系統(tǒng)狀態(tài)的視覺反饋

3.1、系統(tǒng)正忙于什么事情

當系統(tǒng)正在加載,正在執(zhí)行,正在運行的過程中,通過動效來告知用戶系統(tǒng)并沒有停止,而是正忙于執(zhí)行某件事情,是避免用戶誤解的手段。在用戶等待的過程中,通常會實用無限加載的動效(一般使用在低于10s的操作中):

對于超過10s的更長的執(zhí)行過程,無限加載的動效會顯得令人沮喪,這個時候實用進度條會更好:

這些視覺反饋很大程度上降低了系統(tǒng)給人的不確定感。

對于移動端應用,在初始加載階段所使用的啟動動畫界面,是否精心設計,決定了用戶對于整個產品的第一印象,優(yōu)秀的初始加載動畫能夠將用戶的注意力從焦躁的等待中解放出來。

Logo 閃屏 ,作者 Gleb Kuznetsov?

3.2、內容加載

當用戶需要時間來加載內容的時候,建議使用一種特殊的的容器「界面骨架」來展現(xiàn)。這種臨時的內容容器不僅能夠幫助用戶快速地了解界面的整體框架,構建用戶預期,并且能夠在后臺快速地加載數(shù)據(jù),漸進式地幫用戶獲得信息。

內容加載,作者 Ginny Wood

這種設計方式對于移動端和桌面端的設計同樣適用:

界面骨架加載動效,作者 Shane Doyle

4、觸發(fā)事件

4.1、通知和提醒

有效的通知和提醒,能幫用戶意識到有新的事情正在發(fā)生。在多數(shù)時候,我們建議設計師使用微妙的動畫來進行通知,因為動畫效果會自然地吸引用戶的注意力,人類的雙眼的動態(tài)視覺其實是非常強的。

Aleksei Kipin 設計的通知動效

4.2、提示用戶采取行動

在很多情況下,用戶界面中會有很多地方會需要用戶提交信息。比如,需要用戶提交表單,或者用戶創(chuàng)建了一個密碼,但是在復雜度上不足需要修正,或者填寫郵箱來訂閱信息的時候,郵箱格式出錯,等等。使用適當?shù)囊曈X反饋總能夠更加有效地將問題告知用戶。

內聯(lián)郵箱驗證機制,作者 Derek Reynolds

結語

讓用戶有掌控感,就是為用戶創(chuàng)造更好的體驗。在很多設計方案中,視覺反饋會因為種種原因被削弱了,甚至被忽略了。但是當用戶在和 UI 進行交互的時候,期望度和可動性其實是高度依賴于這些動效和微交互,而這正是設計師需要設計出優(yōu)秀視覺反饋效果的原因所在。

文章來源:優(yōu)設     作者:Nick Babich

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

如何做好空狀態(tài)設計?來看資深設計師的總結!

周周

今天為大家?guī)淼奈恼率?/span>「空狀態(tài)」設計,良好的空狀態(tài)設計能提升產品體驗,有效留存用戶。在這里把這篇文章分享給大家!

UX TRENDS | 注重隱私的用戶體驗設計

ui設計分享達人

用戶隱私安全在產品設計中是很重要的一個環(huán)節(jié),本文從用戶體驗角度切入,從匿名模式、減少永久性和減少公開性三個方面展開分析。



我們先看?組來??優(yōu)的2019年6?的調研數(shù)據(jù):70%的美國?認為,與5年前相?個?信息變得更不安全。尤其是?學歷?收?群體。由此可??戶對個?信息數(shù)據(jù)的隱私擔憂?以往更甚。



?戶隱私安全很重要,涉及的范圍和?度也很多。本次的分析從?戶體驗?度切?,涉及如下三個??:

  1. Incognito Mode匿名模式;

  2. Reducing Permanence減少永久性;

  3. Reducing Publicity減少公開性。



01 匿名模式


下圖是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切換,從交互體驗上來說有如下?個特點:

  1. 統(tǒng)?在右上?;

  2. 可以便捷切換?匿名模式,反過來也很容易切回登陸狀態(tài);

  3. 匿名模式的狀態(tài)提示,例如YouTube 在匿名模式下在界?底部有?字提示“您 當前處于匿名模式”。


匿名模式不是最近才流?的功能,最早提供隱匿模式的是蘋果safari瀏覽器,早在 2005年就?持了匿名模式。Chrome瀏覽器在2008年就開始?持此模式。雖然由來已久,為什么到了2020年,匿名模式依然是國外互聯(lián)???趨勢呢?


我們看?組數(shù)據(jù):

這是來?DuckDuckGo 2019年9?的調研(DuckDuckGo是美國的?款不記錄?戶?為保護?戶隱私的搜索引擎)。樣本來?美國、英國、德國和澳?利亞的成年??戶,共計3,411?的調研得出。各國?戶對使?搜索引擎的個?隱私安全?常在意(是否搜集個?的數(shù)據(jù)和記錄搜索?為)。

2020年5?DuckDuckGo?均搜索次數(shù)為6200萬。對?看2019年11?底?均搜索次數(shù)4900萬,2018年10?是2900萬。

最近?年的持續(xù)活躍度?幅增?證明了不記錄個?隱私的搜素引擎越來越受到?戶的?睞。

國內,頭條、UC瀏覽器在搜索框輸?狀態(tài)也提供了“?痕瀏覽”??。

不僅是搜索引擎領域,保護?戶隱私也成為Facebook最重要的戰(zhàn)略?向之?。Facebook CEO Mark Zuckerberg在2019年 F8開發(fā)者?會上喊出“THE FUTURE IS PRIVATE”。2019年3?Mark Zuckerberg發(fā)?,主題就是《聚焦于保護隱私的社交?絡》。



02 減少永久性


我們先看國外社交媒體Stories(?故事)產品形態(tài)的流?。

?們總是對于所分享的內容永遠記錄在?上感到擔憂。Stories24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享。

Stories由Snapchat?創(chuàng),由 Facebook發(fā)揚光?。早在2019年4?,F(xiàn)acebook+Messenger Stories, Instagram Stories?活?戶數(shù)就突破5億。 2020年2-3?LinkedIn,Twitter也先后宣布將上線類似功能。



03 減少公開性


來??優(yōu)的調研報告:41%的美國?經(jīng)歷過?絡騷擾,最常?的就是在社交媒體上。23%的?戶最近經(jīng)歷的?絡騷擾來?評論區(qū)的評論內容。27%的?戶經(jīng)歷?絡騷擾后決定不再發(fā)布任何內容。

我們以限定評論互動的公開性為例:

2020年5?Twitter上線了新的評論功能,可以限定誰可以回復帖?的功能,提供了三種選項:誰都可以評論,只有被關注者可以評論,只有被提及者可以評論三種公開度的限定。

Instagram也在測試“評論限制”新功能,批量屏蔽/限制評論。?前已經(jīng)上線的?個例?:?戶(評論發(fā)布者)如果發(fā)布的評論含有攻擊性敏感詞,發(fā)布前伴有提示,提醒評論含有攻擊性敏感詞是否真的要發(fā)布。


注重隱私提供僅好友可?/僅??可?/僅作者可?/等多重維度的隱私設定有助于?戶更安?地參與互動。

另外?個例?是付費頻道會員:付費頻道會員-限定頻道的公開性讓內容創(chuàng)作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員、會費的收?,形成“忠實粉絲”社區(qū),有助于內容?態(tài)的社區(qū)化建設。

我們主要看YouTube的頻道會員案例:

YouTube有兩種會員模式。?種是YouTube整個平臺的付費會員,去?告,看原創(chuàng)美劇影視,消費?樂,可下載內容的模式。第?種模式是Youtuber個?頻道付費會員,吸引忠實粉絲加?。我想說的就是第?種。


為什么?V?紅有意愿開通頻道會員?


除了獲得忠實粉絲收?變現(xiàn)的商業(yè)價值以及付費頻道會員可以為忠實粉絲提供各種專屬功能,背后也和?紅?V對個?隱私顧慮有關。

?紅?V在完全公開的社交?絡上需要始終保持?夠克制謹慎,避免引起爭議。但在忠實粉絲付費頻道專屬會員群中,?紅?V會減輕隱私顧慮,更加回歸?我。

?如在頻道會員中發(fā)布更多與個??活相關的內容,表達更多不便在完全公開的社交?絡中的想法和感受等,因為忠實粉絲通常更具包容度,更不容易引起爭議。


YouTube頻道會員費?可以從三種會費(按?)區(qū)間選擇,?持多選:

  1. 低階 Low Levels $0.99~3.99;

  2. 中階 Medium Levels $4.99~14.99;

  3. ?階 High Levels $19.99~49.99;

頻道會員功能在2018年開始測試,?向粉絲數(shù)過10萬的YouTuber開放。



以上綜述,我們可以說:


1.匿名模式:

雖然匿名模式由來已久,但仍然是當前的??基本?戶體驗設計趨勢,尤其是匿名模式的切換便捷性?常重要。


2.減少永久性:

Stories?故事24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享,已經(jīng)成為國外社交媒體平臺的必備功能,F(xiàn)acebook, Instagram平臺的最主要、最具影響?的功能之?。


3.減少公開性:

?戶總是對在社交媒體平臺發(fā)表評論有所顧忌,限定評論的公開性能夠有助于促進?戶發(fā)帖表達,其他?戶也可以更安?地參與互動。


付費頻道會員可以限定頻道的公開性,讓內容創(chuàng)作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員會費的收?,形成“忠實粉絲”社區(qū),有助于內容?態(tài)的社區(qū)化建設。


從UE?度,我們可以為頻道會員提供專屬身份設計例如專屬徽章,專屬表情等。

THE FUTURE IS PRIVATE, 注重?戶隱私的體驗設計越來越重要!

文章來源:站酷    作者:百度MEUX

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



日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔