訓練
模組
Build tabs for Microsoft Teams - Training
Learn how to build tabs that provide embedded web experiences within Microsoft Teams.
注意
此設計指南是針對 Windows 7 所建立,尚未針對較新版本的 Windows 進行更新。 大部分的指導方針仍以原則方式套用,但簡報和範例不會反映 我們目前的設計指導方針。
索引標籤提供在個別標籤頁面上呈現相關資訊的方式。
一組典型的索引標籤。
索引標籤通常會與屬性視窗 (相關聯,反之亦然) ,但索引標籤可用於任何類型的視窗。
索引標籤控制項代表用來組織在美國中經常找到的封包中組織資訊的索引標籤式快取資料夾。 (全球未使用 (一個資料夾。)
若要決定使用時機,請考量下列問題:
索引標籤有數種使用模式:
使用狀況 | 範例 |
---|---|
動態視窗介面 如同捲軸,索引標籤可用來增加視窗介面區以顯示相關資訊。 |
使用此模式時,使用索引標籤的概念上類似于將所有資訊放在單一可捲動表面的索引標籤上,並將索引標籤標示為標題。 在此範例中,索引標籤可有效地增加視窗介面區。 |
多重檢視 如同分割按鈕或下拉式清單,索引標籤可用來顯示相同或相關資訊的不同檢視。 |
在此範例中,索引標籤會變更檔中的檢視。 |
多個檔 如同多個視窗,索引標籤可用來在單一視窗中顯示不同的檔。 |
在這些範例中,索引標籤會在單一應用程式視窗中顯示不同的檔。 |
獨佔選項 如同選項按鈕,索引標籤可用來呈現多個獨佔選項。 在此模式中,只會套用選取的索引標籤,並忽略所有其他索引標籤。 |
在此範例中,會使用索引標籤 (錯誤) 做為選項按鈕的替代專案。 不建議使用此模式 ,因為它使用非標準行為。 索引標籤的行為是設定,而不是單純是在視窗內巡覽的方式。 |
如果您只執行一件事...
請確定索引標籤上的資訊相關,但不同頁面上的設定是獨立的。 選取的最後一個索引標籤應該沒有特殊意義。
如果下列情況,請使用水準索引標籤:
如果下列情況,請使用垂直索引標籤:
屬性視窗有八個以上的索引標籤。
使用水準索引標籤需要一個以上的資料列。
在此範例中,垂直索引標籤會容納八個以上的索引標籤。
請勿巢狀索引標籤,或結合水準索引標籤與垂直索引標籤。 相反地,請減少索引標籤數目、只使用垂直索引標籤,或使用另一個控制項,例如下拉式清單。
不要捲動水準索引標籤。 水準捲動無法輕易探索。 不過,您可以捲動垂直索引標籤。
不正確:
在此範例中,水準索引標籤會捲動。
針對可調整大小的視窗或窗格上的索引標籤,視需要在頁面上放置捲軸,而不是視窗或窗格。 索引標籤應該一律為可見,而不會捲動出檢視。
在此範例中,索引標籤頁面具有捲軸,而不是窗格。
請確定索引標籤看起來像索引標籤,而不是其他類型的控制項。
不正確:
在此範例中,這些索引標籤看起來像命令按鈕。
請勿將圖示放在索引標籤上。 圖示通常會新增不必要的視覺效果雜亂、耗用螢幕空間,而且通常不會改善使用者理解。 只新增有助於理解的圖示,例如標準符號。
不正確:
在此範例中,圖示會新增視覺雜亂,並稍微改善使用者理解。
例外: 如果空間不足,無法顯示有意義的標籤,您可以使用清楚辨識的圖示:
正確:
在此範例中,視窗很窄,圖示會比標籤更能傳達索引標籤。
請勿針對索引標籤圖形使用產品標誌。 索引標籤不適用於 商標。
請勿在索引標籤頁面上使用捲軸。 Tabs 函式類似于捲軸,以增加視窗的有效區域。 其中一個機制應該已足夠。
使用精簡的索引標籤標籤。 使用清楚描述頁面內容的一或兩個字。 較長的標籤會耗用螢幕空間,特別是當標籤當地語系化時。
使用特定且有意義的索引標籤。 避免套用至任何索引標籤的泛型索引標籤,例如 [一般]、[進階] 或 [設定]。
如果索引標籤不適用於目前的內容,且使用者不預期,請將其移除。 這麼做可簡化 UI,使用者不會錯過它。
不正確:
在此範例中,當 Microsoft Word當做電子郵件編輯器使用時,[檔案位置] 索引標籤會不正確停用。 不應停用此索引標籤,而是應該移除,因為使用者不會預期在此內容中檢視或變更檔案位置。
如果索引標籤不適用於目前的內容,且使用者可能會預期它:
請勿停用索引標籤,因為這樣做並不明確,而且禁止探索。 尋找特定值的使用者會強制查看所有其他索引標籤。
在此範例中,[檢視] 選項都不適用於閱讀版面配置。 不過,使用者可能會預期他們根據索引標籤套用,因此會顯示頁面,但選項已停用。
請勿使用此模式! 請改用選項按鈕或下拉式清單。
不正確:
在此範例中,索引標籤不正確地用來取代選項按鈕。
正確:
在此範例中,會改用選項按鈕。
參考索引標籤時:
範例:在 [ 工具] 功能表上,按一下 [ 選項],然後按一下 [ 檢視 ] 索引標籤。
訓練
模組
Build tabs for Microsoft Teams - Training
Learn how to build tabs that provide embedded web experiences within Microsoft Teams.
文件
透過清單檢視,使用者可以使用單一選取專案或多重選取專案,檢視數據物件集合並與其互動。
使用核取方塊時,使用者會決定兩個明顯相反的選擇。
透過 [搜尋] 方塊,使用者可以藉由篩選或醒目提示相符專案,快速找出大型資料集內的特定物件或文字。