Shot | 1. 微信朋友圈的小更新漾月。

特別說明:

此欄目內(nèi)截屏所用手機為iPhone Xs Max熊泵;

使用的畫布大小為: 414 X 896(1倍圖);

所以標注的內(nèi)容為元素在1倍圖下的尺寸箕般。

另:由于是比照截圖佛系標注耐薯,故尺寸很可能有1-2px的偏差。

............................................................

在我看來丝里,微信經(jīng)常是悄無聲息地就更新了些什么小小的功能曲初,今天要說的這個大約是在上周刷微信朋友圈的時候看到的。

看到第一眼的感覺是:“嗯杯聚?這個臼婆?這個...”

它是這樣的:

我沒有把今天要討論的那一塊圈出來,但是通過我的神奇測量幌绍,相信也都應(yīng)該能知道是哪一部分了吧颁褂。

按鈕背景吸取出來是#F7F7F7,但按標準說法應(yīng)該為:#000000 3%.

從視覺上很容易可以看出來傀广,其實就是放了一個全圓角的小按鈕颁独。

在微信UI規(guī)范里,正常次按鈕的背景色是 #000000 5%伪冰,但這個使用的背景色卻更淺 #000000 3%誓酒,這也足以體現(xiàn)出它的不重要性了。

雖然是相當(dāng)不重要的操作糜值,但仍要讓用戶一眼識別并保證不會誤點丰捷,所以給這個留了很大一塊區(qū)域坯墨;并且遵守朋友圈格式(分割線、背景色病往、間距)捣染,多了功能,卻還是保持風(fēng)格樣式的統(tǒng)一性停巷。

然后看到全圓角耍攘,我就順帶思考了一下為什么是全圓角的呢?為什么不是用已有樣式里圓角為4的圓角呢畔勤?

于是我把它們放在了一起蕾各,看效果:

單從視覺對比效果我們就可以看出來,左邊的全圓角按鈕明顯要更吸引注意力庆揪。

天天刷朋友圈的我們都能發(fā)現(xiàn)式曲,在朋友圈這一頁里,頭像與操作按鈕均為圓角按鈕缸榛,圖片均為直角吝羞,而這里的跳轉(zhuǎn)按鈕為全圓角按鈕。

為什么要使用這些不同的格式呢内颗?

既然說到這里钧排,我們不如仔細分析一下:

當(dāng)邊角帶弧度之后,就會更容易進入人的肉眼均澳,而當(dāng)弧度為全圓角的時候就非常引人注目了恨溜。

1.朋友圈中的圖片,它只是一個內(nèi)容的展示用途找前,比起通過圓角引起用戶的注意糟袁,它已經(jīng)有豐富的內(nèi)容吸引用戶點擊了,所以使用直角躺盛。

2.頭像和操作按鈕系吭,均可點擊進行相關(guān)(帶選擇性)的操作,故使用圓角颗品,一個是從視覺上符合用戶對于按鈕的既定認知,第二個則是在含圖片(帶直角)的朋友圈內(nèi)容中更能吸引用戶的注意力沃缘。

3.全圓角本身更適合使用在只含一個操作點的按鈕上躯枢,提供單一簡單交互,這樣看來明顯就很適用于“跳到還沒看的位置”這個操作槐臀。

............................................................

其實上面80%的內(nèi)容是我在寫第一個字的時候完全沒想到要展開的內(nèi)容锄蹂,不過現(xiàn)在看來似乎也挺不錯的,那么我還想說什么呢水慨?

就是我當(dāng)時看到這個按鈕的第二反應(yīng):“這...這不是微博的那...那什么嗎得糜?”

從含義上來看敬扛,這是兩個意義完全不同的按鈕。

微信的跳轉(zhuǎn)是告訴你朝抖,點了之后啥箭,可以跳轉(zhuǎn)到之前還未看的部分。

而微博的按鈕是告訴你治宣,之前的你都看完了急侥,點我給你一點新鮮的。

