Windows Theme/UI Update - Giao diện mới của Firefox 4.0

Monday, December 21, 2009 Long Nguyễn Hoàng 0 Comments

Gần đây, công việc lọc và chọn lựa giao diện cho phiên bản mới  4.0 của Firefox đang được đẩy nhanh tiến độ. Công việc này đòi hỏi cần phải đánh giá những phản hồi của người dùng về tính năng của các phiên bản trước, giao diện đồ họa, sửa lại mọi thứ và khám phá tất cả các ý tưởng mới. Công việc mang tính cách mạng này được thực hiện cho bước nhảy từ phiên bản 3.7 lên 4.0 và hiện đã tiến gần đến những bước cuối cùng rồi.

 Firefox 4 - Tabs-on-Top - App Button

Tuần qua, công việc của các nhà phát triển chủ yếu xoay quanh một số tính năng sau:

1) App Button (nút Ứng dụng)

Một trong những thách thức trong giao diện của FF là làm thế nào để quản lý thanh Menubar. Trong đợt đầu tiên, nhóm phát triển đã tìm hiểu về cách mà Safari và Google xử lý vấn đề này, họ chia nhỏ tất cả các mục trong menu vào các nút Page và Tools riêng biệt. Việc làm này có nhiều ưu điểm, những cũng có một vài nhược điểm. Giải pháp được đưa ra để giải quyết vấn đề này là nút App, giống như những menu đơn trong các ứng dụng trên Windows 7 (Paint, WordPad) và MS Office.

Nhóm thiết kế giao diện thấy cách giải quyết này có một vài ưu điểm so với ý tưởng trước đây:
  • Ít phức tạp hơn
  • Tiết kiệm giao diện
  • Thay vì phải đặt các mục của menu cũ trên các vị trí khác nhau, thì hiện chỉ cần một vị trí duy nhất
  • Có thể đặt ở phía trên cùng bên trái ở vị trí trước đây của mẫu Menubar mà nó thay thế
  • Tương tự như menu ứng dụng mà chúng ta thường gặp trên Office 2008/2010 và trên các ứng dụng của Windows 7
  • Giảm sự lộn xộn trên Navigation Toolbar (thanh điều hướng)
  • Tạo ra bức họa linh động và phong phú hơn bằng việc thiết kế một giao diện không có menu.

    Giao diện và cách bố trí

    Một trong những điểm thuận lợi của nút App là nó gần tương tự như cách mà Microsoft xử lý trên các ứng dụng và Office của họ. Điểm thuận lợi nữa là sự sắp xếp này gần với vị trí cũ của thanh Menubar trước đây, và vì thế nó tạo ra cảm giác quen thuộc.


    Một ý tưởng mà chúng tôi đã khám phá ra ở nút Pages và Tools là việc sử dụng dòng chữ thay vì biểu tượng. Điều này làm chúng ta nhớ đến cách thức hiển thị các mục bằng chữ trên thanh Menubar, chứ không phải bằng biểu tượng hay gây nhầm lẫn. Cách tiếp cận này cũng được khám phá ra trong phiên bản beta mới đây của Office 2010 với tab được đặt tên một cách đơn giản là File. Chúng tôi đang thảo luận về việc đặt tên nút App chỉ đơn giản là "Firefox" vì nó chứa tất cả các hành động được áp dụng cho Firefox.Việc gắn một nút lên phía trên cùng của cửa sổ Firefox gián tiếp chỉ ra rằng menu này có ảnh hưởng toàn bộ tới Firefox.

    Trạng thái của thanh tiêu đề (titlebar)

    Trong giao diện mockup, thanh tiêu đề sẽ bị bỏ đi, nhường chỗ cho các tab, nhưng bạn cứ yên tâm vì vẫn còn đủ chỗ trống còn lại cho việc kéo cửa sổ như truyền thống. Sự thay đổi này rất hợp lý vì ở đây có sự thu hẹp khoảng trống theo chiều thẳng đứng do đã bỏ đi việc hiển thị tiêu đều của trang trên cả thanh tiêu đề và tab. Đúng và việc hiển thị tiêu đề trang trên cả 2 vị trí gây ra sự lãng phí lớn trên cửa sổ làm việc.

    State of the Menu
    What will this single menu look like? Something like the sketch I posted previously but not exactly. Ideas on this are welcome. Thoughts about what should and should no go into this menu can be based on work already done for menu cleanup.

    2) Refining Toolbar Button Appearance:

    Some initial work has gone into making the toolbar buttons more visible on light backgrounds and more crisp and dimensional (pressable).
    This is work I am constantly reevaluating since they appear on variable backgrounds.

    3) Location Bar:

    Created some very early visuals for reevaluating site identity. Also the location bar is now properly recessed instead of floating.

    4) Retain Separate Search Bar:

    With the LocationBar containing an increasing amount of functionality it may be best to retain a clear distinction between the two fields.

    5) Bookmarks Widget:

    On a default profile or existing profile that hasn’t modified the Bookmarks Toolbar it will be hidden by default and the Bookmarks Widget placed in the Navigation Toolbar.
    If the Bookmarks Toolbar is shown the Bookmarks Widget will appear there instead.

    Alternatives to Default Configurations

    With Bookmarks Bar
    Firefox 4 - Tabs-on-Top - App Button - w/Bookmarks Bar

    Tabs Under the Navigation Bar
    If tabs-on-top is not desirable you can change to the classic tabs under the navigation bar.
    Firefox 4 - Tabs-Under-NavBar - App Button

    Tabs Under the Navigation Bar with Bookmarks Bar
    Firefox 4 - Tabs-Under-NavBar - App Button - w/Bookmarks Bar

    App Button Variations

    Several variations of the App Button have been explored. Various factors of consideration include what color to make it, whether or not to have an icon, just an icon, icon and text, part of the tab bar, a separate button or attached to the top of the window.
    Presently it is orange and attached to the top of the menu simply labeled “Firefox”. The color plays off of the Firefox icon and is noticeable. The placement attaches the button to the top of the window and suggests that its items apply to the whole menu. It also corresponds to the area of the window where someone would look for the menu bar. Using text only is reminiscent of a menu item.
    Firefox 4 - App Button - Variations

    Firefox 4 and Firefox 3.5 Comparison

    A visual comparison of the current iteration of Firefox 4 next to Firefox 3.5





    Firefox 4 and Firefox 3.5 Visual Comparison


    0 comments: