特別說明:
此欄目內(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)容均帶個人色彩,歡迎不同意見一起討論研究印蔗,相互切磋扒最!