論APP發布狀態左上角的按鈕命名及其背后邏輯關系
一個APP在發狀態的時候其左上角按鈕到底應該是取消呢,還是返回呢?還是×,或還是其他?這不是一個很重大很要命的問題,但是它也不僅僅只是一個按鈕的問題,不同的模式其底層的本質不同。
這個問題之前我也一直忽略,我們自己的不約App當時直覺的就直接用×了,沒多余的想法,就是其他都是按鈕形態,如果以一個取消文字來代替,跟其他頁面設計樣式有沖突。后面迭代的時候App已經變化很大了,現如今的一個版本重新整理了一下按鈕及其邏輯,跟設計還有開發多次溝通過后發現我們的×也是需要做點改變了。
嗯,廢話結束,進入正題。
在設計發狀態時候左上角的按鈕命名時候首先要弄清楚自己產品的頁面邏輯關系,然后可以去多看看目前的主流產品都是如何處理的,再結合自身的情況做適當的調整。
碰到這個問題后,不要只憑直覺“我覺得它應該是一個什么什么”,先去調研調研再說,看看主流APP的設計都有那些模式,思考一下別人為什么要那樣做,用著是不是很順心沒有交互障礙。
下午通過研究若干個APP之后發現現如今主流的模式有這么幾種:
- 取消——微信、微博、QQ空間、QQ郵箱、LOFT、赤兔等
- ×——人人、nice、脈脈、知乎等
- 返回——備忘錄、in等
- 關閉——簡書等
總共研究了13款我手機裝的APP,大概也覆蓋了目前的主流應用,我們來做個小診斷,看看他們都是什么樣的,為什么要那樣弄。
模式一:“取消”處理法
上圖為證
按順序來,依次為微信、QQ空間、QQ郵箱、LOFT、微博。
其頁面交互為:從底部彈出到,點擊“取消”后從頂部下去。
思考一下他們為什么這么做?
- 首先,這幾個APP除了LOFT之外他們頁面的按鈕都是圖標+文字為主,因此在這里用“取消”符合其他頁面的設計原則,同時不會對用戶造成困擾。
- 其次,打開寫狀態——“取消“不寫了,這種交互邏輯是在不影響目前頁面的前提下,調出來一個新的頁面覆蓋在其上,因此用“取消”符合其頁面邏輯。
- 最后,“取消”是什么意思呢?百度百科解釋為:“取消 ”亦作“ 取銷 ”。使原有的制度、規章、資格、權利等失去效力。那么在這里其意思符合用戶使用場景邏輯,使目前編輯的狀態頁面失去效力。
模式二:“×”處理法
上圖為證
按順序來,依次為人人、nice、脈脈、知乎。
其頁面交互為:從底部彈出到,點擊“×”后從頂部下去。
思考一下他們為什么這么做?
- 首先×跟取消的意思即為接近,給用戶的感受偏向于“不要了“的意思,因此在這種編輯狀態場景下符合邏輯。
- 其次,使用×的APP除了考慮使用場景邏輯問題,還有一個很重要的問題就是設計統一原則問題,這些APP各個頁面都以純粹的圖標為按鈕,因此在這個頁面使用圖標“ד是對設計原則的遵循。
- 最后,一個“ד多簡單明了啊,只要其他邏輯原則不沖突,首選,我懂你懂大家懂。
- PS,其實單純的圖標對小白用戶的使用還是有一些壓力的,這也是為什么騰訊系的產品絕大部分都是圖標+文字模式,雖然啰嗦,但有人家的深層考量,純粹的追求設計的簡潔容易做出自己一個人或是對互聯網產品有高度認知度的小眾用戶的產品,最終無法推廣到大眾用戶。
模式三:“返回”處理法
上圖為證
按順序來,依次為in、備忘錄。
其頁面交互為:從右側出來,點擊“返回”后又回到右側。
思考一下他們為什么這么做?
- 首先,這個返回包含的比較多,不僅是單獨的一個返回圖標,還有返回圖標+返回文字,另外還有返回圖標+上一個頁面的標題等,但這種設計模式目前依然小眾,翻了很多APP,最終只有in和蘋果備忘錄兩個APP。
- In的返回邏輯比較容易理解,在此頁面之前還有兩個編輯圖片的頁面,他們都是一個樣式,右上角為返回,用戶可以一步步走下去,最終也可以一步步返回去,假如中途出什么差錯,不用重新來過,返回修改就OK,對用戶的使用是一個減壓。
- 備忘錄的邏輯怎么說呢,我還是沒太搞明白,路過的大神求賜教╮(╯▽╰)╭
模式四:“關閉”處理法
上圖為證
上圖為【簡書】大拿
其頁面交互為:從底部彈出到,點擊“關閉”后從頂部下去。
思考一下他們為什么這么做?
- 記得還有幾個APP也是關閉處理法,不過今天沒怎么找到,或許是他們迭代已經更改了,目前就一個簡書還是這樣。
- 個人理解,關閉是一個很程序的詞匯,常為程序猿專用詞匯,或許簡書的產品經理是開發轉入?我瞎猜而已╮(╯▽╰)╭,簡書的小伙伴們求考證
- 第二,關閉百度百科解釋有兩層意思:1.指門閂,后泛指防御性的設施。 指心情,意思是關閉自己不想與外界有任何聯系。而簡書是一個寫文章的APP,它這里不是狀態,是文章,因此使用“關閉“這個詞匯相對于”取消“似乎更適合一些,我在寫東西,寫著寫著不想寫了,那我關閉就好了,在簡書上寫東西是為了讓別人看到,那么我不想寫了就是不想跟外界發生任何聯系,那么我就關閉,或是私密保存,或是放棄編輯。
應該還有其他的設計模式,但畢竟不是主流,用戶也比較難接受。
綜上,在一個發狀態的頁面其左上角的圖標到底應該怎樣設計?
其實我們需要考慮這么兩個因素就夠了:
第一:你的APP受眾人群是哪些?是部分互聯網高認知的用戶呢?還是普羅大眾?
這也是為什么騰訊系的產品大部都是圖標+文字的設計樣式原因。他們面對的是十數億的普羅大眾,比如我老媽她知道取消是什么意思,但是對于×就不知道了,不敢點了。另外國外的主流產品大部分都是純圖標的,這跟其互聯網普及也有關,國民已經熟悉簡潔的互聯網規則了,所以無需累贅加文字解釋;但國內尤其是中西部已經農村地區,大家剛剛開始接觸互聯網,需要一個認知的過程;
考慮了第一個因素后就考慮第二個因素:你的APP其他頁面按鈕是如何設計的?如果是純圖標,那么請在這里保持一致,一個×解決所有事;如果不是純圖標,那就需要相應的調整來做統一了。
嗯,到這里我也知道我們的不約App這一版的按鈕應該如何規約了,發帖頁面會有一個調整的,不過在跟老大討論的時候又發現一個問題,APP頁面什么時候從下面出來?什么時候從右邊出來?嗯,這是個好問題,以前想過但沒研究過的,下期文章見。希望能有更多朋友一起研究討論(*^__^*) ……
#專欄作家#
紫沐渲葉,人人都是產品經理專欄作家,一只有點小驕傲小文藝的產品菜鳥,喜歡倒騰產品和設計,看好O2O、教育和人工智能。長得不那么帥,打游戲、看電影、外出浪、打個球、寫篇文、拍個照、幻個想都是我的菜。
本文原創發布于人人都是產品經理,未經許可,不得轉載。
飯飯。。
你是 ?? ??
我認為 X 的意思就關閉當前頁,返回 是 回到上一個頁面,關閉 是關閉該相關內容。就類似于現階段的微信公眾號頁面
騰訊系的基本都是取消╮(╯▽╰)╭,X其實也可以理解為取消
其實關閉(叉號),取消三者本身操作一致,更多的是語意上微妙的差異,作者雖然細致的分析了一下,但在快體驗的app使用過程中,用戶也很少會揣摩出差別; 但這三者有個共同特征,就是所在頁與上一頁沒有直接層級關系,更多是進階操作,所以會有關閉、取消這種對于操作、動作的描述。
而back鍵則大多是層級間的銜接標志,在備忘錄中,新建備忘錄頁面和列表頁是父子關系,點擊back鍵直接回列表頁;點擊列表可以繼續編輯。 iPhone的備忘錄很好地詮釋了備忘錄的特性-隨時改寫,而不是再另外觸發動作再繼續編輯。
有些時候和語文的閱讀理解倒是有得一拼
╮(╯▽╰)╭說不重要它們一點都不重要說重要還真的很重要
其實我覺得關閉(叉號)、取消對用戶來說就是一個破壞性或者撤銷動作,是消極的操作,這是給用戶大概的感知。在碎片化的閱讀時代,用戶真的很少會如作者這樣深入的解讀。
back鍵的使用有歧義,就是用戶不知道點擊后會不會使輸入的東西丟失,所以一般的解決方案是要么給提示,要么保持輸入的信息。
哈哈哈,對的啊,但也是一點點語義上的區別會給用戶造成誤解
備忘錄的邏輯關系瞬間懂了啊,仔細一想還真是這樣子,層級關系才是最重要的,其他的都是更進一步的優化。那in以返回來設計可能是基于什么樣的考慮呢?
這個流程是 點擊上傳-選擇照片或者照相-照片處理-寫文字。 選擇照片頁是叉號(關閉),符合對于觸發操作的撤銷邏輯,而注意:下面有一個醒目的button:下一步,這是說明下面的兩步都是層級關系或者至少說具有順序性。自然是用back。 back到最后還是回到照相頁面,也說明這一頁的重要性,也符合in照片分享性質的定位。
簡單總結就是:照相頁才是核心頁面,被點擊觸發。后面的兩個頁面只是這個頁面的子頁面,即使back也是會回到照相頁。
嗯嗯,大部分情況下不僅用戶不會注意,產品經理都不會注意到,這只是APP設計中的一個細節了,就像你說的能區分開頁面層級關系就夠了,真心說關閉叉叉和取消三者區別不是很大,更多是語義上產生的一點區別,不過產品不也正是從細節打磨中一步步獲勝的嘛,一步一步來,總歸是好的