首頁

互聯(lián)網(wǎng)行業(yè)幾點(diǎn)意見

藍(lán)藍(lán)設(shè)計(jì)的小編

在這個(gè)國家領(lǐng)導(dǎo)人都在強(qiáng)調(diào)打造一個(gè)網(wǎng)絡(luò)強(qiáng)國的時(shí)代,互聯(lián)網(wǎng)行業(yè)無疑是大學(xué)畢業(yè)生入職最好的選擇。互聯(lián)網(wǎng)很大,很多傳統(tǒng)行業(yè)都在向互聯(lián)網(wǎng)轉(zhuǎn)型,如果抓住這個(gè)機(jī)遇,學(xué)習(xí)一技之能,那么你就將擁有撬動(dòng)地球的杠桿。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

博博

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

人人都是產(chǎn)品經(jīng)理 2018-06-20 21:29:20

微信更新了!在的微信 6.7.0 版里,微信公眾號(hào)第一次引入了信息流概念。本文將詳細(xì)為你解說微信公眾號(hào)有哪些新的變化。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

在年初的微信公開課 Pro 上,張小龍?jiān)硎尽覆蛔鲂畔⒘鳌?,沒想到不到半年的時(shí)間,微信公眾號(hào)就迎來了創(chuàng)立以來樣式最大的一次改版:可以直接瀏覽訂閱號(hào)的消息。

在的微信 6.7.0 版里,微信公眾號(hào)第一次引入了「信息流」概念。

接下來,就帶大家快速了解一下微信公眾號(hào)的新變化!

界面變化

1. 文章卡片式展示

在經(jīng)歷了朋友圈設(shè)計(jì)升級(jí)、微信訂閱號(hào)懸浮窗之后,公眾號(hào)的列表界面也終于迎來了升級(jí),一次的巨大的升級(jí)。

在版本的微信訂閱號(hào)列表中,可以看到推送的文章變成了一張張精美的卡片,每個(gè)公眾號(hào)的文章卡片信息依然是按照時(shí)間發(fā)送的順序排列以「信息流」的形式展示。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

和舊版的公眾號(hào)界面相比,卡片式的陳列放大了圖片,比純粹的文字顯得更有吸引力。

2. 推送條數(shù)折疊

除了卡片形式之外,筆者還發(fā)現(xiàn)一個(gè)公眾號(hào)在「信息流」列表中最多只能直接顯示兩篇文章,即頭條和次條。

而多出來的條數(shù)則被自動(dòng)折疊了起來,需要點(diǎn)擊右下角的箭頭來展開「余下 X 篇」才能查看。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

3. 多少好友和你志趣相投?

還記得前段時(shí)間更新的微信「搜一搜」里的「X 位朋友讀過」的功能嗎?

現(xiàn)在你可以在新版「信息流」訂閱號(hào)界面里,看看有多少好友和你志趣相投。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

而且,是每一篇文章都能看到你有多少位朋友讀過。

4. 置頂?不存在的

在舊版的公眾號(hào)界面中,許多人都會(huì)把自己喜歡的公眾號(hào)置頂在列表的頂部,以免錯(cuò)過它的每一次推送。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

但是在這次的新版「信息流」訂閱號(hào)界面中,你恐怕是辦不到了。

在新版「信息流」訂閱號(hào)界面中,你之前置頂過的公眾號(hào)名稱旁會(huì)有一個(gè)黃色小星星,提醒你「這是你置頂過的公眾號(hào)哦!」。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

在排列順序上則不會(huì)像舊版一樣永遠(yuǎn)在頂端顯示,依然和泱泱公眾號(hào)一樣,發(fā)布的推送文章在最前。

5. 摘要?不好意思,也沒有

以前的公眾號(hào)推送中,如果單詞推送只有一篇的文章的話,我們往往可以通過文章顯示的摘要來獲取更多相關(guān)信息。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

但是在新版中,單獨(dú)推送一篇文章的摘要也不再顯示了。

6. 新舊界面,一鍵切換

看了這么多新界面新功能,也許會(huì)有人說「我還是喜歡以前的舊界面,有沒有什么辦法換回去?」,放心,還真的有后悔藥吃。

點(diǎn)擊新版「信息流」訂閱號(hào)界面右上角的小標(biāo),幫你一鍵切回舊版界面。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

有什么影響?

這次微信公眾號(hào)信息流的排版,對(duì)于公眾號(hào)運(yùn)營者和用戶來說的影響都不少,我們認(rèn)為主要會(huì)有以下幾個(gè)影響。

1. 弱化公眾號(hào)主體 ,更強(qiáng)調(diào)內(nèi)容

公眾號(hào)改版信息流,訂閱消息的入口變淺了,用戶更容易觸達(dá)內(nèi)容。同時(shí)也也弱化了公眾號(hào)主體的感覺。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

