diff options
Diffstat (limited to 'docs/html-intl/intl/vi/design')
5 files changed, 846 insertions, 0 deletions
diff --git a/docs/html-intl/intl/vi/design/get-started/principles.jd b/docs/html-intl/intl/vi/design/get-started/principles.jd new file mode 100644 index 000000000000..61b2c77c9736 --- /dev/null +++ b/docs/html-intl/intl/vi/design/get-started/principles.jd @@ -0,0 +1,307 @@ +page.title=Nguyên tắc Thiết kế Android +@jd:body + +<p>Những nguyên tắc thiết kế này được xây dựng bởi và dành cho +Nhóm Trải nghiệm Người dùng Android để đảm bảo lợi ích tốt nhất cho người dùng. +Đối với nhà phát triển và nhà thiết kế Android, chúng tiếp tục +nhấn mạnh những nguyên tắc chỉ đạo thiết kế chi tiết hơn dành cho các loại +thiết bị khác nhau.</p> + +<p> +Hãy cân nhắc những nguyên tắc này khi áp dụng sự sáng tạo +và tư duy thiết kế của mình. Thay đổi có mục đích. +</p> + +<h2 id="enchant-me">Thu hút tôi</h2> + +<div class="cols"> + <div class="col-7"> + +<h4 id="delight-me">Khiến tôi xao xuyến vì ngạc nhiên</h4> +<p>Cảnh vật đẹp, hoạt hình được bố trí cẩn thận hay hiệu ứng âm thanh đúng lúc khiến +trải nghiệm càng thêm phần thích thú. Hiệu ứng tinh tế góp phần đem lại cảm giác nhẹ nhàng nhưng +mạnh mẽ trong tầm tay.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_delight.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="real-objects-more-fun">Các đối tượng đời thật trông thú vị hơn các nút bấm và menu</h4> +<p>Để người dùng trực tiếp chạm và thao tác các đối tượng trong ứng dụng của bạn. Làm như vậy vừa giảm nỗ lực nhận thức +cần thiết để thực hiện một tác vụ, vừa đem lại sự thỏa mãn về cảm xúc.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_real_objects.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="make-it-mine">Hãy để tôi biến nó thành của mình</h4> +<p>Người dùng thích cảm giác tiếp xúc cá nhân bởi nó giúp họ cảm thấy rất tự nhiên và nắm quyền kiểm soát. Cung cấp +thiết lập mặc định tuyệt đẹp, dễ cảm nhận, nhưng cũng phải xét đến những tùy chỉnh thú vị, có thể lựa chọn để không cản trở +nhiệm vụ chính yếu.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_make_it_mine.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="get-to-know-me">Hiểu rõ về tôi</h4> +<p>Tìm hiểu sở thích của người dùng qua thời gian. Thay vì bảo họ chọn +đi chọn lại cùng một thứ, hãy bố trí để những lựa chọn trước đó dễ dàng trong tầm với.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_get_to_know_me.png"> + + </div> +</div> + +<h2 id="simplify-my-life">Đơn giản hóa cuộc sống của tôi</h2> + +<div class="cols"> + <div class="col-7"> + +<h4 id="keep-it-brief">Hãy ngắn gọn</h4> +<p>Sử dụng những cụm từ ngắn với từ ngữ đơn giản. Người dùng thường hay bỏ qua những câu dài dòng.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_keep_it_brief.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="pictures-faster-than-words">Hình ảnh đến nhanh hơn câu chữ</h4> +<p>Hãy nghĩ đến việc dùng hình ảnh để giải thích ý tưởng. Chúng dễ thu hút sự chú ý của người dùng và có thể hiệu quả hơn nhiều +so với từ ngữ.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_pictures.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="decide-for-me">Quyết định hộ tôi nhưng phải để tôi “chốt hạ”</h4> +<p>Hãy đưa ra phán đoán tốt nhất và hành động thay vì hỏi trước. Quá nhiều lựa chọn và quyết định khiến người dùng +không vui. Phòng trường hợp bạn sai, hãy cho 'hoàn tác'.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_decide_for_me.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="only-show-when-i-need-it">Chỉ hiện những thứ tôi cần khi tôi cần đến</h4> +<p>Người dùng sẽ bị quá tải khi họ thấy quá nhiều thứ cùng lúc. Hãy chia các tác vụ và thông tin thành những đoạn nhỏ, +dễ nắm bắt. Ẩn những tùy chọn không thiết yếu vào thời điểm đó và nhắc người dùng khi đi qua chúng.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_information_when_need_it.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="always-know-where-i-am">Tôi cần luôn biết mình đang ở đâu</h4> +<p>Khiến người khác tự tin rằng họ biết mình đang ở đâu. Khiến những địa điểm trong ứng dụng của bạn trông khác biệt +và sử dụng chuyển tiếp để thể hiện mối quan hệ giữa các màn hình. Cung cấp phản hồi về các tác vụ đang diễn ra.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_navigation.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="never-lose-my-stuff">Không bao giờ đánh mất những thứ của tôi</h4> +<p>Lưu những thứ người dùng mất thời gian để tạo và cho phép họ truy cập chúng từ mọi nơi. Nhớ các cài đặt, +thao tác chạm cá nhân và nội dung khởi tạo giữa các điện thoại, máy tính bảng và máy tính. Điều đó sẽ khiến việc nâng cấp +trở nên dễ dàng nhất trên đời.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_never_lose_stuff.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="looks-same-should-act-same">Nếu bề ngoài giống nhau thì hành động cũng phải như nhau</h4> +<p>Giúp người dùng phân biệt sự khác nhau về chức năng bằng cách khiến bề ngoài trông khác biệt thay vì chỉ khác một chút. +Tránh những chế độ trông giống nhau nhưng lại phản hồi khác nhau với cùng nội dung đầu vào.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_looks_same.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="interrupt-only-if-important">Chỉ làm tôi gián đoạn nếu thật sự quan trọng</h4> +<p>Như một trợ lý cá nhân đúng nghĩa, hãy tránh làm người dùng mất thời gian vào thứ không quan trọng. Người dùng thường muốn +tập trung và trừ trường hợp rất quan trọng và nhạy cảm về thời gian, nếu không việc gián đoạn có thể khiến họ khó chịu.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_important_interruption.png"> + + </div> +</div> + +<h2 id="make-me-amazing">Làm tôi ấn tượng</h2> + +<div class="cols"> + <div class="col-7"> + +<h4 id="give-me-tricks">Cho tôi xem những trò có thể áp dụng ở mọi nơi</h4> +<p>Người dùng thấy thích thú khi họ tự khám phá mọi thứ. Thiết kế ứng dụng của bạn dễ học hỏi hơn nhờ +tận dụng các kiểu mẫu trực quan và trí nhớ có điều kiện từ các ứng dụng Android khác. Ví dụ, cử chỉ trượt nhanh +có thể là một lối tắt điều hướng hay.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_tricks.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="its-not-my-fault">Không phải lỗi của tôi</h4> +<p>Nhẹ nhàng trong cách nhắc người dùng sửa lỗi. Họ luôn muốn cảm thấy thông minh khi dùng ứng dụng +của bạn. Nếu có gì đó không đúng, hãy đưa ra chỉ dẫn khắc phục rõ ràng nhưng bỏ qua những chi tiết kỹ thuật. +Nếu bạn có thể khắc phục mà không làm phiền họ thì càng tuyệt.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_error.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="sprinkle-encouragement">Khơi gợi sự khuyến khích</h4> +<p>Chia các nhiệm vụ phức tạp thành nhiều bước nhỏ hơn và dễ hoàn thành. Phản hồi hành động, +kể cả khi đó chỉ là một vầng sáng nhỏ.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="do-heavy-lifting-for-me">Làm giúp tôi những chuyện nặng nhọc</h4> +<p>Khiến người mới cảm thấy mình như chuyên gia bằng cách cho phép họ làm những việc mà họ chưa từng nghĩ mình có thể làm được. Ví +dụ, các lối tắt kết hợp nhiều hiệu ứng ảnh chụp có thể khiến một bức ảnh nghiệp dư trở nên đáng kinh ngạc +chỉ sau vài bước.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_heavy_lifting.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="cols"> + <div class="col-7"> + +<h4 id="make-important-things-fast">Nhanh chóng đến phần quan trọng</h4> +<p>Không phải hành động nào cũng như nhau. Quyết định xem điều gì là quan trọng nhất trong ứng dụng của bạn và khiến nó dễ tìm thấy và +nhanh chóng được sử dụng, ví dụ như nút chụp trong camera hoặc nút tạm dừng trong một trình phát nhạc.</p> + + </div> + <div class="col-6"> + + <img src="{@docRoot}design/media/principles_make_important_fast.png"> + + </div> +</div> diff --git a/docs/html-intl/intl/vi/design/material/index.jd b/docs/html-intl/intl/vi/design/material/index.jd new file mode 100644 index 000000000000..d72636f0c79b --- /dev/null +++ b/docs/html-intl/intl/vi/design/material/index.jd @@ -0,0 +1,186 @@ +page.title=Material Design cho Android +page.tags=Material,design +page.type=thiết kế +page.image=images/cards/design-material-for-android_2x.jpg + +@jd:body + +<!-- developer docs box --> +<a class="notice-developers right" href="{@docRoot}training/material/index.html"> + <div> + <h3>Tài liệu cho Nhà phát triển</h3> + <p>Tạo ứng dụng với Material Design</p> + </div> +</a> + +<!-- video box --> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> +<div> + <h3>Video</h3> + <p>Giới thiệu Material Design</p> +</div> +</a> + +<!-- video box --> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> +<div> + <h3>Video</h3> + <p>Giấy và Mực: Những vật liệu quan trọng</p> +</div> +</a> + +<!-- video box --> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> +<div> + <h3>Video</h3> + <p>Material Design trong Google I/O App</p> +</div> +</a> + + + +<p itemprop="description">Material design là một hướng dẫn toàn diện về thiết kế +trực quan, chuyển động và tương tác giữa nhiều nền tảng và thiết bị. Hiện nay Android có hỗ trợ +những ứng dụng theo phong cách material design. Để sử dụng material design trong ứng dụng Androi của mình, hãy làm theo hướng dẫn nêu +trong <a href="http://www.google.com/design/spec">đặc tả material design</a> và sử dụng +những thành phần và tính năng mới sẵn có trong Android 5.0 (API mức 21) trở lên.</p> + +<p>Android cung cấp những phần tử sau để bạn dựng ứng dụng theo phong cách material design:</p> + +<ul> + <li>Một giao diện mới</li> + <li>Widget mới cho các dạng xem phức tạp</li> + <li>API mới cho đổ bóng và hoạt hình tùy chỉnh</li> +</ul> + +<p>Để biết thêm thông tin về triển khai material design trên Android, hãy xem +<a href="{@docRoot}training/material/index.html">Tạo ứng dụng với Material Design</a>.</p> + + +<h3>Giao diện Material</h3> + +<p>Giao diện material mang đến một phong cách mới cho ứng dụng của bạn và các widget hệ thống, cho phép bạn đặt +bảng màu của chúng và hoạt hình mặc định cho phản hồi chạm và chuyển tiếp hoạt động.</p> + +<!-- two columns --> +<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/MaterialDark.png" width="500" height="238" /> + <div style="width:140px;margin:0 auto"> + <p style="margin-top:8px">Giao diện material tối</p> + </div> +</div> +<div style="float:left;width:250px;margin-right:0px;"> + <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" /> + <div style="width:140px;margin:0 auto"> + <p style="margin-top:8px">Giao diện material sáng</p> + </div> +</div> +<br style="clear:left"/> +</div> + +<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/theme.html">Sử dụng Giao diện Material +</a>.</p> + + +<h3>Danh sách và Thẻ</h3> + +<p>Android cung cấp hai loại widget mới để hiển thị thẻ và danh sách bằng phong cách +và hoạt hình material design:</p> + +<!-- two columns --> +<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>Widget <code>RecyclerView</code> mới là một phiên bản có thể ghép nối hơn của <code>ListView</code> + có hỗ trợ nhiều kiểu bố trí khác nhau và cải thiện hiệu năng.</p> +</div> +<div style="float:left;width:250px;margin-right:0px;"> + <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> + <p>Widget <code>CardView</code> mới cho phép bạn hiển thị những mẩu thông tin quan trọng bên trong + thẻ với diện mạo và cảm nhận nhất quán.</p> +</div> +<br style="clear:left"/> +</div> + +<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/lists-cards.html">Tạo Danh sách +và Thẻ</a>.</p> + + +<h3>Đổ bóng Dạng xem</h3> + +<p>Bên cạnh các thuộc tính X và Y, dạng xem trong Android nay có +thêm thuộc tính Z. Thuộc tính mới này biểu diễn độ cao của một dạng xem và sẽ quyết định:</p> + +<ul> +<li>Kích cỡ của đổ bóng: dạng xem có giá trị Z cao hơn sẽ đặt đổ bóng lớn hơn.</li> +<li>Thứ tự vẽ: dạng xem có giá trị Z cao hơn sẽ xuất hiện phía trên những dạng xem khác.</li> +</ul> + +<div style="width:290px;margin-left:35px;float:right"> + <div class="framed-nexus5-port-span-5"> + <video class="play-on-hover" autoplay> + <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> + <source src="{@docRoot}design/videos/ContactsAnim.webm"/> + <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> + </video> + </div> + <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> + <em>Để phát lại phim, nhấp vào màn hình thiết bị</em> + </div> +</div> + +<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/shadows-clipping.html">Định nghĩa +Đổ bóng và Dạng xem Cắt hình</a>.</p> + + +<h3>Hoạt hình</h3> + +<p>API hoạt hình mới cho phép bạn tạo hoạt hình tùy chỉnh cho phản hồi chạm trong điều khiển UI, +thay đổi trạng thái xem và chuyển tiếp hoạt động.</p> + +<p>Những API này cho phép bạn:</p> + +<ul> +<li style="margin-bottom:15px"> +Phản hồi lại sự kiện chạm trong dạng xem của mình bằng hoạt hình <strong>phản hồi chạm</strong>. +</li> +<li style="margin-bottom:15px"> +Ẩn và hiện dạng xem bằng hoạt hình <strong>hiện hình tròn</strong>. +</li> +<li style="margin-bottom:15px"> +Chuyển giữa các hoạt động bằng hoạt hình <strong>chuyển tiếp hoạt động</strong> tùy chỉnh. +</li> +<li style="margin-bottom:15px"> +Tạo hoạt hình tự nhiên hơn bằng <strong>chuyển động cong</strong>. +</li> +<li style="margin-bottom:15px"> +Tạo hoạt hình cho các thay đổi trong một hoặc nhiều thuộc tính dạng xem bằng hoạt hình <strong>thay đổi trạng thái dạng xem</strong>. +</li> +<li style="margin-bottom:15px"> +Thể hiện hoạt hình trong các <strong>nội dung vẽ được theo danh sách trạng thái</strong> giữa những thay đổi về trạng thái dạng xem. +</li> +</ul> + +<p>Hoạt hình phản hồi chạm được tích hợp vào một vài dạng xem tiêu chuẩn, ví dụ như các nút. Các API mới này +cho phép bạn tùy biến những hoạt hình này và thêm chúng vào dạng xem tùy chỉnh của mình.</p> + +<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/animations.html">Định nghĩa Hoạt hình +Tùy chỉnh</a>.</p> + + +<h3>Nội dung vẽ được</h3> + +<p>Những khả năng mới này của nội dung vẽ được sẽ giúp bạn triển khai các ứng dụng theo phong cách material design:</p> + +<ul> +<li><strong>Nội dung vẽ được véc-tơ</strong> có thể thay đổi kích cỡ mà không làm mất độ sắc nét và hoàn hảo +cho các biểu tượng trong ứng dụng đơn sắc.</li> +<li><strong>Nhuộm nội dung vẽ được</strong> cho phép bạn định nghĩa ảnh bitmap thành mặt nạ alpha và nhuộm +màu cho chúng theo thời gian chạy.</li> +<li><strong>Trích xuất màu</strong> cho phép bạn tự động trích xuất màu nổi bật từ +hình ảnh bitmap.</li> +</ul> + +<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/drawables.html">Làm việc với +Nội dung Vẽ được</a>.</p> diff --git a/docs/html-intl/intl/vi/design/patterns/compatibility.jd b/docs/html-intl/intl/vi/design/patterns/compatibility.jd new file mode 100644 index 000000000000..f1a610b06d34 --- /dev/null +++ b/docs/html-intl/intl/vi/design/patterns/compatibility.jd @@ -0,0 +1,70 @@ +page.title=Tương thích Ngược +page.tags="support" +page.metaDescription=Lưu ý về cách Android 4.x thích ứng với UI được thiết kế cho các phần cứng và phiên bản HĐH cũ hơn. +@jd:body + +<a class="notice-developers" href="{@docRoot}training/basics/supporting-devices/index.html"> + <div> + <h3>Tài liệu cho Nhà phát triển</h3> + <p>Hỗ trợ nhiều Thiết bị khác nhau</p> + </div> +</a> + +<p>Những thay đổi đáng kể trong Android 3.0 gồm có:</p> +<ul> +<li>Bỏ phím cứng điều hướng (Quay lại, Menu, Tìm kiếm, Trang chủ̉), đổi thành xử lý điều hướng + thông qua các nút điều khiển ảo (Quay lại, Trang chủ, Gần đây).</li> +<li>Mẫu hình thiết thực để sử dụng menu trong thanh hành động.</li> +</ul> +<p>Android 4.0 mang những thay đổi cho máy tính bảng sang nền tảng điện thoại.</p> + +<h2 id="older-hardware">Thích nghi Android 4.0 với Phần cứng và Ứng dụng cũ hơn</h2> + +<div class="cols"> + <div class="col-6"> + +<h4>Điện thoại có các điều khiển điều hướng ảo</h4> +<p>Ứng dụng Android được viết cho Android 3.0 trở lên sẽ hiển thị các hành động trong thanh hành động. Những hành động không vừa +với thanh hành động hoặc không đủ quan trọng để được hiển thị ở mức trên cùng sẽ xuất hiện trong +vùng tràn hành động.</p> +<p>Người dùng truy cập vùng tràn hành động bằng cách chạm vào nó trong thanh hành động.</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>Điện thoại có phím điều hướng vật lý</h4> +<p>Điện thoại Android có phím cứng điều hướng truyền thống không hiển thị thanh điều hướng ảo ở +phía dưới màn hình. Thay vào đó, có thể sử dụng vùng tràn hành động từ phím cứng menu. Kết quả là +cửa sổ hành động bật lên có cùng kiểu như trong ví dụ trước, nhưng được hiển thị ở phía dưới màn hình.</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>Ứng dụng kế thừa trên điện thoại có điều khiển điều hướng ảo</h4> +<p>Khi bạn chạy một ứng dụng được dựng cho Android 2.3 hoặc cũ hơn trên một điện thoại có điều khiển điều hướng +ảo, điều khiển vùng tràn hành động sẽ xuất hiện phía bên phải của thanh điều hướng ảo. Bạn có thể +chạm vào điều khiển này để hiển thị hành động của ứng dụng theo kiểu dáng menu Android truyền thống.</p> + + </div> + <div class="col-7"> + + <img src="{@docRoot}design/media/compatibility_legacy_apps.png"> + + </div> +</div> diff --git a/docs/html-intl/intl/vi/design/patterns/confirming-acknowledging.jd b/docs/html-intl/intl/vi/design/patterns/confirming-acknowledging.jd new file mode 100644 index 000000000000..e0253c3d3f04 --- /dev/null +++ b/docs/html-intl/intl/vi/design/patterns/confirming-acknowledging.jd @@ -0,0 +1,70 @@ +page.title=Xác nhận & Báo nhận +page.tags=dialog,toast,notification +@jd:body + +<p>Trong một số tình huống, khi người dùng gọi ra một hành động trong ứng dụng của bạn, bạn nên <em>xác nhận</em> hoặc <em>báo nhận</em> hành động đó thông qua văn bản.</p> + +<div class="cols"> + <div class="col-6"> + <img src="{@docRoot}design/media/confirm_ack_confirming.png"> + <p><strong>Xác nhận</strong> là việc yêu cầu người dùng xác minh rằng họ thực sự muốn tiếp tục hành động mà họ vừa gọi ra. Trong một số trường hợp, xác nhận được đưa ra cùng với một cảnh báo hoặc thông tin trọng yếu liên quan tới hành động mà họ cần cân nhắc.</p> + </div> + <div class="col-6"> + <img src="{@docRoot}design/media/confirm_ack_acknowledge.png"> + <p><strong>Báo nhận</strong> là việc hiển thị văn bản để người dùng biết rằng hành động họ vừa gọi ra đã được hoàn tất. Điều này loại bỏ sự không chắc chắn về các thao tác không biểu thị mà hệ thống đang thực hiện. Trong một số trường hợp, báo nhận được đưa ra cùng với một tùy chọn hoàn tác hành động đó.</p> + </div> +</div> + +<p>Giao tiếp với người dùng theo những cách này có thể giúp gỡ bỏ sự không chắc chắn về những thứ đã hoặc sẽ xảy ra. Xác nhận hoặc báo nhận cũng có thể ngăn người dùng mắc sai lầm mà họ có thể hối tiếc.</p> + +<h2>Khi nào thì xác nhận hoặc báo nhận hành động của người dùng</h2> +<p>Không phải hành động nào cũng chắc chắn có xác nhận hay báo nhận. Hãy sử dụng lưu đồ sau làm hướng dẫn đưa ra quyết định thiết kế của bạn.</p> +<img src="{@docRoot}design/media/confirm_ack_flowchart.png"> + +<h2>Xác nhận</h2> +<div class="cols"> + <div class="col-6"> + <h4>Ví dụ: Google Play Books</h4> + <img src="{@docRoot}design/media/confirm_ack_ex_books.png"> + <p>Trong ví dụ này, người dùng đã yêu cầu xóa một cuốn sách khỏi thư viện Google Play của mình. Một <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">cảnh báo</a> hiện ra để xác nhận hành động này bởi quan trọng là phải hiểu rằng cuốn sách sẽ không còn khả dụng trên bất cứ thiết bị nào nữa.</p> + <p>Khi tạo một hộp thoại xác nhận, hãy đặt tiêu đề có ý nghĩa bằng cách thể hiện hành động được yêu cầu đó.</p> + </div> + <div class="col-7"> + <h4>Ví dụ: Android Beam</h4> + <img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> + <p>Không nhất thiết phải đưa ra xác nhận trong cảnh báo có hai nút. Sau khi khởi chạy Android Beam, người dùng được nhắc chạm vào nội dung muốn chia sẻ (trong ví dụ này là một ảnh chụp). Nếu quyết định không tiếp tục, họ chỉ cần đưa điện thoại của mình ra xa.</p> + </div> +</div> + +<h2>Báo nhận</h2> +<div class="cols"> + <div class="col-6"> + <h4>Ví dụ: Bỏ đi bản thảo Gmail đã lưu</h4> + <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> + <p>Trong ví dụ này, nếu người dùng điều hướng quay lại hoặc lên trên từ màn hình soạn thảo Gmail thì có thể sẽ xảy ra việc ngoài ý muốn: bản thảo hiện tại được tự động lưu. Báo nhận dưới hình thức cửa sổ sẽ khiến bản thảo đó biểu hiện ra ngoài. Cửa sổ này sẽ mờ dần sau vài giây.</p> + <p>Ở đây việc hoàn tác sẽ không thích hợp bởi việc lưu là do ứng dụng khởi chạy chứ không phải người dùng. Sẽ dễ dàng và nhanh chóng tiếp tục soạn thư bằng cách điều hướng tới danh sách bản thảo.</p> + + </div> + <div class="col-6"> + <h4>Ví dụ: Đã xóa hội thoại Gmail</h4> + <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> + <p>Sau khi người dùng xóa một hội thoại khỏi danh sách trong Gmail, báo nhận sẽ xuất hiện cùng tùy chọn hoàn tác. Báo nhận vẫn còn đó tới khi người dùng thực hiện một hành động không liên quan, ví dụ như cuộn danh sách.</p> + </div> +</div> + +<h2>Không xác nhận hoặc báo nhận</h2> +<div class="cols"> + <div class="col-6"> + <h4>Ví dụ: hành động +1</h4> + <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> + <p><strong>Xác nhận là không cần thiết</strong>. Nếu người dùng vô tình +1 thì cũng không sao. Họ chỉ cần chạm lại vào nút này để hoàn tác hành động đó.</p> + <p><strong>Báo nhận là không cần thiết</strong>. Người dùng sẽ thấy nút +1 bật lại và chuyển màu đỏ. Đó là một dấu hiệu rất rõ ràng.</p> + </div> + <div class="col-7"> + <h4>Ví dụ: Xóa một ứng dụng khỏi Màn hình Trang chủ</h4> + <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> + <p><strong>Xác nhận là không cần thiết</strong>. Đây là một hành động có chủ ý: người dùng phải kéo và thả một mục lên một mụ̣c tiêu tương đối lớn và tách biệt. Vì thế, rất khó có khả năng xảy ra trường hợp vô ý. Nhưng nếu người dùng hối hận về quyết định, họ chỉ mất vài giây để đưa trở lại như cũ.</p> + <p><strong>Báo nhận là không cần thiết</strong>. Người dùng sẽ biết ứng dụng đã biến mất khỏi Màn hình Trang chủ bởi họ khiến nó biến mất bằng cách kéo nó đi.</p> + + </div> +</div> diff --git a/docs/html-intl/intl/vi/design/patterns/navigation.jd b/docs/html-intl/intl/vi/design/patterns/navigation.jd new file mode 100644 index 000000000000..98490db0e5b6 --- /dev/null +++ b/docs/html-intl/intl/vi/design/patterns/navigation.jd @@ -0,0 +1,213 @@ +page.title=Điều hướng bằng Quay lại và Lên trên +page.tags="navigation","activity","task","up navigation","back navigation" +page.image=/design/media/navigation_between_siblings_gmail.png +@jd:body + +<a class="notice-developers" href="{@docRoot}training/implementing-navigation/index.html"> + <div> + <h3>Tài liệu cho Nhà phát triển</h3> + <p>Triển khai Điều hướng Hiệu quả</p> + </div> +</a> + +<p itemprop="description">Điều hướng nhất quán là một thành phần thiết yếu trong trải nghiệm người dùng nói chung. Một vài điều nhỏ bé lại khiến +người dùng khó chịu hơn so với điều hướng cơ bản chính là hành xử không nhất quán và không như kỳ vọng. Android 3.0 +đã giới thiệu những thay đổi đáng kể về hành vi điều hướng toàn cục. Tuân thủ kỹ lưỡng các hướng dẫn +về Quay lại và Lên trên sẽ giúp việc điều hướng trên ứng dụng của bạn trở nên dễ đoán và đáng tin cậy cho người dùng của bạn.</p> +<p>Phiên bản Android 2.3 và mới hơn dựa vào nút <em>Quay lại</em> của hệ thống để hỗ trợ điều hướng trong một +ứng dụng. Với việc giới thiệu thanh hành động trong Android 3.0, một cơ chế điều hướng thứ hai đã xuất hiện: +nút <em>Lên trên</em>, bao gồm biểu tượng ứng dụng và dấu nháy lùi trái.</p> + +<img src="{@docRoot}design/media/navigation_with_back_and_up.png"> + +<h2 id="up-vs-back">Lên trên so với Quay lại</h2> + +<p>Nút Lên trên được sử dụng để điều hướng bên trong một ứng dụng dựa trên mối quan hệ thứ bậc +giữa các màn hình. Ví dụ, nếu màn hình A hiển thị một danh sách các mục và việc chọn một mục sẽ dẫn đến +màn hình B (trình bày chi tiết hơn về mục đó), khi đó B sẽ đưa ra nút Lên trên để +quay lại màn hình A.</p> +<p>Nếu một màn hình đang ở trên cùng trong một ứng dụng (cụ thể là trang chủ của ứng dụng), thì nó sẽ xuất hiện nút +Lên trên.</p> + +<p>Nút Quay lại của hệ thống được sử dụng để điều hướng ngược theo thứ tự thời gian, qua lịch sử các màn hình +mà người dùng mới thao tác qua. Nó thường được dựa trên mối quan hệ thời gian +giữa các màn hình thay vì thứ bậc của ứng dụng.</p> + +<p>Khi màn hình xem trước đó cũng đồng thời là màn hình mẹ theo thứ bậc của màn hình hiện tại, nhấn nút +Quay lại sẽ có cùng kết quả như khi nhấn nút Lên trên—điều này thường hay +xảy ra. Tuy nhiên, không như nút Lên trên đảm bảo người dùng vẫn còn trong ứng dụng của bạn, +nút Quay lại có thể trả người dùng về màn hình Trang chủ hoặc thậm chí sang một ứng dụng khác.</p> + +<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png"> + +<p>Nút Quay lại cũng hỗ trợ một vài hành vi không trực tiếp gắn với điều hướng giữa các màn hình: +</p> +<ul> +<li>Bỏ qua cửa sổ nổi (hộp thoại, cửa sổ bật lên)</li> +<li>Bỏ qua thanh hành động ngữ cảnh và bỏ tô sáng khỏi mục đã chọn</li> +<li>Ẩn bàn phím trên màn hình (IME)</li> +</ul> +<h2 id="within-app">Điều hướng trong Ứng dụng của Bạn</h2> + +<h4>Điều hướng tới màn hình với nhiều điểm bắt đầu</h4> +<p>Đôi khi một màn hình không chỉ có một vị trí cố định trong thứ bậc của ứng dụng và bạn có thể truy cập nó +từ nhiều điểm bắt đầu—ví dụ như màn hình cài đặt có thể được truy cập từ bất cứ màn hình +nào khác trong ứng dụng của bạn. Trong trường hợp này, nút Lên trên sẽ chọn quay lại màn hình đã chuyển đến, có tác dụng +giống như Quay lại.</p> +<h4>Thay đổi dạng xem bên trong một màn hình</h4> +<p>Thay đổi tùy chọn dạng xem cho một màn hình không làm thay đổi hành vi Lên trên hay Quay lại: màn hình vẫn +ở cùng một chỗ trong thứ bậc của ứng dụng và không tạo thêm lịch sử điều hướng mới nào.</p> +<p>Ví dụ về thay đổi dạng xem gồm:</p> +<ul> +<li>Chuyển dạng xem bằng tab và/hoặc trượt nhanh trái phải</li> +<li>Chuyển dạng xem bằng danh sách thả xuống (còn gọi là tab thu gọn)</li> +<li>Lọc một danh sách</li> +<li>Sắp xếp một danh sách</li> +<li>Thay đổi đặc tính hiển thị (như thu phóng)</li> +</ul> +<h4>Điều hướng giữa các màn hình anh em</h4> +<p>Khi ứng dụng của bạn hỗ trợ điều hướng từ một danh mục tới một dạng xem chi tiết của một trong những mục đó, thường +nó ưu tiên hỗ trợ điều hướng theo hướng từ mục đó tới một mục khác ở phía trước hoặc +phía sau nó trong danh sách. Ví dụ, trong Gmail, bạn có thể dễ dàng trượt nhanh sang trái hoặc phải từ một hội thoại +để xem hội thoại mới hơn hoặc cũ hơn trong cùng Hộp thư đến. Như khi thay đổi dạng xem trong một màn hình, +điều hướng đó không làm thay đổi hành vi Lên trên hoặc Quay lại.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png"> + +<p>Tuy nhiên, có một trường hợp ngoại lệ đáng chú ý đó là khi duyệt giữa các dạng xem chi tiết có liên quan, không +ràng buộc với nhau bởi danh sách chuyển đến—ví dụ như khi duyệt trong Play Store giữa các ứng dụng từ +cùng một nhà phát triển hoặc giữa các album bởi cùng một nghệ sĩ. Trong các trường hợp này, truy cập vào từng liên kết không tạo ra +lịch sử, khiến nút Quay lại đi qua từng màn hình được xem trước đó. Thao tác Lên trên sẽ tiếp tục +bỏ qua những màn hình liên quan này và điều hướng tới màn hình bộ chứa được xem gần đây nhất.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_market1.png"> + +<p>Bạn có khả năng thiết kế để hành vi Lên trên thông minh hơn dựa trên hiểu biết của mình về dạng xem +chi tiết. Suy rộng từ ví dụ về Play Store bên trên, tưởng tượng người dùng đã điều hướng từ +Cuốn sách xem gần nhất tới chi tiết chuyển thể Phim. Trong trường hợp đó, thao tác Lên trên có thể trả về một bộ chứa +(Phim) mà trước đó người dùng chưa điều hướng qua.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_market2.png"> + +<h2 id="into-your-app">Điều hướng tới Ứng dụng của Bạn thông qua Widget và Thông báo trên Màn hình Trang chủ</h2> + +<p>Bạn có thể sử dụng widget hoặc thông báo trên màn hình Trang chủ để giúp người dùng của mình điều hướng trực tiếp tới màn hình +nằm sâu trong thứ bậc ứng dụng của bạn. Ví dụ, widget Hộp thư đến của Gmail và thông báo thư mới có thể +vừa bỏ qua màn hình Hộp thư đến, vừa đưa người dùng trực tiếp tới dạng xem hội thoại.</p> + +<p>Trong cả hai trường hợp này, hãy điều khiển nút Lên trên như sau:</p> + +<ul> +<li><em>Nếu màn hình đích thường được truy cập từ một màn hình cụ thể trong ứng dụng +của bạn</em>, thao tác Lên trên sẽ điều hướng tới màn hình đó.</li> +<li><em>Nếu không</em>, thao tác Lên trên sẽ điều hướng tới màn hình trên cùng ("Trang chủ") của ứng dụng của bạn.</li> +</ul> + +<p>Trong trường hợp nút Quay lại, bạn nên thiết kế để việc điều hướng dễ đoán hơn bằng cách chèn vào ngăn xếp +của tác vụ toàn bộ đường dẫn điều hướng lên trên tới màn hình trên cùng của ứng dụng. Làm vậy sẽ cho phép những người dùng nào +quên cách họ vào ứng dụng của bạn sẽ điều hướng tới màn hình trên cùng của ứng dụng trước khi +thoát.</p> + +<p>Ví dụ, widget màn hình Trang chủ của Gmail có một nút để đi trực tiếp vào màn hình +soạn email của nó. Lên hoặc Quay lại từ màn hình soạn thư sẽ đưa người dùng tới Hộp thư đến, và từ đó +nút Quay lại tiếp tục đưa về Trang chủ.</p> + +<img src="{@docRoot}design/media/navigation_from_outside_back.png"> + +<h4>Thông báo gián tiếp</h4> + +<p>Khi ứng dụng của bạn cần trình bày thông tin về nhiều sự kiện đồng thời, nó có thể sử dụng +thông báo duy nhất để chuyển hướng người dùng tới một màn hình xen kẽ. Màn hình này tổng hợp những sự kiện +này và cung cấp đường dẫn cho người dùng đi sâu vào ứng dụng. Thông báo kiểu này được gọi +là <em>thông báo gián tiếp</em>.</p> + +<p>Không như thông báo tiêu chuẩn (trực tiếp), nhấn Quay lại từ màn hình xen kẽ của một thông báo gián tiếp +sẽ trả người dùng về điểm mà từ đó thông báo đó được kích hoạt—không có +màn hình bổ sung nào được chèn vào ngăn xếp. Sau khi người dùng tiến vào ứng dụng từ màn hình xen kẽ +, thao tác Lên trên và Quay lại có tác dụng như với thông báo tiêu chuẩn, như được mô tả ở trên: +điều hướng bên trong ứng dụng thay vì quay lại màn hình xen kẽ.</p> + +<p>Ví dụ, giả sử một người dùng trong Gmail nhận được một thông báo gián tiếp từ Lịch. Chạm +vào thông báo này để mở ra màn hình xen kẽ, trong đó hiển thị nhắc nhở cho một vài sự kiện +khác nhau. Chạm vào Quay lại từ màn hình xen kẽ sẽ trả người dùng về Gmail. Chạm vào một sự kiện +cụ thể sẽ đưa người dùng ra khỏi màn hình xen kẽ và vào ứng dụng Lịch để hiển thị chi tiết về +sự kiện. Từ chi tiết sự kiện, Lên trên và Quay lại sẽ điều hướng tới dạng xem trên cùng của Lịch.</p> + +<img src="{@docRoot}design/media/navigation_indirect_notification.png"> + +<h4>Thông báo bật lên</h4> + +<p><em>Thông báo bật lên</em> sẽ bỏ qua ngăn thông báo thay vì xuất hiện trực tiếp phía +trước người dùng. Chúng hiếm khi được sử dụng và <strong>nên được để dành cho những dịp khi cần +phản ứng kịp thời và việc gián đoạn ngữ cảnh của người dùng là cần thiết</strong>. Ví dụ, +Talk sử dụng kiểu này để cảnh báo người dùng về lời mời từ một người bạn để tham gia trò chuyện video, bởi +lời mời này sẽ tự động hết hạn sau một vài giây.</p> + +<p>Xét về hành vi điều hướng, thông báo bật lên bám sát chặt chẽ hành vi của màn hình xen kẽ +trong thông báo gián tiếp. Quay lại sẽ bỏ qua thông báo bật lên. Nếu người dùng điều hướng +từ màn hình bật lên vào ứng dụng thông báo, hành vi Lên trên và Quay lại sẽ bám sát quy tắc áp dụng với thông báo tiêu chuẩn, +điều hướng bên trong ứng dụng.</p> + +<img src="{@docRoot}design/media/navigation_popup_notification.png"> + +<h2 id="between-apps">Điều hướng giữa các Ứng dụng</h2> + +<p>Một trong những thế mạnh cơ bản của hệ thống Android đó là khả năng các ứng dụng kích hoạt +lẫn nhau, giúp người dùng có thể điều hướng trực tiếp từ ứng dụng này sang ứng dụng khác. Ví dụ, một ứng dụng +cần chụp ảnh có thể kích hoạt ứng dụng Camera, ứng dụng này sẽ trả +ảnh về ứng dụng chuyển đến. Điều này đặc biệt có ích đối với cả nhà phát triển, những người có thể dễ dàng tận dụng +đoạn mã từ các ứng dụng khác, lẫn người dùng, những người thích có một trải nghiệm nhất quán đối với những hành động +được thực hiện thường xuyên.</p> + +<p>Để hiểu rõ điều hướng giữa các ứng dụng, quan trọng là phải hiểu được hành vi bộ khung Android +được đề cập dưới đây.</p> + +<h4>Hoạt động, tác vụ và ý định</h4> + +<p>Trong Android, <strong>hoạt động</strong> là một thành phần ứng dụng định nghĩa một màn hình +thông tin và tất cả hành động liên kết mà người dùng có thể thực hiện. Ứng dụng của bạn là tập hợp +của nhiều hoạt động, bao gồm cả hoạt động do bạn tạo và hoạt động mà bạn sử dụng lại từ các ứng dụng khác.</p> + +<p><strong>Tác vụ</strong> là trình tự các hoạt động mà một người dùng tuân theo để hoàn thành một mục tiêu. +Tác vụ đơn có thể sử dụng các hoạt động từ chỉ một ứng dụng, hoặc có thể dựa trên hoạt động từ nhiều +ứng dụng khác nhau.</p> + +<p><strong>Ý định</strong> là một cơ chế để một ứng dụng báo hiệu rằng nó muốn sự trợ giúp +của một ứng dụng khác khi thực hiện một hành động. Các hoạt động của một ứng dụng có thể biểu thị những ý định +mà chúng có thể phản hồi. Đối với những ý định thường gặp như "Chia sẻ", người dùng có thể cài đặt nhiều ứng dụng +có khả năng thực hiện yêu cầu đó.</p> + +<h4>Ví dụ: điều hướng giữa các ứng dụng để hỗ trợ chia sẻ</h4> + +<p>Để hiểu những hoạt động, tác vụ và ý định này vận hành với nhau như thế nào, hãy xem cách một ứng dụng cho phép người dùng +chia sẻ nội dung bằng cách dùng một ứng dụng khác. Ví dụ, khởi chạy ứng dụng Play Store từ Trang chủ sẽ bắt đầu +Tác vụ A mới (xem hình bên dưới). Sau khi điều hướng qua Play Store và chạm vào một cuốn sách được quảng cáo +để xem chi tiết của sách, người dùng vẫn ở trong cùng một tác vụ, mở rộng nó bằng cách thêm vào các hoạt động. Kích hoạt +hành động Chia sẻ sẽ nhắc người dùng bằng một hộp thoại liệt kê từng hoạt động một (từ các ứng dụng khác nhau) +mà đã đăng ký xử lý ý định Chia sẻ đó.</p> + +<img src="{@docRoot}design/media/navigation_between_apps_inward.png"> + +<p>Khi người dùng chọn chia sẻ qua Gmail, hoạt động soạn email của Gmail sẽ được thêm làm hoạt động tiếp tục +Tác vụ A—không có tác vụ mới nào được tạo thêm. Nếu Gmail có tác vụ riêng đang chạy nền, nó sẽ +không bị ảnh hưởng.</p> + +<p>Từ hoạt động soạn email, gửi thư hoặc chạm vào nút Quay lại sẽ trả người dùng về +hoạ̣t động chi tiết về cuốn sách. Những lần chạm sau đó vào Quay lại sẽ tiếp tục điều hướng quay lại qua +Store và cuối cùng về lại Trang chủ.</p> + +<img src="{@docRoot}design/media/navigation_between_apps_back.png"> + +<p>Tuy nhiên, nếu chạm vào Lên trên từ hoạt động soạn email, người dùng biểu thị mong muốn vẫn ở nguyên trong +Gmail. Hoạt động danh sách hội thoại của Gmail xuất hiện và Tác vụ B mới sẽ được tạo cho nó. Các tác vụ mới +sẽ luôn được liên kết gốc với Trang chủ, vì thế chạm vào Quay lại từ danh sách hội thoại sẽ quay lại đó.</p> + +<img src="{@docRoot}design/media/navigation_between_apps_up.png"> + +<p>Tác vụ A duy trì chạy nền và người dùng có thể quay lại nó sau (ví dụ, thông qua +màn hình Gần đây). Nếu Gmail đã có tác vụ riêng đang chạy nền, nó sẽ được thay thế +bằng Tác vụ B—ngữ cảnh trước đó sẽ bị bỏ đi phục vụ cho mục đích mới của người dùng.</p> + +<p>Khi ứng dụng của bạn đăng ký điều khiển ý định bằng một hoạt động nằm sâu trong thứ bậc của ứng dụng, +hãy tham khảo phần <a href="#into-your-app">Điều hướng tới Ứng dụng của Bạn thông qua Widget và Thông báo trên +Màn hình Trang chủ</a> để xem hướng dẫn về cách quy định điều hướng Lên trên.</p> |