對于微信的設(shè)計我們剛剛已經(jīng)聊過了侮邀,那現(xiàn)在就來看看微博的坏怪,同樣是一個按鈕,微博比起微信的簡約绊茧,稍稍多了一些設(shè)計感(嗯铝宵?好像不只稍稍?)华畏,首先從使用背景底色將按鈕與微博的卡片內(nèi)容區(qū)分開來鹏秋,按鈕旁邊還使用了虛點分割線,并且按鈕本身應(yīng)該還是有一點描邊/陰影的唯绍,加之還是一個文字+圖標的按鈕拼岳。

比起微信的輕,微博可以說是很豐富了况芒。

唯一讓人有些不太理解的也是文字旁邊的向下箭頭的圖標惜纸,我琢磨了很久想給這個按鈕一個解釋,或許是想告訴用戶點擊擁有更多內(nèi)容绝骚?又或者是為了提醒用戶這個是可點擊的耐版?還是說僅僅是個下拉刷新的圖標?

作為一名深度腦洞用戶压汪,我看到這個的第一感覺就是:老覺得點擊以后會出來一個下拉選擇什么最新/最熱新聞之類的菜單粪牲,雖然想想不可能。

其實點擊后的樣子:就是開始加載的提示止剖。

于是我嘗試將那個向下箭頭去掉腺阳、換成其他的圖標。

去掉以后瞬間感覺清爽了很多穿香,也不會讓人產(chǎn)生歧義亭引,但結(jié)合微博的風(fēng)格來看的話,似乎就會略顯單調(diào)了一點皮获。

更換了個圖標以后能避免有像我一樣‘憨厚’的用戶會腦洞式誤解焙蚓,也符合整體風(fēng)格,我替換的圖標或許不是表達最清楚的,但從這點可以發(fā)現(xiàn)其實使用一個更貼近語境的圖標购公,在豐富設(shè)計的同時才會幫助用戶減少無謂思考的時間萌京,更加直觀的簡單明了的告知用戶信息。

關(guān)于微信這個新的功能點就說到這里啦宏浩,(似乎順帶也說了一下微博的相關(guān)內(nèi)容)知残,倒是意料之外的說了這么多,算是開了個好頭绘闷?~

真是棒極了橡庞!

............................................................

以上分析內(nèi)容均帶個人色彩,歡迎不同意見一起討論研究印蔗,相互切磋扒最!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市华嘹,隨后出現(xiàn)的幾起案子吧趣,更是在濱河造成了極大的恐慌,老刑警劉巖耙厚,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件强挫,死亡現(xiàn)場離奇詭異,居然都是意外死亡薛躬,警方通過查閱死者的電腦和手機俯渤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來型宝,“玉大人八匠,你說我怎么就攤上這事∨亢ǎ” “怎么了梨树?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岖寞。 經(jīng)常有香客問我抡四,道長,這世上最難降的妖魔是什么仗谆? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任指巡,我火速辦了婚禮,結(jié)果婚禮上隶垮,老公的妹妹穿的比我還像新娘厌处。我一直安慰自己,他們只是感情好岁疼,可當(dāng)我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般捷绒。 火紅的嫁衣襯著肌膚如雪瑰排。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天暖侨,我揣著相機與錄音椭住,去河邊找鬼。 笑死字逗,一個胖子當(dāng)著我的面吹牛京郑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播葫掉,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼末盔,長吁一口氣:“原來是場噩夢啊……” “哼修陡!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤谜慌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后洞拨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體罢浇,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年扛门,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸠信。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡论寨,死狀恐怖星立,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情政基,我是刑警寧澤贞铣,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站沮明,受9級特大地震影響辕坝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜荐健,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一酱畅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧江场,春花似錦纺酸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碎紊。三九已至,卻和暖如春樊诺,著一層夾襖步出監(jiān)牢的瞬間仗考,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工词爬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留秃嗜,地道東北人。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓顿膨,卻偏偏與公主長得像锅锨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子恋沃,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容