盡管微信官方表示「依然保留了對(duì)訂閱號(hào)的突出,訂閱號(hào)的頭像和名稱展示明顯?!沟掳嫦啾扰f版需要進(jìn)入公眾號(hào)才能閱讀文章的形式,用戶對(duì)于公眾號(hào)的歸屬感無疑是減弱了。

2. 閱讀體驗(yàn)變化,標(biāo)題和題圖更重要,標(biāo)題黨和封面黨可能也更多了

新版公眾號(hào)按照信息流呈現(xiàn),取消了文章摘要的顯示,減少了可見的推文條數(shù),頭條封面也一律按照過往文章單推的樣式來顯示。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

這都表明公眾號(hào)文章向要吸引用戶點(diǎn)開,頭條的標(biāo)題和題圖將變得更加重要,這將促使運(yùn)營者在標(biāo)題和題圖上花費(fèi)更多精力。

而為了在一滑即過的信息流中,為了抓住讀者的眼球,標(biāo)題黨和封面黨也可能會(huì)越來越泛濫。

3. 鼓勵(lì)公眾號(hào)做少而精的內(nèi)容

除了減少了可見的推文條數(shù),獲取關(guān)注和取消關(guān)注都變得更容易,這意味著微信更加鼓勵(lì)公眾號(hào)精細(xì)化運(yùn)營,生產(chǎn)少而精的內(nèi)容,減少對(duì)用戶的信息干擾。

4. 打擊營銷號(hào),不鼓勵(lì)在公眾號(hào)做服務(wù)和電商

減少了可見的推文條數(shù)對(duì)營銷號(hào)的影響非常明顯,營銷號(hào)動(dòng)輒七八條的推送會(huì)被淹沒在信息流中,而公眾號(hào)推送后邊的三四條的廣告價(jià)值也大大減弱。

此外更深的公眾號(hào)入口也弱化了原本自定義菜單的一些服務(wù),同時(shí)服務(wù)號(hào)是不受影響的,這說明微信不再鼓勵(lì)在公眾號(hào)內(nèi)提供服務(wù)功能。

5. 公眾號(hào)閱讀的社交屬性增強(qiáng)

新版公眾號(hào)的信息流中強(qiáng)調(diào)「朋友閱讀」,表明公眾號(hào)閱讀的屬性將進(jìn)一步增強(qiáng)。

「朋友閱讀」人數(shù)多的文章在舊版公眾號(hào)的訂閱界面會(huì)優(yōu)先顯示,這也意味著未來公眾號(hào)的信息流排列可能不再完全按照時(shí)間排列,將好友的社交行為作為信息流的排列權(quán)重。

6. 對(duì)公眾號(hào)作者有什么影響?

公眾號(hào)本質(zhì)是以品牌為中心,讓用戶去選擇。信息流本質(zhì)是話題為中心,剝離開生產(chǎn)者,讓用戶直達(dá)信息。用戶對(duì)于話題的選擇成本遠(yuǎn)比品牌的選擇要低,很可能會(huì)出現(xiàn)像刷抖音一樣刷內(nèi)容。

同理,不再以品牌為中心,意味著你之前因?yàn)椤缚贪逵∠蟆箯膩聿豢吹墓娞?hào),可能會(huì)更多地被你點(diǎn)開——信息流意味著民主,差評(píng)的一次牢騷仍然可以把特朗普擠到屏幕下方。

這對(duì)整個(gè)微信內(nèi)容生態(tài)是更有好處的——所有的訂閱號(hào)都被扔進(jìn)羅馬斗獸場(chǎng)肉搏,一切靠內(nèi)容說話。

One More Thing……

在測(cè)試中,AppSo 還發(fā)現(xiàn)了一個(gè)小彩蛋。

在新版「信息流」訂閱號(hào)界面中,長按任意一條推送就會(huì)展示一個(gè)功能菜單「未完成的功能」,點(diǎn)擊會(huì)顯示「功能還在開發(fā)中 ^_^」。

微信更新:公眾號(hào)引入信息流概念,要變成今日頭條了?

看來,微信的開發(fā)小哥給大家留下了一個(gè)懸念。你覺得這個(gè)新功能會(huì)是什么呢?不妨在底部留言告訴 A 君吧!

UGD 模式

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

一、什么是UGD?

大家都知道 UED(User Experience Design)用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì),主張「以用戶為中心的設(shè)計(jì)」,我們團(tuán)隊(duì)的前身就是一個(gè)典型的 UED 團(tuán)隊(duì)。那么什么是 UGD 呢?

UGD(User Growth Design)用戶增長設(shè)計(jì),主張「以用戶為中心,以增長為導(dǎo)向」。

下面這個(gè)是我們團(tuán)隊(duì)現(xiàn)在的 logo,這個(gè)圖形很清晰地描述了 UGD 的理念:在 UCD(以用戶為中心的設(shè)計(jì))的基礎(chǔ)上增加一個(gè)向上的箭頭(增長),變形成了 G(Growth,代表增長)。也就是我們?cè)谠纫杂脩魹橹行牡幕A(chǔ)上,還要做到幫助業(yè)務(wù)增長。

