前言

評(píng)價(jià)一個(gè)產(chǎn)品的優(yōu)劣單單從視覺層面評(píng)判往往是不夠的，還要考量界面設(shè)計(jì)的細(xì)節(jié)是否到位。這也是大多數(shù)設(shè)計(jì)師可能會(huì)忽略的點(diǎn)，更何況現(xiàn)在的競爭日益激烈，設(shè)計(jì)差異正在逐漸縮小，此時(shí)的細(xì)節(jié)就顯得尤為重要，舉個(gè)例子：在設(shè)計(jì)頁面彈窗時(shí)你有考慮過彈窗在頁面中的位置嗎？你為什么要這樣做呢？如果在面試中你能回答上這個(gè)問題嗎？還有在設(shè)計(jì)時(shí)我們也要考慮開發(fā)實(shí)現(xiàn)時(shí)以什么樣的原則適配等諸多問題。

目錄

一、“X“圖標(biāo)的前世今生

二、“取消”與“關(guān)閉”的區(qū)別及注意事項(xiàng)

三、“取消、關(guān)閉、返回”三者之間的區(qū)別及應(yīng)用場景

? ? ?1.什么時(shí)候用取消？

? ? ?2.什么時(shí)候用關(guān)閉？

? ? ?3.什么時(shí)候用返回？

一、“X”圖標(biāo)的前世今生

很久以前，“X”圖標(biāo)是做為地圖上的一種標(biāo)記，它表示寶藏的藏身地點(diǎn)。是一種位置標(biāo)記點(diǎn)。但如今“X”圖標(biāo)不在用來做位置標(biāo)記了，而是代表“取消“或”關(guān)閉“臨時(shí)彈窗和臨時(shí)頁面。

那如何來確定“X”圖標(biāo)代表的是“取消”還是“關(guān)閉”呢？

其實(shí)，主要問題在于“X”圖標(biāo)缺少相應(yīng)的文本標(biāo)簽。當(dāng)“X”出現(xiàn)時(shí)用戶不知道它代表的是“取消”還是“關(guān)閉”。當(dāng)同一個(gè)圖標(biāo)在不同的頁面，卻代表著不同的含義，此時(shí)圖標(biāo)的可用性就會(huì)受到影響，因?yàn)橛脩魺o法做出判斷此時(shí)的圖標(biāo)代表的含義到底是什么。

二、“取消”與“關(guān)閉”的區(qū)別及注意事項(xiàng)

取消指放棄當(dāng)前所編輯的內(nèi)容，關(guān)閉是指關(guān)閉視圖（可自動(dòng)保存頁面內(nèi)容/操作）。在實(shí)際產(chǎn)品應(yīng)用中“X”圖標(biāo)代表“關(guān)閉”和“取消”的使用場景非常多，例如在一些產(chǎn)品的發(fā)布頁面當(dāng)中“X”圖標(biāo)表示取消，彈出頁面則表示“關(guān)閉”。值得注意的是，在頁面設(shè)計(jì)中不可逆操作一定要出現(xiàn)二次確認(rèn)，詢問用戶是否應(yīng)用該操作，防止用戶誤操作導(dǎo)致內(nèi)容丟失。如果缺少這一步驟，那一旦用戶誤操作導(dǎo)致內(nèi)容丟失，可想而知他的心情是怎樣的........,例如：在小陪伴APP中當(dāng)用戶關(guān)閉當(dāng)前正在學(xué)習(xí)的內(nèi)容時(shí)，當(dāng)前頁面會(huì)彈出一個(gè)確認(rèn)對(duì)話框，向用戶傳達(dá)一種限制，確認(rèn)則退出，取消則可以繼續(xù)學(xué)習(xí)當(dāng)前內(nèi)容。

三、“取消、關(guān)閉、返回”三者之間的區(qū)別及應(yīng)用場景

1、什么時(shí)候用取消？

用于臨時(shí)調(diào)用的頁面當(dāng)中

當(dāng)頁面B上的操作是對(duì)頁面A中的內(nèi)容進(jìn)行添加、編輯時(shí)，頁面B采用底部彈出動(dòng)效，左上角用取消。因?yàn)橛脩舻闹饕⒁饬υ贏頁面，在對(duì)頁面A內(nèi)容不滿意時(shí)（信息不足或者展現(xiàn)形式上不符合自身要求），才會(huì)臨時(shí)調(diào)用工具，進(jìn)入B頁面，但只會(huì)在臨時(shí)頁面B短暫停留，快速操作后又會(huì)重新回到信息內(nèi)容本身上面，也就是A頁面。

【例子1】微信-朋友圈-發(fā)帖頁面

【例子2】知乎-發(fā)布-寫想法頁面

【例子3】轉(zhuǎn)轉(zhuǎn)-發(fā)布-發(fā)布閑置頁面

在實(shí)際產(chǎn)品中我們可能會(huì)發(fā)現(xiàn)有時(shí)左上角是“X”圖標(biāo)，有時(shí)候是文本的取消。當(dāng)然這樣做都是沒問題的，只是有一個(gè)頁面之間的統(tǒng)一性問題。

例如：微信的發(fā)朋友圈頁面左上角是取消，所以選擇相片或視頻的頁面也是取消

例如：最右的發(fā)布頁面左上角是“X”圖標(biāo)，所以選擇相片或視頻的頁面也是“X”圖標(biāo)

當(dāng)然沒有絕對(duì)，具體是取消還是“X”圖標(biāo)還得具體問題具體分析。

2、什么時(shí)候用關(guān)閉？

用于調(diào)用的頁面當(dāng)中

當(dāng)A頁面的操作要作用于B頁面，B非A的子頁面，又非臨時(shí)頁面，B頁面用底部彈出動(dòng)效，左上角用關(guān)閉。

【例子1】微信-聊天界面-轉(zhuǎn)發(fā)（長按）-微信

【例子2】QQ-聊天界面-轉(zhuǎn)發(fā)（長按）-QQ

3、什么時(shí)候用返回？

用于父子層級(jí)關(guān)系中的子頁面

當(dāng)A、B頁面在結(jié)構(gòu)上是父子層級(jí)關(guān)系時(shí)，A為父，B為子。從A頁面進(jìn)入到B頁面，這時(shí)B頁面左上角用返回，并且使用側(cè)滑轉(zhuǎn)場動(dòng)效。

【例子1】微信-發(fā)現(xiàn)頁-朋友圈

【例子2】知乎-首頁-詳情頁面

【例子3】轉(zhuǎn)轉(zhuǎn)-消息-通知助手

總結(jié)

用于臨時(shí)調(diào)用的頁面使用取消，調(diào)用非關(guān)聯(lián)頁面用關(guān)閉，頁面屬于父子集關(guān)系時(shí)用返回，善于發(fā)現(xiàn)產(chǎn)品中的細(xì)節(jié)，為你的設(shè)計(jì)加分！