青島設計網標志 搜藝招聘
   Guest:  登陸 | 注冊 | 網站首頁 | 論壇首頁 | 我的貼子 | 修改資料 | 留言板 | 會員列表 | 論壇幫助  | 論壇首頁  

  論壇首頁   GUI交互式界面與設計  關于退出按鈕,你可能不知道的設計細節

[公告]快到[搜藝招聘網]發布招聘信息 注冊簡歷、發布自己作品! :)  
關于退出按鈕,你可能不知道的設計細節  
    yoguz

查看yoguz的博客


金錢: 18222
Level: 0
發帖數: 1557
最后登陸: 2019-7-8
注冊時間: 2004-12-13



[咽炎吃什么藥]每天泡2袋,堅持30天,咽炎好如初
信息 | 留言 | 引用 | 回復 | 編輯 | 置頂 | 移動 | 刪除

退出按鈕,無論是模態,對話框還是彈出窗口,都是內容交互中必要的操作元素,我們只需要建立合理的退出方式就好。
寫在前面,讀完這篇文章你將會了解到:關閉按鈕“x”的設計歷史“x”設計的注意事項關閉按鈕設計的最佳案例“x”圖標在應用中是一個非常常見的交互暗示,可以將煩人的彈窗從內容上進行關閉。無論是模態,對話框還是彈出窗口,都是內容交互中必要的操作元素,我們只需要建立合理的退出方式就好。視覺設計在ux通用設計模式中“退出”(e-x-iting)是非常簡單的,你們看到我在exiting這個單詞中刻意突出了“x”。“x”這個符號的歷史可以追溯到20世紀70年代的計算機設計語言,它第一次出現可能是在 atari tos(譯者注:atari tos是雅達利電腦操作系統,在1993年就停產了)菜單中,”x”是退出的命令。它后來被“next”所使用,它為windows的設計帶來了靈感,并在1995年隨著windows全球大規模的使用而成為關閉的標準符號。講這段歷史,目的是為了說明,沒有必要重新造輪子,使用全世界每個人都能懂的符號更為合適。無障礙設計我們應該在一些需要關閉的界面中始終提供【x】,即使用戶可以通過單擊背景,滑動,或者使用手機返回按鈕來關閉界面。
圖標和字體設計一個圖標,而不是使用一個字體,它應該被清晰的理解為是一個【x】,而不是模棱兩可。我個人更喜歡夾角是90度,并且四個角長度都相等的關閉圖標設計。
高對比度和低對比度它的顏色應該保持中立,符合a11y (譯者注:關于這個項目的具體細節可以自行google) 項目推薦的4:1對比度。當然,當【x】幾乎做成灰白色時,對彈出框的視覺表現影響可能最小。通過使得【x】幾乎不可見,變相強制和誘導用戶執行主要操作,這就是我們常說的設計陰暗面,這可能導致想關閉彈窗的用戶感到受挫,對體驗來說是不可取的。
帶外框和不帶外框圖標應該最好包含外框以暗示可以點擊的目標相對大小,這樣也能將可交互圖標與不可交互的圖標區分開,尤其是在兩種圖標造型非常相似的情況下。如果圖標和容器的尺寸小于最小點擊區域的大。48x48dp/pt),則需要將點擊范圍設置為大于按鈕的視覺效果,并且不與其他交互元素重疊。如果這個圖標是在一個可交互的導航欄中,比如標題導航,那么這個位置就已經為圖標創建了一個可點擊的空間,就無需另外再設計了。位置彈窗內容不應該成為阻礙用戶流程的攔路虎,關閉的操作應該足夠顯眼。雖然大多數windows軟件一直在右上角放置關閉操作,但今天apple和google的一些規范都把關閉圖標放在了左上角。當涉及到模態時,這兩個系統都沒有太明確的方向。接下來,我會嘗試逐一分析模態彈窗的最佳設計。
模態界面圖標位置模態位置除了警告彈窗之外,大多數模態內容都是非必須的,因此它們可以適當弱化。雖然一般做法都是將模態彈窗直接出現在屏幕中間,但現在有一種新趨勢,通過將模態彈窗放在屏幕的底部,使他們看起來沒有那么強烈。
底部vs中間[x] 的擺放位置
內部vs交疊vs外部內部:出現在模態彈窗的內部。這樣的擺放可以很清晰的與模態內容聯系在一起,從版式上來說也很美觀,缺點是它可能會增加模態中標題布局的復雜性。交疊:出現在模態彈窗的邊緣。在連續的邊緣中間出現間斷最能引起人們對“x”圖標的注意,但它所具有的獨特視覺風格,增加了視覺復雜性,感覺也沒有那么精致。外部:出現在模態彈窗之外。這樣使得模態窗口很整潔,但是關閉圖標可能會與下面的ui混淆在一起。
右邊vs左邊。圖標來自于 meg robichaud結束(右邊) 將“x”放在右側會比放在左側更好,理由是對于人的右手拇指適應性更好,并且不會與左側的示意圖標相互沖突。開始(左邊) 將“x”放在左側時應該遵循當前的導航模式,但它增加了彈窗的垂直高度,因為不能太靠近示意圖標。注:這是基于ltr語序來說的(譯者注:ltr在這里可以說是從左往右的閱讀語序),“開始”是用戶開始閱讀內容的地方,“結束”是用戶停止閱讀的地方。最佳配置現在把所有的東西都綜合在一起——一個對齊在底部的彈窗,包括一個在右上角的“x”圖標。
只有文字,圖片和圖標的三種情況。總結我必須承認,你其實也可以嘗試使用兩個文字按鈕,其中一個是“關閉”。這也是一個不錯的選擇,并且也被谷歌規范所推薦,但如果你不希望關閉那么突出,擔心會發生意外點擊或者遇到多語言問題,“x”按鈕就會是一個很好的通用解決方案。


排卵期計算器 橙創意



2019-2-22 13:48:47
信息 | 留言 | 引用 | 回復 | 編輯 | 置頂 | 移動 | 刪除


青島設計網版權所有
本論壇言論純屬發表者個人意見
国产福利视频第一导航