「增長」的概念對(duì)很多人來說也許還比較陌生。事實(shí)上,這個(gè)概念早在2010年就有人在美國提出了,到了2015年才引入國內(nèi),最近兩年開始火爆。所以說它在國內(nèi)其實(shí)也是一個(gè)比較新的概念。感興趣的朋友可以看看《增長黑客》相關(guān)書籍。

二、為什么我們要變成UGD?

為什么我們要從傳統(tǒng)的 UED 進(jìn)化為充滿挑戰(zhàn)和不確定性的 UGD 呢?這要從天時(shí)、地利、人和三個(gè)方面說起。

1. 天時(shí)

先說說天時(shí),大概2016年左右吧,中國互聯(lián)網(wǎng)逐漸進(jìn)入下半場(chǎng)。關(guān)于下半場(chǎng)的話題這里不多說了,感興趣的同學(xué)可以上網(wǎng)搜搜相關(guān)的文章或者看一下我的新書《破繭成蝶2》(7月出版),里面有很詳細(xì)的討論。簡單的說,下半場(chǎng)的特點(diǎn)就是:人口紅利、流量紅利、資金紅利都在逐漸萎縮。原先你可以花錢買流量;或者通過好的 idea 拉來大筆投資;再或者通過打造的體驗(yàn)迎來大量用戶。但這種「好時(shí)代」已經(jīng)一去不復(fù)返了,如果沒有實(shí)質(zhì)的增長,創(chuàng)意、體驗(yàn)、流量都不能保證產(chǎn)品可以順利的活下去。

2017年3月底,美國又發(fā)生了一件大事:可口可樂,這家以營銷著稱的公司,宣布將取消設(shè)立了24年的首席營銷官(CMO)一職。全球市場(chǎng)營銷、客戶及商務(wù)領(lǐng)導(dǎo)、戰(zhàn)略被整合成一個(gè)職能,由新創(chuàng)立的職位 CGO(Chief Growth Officer,首席增長管)領(lǐng)導(dǎo)。第一任 CGO 將直接向可口可樂新任 CEO 匯報(bào)。

可能很多人不了解,CMO 的工作性質(zhì)和 UED 其實(shí)有很多相似的地方。比如都是成本部門(當(dāng)然市場(chǎng)部還要額外花錢);都熱衷包裝創(chuàng)意而非對(duì)業(yè)績的直接影響;都傾向于用定性的方式檢驗(yàn)成果;都習(xí)慣通過經(jīng)驗(yàn)而非試驗(yàn)來做決策……

很多企業(yè)主對(duì)此非常無奈,他們明明知道在營銷等方面的花費(fèi)存在巨大的浪費(fèi),卻不知道浪費(fèi)在哪里。隨著大數(shù)據(jù)時(shí)代的到來(2015年左右),人們?cè)絹碓街匾晹?shù)據(jù)的作用,越來越能夠輕易的獲取、存儲(chǔ)數(shù)據(jù),也越來越知道如何從數(shù)據(jù)中獲取價(jià)值。在這種情況下,原先很多崗位的傳統(tǒng)工作方式顯然太過于低效,所以 CMO 逐漸被 CGO 取代也就不足為奇了。

從 CMO 到 CGO,揭示了四個(gè)變化趨勢(shì):

  • 從花錢到賺錢
  • 從定性到定量
  • 從創(chuàng)意到業(yè)績
  • 從經(jīng)驗(yàn)到試驗(yàn)

誰能肯定 CMO 的今天不會(huì)成為 UED 的明天呢?當(dāng)然,我認(rèn)為 UGD 只是未來的一個(gè)發(fā)展趨勢(shì)之一,我想未來設(shè)計(jì)師還會(huì)有很多其它的發(fā)展方向等待我們深入探索。

2. 地利

雖然我換過幾次工作,但是有一點(diǎn)我從來沒變,就是一直在做和商業(yè)相關(guān)的產(chǎn)品(電商、To B、互聯(lián)網(wǎng)金融),所以我對(duì)業(yè)務(wù)、對(duì)數(shù)據(jù)更敏感一些。和同行交流的過程中我也發(fā)現(xiàn)一個(gè)明顯的現(xiàn)象:越是接觸商業(yè)產(chǎn)品的設(shè)計(jì)師,越重視數(shù)據(jù)量化。當(dāng)然現(xiàn)在不僅是商業(yè)產(chǎn)品,所有類型產(chǎn)品的從業(yè)人員都需要有這個(gè)意識(shí)。比如做社交產(chǎn)品,也需要通過活躍度等指標(biāo)來檢驗(yàn)成果。

3. 人和

