diff options
Diffstat (limited to 'docs/html-intl/intl/zh-tw/design')
5 files changed, 250 insertions, 182 deletions
diff --git a/docs/html-intl/intl/zh-tw/design/get-started/principles.jd b/docs/html-intl/intl/zh-tw/design/get-started/principles.jd index 27cce81c7d2e..c5d40d4bdf86 100644 --- a/docs/html-intl/intl/zh-tw/design/get-started/principles.jd +++ b/docs/html-intl/intl/zh-tw/design/get-started/principles.jd @@ -9,13 +9,13 @@ page.title=Android 設計原則 <p> 當您套用您本身的創意與設計思維時，請考慮這些原則。 -偏離一般做法要帶有目的。 +除非有特定目的，否則請遵循這些原則。 </p> <h2 id="enchant-me">使人著迷</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="delight-me">以出乎意外的方式取悅人</h4> <p>漂亮的外觀、精心設置的動畫，或時機恰到好處的音效，都是令人感到喜悅的體驗。 @@ -23,7 +23,7 @@ page.title=Android 設計原則 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_delight.png"> @@ -32,15 +32,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> -<h4 id="real-objects-more-fun">真實的物件比按鈕和功能表更有趣</h4> -<p>讓人們可以在您應用程式中直接輕觸和操縱物件，這可減少執行某項工作所需的認知過程，同時在情緒上更令人感到滿足。 +<h4 id="real-objects-more-fun">真實的物件比生硬的按鈕和選單，更能夠引人入勝。</h4> +<p>您所設計的應用程式應該要能讓使用者可直接輕觸並操縱物件。這將可減少執行工作所需的認知準備，同時也能讓使用者在情緒上更為滿足。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_real_objects.png"> @@ -49,16 +49,16 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="make-it-mine">提供個人設定</h4> -<p>人們喜歡加上個人風格，因為這有助於他們感到自在並握有主控權。提供能令人感受及美觀的預設設定，但也可以考慮使用不會阻礙主要工作卻又好玩的可選用性自訂項目。 +<p>很多人喜歡加上個人風格，因為這有助於他們感到自在並握有主控權。提供實用且美觀的預設設定，但也可以考慮使用不會阻礙主要工作而且有趣的選用自訂項目。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_make_it_mine.png"> @@ -67,15 +67,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="get-to-know-me">設法了解使用者</h4> -<p>隨著時間而學習使用者的偏好。讓人們易於取得之前的選擇，而不是一再詢問他們會做出相同選擇的問題。 +<p>隨著時間而學習使用者的偏好。讓使用者容易取得之前的選擇，而不是一再請他們做出相同的選擇。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_get_to_know_me.png"> @@ -84,14 +84,14 @@ page.title=Android 設計原則 <h2 id="simplify-my-life">簡化生活</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="keep-it-brief">保持簡潔</h4> -<p>以簡單單字組成簡短語句。人們傾向於略過冗長的句子。</p> +<p>以簡單單字組成簡短語句。多數人傾向於略過冗長的句子。</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_keep_it_brief.png"> @@ -100,15 +100,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="pictures-faster-than-words">圖片的傳達效果更勝於言語</h4> -<p>請考慮使用圖片來解釋想法。圖片能吸引人們的注意力，並比言語更有效率。 +<p>請考慮使用圖片來解釋想法。圖片能吸引目光，並比言語更有效率。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_pictures.png"> @@ -117,15 +117,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="decide-for-me">幫使用者決定，但使用者擁有最終決定權</h4> -<p>做出最好的猜測，先行動，而非先詢問。太多的選擇和決定會讓人們不高興。 +<p>做出最好的猜測，先行動，而非先詢問。太多的選擇和決定會讓使用者覺得很痛苦。 為防止錯誤，務必允許復原。</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_decide_for_me.png"> @@ -134,15 +134,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> -<h4 id="only-show-when-i-need-it">必要時僅顯示使用者需要的東西</h4> -<p>人們無法承受一次看到太多東西。將工作和資訊細分成小型、易消化的區塊。 -隱藏當下不重要的選項，但在人們需要選擇時要明確指導。</p> +<h4 id="only-show-when-i-need-it">必要時僅顯示使用者需要的內容</h4> +<p>多數人無法承受一次看到太多東西。將工作和資訊細分成小型、易消化的區塊。 +隱藏當下不重要的選項，但在需要選擇時要明確指導。</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_information_when_need_it.png"> @@ -151,15 +151,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> -<h4 id="always-know-where-i-am">使用者應該總是清楚所在位置</h4> -<p>給人們信心，知道自己沒有迷路。讓您應用程式中的各處看起來都有獨特性，並使用轉換來顯示畫面之間的關係。 +<h4 id="always-know-where-i-am">使用者應該永遠清楚所在位置</h4> +<p>給使用者信心，知道自己沒有迷路。讓您應用程式中的各個地方看起來都有獨特性，並使用轉換來顯示畫面之間的關係。 針對進行中的工作提供回饋。</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_navigation.png"> @@ -168,8 +168,8 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="never-lose-my-stuff">別弄丟使用者的東西</h4> <p>儲存使用者花時間所建立的資訊，並且讓使用者可從任何地方存取。跨手機、平板電腦和電腦記住設定、個人風格和建立的資訊。 @@ -177,7 +177,7 @@ page.title=Android 設計原則 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_never_lose_stuff.png"> @@ -186,15 +186,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="looks-same-should-act-same">如果看起來一樣，就應該有相同的動作</h4> -<p>讓功能看起來就不一樣，而非變化微妙，這可以協助人們辨別功能差異。在相同輸入環境下，因為模式看起來很類似但卻有不同的動作，請盡量避免使用。 +<p>讓功能看起來就不一樣，而非變化微妙，這可以協助使用者辨別功能差異。在相同輸入環境下，請盡量避免使用看起來很類似但作用卻不同的模式。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_looks_same.png"> @@ -203,15 +203,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="interrupt-only-if-important">重要時才打斷</h4> -<p>就像一位好的私人助理，讓人們免於無關緊要的枝微末節。人們總想集中注意力，除非很重要且具時效性，不然貿然中斷會令人感到費力且沮喪。 +<p>就像一位好的私人助理，應該讓使用者免於無關緊要的枝微末節。使用者總想集中注意力，除非很重要且具時效性，否則貿然中斷會令人感到費力且沮喪。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_important_interruption.png"> @@ -220,16 +220,16 @@ page.title=Android 設計原則 <h2 id="make-me-amazing">讓使用者驚艷</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="give-me-tricks">提供使用者各處通用的訣竅</h4> -<p>當人們能自行弄清楚來龍去脈時是很棒的體驗。運用來自其他 Android 應用程式的視覺模式和肌肉記憶效應，讓使用者更易於學會您的應用程式。 +<p>當使用者能自行弄清楚來龍去脈時是很棒的體驗。運用來自其他 Android 應用程式的視覺模式和肌肉記憶效應，讓使用者更易於學會您的應用程式。 例如，擺動手勢可能是很好的導覽捷徑。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_tricks.png"> @@ -238,16 +238,16 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="its-not-my-fault">不是使用者的錯</h4> -<p>提示人們更正時要溫和。人們使用您的應用程式時，會想要感受到自已非常明智。如果有什麼不對，請提供明確的復原指示，但不需要使用者明瞭技術細節。如果可以，請盡量在幕後修正。 - +<p>提示使用者進行更正時要溫和。使用者使用您的應用程式時，不會自覺是笨蛋。 +若有地方出錯，請提供明確的復原指示，但不需要使用者明瞭技術細節。如果可以，請盡量在幕後修正。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_error.png"> @@ -256,15 +256,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="sprinkle-encouragement">分段鼓勵</h4> -<p>將複雜工作細分成更小的步驟，讓使用者可以輕鬆完成。對動作給予回饋，即使只是個微光效果。 +<p>將複雜工作細分成更小的步驟，讓使用者可以輕鬆完成。對動作給予回饋，即使只是細微的動作。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> @@ -273,16 +273,16 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="do-heavy-lifting-for-me">為使用者處理繁重的工作</h4> -<p>讓新手也能做出以前從未想像過可以辦到的事情，讓使用者有專家的感覺。例如，組合多個相片效果的捷徑，只要幾個步驟，即可讓業餘照片令人驚艷。 +<p>讓新手也能做到以前從未想像過可以完成的事情，讓使用者覺得自己是專家。例如，組合多個相片效果的捷徑，只要幾個步驟，即可讓業餘照片令人驚艷。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_heavy_lifting.png"> @@ -291,15 +291,15 @@ page.title=Android 設計原則 <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="make-important-things-fast">快速找到重要的功能</h4> -<p>並非所有的動作都一視同仁。決定應用程式中最重要的部分，並讓使用者易於找到並可迅速使用，例如相機的快門按鈕或音樂播放器的暫停按鈕。 +<p>並非所有的動作都平等。決定應用程式中最重要的部分，並讓使用者易於找到並可迅速使用，例如相機的快門按鈕或音樂播放器的暫停按鈕。 </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_make_important_fast.png"> diff --git a/docs/html-intl/intl/zh-tw/design/material/index.jd b/docs/html-intl/intl/zh-tw/design/material/index.jd index 620ee6ec2062..464dc2a1b216 100644 --- a/docs/html-intl/intl/zh-tw/design/material/index.jd +++ b/docs/html-intl/intl/zh-tw/design/material/index.jd @@ -1,7 +1,6 @@ -page.title=材料設計 -page.tags=Material, design -page.type=設計 -page.image=design/material/images/MaterialLight.png +page.title=Android 材料設計 +page.tags=Material,design, 設計 +page.image=images/cards/design-material-for-android_2x.jpg @jd:body @@ -41,25 +40,25 @@ page.image=design/material/images/MaterialLight.png <p itemprop="description">材料設計是一份內容廣泛的綜合性指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。 Android 現已納入對材料設計應用程式的支援。 -如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec">材料設計規格</a>中定義的指示，並使用 -Android -5.0 (API 層級 21) 或後續版本中的新元件和新功能。</p> +如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec">材料設計規格</a>中定義的指示，並使用 Android 5.0 (API 級別 21) 或後續版本中的新元件和新功能。 + +</p> <p>Android 提供下列元素，供您打造材料設計應用程式：</p> <ul> - <li>一個新的設計風格</li> - <li>用於複雜檢視的小工具</li> + <li>新的設計風格</li> + <li>用於複雜視圖的小工具</li> <li>自訂陰影和動畫的新 API</li> </ul> -<p>如需取得如何在 Android 上實作材料設計的詳細資訊，請詳見<a href="{@docRoot}training/material/index.html">使用材料設計建立應用程式</a>。 +<p>如需取得如何在 Android 上實作材料設計的詳細資訊，請參閱<a href="{@docRoot}training/material/index.html">使用材料設計建立應用程式</a>。 </p> <h3>材料設計風格</h3> -<p>材料設計風格提供您應用程式使用的新樣式、可以讓您設定色板的系統小工具，並針對輕觸回饋與操作行為轉換提供預設動畫。 +<p>材料設計風格提供您應用程式使用的新樣式、可以讓您設定色板的系統小工具，並針對輕觸回饋與操作 Activity 轉換提供預設動畫。 </p> <!-- two columns --> @@ -92,8 +91,8 @@ Android <div style="width:700px;margin-top:25px;margin-bottom:20px"> <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" /> - <p>新的 <code>RecyclerView</code> 小工具是 <code>ListView</code> -更容易插入的版本，支援不同的版面配置類型，並提供效能改善。</p> + <p>新的 <code>RecyclerView</code> 小工具是 <code>ListView</code> 更容易插入的版本，支援不同的版面配置類型，並提供效能改善。 +</p> </div> <div style="float:left;width:250px;margin-right:0px;"> <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> @@ -109,12 +108,12 @@ Android <h3>檢視陰影</h3> -<p>除了 X 和 Y 屬性外，Android 中的檢視現在也有 Z 屬性。 -這個新屬性代表檢視的高度，這會決定：</p> +<p>除了 X 和 Y 屬性外，Android 中的視圖現在也有 Z 屬性。 +這個新屬性代表視圖的高度，這會決定：</p> <ul> -<li>陰影大小：帶有較高 Z 值的檢視會投射更大的陰影。</li> -<li>繪製順序：具有較高 Z 值的檢視會顯示在其他檢視之上。</li> +<li>陰影大小：Z 值較高的視圖會投射更大的陰影。</li> +<li>繪製順序：Z 值較高的視圖會顯示在其他視圖之上。</li> </ul> <div style="width:290px;margin-left:35px;float:right"> @@ -130,39 +129,38 @@ Android </div> </div> -<p>如需取得詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。 +<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪視圖</a>。 </p> <h3>動畫</h3> - -<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、檢視狀態中的變更，以及行為轉換，讓您建立自訂動畫。 +<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、視圖狀態中的變更，以及操作行為轉換，讓您建立自訂動畫。 </p> <p>這些 API 讓您可以：</p> <ul> <li style="margin-bottom:15px"> -回應您檢視中有<strong>輕觸回饋</strong>動畫的輕觸事件。 +回應您視圖中有<strong>輕觸回饋</strong>動畫的輕觸事件。 </li> <li style="margin-bottom:15px"> -隱藏和顯示有<strong>循環顯示</strong>動畫的檢視。 +隱藏和顯示有<strong>循環顯示</strong>動畫的視圖。 </li> <li style="margin-bottom:15px"> -在有自訂<strong>行為轉換</strong>動畫的行為間切換。 +在包含自訂<strong>操作行為轉換</strong>動畫的行為間切換。 </li> <li style="margin-bottom:15px"> 使用<strong>曲線動作</strong>建立更自然的動畫。 </li> <li style="margin-bottom:15px"> -在帶有<strong>檢視狀態變更</strong>動畫的一個或多個檢視屬性中變更動畫。 +在包含<strong>視圖狀態變更</strong>動畫的一個或多個視圖屬性中變更動畫。 </li> <li style="margin-bottom:15px"> -在檢視狀態變更間，顯示<strong>狀態清單可繪項目</strong>中的動畫。 +在視圖狀態變更之間，顯示<strong>狀態清單可繪項目</strong>中的動畫。 </li> </ul> -<p>輕觸回饋動畫會內建於數個標準檢視中，例如按鈕等。新 API 可讓您自訂這些動畫，並將其新增至您的自訂檢視中。 +<p>輕觸回饋動畫會內建於數個標準視圖中，例如按鈕等。新 API 可讓您自訂這些動畫，並將其新增至您的自訂視圖中。 </p> <p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。 @@ -176,7 +174,7 @@ Android <ul> <li><strong>矢量可繪項目</strong>可以調整大小，但又不會喪失定義，最適合於應用程式中的單色圖示。 </li> -<li><strong>可繪項目著色</strong>可讓您在執行階段將點陣圖定義為 Alpha 遮罩，並以一個顏色進行著色。 +<li><strong>繪製著色</strong>可讓您在執行階段將點陣圖定義為 Alpha 遮罩，並以一個顏色進行著色。 </li> <li><strong>顏色提取</strong>可讓您自動從點陣圖影像中提取顯著顏色。 </li> diff --git a/docs/html-intl/intl/zh-tw/design/patterns/compatibility.jd b/docs/html-intl/intl/zh-tw/design/patterns/compatibility.jd new file mode 100644 index 000000000000..b65b90be849c --- /dev/null +++ b/docs/html-intl/intl/zh-tw/design/patterns/compatibility.jd @@ -0,0 +1,70 @@ +page.title=向下相容性 +page.tags="support" +page.metaDescription=有關 Android 4.x 改寫針對舊硬體和 OS 版本設計的 UI 之備註。 +@jd:body + +<a class="notice-developers" href="{@docRoot}training/basics/supporting-devices/index.html"> + <div> + <h3>開發人員文件</h3> + <p>支援不同裝置</p> + </div> +</a> + +<p>Android 3.0 主要更新包含：</p> +<ul> +<li>淘汰導覽硬體鍵 (返回、選單、搜尋、首頁)，以虛擬控制按鍵取代實體導覽按鍵 (返回、首頁、最近使用記錄)。 +</li> +<li>健全的動作列選單使用模式。</li> +</ul> +<p>Android 4.0 版本將平板電腦的變更套用於手機平台。</p> + +<h2 id="older-hardware">針對舊版本的硬體及應用程式，改寫 Android 4.0</h2> + +<div class="cols"> + <div class="col-6"> + +<h4>使用虛擬導覽控制鍵的手機</h4> +<p>專為 Android 3.0 及之後版本設計的應用程式會在動作列中顯示動作。擠不進動作列或重要性不足的動作，會顯示在動作溢位中。 + +</p> +<p>使用者可輕觸動作列中的動作溢位以存取它。</p> + + </div> + <div class="col-7"> + + <img src="{@docRoot}design/media/compatibility_virtual_nav.png"> + + </div> +</div> + +<div class="cols"> + <div class="col-6"> + +<h4>使用實體導覽鍵的手機</h4> +<p>使用實體導覽鍵的 Android 手機不會在螢幕底部顯示虛擬導覽列。 +如要存取動作溢位，請使用選單硬體按鍵。所產生的動作彈出式選單的風格與先前範例相同，但會顯示在螢幕頂部。 +</p> + + </div> + <div class="col-7"> + + <img src="{@docRoot}design/media/compatibility_physical_buttons.png"> + + </div> +</div> + +<div class="cols"> + <div class="col-6"> + +<h4>在使用虛擬導覽控制鍵的手機上執行舊版應用程式</h4> +<p>當您在具備虛擬導覽控制鍵的手機上，執行為 Android 2.3 或之前版本所設計的應用程式時，動作溢位控制會顯示在虛擬導覽列的右側。 +您可以輕觸控制鍵，以顯示傳統 Android 選單風格的應用程式動作。 +</p> + + </div> + <div class="col-7"> + + <img src="{@docRoot}design/media/compatibility_legacy_apps.png"> + + </div> +</div> diff --git a/docs/html-intl/intl/zh-tw/design/patterns/confirming-acknowledging.jd b/docs/html-intl/intl/zh-tw/design/patterns/confirming-acknowledging.jd index ac8975f8092f..a92a017b32ff 100644 --- a/docs/html-intl/intl/zh-tw/design/patterns/confirming-acknowledging.jd +++ b/docs/html-intl/intl/zh-tw/design/patterns/confirming-acknowledging.jd @@ -2,14 +2,14 @@ page.title=確認及確認完成 page.tags=dialog,toast,notification @jd:body -<p>在某些情況下，當使用者在您應用程式中呼叫一個動作時，最好是透過文字來「確認」(confirm) <em></em>或「確認完成」<em></em>(acknowledge)。</p> +<p>在某些情況下，當使用者在您應用程式中呼叫一個動作時，最好是透過文字來「確認」<em></em>或「確認完成」<em></em>。</p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/confirm_ack_confirming.png"> <p><strong>確認</strong>是要求使用者確認真的要進行剛剛呼叫的動作。在某些情況下，確認訊息出現時會伴隨警告或需要使用者考量是否採取動作的相關重要資訊。</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/confirm_ack_acknowledge.png"> <p><strong>確認完成</strong>是顯示文字，讓使用者知道已經完成剛剛呼叫的動作。這會排除系統正在採取之隱式作業的不確定性。在某些情況下，確認完成出現時會伴隨復原動作的選項。</p> </div> @@ -22,14 +22,14 @@ page.tags=dialog,toast,notification <img src="{@docRoot}design/media/confirm_ack_flowchart.png"> <h2>確認</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>範例：Google Play 書籍</h4> <img src="{@docRoot}design/media/confirm_ack_ex_books.png"> <p>在此範例中，使用者已要求從其 Google Play 媒體庫中刪除一本書籍。顯示<a href="{@docRoot}design/building-blocks/dialogs.html#alerts">警示</a>來確認此動作，因為使用者必須了解將不再針對任何裝置提供這本書籍。</p> <p>設計一個確認的對話方塊時，要讓標題具有意義就必須回應要求的動作。</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>範例：Android Beam</h4> <img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> <p>確認不一定要以具有兩個按鈕的警示來呈現。在啟動 Android Beam 之後，會提示使用者輕觸要共用的內容 (在此範例中是一張照片)。如果他們決定不進行，只要移開他們的電話即可。</p> @@ -37,15 +37,15 @@ page.tags=dialog,toast,notification </div> <h2>確認完成</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>範例：已儲存放棄的 Gmail 草稿</h4> <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> - <p>在此範例中，如果使用者從 Gmail 撰寫畫面返回，可能會發生預期外的狀況：會自動儲存目前的草稿。以快顯通知 (toast) 形式出現的確認完成，會讓使用者明瞭此情況。確認完成會在幾秒鐘後淡出。</p> + <p>在此範例中，如果使用者從 Gmail 撰寫畫面返回，可能會發生預期外的狀況：會自動儲存目前的草稿。以快顯通知形式出現的確認完成，會讓使用者明瞭此情況。確認完成會在幾秒鐘後淡出。</p> <p>在此並不合適使用復原功能，因為儲存動作是由應用程式發起，而非使用者。瀏覽至草稿清單，就可以方便且快速地繼續撰寫。</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>範例：已刪除 Gmail 會話群組</h4> <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> <p>使用者從 Gmail 清單中刪除一個會話群組後，會出現確認完成訊息，並提供一個復原選項。確認完成會持續出現，直到使用者採取不相關的動作，例如捲動清單。</p> @@ -53,14 +53,14 @@ page.tags=dialog,toast,notification </div> <h2>無「確認」或「確認完成」</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>範例：+1 中</h4> <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> <p><strong>確認並非必要</strong>。如果使用者不小心按了 + 1 按鈕，這並不是什麼大問題。他們可以再次輕觸按鈕，復原此動作。</p> - <p><strong>確認完成並非必要</strong>。使用者將會看到 +1 彈起並變成紅色。這是個非常明確的訊號。</p> + <p><strong>確認完成並非必要</strong>。使用者將會看到 +1 按鈕彈起並變成紅色。這是個非常明確的訊號。</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>範例：從主螢幕移除應用程式</h4> <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> <p><strong>確認並非必要</strong>。這是特意設計的動作：使用者必須拖曳項目放到相對較大且隔離的目標上。因此極不可能發生意外狀況。但如果使用者後悔所做的決定，只需幾秒鐘，就可以恢復原狀。</p> diff --git a/docs/html-intl/intl/zh-tw/design/patterns/navigation.jd b/docs/html-intl/intl/zh-tw/design/patterns/navigation.jd index db160c2516d2..a568cb1d6724 100644 --- a/docs/html-intl/intl/zh-tw/design/patterns/navigation.jd +++ b/docs/html-intl/intl/zh-tw/design/patterns/navigation.jd @@ -10,71 +10,71 @@ page.image=/design/media/navigation_between_siblings_gmail.png </div> </a> -<p itemprop="description">一致的導覽是整體使用者體驗的必備組成。基本導覽的行為若不一致又令人意外，是最令使用者感到更沮喪的狀況。 +<p itemprop="description">一致的導覽是整體使用者體驗的要件。以不一致且非預期方式運作的基本導覽行為最令使用者感到沮喪。 Android 3.0 已將重大變更導入全域的導覽行為中。 -完全遵循 [返回] 及 [上一層] 的方針，會讓使用者感到您的應用程式導覽既可靠又符合預期。 +仔細遵循以下指導方針原則以設定 [返回] 及 [上一層] 按鈕，讓您的應用程式更可靠且符合預期。 +</p> +<p>Android 2.3 及之前版本均使用 [返回]<em></em> 按鈕在應用程式中進行導覽。 +在 Android 3.0 導入導覽列功能，使用者有了另一種導覽方式：[上一層]<em></em> 按鈕，由應用程式圖示及左指插入號組成。 </p> -<p>Android 2.3 和更早版本依賴系統 [返回] -<em></em>按鈕，以支援應用程式內的導覽。在 Android 3.0 導入動作列之後，出現第二個導覽機制：[上一層] -<em></em>按鈕，由應用程式圖示和左指符號組成。</p> <img src="{@docRoot}design/media/navigation_with_back_and_up.png"> -<h2 id="up-vs-back">[上一層] vs.[返回]</h2> +<h2 id="up-vs-back">[返回] 及 [上一層]</h2> + +<p>[上一層] 按鈕用於在應用程式中，根據畫面之間的階層關係進行導覽。 +例如，如果畫面 A 顯示項目清單，然後選擇其中一個項目導致進入畫面 B (更詳細呈現該項目)，那麼畫面 B 應該提供 [上一層] 按鈕，以便返回畫面 A。 -<p>[上一層] 按鈕用於在畫面間有階層關係的應用程式中導覽。 -例如，如果畫面 A -顯示項目清單，然後選擇其中一個項目導致進入畫面 B (更詳細呈現該項目)，那麼畫面 B 應該提供 [上一層] 按鈕，以便返回畫面 A。 </p> -<p>如果畫面是在應用程式中的最頂端 (亦即應用程式的首頁)，則不應該會有 [上一層]按鈕。 +<p>如果畫面是在應用程式中的最頂端 (亦即應用程式的首頁)，則不應該會有 [上一層] 按鈕。 </p> <p>系統 [返回] 按鈕用於逆時間順序導覽，透過歷程記錄，可以經歷使用者最近使用過的畫面。 [返回] 通常基於畫面之間的暫時關係，而非應用程式的階層。 </p> -<p>當先前檢視的畫面也是目前畫面的階層父項時，按下 -[返回] 按鈕和按下 [上一層] 按鈕效果相同 — 這是常見的狀況。 -然而，與 [上一層] 按鈕不同的是 (該按鈕可以確保使用者仍停留在您的應用程式內)：[返回] -按鈕可以讓使用者返回主畫面，或甚至是不同的應用程式。</p> +<p>當先前檢視的畫面也是目前畫面的階層父項時，按下 [返回] 按鈕和按下 [上一層] 按鈕效果相同 — 這是常見的狀況。 + +然而，與 [上一層] 按鈕不同的是 (該按鈕可以確保使用者仍停留在您的應用程式內)：[返回] 按鈕可以讓使用者返回主螢幕，或甚至是不同的應用程式。 +</p> <img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png"> <p>[返回] 按鈕還支援幾個間接關聯畫面對畫面導覽的行為： </p> <ul> -<li>關閉浮動視窗 (對話、快顯)</li> +<li>關閉浮動視窗 (對話框、快顯)</li> <li>關閉內容相關的動作列，並從選取項目移除醒目顯示</li> <li>隱藏畫面鍵盤 (IME)</li> </ul> <h2 id="within-app">在應用程式內導覽</h2> -<h4>導覽至具有多重入口的畫面</h4> -<p>有時候，一個畫面在應用程式的階層中並沒有嚴謹的位置，而且可以從多個入口存取 — 例如可以從您應用程式中任何其他畫面存取的設定畫面。在這種情況下，[上一層] -按鈕應該選擇返回導引至此畫面的前一畫面，這個行為與 [返回] 相同。 +<h4>導覽至具有多個進入點的畫面</h4> +<p>有時畫面在應用程式中的階層並不明確，可從多個入口點進入畫面 — 例如，可從應用程式中的任何其他畫面進入的設定畫面。 +在這種情況下，應按下 [上一層] 按鈕回到之前的參照畫面，操作方式與 [返回] 按鈕相同。 </p> -<h4>在畫面內變更檢視</h4> -<p>變更畫面的檢視選項並不會變更 [上一層] 或 [返回] 的行為：畫面仍維持在應用程式階層中的相同位置，並不會建立新的導覽歷程記錄。 +<h4>在畫面內變更視圖</h4> +<p>變更畫面的視圖選項並不會變更 [上一層] 或 [返回] 的行為：畫面仍維持在應用程式階層中的相同位置，並不會建立新的導覽歷程記錄。 </p> -<p>這類檢視變更的範例如下：</p> +<p>這類視圖變更的範例如下：</p> <ul> -<li>使用標籤和/或左與右滑動來切換檢視</li> -<li>使用下拉清單 (亦即折疊標籤) 切換檢視</li> +<li>使用標籤和/或左與右滑動來切換視圖</li> +<li>使用下拉清單 (亦即折疊標籤) 切換視圖</li> <li>篩選清單</li> <li>對清單排序</li> <li>變更顯示特性 (如縮放)</li> </ul> <h4>在同層級畫面間導覽</h4> -<p>當您的應用程式支援從項目清單導覽至項目之一的詳細檢視時，使用者通常會想使用方向導覽功能，以便從該項目導覽至清單中的前一個或後一個項目。 +<p>當您的應用程式支援從項目清單導覽至項目之一的詳細視圖時，使用者通常會想使用方向導覽功能，以便從該項目導覽至清單中的前一個或後一個項目。 例如在 Gmail 中，可以很容易從會話群組向左或右滑動，方便檢視相同「收件匣」中的較新或舊會話群組。 -就像在一個畫面中變更檢視時，這類導覽不會變更 [上一層] 或 [返回] 的行為。 +就像在一個畫面中變更視圖時，這類導覽不會變更 [上一層] 或 [返回] 的行為。 </p> <img src="{@docRoot}design/media/navigation_between_siblings_gmail.png"> -<p>然而有一個明顯的例外是，在不被引用清單綁在一起的相關詳細資料檢視之間瀏覽時 — 例如在 Play 商店中於相同開發者的不同應用程式之間瀏覽時，或是在相同演出者的專輯間瀏覽時。 +<p>然而有一個明顯的例外是，在未與引用清單繫結在一起的相關詳細資料視圖之間瀏覽時 — 例如在 Play 商店中於相同開發者的不同應用程式之間瀏覽時，或是在相同演出者的專輯間瀏覽時。 在這些情況下，瀏覽每個連結都會產生歷程記錄，這會造成 [返回] 按鈕會經歷每個先前檢視過的畫面。 [上一層] 應該會繼續略過這些相關的畫面，並導覽到最近檢視過的容器畫面。 @@ -82,16 +82,16 @@ Android 3.0 已將重大變更導入全域的導覽行為中。 <img src="{@docRoot}design/media/navigation_between_siblings_market1.png"> -<p>基於您對詳細資料檢視的瞭解，您有能力讓 [上一層] 行為甚至變得更聰明。 +<p>基於您對詳細資料視圖的瞭解，您有能力讓 [上一層] 行為甚至變得更聰明。 再延伸說明之前提及的 Play 商店範例，想像使用者已從最近檢視的「書籍」導覽至「電影」改編的詳細資料。 -在這種情況下，[上一層] -可以返回到使用者之前沒有導覽過的上層容器 (電影)。</p> +在這種情況下，[上一層] 可以返回到使用者之前沒有導覽過的上層容器 (電影)。 +</p> <img src="{@docRoot}design/media/navigation_between_siblings_market2.png"> -<h2 id="into-your-app">透過「主畫面小工具」和「通知」，導覽至您的應用程式</h2> +<h2 id="into-your-app">透過「主螢幕小工具」和「通知」，導覽至您的應用程式</h2> -<p>您可以使用主畫面小工具或通知，協助您直接導覽至深入您應用程式階層中的畫面。 +<p>您可以使用主螢幕小工具或通知，協助您直接導覽至深入您應用程式階層中的畫面。 例如，Gmail 的「收件匣」小工具和新郵件通知，都可以略過「收件匣」畫面，將使用者直接帶到會話群組檢視之中。 </p> @@ -100,7 +100,7 @@ Android 3.0 已將重大變更導入全域的導覽行為中。 <ul> <li>如果目的地畫面通常是透過您應用程式中的一個特定畫面到達，那麼 [上一層] 應該要導覽至該畫面。<em></em> </li> -<li>否則<em></em>， [上一層] 應該導覽至您應用程式的最頂端 (「主」) 畫面。</li> +<li>否則<em></em>， [上一層] 應該導覽至您應用程式的最頂端 (「主」) 螢幕。</li> </ul> <p>就 [返回] 按鈕而言，您應讓導覽更符合預期，方法是在工作的返回堆疊中，插入前往應用程式最頂端畫面的完整向上導覽路徑。 @@ -108,30 +108,30 @@ Android 3.0 已將重大變更導入全域的導覽行為中。 </p> -<p>舉例來說，Gmail 的主畫面小工具有一個按鈕，可以直接往下進入撰寫畫面。 -來自撰寫畫面的 [上一層] 或 [返回] 按鈕，會將使用者帶到「收件匣」中，而此處的 [返回] 按鈕則可繼續前往至「主畫面」。 +<p>舉例來說，Gmail 的主螢幕小工具有一個按鈕，可以直接往下進入撰寫畫面。 +來自撰寫畫面的 [上一層] 或 [返回] 按鈕，會將使用者帶到「收件匣」中，而此處的 [返回] 按鈕則可繼續前往至「主螢幕」。 </p> <img src="{@docRoot}design/media/navigation_from_outside_back.png"> <h4>間接通知</h4> -<p>當您的應用程式需要同時呈現多個事件的資訊時，可以使用單一通知，引導使用者進入一個插頁畫面。 -此畫面會摘要這些事件，並提供路徑，讓使用者可以深入應用程式之中。這種風格的通知稱為「間接通知」<em></em>。 - +<p>若應用程式必須同時呈現多個事件，可利用單一通知，引導使用者進入插頁畫面。 +插頁畫面會概述所有事件，並提供讓使用者可以深入應用程式之中的路徑。 +這種通知方式稱為<em>間接通知</em>。 </p> <p>與標準 (直接) 通知不同的是，從間接通知的插頁畫面按下 [返回]，會讓使用者返回至通知觸發的起點 — 無其他畫面會插入至返回堆疊之中。 -一旦使用者從插頁畫面繼續進入應用程式之後，[上一層] -與 [返回] 會如上所述，其行為就像針對標準通知一樣：在應用程式內導覽，而非返回插頁畫面。 +一旦使用者從插頁畫面繼續進入應用程式之後，[上一層] 與 [返回] 會如上所述，其行為就像針對標準通知一樣：在應用程式內導覽，而非返回插頁畫面。 + </p> <p>例如，假設 Gmail 中的使用者收到來自「行事曆」的間接通知。輕觸這個通知會打開插頁畫面，而此畫面會顯示數個不同事件的提醒。 從插頁畫面輕觸 [返回]，會讓使用者返回至 Gmail。輕觸特定事件會將使用者帶離插頁畫面，並進入完整的「行事曆」應用程式，顯示事件的詳細資料。 -從事件詳細資料中，[上一層] 和 [返回] 會導覽至「行事曆」的最頂層檢視。</p> +從事件詳細資料中，[上一層] 和 [返回] 會導覽至「行事曆」的最頂層視圖。</p> <img src="{@docRoot}design/media/navigation_indirect_notification.png"> @@ -139,75 +139,75 @@ Android 3.0 已將重大變更導入全域的導覽行為中。 <p>快顯通知<em></em>會略過通知匣，直接出現在使用者面前。 這不常使用，<strong>應該要保留在需要適時回應，以及必須中斷使用者前後關聯動作的時候</strong>。 -例如，Talk -就使用這種風格，用來提示使用者有朋友邀請加入視訊聊天，而且此邀請會在幾秒之後自動過期。 +例如，Talk 就使用這種風格，用來提示使用者有朋友邀請加入視訊聊天，而且此邀請會在幾秒之後自動過期。 + </p> <p>就導覽行為而言，快顯通知緊接著間接通知插頁畫面的行為。 -[返回] 會關閉快顯通知。如果使用者從快顯導覽進入通知應用程式，[上一層] -和 [返回] 會遵循標準通知的規則，只在應用程式內導覽。 +[返回] 會關閉快顯通知。如果使用者從快顯導覽進入通知應用程式，[上一層] 和 [返回] 會遵循標準通知的規則，只在應用程式內導覽。 + </p> <img src="{@docRoot}design/media/navigation_popup_notification.png"> <h2 id="between-apps">在應用程式間導覽</h2> -<p>Android 系統的基本優點之一是應用程式互相啟動的能力，讓使用者能夠直接從一個應用程式導覽至另一個應用程式。 -例如，需要擷取一張相片的應用程式可以啟動「相機」應用程式，而此應用程式會將相片傳回引用的應用程式。開發人員可以輕鬆利用其他應用程式的程式碼，而使用者在經常執行的動作中可以享受一致性的體驗，這對雙方都是一大好處。 - +<p>Android 系統的主要優勢在於應用程式之間可彼此互連，使用者可從一個應用程式中直接導覽至另一個應用程式。 +舉例來說，需要拍攝相片的的應用程式，可開啟「相機」應用程式，然後再返回原始參照應用程式中。 +這項功能不僅使開發人員可輕鬆地利用其他應用程式的程式碼，還可讓使用者透過一致的作業方式享受常用功能。 </p> -<p>要瞭解應用程式對應用程式的導覽，重要的是要瞭解以下討論的 Android 架構行為。 +<p>欲了解應用程式對應用程式的導覽行為，必須先了解以下介紹的 Android 架構行為。 </p> -<h4>活動、工作和意圖</h4> +<h4>Activity、工作和意圖</h4> -<p>在 Android 中，<strong>活動</strong>是一個應用程式元件，定義了資訊畫面，以及使用者可以執行的所有關聯動作。 -您的應用程式是個活動的集合，包括您可以建立及您能從其他應用程式重複使用的活動。 +<p>在 Android 中，<strong>Activity</strong> 是一個應用程式元件，定義了資訊畫面，以及使用者可以執行的所有關聯動作。 +您的應用程式是個 Activity 的集合，包括您可以建立及您能從其他應用程式重複使用的 Activity。 </p> -<p><strong>工作</strong>是使用者遵循以達到目標的一系列活動。單一工作可以利用來自單一應用程式的活動，或是汲取數個不同應用程式的活動。 +<p><strong>工作</strong>是使用者遵循以達到目標的一系列 Activity。單一工作可以利用來自單一應用程式的 Activity，或是汲取數個不同應用程式的 Activity。 </p> -<p><strong>意向</strong>是指應用程式所發出想要另一套應用程式協助執行某動作訊號的機制。 -應用程式的活動可指示其可回應哪些意向。 -針對如「共用」等常見意向，使用者可能已安裝許多可以滿足此要求的應用程式。 +<p><strong>意圖</strong>是指應用程式所發出想要另一套應用程式協助執行某動作訊號的機制。 +應用程式的 Activity 可指示其可回應哪些意圖。 +針對如「共用」等常見意圖，使用者可能已安裝許多可以滿足此要求的應用程式。 </p> -<h4>範例：在應用程式間導覽，以支援共用</h4> - -<p>要理解活動、工作和意向如何攜手合作，請思考應用程式如何讓使用者使用另一套應用程式來共用內容。例如，從「主」畫面啟動 Play 商店應用程式，開始新工作 A (見下圖)。 +<h4>例如：在多個應用程式中導覽以支援共用功能</h4> -在導覽經歷 Play 商店，並輕觸一本促銷的書籍以查看詳細資料後，使用者仍會停留在相同工作中，並透過新增行為延伸工作。 -觸發「共用」動作會提示使用者一個對話框，列出已註冊可用來處理「共用」意向的每個活動 (來自不同的應用程式)。 +<p>要了解使用活動、工作和意圖如何相互作用，必須先考慮一個應用程式如何讓使用者利用另一個應用程式共用內容。 +例如，在首頁中開啟 Play 商店應用程式，並開始工作 A (如下所示)。 +使用者在 Play 商店應用程式中結束導覽後，輕觸促銷的書籍以查看細節，這時仍會停留在相同的工作中，同時新增活動以延伸功能。 +觸發「共用」動作會提示使用者一個對話框，列出已註冊可用來處理「共用」意圖的每個 Activity (來自不同的應用程式)。 </p> <img src="{@docRoot}design/media/navigation_between_apps_inward.png"> -<p>當使用者選擇透過 Gmail 共用，Gmail -的撰寫活動會被新增為工作 A 的延續 — 而不會建立新工作。如果 Gmail 有本身的工作正在背景執行，這並不會影響該工作。 +<p>當使用者選擇透過 Gmail 共用，Gmail 的撰寫 Activity 會被新增為工作 A 的延續 — 而不會建立新工作。 +如果 Gmail 有本身的工作正在背景執行，這並不會影響該工作。 </p> -<p>從撰寫活動中，傳送訊息或輕觸 [返回] 按鈕，會讓使用者返回至書籍詳細資料的活動。 -繼續輕觸 [返回] 則會經由 Play 商店往回導覽，最終到達「主畫面」。 +<p>從撰寫 Activity 中，傳送訊息或輕觸 [返回] 按鈕，會讓使用者返回至書籍詳細資料的 Activity。 +繼續輕觸 [返回] 則會經由 Play 商店往回導覽，最終到達「主螢幕」。 </p> <img src="{@docRoot}design/media/navigation_between_apps_back.png"> -<p>然而，透過輕觸撰寫行為的 [上一層]，代表使用者指明停留在 Gmail 的意願。 -Gmail 的會話群組清單活動會隨即出現，並針對該活動建立一個新的工作 B。新工作的最後根源都是「主畫面」，所以從會話群組輕觸 [返回] 會返回至該處。 +<p>然而，透過輕觸撰寫 Activity 的 [上一層]，代表使用者指明停留在 Gmail 的意願。 +Gmail 的會話群組清單 Activity 會隨即出現，並針對該 Activity 建立一個新的工作 B。新工作的最後根源都是「主螢幕」，所以從會話群組輕觸 [返回] 會返回至該處。 </p> <img src="{@docRoot}design/media/navigation_between_apps_up.png"> -<p>工作 A 仍然存在背景之中，而使用者可能會在稍後返回 (例如，透過「最近」畫面)。 +<p>工作 A 仍然存在背景之中，而使用者可能會在稍後返回 (例如，透過「最近使用記錄」畫面)。 如果 Gmail 在背景正在執行自己的工作，則其會被工作 B 取代 — 並捨棄之前的前後關係，而就使用者的新目標。 </p> -<p>當您的應用程式註冊來處理具有深入應用程式階層活動的意向時，請參考<a href="#into-your-app">透過主畫面視窗小工具和通知，導覽至您的應用程式</a>，取得如何指定 [上一層] 導覽的指導方針。 +<p>當您的應用程式註冊來處理具有深入應用程式階層 Activity 的意圖時，請參考<a href="#into-your-app">透過主螢幕小工具和通知，導覽至您的應用程式</a>，取得如何指定 [上一層] 導覽的指導方針。 </p> |