wpf 点击某控件范围之外的区域 该控件隐藏_iOS平台设计规范(八)控件Controls...
無論是UI、交互,還是產品經理,都應該熟讀iOS平臺設計規范。這對我們的產品設計,百利而無一弊。
? ?控件(Controls)
一、按鈕(Buttons)
按鈕常用于觸發特定操作,可自定義的背景顏色,并且可以包含標題或圖標。系統為大多數用例提供了許多預定義的按鈕樣式。你也可以設計自定義按鈕。
系統按鈕
系統按鈕通常出現在導航欄和工具欄中,也可以在任何地方使用。
? ? ? ?
1、在標題中使用動詞
一個特定動作的操作按鈕標題,可以間接告訴用戶按鈕是可交互的,并說明點擊它的結果。
2、使用標題格式命名標題
將除了冠詞、并列連詞和四個或更少字母的介詞之外,每個單詞首字母都應大寫。(中文下的APP幾乎不存在這個問題)
3、按鈕標題盡量簡短
過長的文本會占用界面過多空間,顯得擁擠,而且在較小的屏幕上可能會顯示不全。
4、只在必要時添加邊框或背景顏色
默認情況下,系統按鈕沒有邊框或背景。然而,在某些內容區域中,通過邊界或背景表示按鈕的交互性也是有必要的。
例如:在電話APP中,帶邊框的數字鍵加強了傳統的撥打電話模式,而“呼叫”按鈕突出的背景顏色使按鈕更引人注意,更易點擊。
詳情展開按鈕
詳情展開按鈕可打開視圖(通常是模態視圖),其中包含與屏幕上特定項目相關的信息或功能。雖然你可以在任何類型的視圖中使用它們,但詳情展開按鈕通常是用于列表中,便于用戶訪問有關某行列表的信息。
? ? ? ?? ? ? ?
在列表中適當使用詳情展開按鈕。當列表中有詳情展開按鈕時,點擊該按鈕會顯示附加信息,點擊其他位置則選擇行或APP的自定義行為。如果你希望用戶點擊整行以查看更多詳細細節,請不要使用“詳情展開”按鈕。相反,可以使用指向性的顯示附件(如箭頭)。
信息按鈕
信息按鈕會顯示有關App配置的詳細信息,有時會在下一頁展示,有時以彈出窗口的形式展示。
? ? ??? ? ? ?
信息按鈕有兩種風格 - 淺色和深色。選擇與你的設計最適合的樣式,且不會在頁面上被看不清楚的樣式。
添加聯系人按鈕
用戶可以點擊“添加聯系人”按鈕來瀏覽現有聯系人列表,并選擇一個用于插入文本字段或其他視圖的列表。例如,在郵件APP中,你可以點擊郵件“收件人”字段中的“添加聯系人”按鈕,從聯系人列表中選擇收件人。
? ? ? ?
除“添加聯系人”按鈕外,應同時允許鍵盤輸入。“添加聯系人”按鈕只是為鍵入聯系人信息提供了一種形式,而不是替代方法。可以將它作為添加現有聯系人的快捷方式,但同時也要讓用戶可以通過鍵盤輸入聯系人信息。
二、情境菜單(Context Menus)
在iOS 13及更高版本中,你可以使用情境菜單讓用戶訪問與APP相關的其他功能,而不會使界面混亂。
? ? ? ?? ? ? ?
情境菜單類似于Peek(輕壓手勢喚醒)和Pop(重壓手勢喚醒),有兩個主要區別:
所有運行iOS 13及更高版本的設備都可以使用情境菜單;但Peek和Pop僅適用于支持3D Touch的設備。
情境菜單會立即彈出與相關的命令;Peek和Pop則需要向上滑動才能查看命令。
用戶可以通過系統定義的觸摸并按住或3D Touch(只是3D Touch可以使情境菜單更快地顯示),來顯示情境菜單。打開時,情境菜單將顯示該項的預覽并列出對其起作用的命令。用戶可以選擇命令或將項目拖動到另一個區域、窗口或應用程序。
1、一致采用情境菜單
如果你為某些地方的項目提供情境菜單而不是所有項目,用戶將不知道他們到底可以在哪些地方使用該功能,并且可能認為是APP有問題/Bug。
2、僅包括適用于該項的最常用命令
例如,在郵件的上下文菜單中,顯示用于回復和移動郵件的命令是很有意義的,但如果顯示格式或郵箱命令沒有意義。列出太多命令可能會讓人頭昏眼花。
3、使用子菜單來管理復雜性
子菜單是情境菜單的菜單項,顯示邏輯相關命令的二級菜單。為子菜單提供直觀的標題來描述它們的內容,這樣用戶就可以預測子菜單的命令而不必全部顯示出來。簡潔、以行動為導向的標題,同時允許用戶跳過他們在當前環境中不需要的子菜單。
4、將子菜單保持在一個層級
雖然子菜單可以縮短情境菜單并說明用戶可以執行的命令,但是如果子菜單都不在一個層級使得體驗變得復雜,并且讓用戶難以導航。
5、將最常用的項放在情境菜單的頂部
當用戶打開情境菜單時,他們的焦點是位于菜單的頂部區域。將最常用的項應該放在菜單頂部,以便用戶及時找到他們正在尋找的項。
6、使用分隔符對相關菜單項進行分組
創建可視分組可以幫助用戶更快地瀏覽菜單。例如:你可以使用分隔符對與需要編輯的相關的操作項進行分組,使用另一個分隔符對與共享的相關操作項進行分組。通常,用戶不希望情境菜單的分組超過三個。
7、避免為同一項目提供情境菜單和編輯菜單
當人用戶為同一個項目啟用這兩個功能時,系統很難檢測到用戶的真正意圖,這可能會讓用戶感到困惑。
8、避免提供項目預覽的操作按鈕
用戶可以通過點擊打開他們正在預覽的項目,因此通常不需要額外再提供明確的“打開”按鈕了。
三、編輯菜單(Edit Menus)
用戶可以觸摸并按住或雙擊文本字段、文本視圖、網頁視圖或圖像視圖中的元素,來選擇內容,并彈出編輯內容的操作選項,例如復制和粘貼。
? ? ? ? ? ? ?
1、為當前內容提供的相應命令
默認情況下,命令選項包括剪切、拷貝、粘貼、選擇、全選以及刪除,其中任何命令都可以被禁用。如果未選擇任何內容,則編輯菜單應該禁用需要用到選擇的選項,例如“拷貝”或“剪切”。同理,如果已選擇某些內容,則菜單應禁用“選擇”選項。(見下圖對比)
?? ? ?? ? ? ?
2、如有必要,可調整編輯菜單的位置
默認情況下,根據可用空間,菜單位于插入點/選擇的上方或下方,并包含指向相關內容的箭頭。雖然你無法更改編輯菜單的形狀,但它的位置是可配置的 - 你可以改變展示位置來避免它覆蓋重要內容或界面的某些部分。
3、不要使用與編輯菜單相同功能的其他控件
提供多種方式來進行相同的操作,會導致不一致的用戶體驗并造成混淆。例如:如果允許用戶通過編輯菜單來拷貝內容,就不要再添加一個復制按鈕。
4、不能編輯文本也應允許選擇和拷貝
用戶通常希望將靜態內容(例如圖像標簽或社交媒體狀態)拷貝到電子郵件,便箋或網絡搜索中使用。
5、不要在編輯菜單上加“編輯”按鈕
如果這樣做,用戶很容易誤點,從而導致編輯菜單被取消。
6、讓編輯操作可撤消
在編輯菜單上執行操作之前不需要確認。但用戶在執行操作后可能改變主意,所以始終要實現撤消和返回功能。
7、使用有用的自定義命令擴張編輯選項?
通過提供特定于應用程序的其他命令來增加菜單的選項,與標準命令一樣,任何自定義命令都可以對選擇的文本或對象進行操作。
8、當系統提供的命令滿足不了需求時,才考慮自定義命令
不要嘗試用自定義命令替代系統提供的命令,因為這些命令是眾所周知且經常使用的。
9、盡量減少自定義命令的數量
太多的選項反而會讓人陷入糾結。
10、自定義命令的標題盡量簡短
命令名稱應該是動詞或簡短的動詞短語,簡單地描述了要執行的操作即可。
四、標簽(Labels)
標簽用來描述屏幕中的界面元素或提供短消息。雖然用戶無法編輯標簽,但他們有時可以復制標簽的內容。標簽可以顯示任意數量的靜態文本,但盡量保持言簡意賅。
? ? ? ?? ? ? ??
保持標簽清晰。標簽可以包含各種樣式的文本。如果你需要調整標簽的樣式或使用自定義字體,請確保文本的可讀性和易讀性。
最好采用動態類型,這樣當用戶在其設備上更改文本大小時,標簽的可讀性仍然可以很好。同時,你還需要在啟用了輔助功能選項的情況下測試標簽,例如粗體文本。
五、頁面控件(Page Controls)
頁面控件主要用來顯示當前頁面在一系列頁面中的所處位置。即一系列小小的指示圓點,代表一系列可用頁面的順序。實心點則表示當前頁面。
在視覺上,這些點總是等距的,并且如果在頁面上出現太多則會顯示不全。用戶可以點擊頁面控件的左邊或右邊來訪問上一頁或下一頁,但是無法點擊特定圓點來轉到特定頁面。導航也總是按順序發生,通常是順著手勢滑動的方向將頁面滑動到某一側。
? ? ? ? ? ? ?
1、不要在層級不同的頁面之間使用頁面控件
頁面控件并不會顯示頁面之間的關聯或指示哪個頁面對應于哪個點。此類控件僅用于彼此層級相同的頁面。
2、不要顯示太多頁面
超過大約10個點很難讓人一目了然,超過20個頁面按順序瀏覽過去也是非常耗時的。如果你的應用需要顯示超過20個頁面,請考慮使用其他的排列方式 - 例如網格 - 啟用非順序導航。
3、頁面控件顯示在屏幕底部的中心
頁面控件應始終位于內容底部和屏幕底部之間的區域,并保持居中。這樣即能讓頁面控件是可見,又不會遮擋其他內容。
六、選擇器(Pickers)
選擇器顯示為一個或多個不同值的可滾動列表,每個列表都可以選擇一個值 - 選中的通常以文字深色加粗的形式突出顯示。當用戶編輯字段或點擊菜單時,選則器通常出現在屏幕底部或彈出窗口中。
選擇器也可以以內部嵌入的方式顯示,例如在日歷事件中編輯日期時。選擇器的高度大致是五行列表的高度。選擇器的寬度可以是屏幕的寬度,也可以是封閉視圖,具體取決于設備和上下文。
? ? ? ? ? ? ?
1、使用可預測、合理有序的值
當選擇器列表靜止時,很多值可能會被隱藏。所以列表中的值最好是可預測的,例如使用按字母順序排列的國家/地區列表,這樣他們就可以快速瀏覽列表。
2、避免切換頁面來顯示選擇器
選擇器顯示在正在編輯的字段下方或附近,是最為合適的。
3、如果很多值的話,使用列表而不是選擇器
太長的列表在選擇器中選擇起來,可能會很繁瑣。而列表即可以適當調整行高,還可以包含索引圖標,而且滾動速度比選擇器更快。
日期選擇器
日期選擇器是用于選擇特定日期、時間或兩者兼顧的界面交互。同時,它還提供了一個顯示倒計時的交互接口。
? ? ? ?? ? ? ?
日期選擇器有四種模式,每種模式都有一組不同的可選值。
日期:顯示年、月、日
時間:顯示小時、分鐘和 AM/PM(可選)。
日期和時間:顯示年、月、日、小時、分鐘和 AM / PM(可選)。
倒計時器:顯示小時、分鐘,最長23小時59分鐘。
日期選擇器中顯示的具體的值,及其順序取決于用戶設備的區域設置。
在指定分鐘時,提供較少顆粒度。默認情況下,分鐘列表包含60個值(0到59)。你可以選擇增加分鐘間隔,只要它均勻分為60即可。例如,你可能需要每隔一小時的間隔(0、15、30和45)。
七、進度指示器(Progress Indicators)
不要讓用戶長時間盯著靜止的屏幕上,來等待加載內容或執行冗長的數據處理操作。使用加載器和進度條讓用戶知道你的APP并沒有停止,最好讓他們知道大概需要等待多長時間。
加載器
當執行無法量化的任務(例如加載或同步復雜數據)時,加載器會旋轉。任務完成后它會消失。加載器是不是可交互元素。
?? ? ??? ? ? ?
1、進度條優于加載器
如果加載過程是可量化的,請使用進度條而不是加載器,以便用戶可以更好地衡量正在發生的事情以及需要多長時間。
2、保持加載器的轉動
用戶會很自然地把靜止的加載器與于APP的卡頓聯系起來。讓它旋轉,讓用戶知道正在發生的事情。
3、如果有幫助,請在用戶等待任務完成時為其提供有用的提示信息
可以在加載器上方添加標簽以提供額外的上下文信息。避免使用模糊的術語,如加載或驗證,因為它們通常不會有任何幫助。
進度條
進度條是一個從左到右填充的軌道,用以顯示當前頁面的任務進度。進度條是非交互式的,但通常伴有用于取消相應操作的按鈕。
?? ? ??? ? ? ?
1、保持進度條的準確性
請勿顯示不準確的進度信息,不要僅僅為了讓加載看起來很快而顯示不準確的進度信息。只能對可量化的任務使用進度條。否則,使用加載器。
2、對可量化時間的任務使用進度條
進度條非常適合顯示任務的當前狀態,特別是當它有助于傳達任務需要完成的時間時。
3、隱藏導航欄和工具欄中未填充的軌道部分
默認情況下,進度條的軌道包括已填充和未填充的部分。在導航欄或工具欄中使用時,例如表示頁面加載,應配置進度條來隱藏軌道的未填充部分。
4、自定義進度條的樣式
為了與APP的設計風格協調,你可以自定義進度條的樣式。例如,為軌道的填充指定自定義顏色或圖像。
網絡加載器
當網絡進行加載時,網絡加載器會出現在屏幕頂部的狀態欄中并旋轉,當網絡加載完成后,它自動會消失。該圖標看起來就像是一個加載器,并且也是非交互式的。
?? ? ??? ? ? ?
當網絡加載時間超過幾秒時,才顯示此加載器。加載很快的情況下不要顯示此加載器,因為它可能會在用戶注意到它之前就消失了。
八、刷新控件(Refresh Content Controls)
刷新控件被手動啟動后,對當前內容進行重新加載,無需等待內容自動更新,通常應用于列表視圖中。
刷新控件是一種特殊加載器,默認情況下是隱藏的,在向下拖動且需要重新加載內容時才變為可見。例如,在Mail中,向下拖動收件箱郵件列表可以檢查是否有新郵件。
? ? ? ? ? ? ?
1、執行自動內容更新
雖然用戶覺得手動刷新內容很不錯,但他們更希望內容會定期進行自動刷新。不要讓用戶手動發起每個更新。定期主動更新數據,保持數據的時效性。
2、有必要時才為刷新提供簡短標題
可以為刷新控件加一個標題。但在大多數情況下,這是沒有必要的,因為刷新控件的動效就很明確地表明了內容正在加載。如果真的有加標題的需求,請用它來解釋如何進行刷新。而是提供有關正在刷新的內容的有價值信息。
例如:播客APP中的刷新控件使用標題來告知用戶上次播客更新的時間。
九、分段控件(Segmented Controls)
分段控件是兩個或更多個段的線性集合,每個段是互斥的,不可同時存在的。在控件內,所有段的寬度相等。與按鈕一樣,段也可以包含文本或圖像。分段控件通常用于展示不同的視圖。
例如:在地圖APP中,分段控件可讓你在Map、Transit和Satellite視圖之間切換。
? ? ? ? ? ? ?
1、限制段的數量以提高可用性
越寬的段越容易點擊。在iPhone上,分段控件應該控制在5個或5個一以下的段。
2、盡量讓段內容大小一致
所有段的寬度都是相同的,如果段內容(例如段的標題)長度或大小不一致,則分段控件看起來會很不協調。
3、分段控件中不要同時包含文本和圖像
雖然段可以包含文本或圖像,但將兩者被混合在一個控件中可能會導致界面混亂讓人難以理解。
4、若自定義分段控件,請爆出內容協調
若要更改(自定義)分段控件的視覺樣式,請確保內容看起來協調可讀并且對齊。
Wi-Fi”中關閉“Wi-Fi”,會導致“可用網絡”和“其他”列表消失。\n十三、文本輸入框(Text fFields)"],[20,"\n","32:1"],[20,"文本輸入框是單行且固高度固定的區域,通常帶有圓角,當用戶點擊它時會自動彈出鍵盤。使用文本輸入框來輸入少量信息,例如電子郵件地址。\n\n"],[20,{"gallery":"https://uploader.shimo.im/f/K447guGowuo0Ipqm.png!thumbnail"},"29:0|30:0|3:\"4800\"|4:\"auto\"|crop:\"\"|frame:\"none\"|ori-height:\"2520\"|ori-width:\"4800\""],[20,"\n1、在文本輸入框中顯示必要的提示,以幫助用戶更好的輸入"],[20,"\n","32:3"],[20,"當輸入框中沒有其他文本時,文本輸入框可以包含占位符文本 - 例如“電子郵件”或“密碼” 。當有足夠的控件放占位符文本時,請勿使用單獨的標簽來描述文本輸入框。\n2、適當時侯,在文本輸入框的右端顯示“清除”按鈕"],[20,"\n","32:3"],[20,"若有“清除”按鈕,點擊它便會立即清空文本字段的內容,從而用戶完全不必一直繼續點擊Delete鍵來刪除。\n3、適當時候,使用安全文本字段"],[20,"\n","32:3"],[20,"若需要輸入的是敏感數據(如密碼)時,請始終使用安全提示類的文本字段。\n4、使用圖像和按鈕在文本字段中提供清晰度和功能"],[20,"\n","32:3"],[20,"可以在文本輸入框的左側或右側顯示自定義圖標,也可以添加系統提供的按鈕,例如“書簽”按鈕。通常,使用文本輸入框的左端來說明文本輸入框的用途或目的,使用其右端來放置其他附加功能,例如書簽。\n鍵盤"],[20,"\n","32:2"],[20,{"gallery":"https://uploader.shimo.im/f/hjGpOPZwcf0vAOjt.png!thumbnail"},"29:0|30:0|3:\"4800\"|4:\"auto\"|crop:\"\"|frame:\"none\"|ori-height:\"2580\"|ori-width:\"4800\""],[20,"\n\n"],[20,"根據實際情況,顯示適當的鍵盤類型。","27:\"12\"|8:1"],[20,"iOS提供了幾種不同的鍵盤類型,每種鍵盤都用于方便不同文本類型的輸入。當用戶在輸入文本時,根據輸入的文本類型顯示相應的鍵盤類型,可以簡化數據輸入。例如:如果用戶需要填寫電子郵件地址,則應顯示郵件鍵盤"],[20,"(見上圖)","0:\"%23a5a5a5\""],[20,"。\n"]]">
十、滑塊(Sliders)
滑塊是帶有一個稱為“拇指”控件的水平軌道,你可以用手指滑動該控件以在最小值和最大值之間移動,例如屏幕亮度的調節或媒體文件播放期間的位置調節。
當滑塊的值發生變化時,最小值和拇指之間的軌道部分會填充顏色。滑塊的左右位置好可以展示圖標,來說明最小值和最大值的含義。
? ? ? ? ? ? ?
1、如有必要,可以自定義滑塊的外觀
為了與你的設計風格融合并且更準確地傳達設計意圖,滑塊的外觀是可以更改的,包括軌道顏色、“拇指”圖標以及左右位置的圖標。
例如:可以調整左右位置圖標的大小,在左側顯示一個小圖像圖標,而在右側顯示一個大圖像圖標。
2、不要使用滑塊來調節音量
如果你的APP需要提供音量控制,請使用音量視圖,音量視圖是可以自定義的,其中包括音量視圖的滑塊和用于改變音頻輸出設備的控件。
十一、步進器(Steppers)
步進器是用于增加或減少增量值的兩段式控件。默認情況下,步進器的一個段顯示加號,另一個段顯示減號。
如果需要,可以自定義步進器或替換這些圖標。
? ? ? ?
1、確保隨著步進器變化的那個值,清晰可見
步進器本身不展示任何值,因此請確保用戶知道,使用步進器時它們正在改變哪個值。
2、不要使用步進器調整較大數量級的值
調整小數量級的值時,使用步進器是很合適的。例如,在打印頁面上,使用步進器設置份數效果是很好的,因為用戶很少對份數設置進行更改。
另外,使用步進器選來擇頁面范圍是沒有意義的,因為即使一個合理的頁面范圍也需要大量的點擊。
十二、開關(Switchs)
開關主要用于兩個互斥狀態之間的視覺切換。
?? ? ????
1、自定義開關的視覺樣式,使它與你的設計更協調
根據設計風格,自定義開關在其關閉和打開時的背景顏色,可以使開關在APP中的體驗更好。
2、僅在列表中使用開關
開關用在列表中,例如可以打開和關閉的設置列表。如果你需要工具欄或導航欄中使用類似功能,請改用按鈕,并提供兩個不同的圖標來傳達不同的狀態。
3、避免在開關中添加說明標簽
關于開關的打開或關閉,用戶是很明確的。額外的提供文本標簽描述開關狀態是多余的,還會使界面混亂不堪。
4、可以用開關來管理相關界面元素的可用性
開關通常會影響屏幕上的其他內容。
例如,在“設置”中打開“飛行模式”開關會禁用其他功能/設置,例如“蜂窩”和“個人熱點”。在“設置>Wi-Fi”中關閉“Wi-Fi”,會導致“可用網絡”和“其他”列表消失。
十三、文本輸入框(Text Fields)
文本輸入框是單行且固高度固定的區域,通常帶有圓角,當用戶點擊它時會自動彈出鍵盤。
使用文本輸入框來輸入少量信息,例如電子郵件地址。
?? ? ??? ? ? ?
1、在文本輸入框中顯示必要的提示,以幫助用戶更好的輸入
當輸入框中沒有其他文本時,文本輸入框可以包含占位符文本 - 例如“電子郵件”或“密碼” 。
當有足夠的控件放占位符文本時,請勿使用單獨的標簽來描述文本輸入框。
2、適當時侯,在文本輸入框的右端顯示“清除”按鈕
若有“清除”按鈕,點擊它便會立即清空文本字段的內容,從而用戶完全不必一直繼續點擊Delete鍵來刪除。
3、適當時候,使用安全文本字段
若需要輸入的是敏感數據(如密碼)時,請始終使用安全提示類的文本字段。
4、使用圖像和按鈕在文本字段中提供清晰度和功能
可以在文本輸入框的左側或右側顯示自定義圖標,也可以添加系統提供的按鈕,例如“書簽”按鈕。
通常,使用文本輸入框的左端來說明文本輸入框的用途或目的,使用其右端來放置其他附加功能,例如書簽。
鍵盤
? ? ??? ? ? ?
根據實際情況,顯示適當的鍵盤類型。iOS提供了幾種不同的鍵盤類型,每種鍵盤都用于方便不同文本類型的輸入。當用戶在輸入文本時,根據輸入的文本類型顯示相應的鍵盤類型,可以簡化數據輸入。
例如:如果用戶需要填寫電子郵件地址,則應顯示郵件鍵盤(見上圖左)。
總結
以上是生活随笔為你收集整理的wpf 点击某控件范围之外的区域 该控件隐藏_iOS平台设计规范(八)控件Controls...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: waitpid最后以一个参数设为0_西门
- 下一篇: vc++ 6.0 创建程序快捷方式的一个