設(shè)計(jì)團(tuán)隊(duì)的地位其實(shí)普遍是比較尷尬的,因?yàn)槟愫茈y證明對(duì)產(chǎn)品、對(duì)企業(yè)的價(jià)值。以前設(shè)計(jì)師還可以靠特立獨(dú)行來贏得一些關(guān)注,但現(xiàn)在隨著時(shí)代的變化,設(shè)計(jì)和業(yè)務(wù)綁定的趨勢(shì)越來越明顯。與此同時(shí),大部分設(shè)計(jì)師卻還沒有做好相應(yīng)的準(zhǔn)備,不知道該如何幫助業(yè)務(wù)增長。

雖然支持團(tuán)隊(duì)很難成為核心團(tuán)隊(duì),但我們依然可以通過改變自己,努力離核心部分近一點(diǎn),更近一點(diǎn)。

三、UGD服務(wù)于用戶還是業(yè)務(wù)?

看了前面的分析,可能有人會(huì)感覺迷茫:設(shè)計(jì)師到底應(yīng)該服務(wù)于業(yè)務(wù)還是用戶呢?

傳統(tǒng)思維認(rèn)為,設(shè)計(jì)師應(yīng)該為用戶、為體驗(yàn)負(fù)責(zé)。實(shí)際上,體驗(yàn)與業(yè)務(wù)并不沖突。通過一年多的試驗(yàn),我們發(fā)現(xiàn)能帶動(dòng)業(yè)務(wù)數(shù)據(jù)提升的設(shè)計(jì)方案,質(zhì)量都比原始方案要好。通過無數(shù)次的試驗(yàn)結(jié)果總結(jié)規(guī)律,設(shè)計(jì)師的進(jìn)步非???,也非常大。

所以我們團(tuán)隊(duì)的價(jià)值主張一直都是:以用戶為中心,以增長為導(dǎo)向!

四、如何從UED轉(zhuǎn)型成UGD?

很多設(shè)計(jì)師認(rèn)為自己不太可能幫助業(yè)務(wù)有實(shí)質(zhì)性的提升。其實(shí)設(shè)計(jì)的商業(yè)潛力是巨大的,只是還尚未被充分發(fā)揮出來。通過出眾的造型和外觀擊敗競(jìng)爭(zhēng)對(duì)手、銷量大幅提升的案例不勝枚舉。所以我堅(jiān)信設(shè)計(jì)師在這方面的空間非常大。

當(dāng)然要成為 UGD 并不是通過輸出美觀的產(chǎn)出物就可以做到。UGD 必須致力于通過設(shè)計(jì)思維及專業(yè)技能,用最小成本為產(chǎn)品/企業(yè)創(chuàng)造最大價(jià)值。我們團(tuán)隊(duì)在這方面已經(jīng)摸索了一年多的時(shí)間,現(xiàn)在還在繼續(xù)探索中。

和 UED 相比,我認(rèn)為 UGD 最重要的差別在于:

  • 更懂行業(yè):行業(yè)間差異
  • 更懂用戶:用戶群體差異
  • 更懂?dāng)?shù)據(jù):業(yè)務(wù)數(shù)據(jù)分析
  • 更懂增長:投入產(chǎn)出比

前三項(xiàng)相信大部分設(shè)計(jì)師已經(jīng)開始意識(shí)到了,而第四項(xiàng),也是最重要的一項(xiàng),很容易成為設(shè)計(jì)師的軟肋。因?yàn)樵O(shè)計(jì)師太習(xí)慣于追求完美、「憋大招」了,他們很少考慮如何用較小的成本創(chuàng)造更大的價(jià)值。實(shí)際上,設(shè)計(jì)師縝密的思維、優(yōu)質(zhì)的創(chuàng)意如果能和精益思維、增長思維結(jié)合起來,將產(chǎn)生驚人的效果!

當(dāng)然說來容易做來難,我們?cè)陂L期的實(shí)踐過程中經(jīng)歷了很多失敗和挫折,感謝公司的無限包容,使得我們最終能夠沉淀出一套嚴(yán)謹(jǐn)?shù)摹冈鲩L體系」作為理論支撐,并不斷帶給業(yè)務(wù)方驚喜。

2018年UI設(shè)計(jì)趨勢(shì)概覽

藍(lán)藍(lán)設(shè)計(jì)的小編

互聯(lián)網(wǎng)產(chǎn)品的用戶界面設(shè)計(jì)趨勢(shì)是根據(jù)用戶的不同需求而不斷變化的。在仔細(xì)分析了過去幾年用戶界面設(shè)計(jì)的趨勢(shì)和創(chuàng)新之后,我們可以發(fā)現(xiàn)其背后的一些規(guī)律,2018年UI界面設(shè)計(jì)的趨勢(shì)如下。

2018年UI設(shè)計(jì)流行的9種導(dǎo)航

博博


當(dāng)我們?cè)谠O(shè)計(jì)一款A(yù)pp時(shí),我們最注重的很可能是頁面的布局結(jié)構(gòu),和元素的細(xì)節(jié)優(yōu)化。反觀導(dǎo)航的處理則是我們?cè)谠O(shè)計(jì)時(shí)最容易被忽略的。一款A(yù)pp的核心體驗(yàn),很大程度上是有導(dǎo)航?jīng)Q定的,例如告訴用戶怎樣找到自己想要的信息和完成自己想要的任務(wù)等。所以今天要和大家分享的內(nèi)容就是關(guān)于導(dǎo)航設(shè)計(jì)常見樣式匯總,以及他們的優(yōu)缺點(diǎn)。

NO. 1

底部標(biāo)簽式導(dǎo)航

底部標(biāo)簽式導(dǎo)航位于頁面底部,用于一級(jí)界面當(dāng)中,是一種最常見的導(dǎo)航模式,如果我們開發(fā)的應(yīng)用是需要用戶頻繁在不同的界面中切換時(shí),最好采用這種導(dǎo)航。標(biāo)簽式導(dǎo)航最好不要多余5個(gè),當(dāng)多余5個(gè)時(shí),我們可以將剩余優(yōu)先級(jí)不高的功能集合到一個(gè)功能入口中,例如:“更多,人中心,我的等”。如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):可以看到當(dāng)前所謂在的入口位置,輕松在各個(gè)入口間切換且不會(huì)迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;同時(shí)底部標(biāo)簽也是拇指的熱區(qū)范圍,方便操作。

缺點(diǎn):導(dǎo)航選項(xiàng)數(shù)量有限,不能展示過多的入口(最多5個(gè),考慮到手指理想的觸摸尺寸)同是也占用了界面的一定高度,如果是小屏手機(jī)會(huì)影響內(nèi)容的顯示區(qū)域。

NO. 2

頂部標(biāo)簽式導(dǎo)航

頂部標(biāo)簽導(dǎo)航顧名思義,位于界面中的頂部,通常是在導(dǎo)航欄或者狀態(tài)欄下方使用。一般作用于二級(jí)導(dǎo)航,因此頂部標(biāo)簽的樣式通常是用文字直接展示,避免過多的視覺設(shè)計(jì),造成界面中導(dǎo)航層級(jí)不明確。再細(xì)分的話,頂部導(dǎo)航也可以分為兩種:1.固定標(biāo)簽的頂部導(dǎo)航(有些應(yīng)用用來做App中的主導(dǎo)航,例如:QQ音樂)2.可滑動(dòng)標(biāo)簽的頂部導(dǎo)航(導(dǎo)航的入口不能少于5個(gè)),如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):數(shù)量沒有限制,可固定數(shù)量,也可以不固定數(shù)量;界面左右滑動(dòng)可以直接切換;方便直觀瀏覽實(shí)時(shí)更新的內(nèi)容

缺點(diǎn):容易形成界面內(nèi)容過多,占用了界面的一定高度

NO. 3

分段式導(dǎo)航

分段式導(dǎo)航是iOS系統(tǒng)自帶的標(biāo)準(zhǔn)控件,適合界面分類的切換頻率比較高的,導(dǎo)航數(shù)量通常在2-4個(gè)之間,如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):可以看到當(dāng)前所謂在的入口位置,輕松在各個(gè)入口間切換且不會(huì)迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;適用于高頻率切換的界面,方便操作。

缺點(diǎn):樣式守舊,靈活性不高,無法通過左右側(cè)滑的手勢(shì)進(jìn)行切換。數(shù)量會(huì)因?yàn)樽侄蔚拈L短受到一定限制。

NO 4

抽屜式導(dǎo)航

從導(dǎo)航名稱上理解,抽屜,通常用來收起整理的意思,也就是除了核心功能以外的低頻操作都放到這個(gè)抽屜里,由此可見,抽屜式導(dǎo)航的核心就是【隱藏】,所以我們的產(chǎn)品如果需要讓用戶獲得沉浸式的體驗(yàn)及其他模塊的切換頻率低的話抽屜式導(dǎo)航則是一個(gè)不錯(cuò)的選擇。抽屜式導(dǎo)航通??刂频陌咽殖霈F(xiàn)在App的左上角,以按鈕的形式出現(xiàn),點(diǎn)擊之后抽屜被拉開,左側(cè)區(qū)域顯示導(dǎo)航中的內(nèi)容,如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):隱藏非主要功能,可以使用主意力集中在核心功能上,減少其他非核心功能的干擾,節(jié)省界面的利用空間

缺點(diǎn):由于可發(fā)現(xiàn)性底,不能一目了然,其他模塊的流量會(huì)被遏制,不利于整體產(chǎn)品流量最大化。不合適頻繁切換使用,會(huì)增加用戶的學(xué)習(xí)成本高。

NO 5

下拉式導(dǎo)航

下拉導(dǎo)航通常用于篩選統(tǒng)一模塊下不同類別的是信息,與抽屜式導(dǎo)航的目的是相同的,都是為了隱藏非核心的操作與功能。這類導(dǎo)航多用于瀏覽類的二級(jí)導(dǎo)航;通過點(diǎn)擊我們可以召喚出下拉菜單,下拉菜單通常會(huì)以浮窗的形式顯示在界面上層,當(dāng)我們點(diǎn)擊菜單以外的區(qū)域便會(huì)收起。相對(duì)抽屜式導(dǎo)航相比,下拉式導(dǎo)航能讓用戶感知到當(dāng)前位置。如下圖)

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):與界面的連貫性比較好,用戶可以感知當(dāng)前位置,同時(shí)也節(jié)省界面的利用空間。

缺點(diǎn):不合適頻繁切換使用;無法結(jié)合左右滑動(dòng)操作;相對(duì)隱蔽。

NO6

舵式導(dǎo)航

舵式導(dǎo)航屬于底部標(biāo)簽導(dǎo)航的變形,按鈕中間加了個(gè)+號(hào),看起來就像是輪船上用來指揮的船舵。當(dāng)標(biāo)簽導(dǎo)航無法滿足需求時(shí),我們可以選擇舵式導(dǎo)航,把導(dǎo)航內(nèi)核心的功能放在船舵中央,并用突出的顏色來吸引用戶頻繁點(diǎn)擊。舵式導(dǎo)航主要把生產(chǎn)內(nèi)容的主功能按鈕放在中間,常見于用戶生產(chǎn)∪GC(用戶自發(fā)上傳的內(nèi)容)內(nèi)容的社區(qū)型App。例如簡書,閑魚,如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):突出重要且頻繁的操作入口,同時(shí)也彌補(bǔ)了底部標(biāo)簽導(dǎo)航數(shù)量的不足,還可以在設(shè)計(jì)上做出靈活,有趣效果。

缺點(diǎn):需要用戶二次點(diǎn)擊才能到達(dá)目標(biāo),增加了用戶的操作流程,同時(shí)隱藏的功能不能過多,會(huì)對(duì)點(diǎn)擊后的用戶造成反感,增加用戶的思考選擇壓力,不合適頻繁切換使用。

NO.7

點(diǎn)聚式導(dǎo)航

當(dāng)層級(jí)信息比較復(fù)雜,并且每個(gè)模塊中都有用戶頻繁使用的核心功能在這些條件的限制下,我們最好的選擇就是點(diǎn)聚式導(dǎo)航,點(diǎn)聚式導(dǎo)航的特點(diǎn)就是無論你到達(dá)App中那一個(gè)界面,懸浮CON都會(huì)一直在界面的最上面,方便不同的用戶隨時(shí)選擇自己需要的功能入口,如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):占據(jù)空間小,方便不同的用戶進(jìn)入不同的模塊,通常他的出現(xiàn)時(shí)伴隨著互動(dòng)效果的,所以更加吸引用戶的點(diǎn)擊欲望,提高產(chǎn)品核心功能的點(diǎn)擊率。

缺點(diǎn):樣旋懸浮在界面上面的點(diǎn)聚式導(dǎo)航,會(huì)遮擋默寫文字或者操作,用戶需要滑動(dòng)后才可操作,無形中增加了用戶的使用步驟,通常點(diǎn)聚式導(dǎo)航他的展示方式為一個(gè)|CON,沒有任何文字說明,因此用戶理解上會(huì)出現(xiàn)一定的障礙。

NO 8

列表式導(dǎo)航

列表式導(dǎo)航是App中必不可少的一種信息承載模式,通常是由圖標(biāo)+文字的形式在界面中左對(duì)齊排列,對(duì)于功能之間如果存在不同種類的情況,通常用留白分割的方法處理。(如下圖)列表導(dǎo)航中每一個(gè)列表都是一個(gè)子功能的入口,并且每個(gè)入口之間的切換必須要返回至列表主頁才可以,如下圖

做UI需須知道的九種導(dǎo)航
做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):列表式結(jié)構(gòu)具有很強(qiáng)的延展性,可以不斷的增加信息,可以很方便的進(jìn)行分組分類。簡單清晰、易于理解、用戶可以快速找到自己想要的信息。

缺點(diǎn):只能通過排序來區(qū)分個(gè)入口的重要;列表過多會(huì)造成用戶下滑的操作,甚至增加搜索方面的功能。每個(gè)入口切換時(shí),只能通過返回至列表頁面才可以。

NO 9

宮格式導(dǎo)航

宮格導(dǎo)航將主要入口全部聚合在界面中,讓用戶整體了解App的服務(wù),從而選擇自己需要的服務(wù)。各個(gè)入口之間行相互獨(dú)立,沒有太多交集,無法跳轉(zhuǎn)互通。宮格式導(dǎo)航的變化很多,比如美圖秀秀,支付寶,如下圖

做UI需須知道的九種導(dǎo)航

優(yōu)點(diǎn):宮格式結(jié)構(gòu)可以作為信息或平臺(tái)的入口,讓用戶了解App中的所有服務(wù)并快速選擇自己需要的服務(wù)。同時(shí)也具有較強(qiáng)的延展性。

缺點(diǎn):用戶無法直接看到想要選擇服務(wù)的內(nèi)容部分,需要點(diǎn)擊后才能看到具體的界面內(nèi)容,會(huì)增加用戶的選擇壓力。

UI升級(jí),舊手機(jī)負(fù)優(yōu)化?為何國內(nèi)手機(jī)廠商跟不上Android版本

藍(lán)藍(lán)設(shè)計(jì)的小編

眾所周知,系統(tǒng)的更新是為了增強(qiáng)系統(tǒng)的穩(wěn)定性,優(yōu)化流暢性,有的則是優(yōu)化了續(xù)航,修復(fù)BUG,優(yōu)化安全性等等。

2018年下半年的網(wǎng)頁設(shè)計(jì)趨勢(shì)

博博


人人都是產(chǎn)品經(jīng)理 2018-06-06 16:08:27

逐漸熱起來的6月,這3種設(shè)計(jì)趨勢(shì)將會(huì)流行起來……

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

設(shè)計(jì)趨勢(shì)最有意思的地方在于,它總會(huì)有一些微妙的變化,而每一種趨勢(shì)的沉寂和回歸,總會(huì)伴隨著不同的轉(zhuǎn)變,甚至?xí)?chuàng)造出一些全新的設(shè)計(jì)模式。溫度回升進(jìn)入夏季,這個(gè)六月的網(wǎng)頁設(shè)計(jì)趨勢(shì)都不是全新的東西,都是熟臉,但是仔細(xì)看看,會(huì)發(fā)現(xiàn)在細(xì)節(jié)上又略有不同。

接下來,我們看看6月流行的這3種設(shè)計(jì)趨勢(shì):

1. 全屏大圖

超大的全屏圖片在網(wǎng)頁設(shè)計(jì)中已經(jīng)不算太新鮮的東西了。不過,如果你仔細(xì)查看近期的這些使用高清全屏大圖的網(wǎng)頁設(shè)計(jì),會(huì)發(fā)現(xiàn)設(shè)計(jì)師們開始越來越多地將其他的元素從整個(gè)首屏設(shè)計(jì)中剝離,讓位于背景的圖片展示性更強(qiáng),將屏幕填充得更加徹底。

全屏大圖以外,不再有獨(dú)立的導(dǎo)航區(qū)域或者其他的元素,所有的前景元素都位于圖片的籠罩之下,網(wǎng)站的一體性更加明顯。由于前景元素的缺乏,整個(gè)背景圖片承擔(dān)了更多的視覺展示的作用,只有最好、最引人矚目和有趣的圖片才更加契合這樣的設(shè)計(jì)。

下面的三個(gè)網(wǎng)站設(shè)計(jì)案例均是如此,導(dǎo)航等功能都隱藏在大圖背景當(dāng)中,通過漢堡圖標(biāo)和其他的方式來引導(dǎo)用戶點(diǎn)擊或者吸引用戶。所以,圖片的素質(zhì)必須非常的過硬才行。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

而這種設(shè)計(jì)手法所面對(duì)的問題也很具體,比如說大圖背景所帶來的對(duì)比度和識(shí)別度上的可用性問題,前景元素和背景圖片之間在視覺上的沖突等等。

其他的設(shè)計(jì)元素,比如線條和「查看更多」和箭頭等元素,能夠在視覺的引導(dǎo)上起到一定的作用,類似這樣的設(shè)計(jì)細(xì)節(jié)能夠很好的緩解一些上述的問題,不過需要設(shè)計(jì)師仔細(xì)斟酌。

2. 全新分屏設(shè)計(jì)

我們?cè)?jīng)在設(shè)計(jì)趨勢(shì)相關(guān)的文章中多次提到分屏設(shè)計(jì),而分屏式設(shè)計(jì)也多次作為月度設(shè)計(jì)趨勢(shì)出現(xiàn)在同系列的文章當(dāng)中。

分屏設(shè)計(jì)的好處在于它本身可以很好地呈現(xiàn)兩方面的信息,并且能夠針對(duì)不同尺寸的屏幕進(jìn)行響應(yīng)。無論是在桌面端屏幕上還是在移動(dòng)端界面上,都能一次獲取兩種不同的信息。用戶不會(huì)錯(cuò)過重要的信息。

不過在的網(wǎng)頁設(shè)計(jì)作品當(dāng)中,分屏設(shè)計(jì)本身在功能和形式上并沒有太大的變化,不過在處理方式和細(xì)節(jié)上和以往不盡相同。

首先,這些設(shè)計(jì)保留了分屏設(shè)計(jì)的基本思路和精神,也就是將屏幕分為兩個(gè)部分來呈現(xiàn)信息,但是在劃分區(qū)域的時(shí)候,設(shè)計(jì)師換了新的思路。Reach Digital 分屏采用的是對(duì)角線方向的不對(duì)稱分屏,黃白雙色對(duì)比強(qiáng)烈,而同樣采用對(duì)角線分屏的 Cap GunCup Creative 則使用了更為簡約的黑白配色風(fēng)格,Weima 這個(gè)網(wǎng)站則采用了傳統(tǒng)的左右分屏,但是分割的比例是按照3:1來劃分的,這種分割方式更加有趣。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

分屏設(shè)計(jì)的好處在于它可以應(yīng)對(duì)多種多樣的設(shè)計(jì)。無論是小型網(wǎng)站,還是大量的內(nèi)容,分屏的設(shè)計(jì)都可以讓用戶參與進(jìn)來。分屏式設(shè)計(jì)為用戶提供了兩種不同的選擇,不難理解,功能也很直觀。

3. 低透明度色彩疊加

在圖片和視頻上疊加色彩也不是什么新鮮的玩法,它是非常受歡迎的設(shè)計(jì)手法和趨勢(shì)。這種設(shè)計(jì)技法讓設(shè)計(jì)師可以更輕松地創(chuàng)建層次分明的效果,可以通過色彩疊加來創(chuàng)建更為統(tǒng)一的視覺效果,控制對(duì)比度,營造氛圍和情緒。

這種設(shè)計(jì)當(dāng)中,透明度的控制是極為關(guān)鍵的一個(gè)步驟。通常,設(shè)計(jì)師不會(huì)讓色彩疊加層透明度太低,這樣用戶就可以一目了然地看到背景的圖片信息。不過,在今天的這幾個(gè)案例當(dāng)中,用戶需要仔細(xì)分辨才能看清背景中被蓋住的內(nèi)容,因?yàn)樯石B加層的透明度不高,對(duì)背景圖片的遮蓋力很強(qiáng)。對(duì)于這種設(shè)計(jì)趨勢(shì),我們可以簡單分析一下:

  • 這種設(shè)計(jì)看起來是很酷的,低透明度讓背景以紋理的形式呈現(xiàn),更加富有深度,創(chuàng)造出吸引人的視覺效果。
  • 這種設(shè)計(jì)趨勢(shì)不適合傳遞背景信息,因?yàn)榈屯该鞫却_實(shí)很難讓背景的細(xì)節(jié)清晰地傳達(dá)出來。

那么,這種設(shè)計(jì)趨勢(shì)是否值得追隨呢?這個(gè)就要具體問題具體看待了。

不要使用這種趨勢(shì)來呈現(xiàn)關(guān)鍵性的圖片信息,如果你僅僅只是要借助圖片搭配色彩疊加來強(qiáng)化層次感、增加信息量,那么另當(dāng)別論。

在下面的每個(gè)案例當(dāng)中,前景的元素都足以傳遞出清晰的內(nèi)容和信息,彩色疊加層后的圖片內(nèi)容更多是裝飾性的。圖片雖然都提供了一些附加的信息,但是這些信息都不是關(guān)鍵,它們更多的是強(qiáng)化視覺。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

這是一個(gè)適用范圍相對(duì)較窄的趨勢(shì),如果你想使用的話,同樣需要控制好透明度。

結(jié)語

跟隨設(shè)計(jì)趨勢(shì)是一個(gè)非常有趣的事情,它可以讓你的設(shè)計(jì)保持新鮮,讓你的設(shè)計(jì)在激烈的競(jìng)爭(zhēng)中脫穎而出,它同時(shí)可能還存在一些風(fēng)險(xiǎn),需要你在使用的時(shí)候仔細(xì)衡量。


UI按鈕設(shè)計(jì)發(fā)展史

藍(lán)藍(lán)設(shè)計(jì)的小編

當(dāng)我們?cè)诰W(wǎng)上購物,提交我們個(gè)人信息都需要用到按鈕。網(wǎng)頁UI設(shè)計(jì)的增長很快,風(fēng)格似乎也是一個(gè)月一變。最近幾年,我們經(jīng)歷過從文 本鏈接到擬物化設(shè)計(jì)再到扁平化瀑布流設(shè)計(jì)。導(dǎo)航是網(wǎng)頁設(shè)計(jì)中最重要的元素,并且按鈕是最重要的行為工具。

UI設(shè)計(jì)方向大抉擇:是游戲UI還是應(yīng)用UI?

藍(lán)藍(lán)設(shè)計(jì)的小編

學(xué)習(xí)UI設(shè)計(jì)培訓(xùn)的人很多,但是方向基本都是應(yīng)用UI和游戲UI。下面我們分別來談?wù)剝烧叩膮^(qū)別

如何看懂UI效果圖

藍(lán)藍(lán)設(shè)計(jì)的小編

UI即User Interface(用戶界面)的簡稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。

日歷

鏈接

個(gè)人資料

存檔