Bước tới nội dung

Wikipedia:Thảo luận/Trang Chính mới (Giao diện Wiki hộp phẳng 2021)

Thêm liên kết
Bách khoa toàn thư mở Wikipedia

Thảo luận đồng thuận về việc áp dụng giao diện Trang Chính mới (Giao diện Wiki hộp phẳng 2021)

[sửa | sửa mã nguồn]
Thảo luận sau đã được đóng lại. Xin đừng sửa chữa nó. Mọi ý kiến tiếp theo nên được viết ở một đề mục mới. Dưới đây là lời kết luận vắn tắt.
Không áp dụng giao diện đề xuất. --minhhuy (thảo luận) 10:20, ngày 8 tháng 3 năm 2021 (UTC)[trả lời]

Xin chào mọi người. Nhân dịp anh P.T.Đ ra mắt trang chính mới. Thì hôm nay, em không giấu mọi người nữa, sau khi kiên trì cả sáng để sửa lại thiết kế, em xin giới thiệu thiết kế mới sắp được giới thiệu dưới đây. Em đề xuất áp dụng giao diện Trang Chính mới năm 2021 do em thiết kế, tạm gọi tên là Giao diện Wiki hộp phẳng 2021, cho Wikipedia tiếng Việt.

Liên kết: Bản mẫu:Mẫu Trang Chính 2020

Bối cảnh

Cái này chắc anh P.T.Đ đã nói ở trên nên em sẽ không nói nữa

Nguyên tắc thiết kế

Đối với thiết kế của Giao diện Wiki hộp phẳng 2021, em cố gắng tuân thủ một số khuôn khổ sau, dựa trên những cảm giác và kinh nghiệm cá nhân:

  1. "Hiện đại"
  2. "Thống nhất"
  3. "Cân bằng"
  4. "Kế thừa"

Những điểm mới/khác so với giao diện Trang Chính hiện tại

► Về nội dung

Tổng thể, giao diện Giao diện Wiki hộp phẳng 2021 kế thừa toàn bộ nội dung hiện hành của giao diện Trang Chính hiện tại, nhưng có thay đổi hoàn toàn về mặt thiết kế và nội dung. Đồng thời, giao diện mới còn bổ sung thêm 3 trương mục mới nhằm đáp ứng nguyện vọng của các thành viên:

  • Bài viết tốt
  • Danh sách chọn lọc
  • Đóng góp Wikipedia (hướng người xem đóng góp cho Wikipedia nếu họ muốn)

► Về thiết kế

Giao diện Giao diện Wiki hộp phẳng 2021 tuân theo các chuẩn mực và xu hướng thiết kế hiện đại, được nhiều Wikipedia ngôn ngữ khác sử dụng, đặc biệt là thiết kế phẳng (flat design) và thiết kế kiểu hộp (box design).

  • Kiểu hộp được sử dụng ở Wikipedia tiếng Nga, cảm hứng chính ở trang mới này
    Kiểu hộp được sử dụng ở Wikipedia tiếng Nga, cảm hứng chính ở trang mới này

Ý niệm của thiết kế đến từ hộp. Các hộp bao bọc các chuyên mục là cơ cấu nội dung tượng trưng của cho rất nhiều Website hiện đại.

Các tiêu đề trương mục là sử dụng Font chữ giống như Logo Wikipedia, thể hiện đậm nét tính chất riêng của Wikipedia.

Thiết kế mới dựa trên ý tưởng từ các thiết kế Trang Chính ở những phiên bản ngôn ngữ khác, như: Wikipedia tiếng Tây Ban Nha, Wikipedia tiếng Nga.

Về khung Đầu trang: Bố cục khung Đầu trang được chia làm 2 phần trái phải, tương tự Wikipedia tiếng Ạnh, tiếng Nga và tiếng Tây Ban Nha. Phần trái gồm tiêu đề "Chào mừng đến với Wikipedia tiếng Việt" và câu dịch từ tiếng Anh: :Bách khoa toàn thư mở mà ai cũng có thể đóng góp và sửa đổi." nhằm thể hiện tính tự do đóng góp và mở của Wikipedia . Cột phải gồm phần thống kê và các liên kết giống nút, khác với giao diện Trang Chính hiện tại. Ở đây em lược bỏ đoạn mở đầu, loại bỏ hầu hết các liên kết để tránh rườm rà. Chỉ đến lại 4 nút nhầm đưa người xem tìm kiếm bài viết và tìm hiểu thêm về Wikipedia tiếng Việt, giúp bố cục trông sáng sủa hơn, với quan niệm hướng người xem "nội dung trước, đóng góp sau".

{{Mẫu Trang Chính 2020/Đầu trang}} Họa tiết nền được lấy từ Wikipedia tiếng Nga, nhằm tạo ra chiều sâu và thể hiện sự tương đồng với logo của Wikipedia.

Khung hộp chính của giao diện

Về các khung BVCL, BVT, DSCL, HACL, BCB, TT, NNNX, CLV: Về cơ bản được tổ chức thành các hộp và tiêu đề hộp theo ý niệm thiết kế đồng nhất.

Tiêu đề được để font đen và không gắn icon nhầm tạo sự đơn giản của giao diện.

Liên kết đển ngang, chữ to rõ giúp người xem tốt hơn

Đối với các khung BVCL, BVT, DSCL, một điểm khác là xuất hiện nút [ Đọc ] thay cho dòng (xem tiếp...) ở cuối câu như hiện tại. [ Đọc ] thì đúng ý nghĩa của thao tác bấm nút này hơn, nghĩa là người dùng sẽ "đọc", không đơn thuần là "xem". Việc bỏ liên kết cuối câu nhầm tạo ra sự thống nhất văn bản theo nguyên tắc hạn chế tối đa việc tác động vào bài viết gây mất thẩm mỹ.

Các liên kết dưới cùng các hộp được tái thiết kế căn theo bên trái để thông thoáng hơn.

Về khung Các lĩnh vực: Các icon được thay thế so với giao diện hiện tại để đồng bộ về mặt thiết kế.

Icon mới của khung Các lĩnh vực

Về khung Đóng góp Wikipedia: Đây là một phần mục mới do em sáng tác, lấy cảm hứng từ Wikipedia tiếng Anh.

Khung Đóng góp Wikipedia

Mục này gồm 2 phần:

  1. Một đoạn văn bản: "Nếu bạn có ý định đóng góp cho Wikipedia, bạn có thể tìm hiểu cách tạo bài (bao gồm Quy tắc bài viết), sửa bài hoặc tải ảnh, sau đó có thể thử trước tại Chỗ thử trước khi bắt đầu. Nếu bạn vẫn cần giúp đỡ, đừng ngại đặt câu hỏi." Lấy ý tưởng đoạn mở đầu ở khung Đầu trang những được sửa lại nhầm dẫn dắt mọi người biên tập bài viết theo tuần tự như ý định của NguyenTrongPhu yêu cầu người biên tập bài tốt hơn.
  2. Các phần sau thể hiện một số liên kết cũ từ phần đầu trang, khi rê chuột vào sẽ có chú thích. Phần "Những khu vực khác ở Wikipedia:" nhầm hướng đến những người quan tâm đến các vấn đề tại Wikipedia tiếng Việt, hay cần giúp đỡ hoặc tìm hiểu thêm tại Wikipedia tiếng Việt.

Về khung Wikipedia ngôn ngữ khác và Dự án liên quan: Khung Wikipedia ngôn ngữ khác được đẩy xuống dưới so với giao diện hiện tại, và cả 2 khung được tái thiết kế để thông thoáng hơn, đồng bộ với nhau. Nội dung khung Wikipedia ngôn ngữ khác vẫn lấy từ Wikipedia tiếng Việt. Nội dung khung Dự án liên quan được lấy từ Wikipedia tiếng Nga.

Về hệ thống icon: Đa phần icon được sử dụng trên toàn bộ giao diện Giao diện Wiki hộp phẳng 2021 được lấy từ bộ OOUI icons (WikimediaUI theme) loại màu đen để thống nhất giao diện, và được nhúng vào giao diện thông qua file gốc SVG, đảm bảo tính chất sắc nét của file vector cũng như giảm dung lượng tải. Các icon mục Dự án Wikimedia cũng được cập nhật phiên bản mới hơn.

Về typography: Kích thước font chữ được cố gắng giữ mặc định theo hệ thống, tránh tình trạng quá nhiều cỡ font. Toàn bộ các phần text sử dụng font mặc định tùy skin wiki (Vector hoặc Minerva). Một số text dùng font serif (điển hình là Linux Libertine), như tiêu đề "Wikipedia tiếng Việt" ở đầu trang và các tiêu đề tóm lược ở hai khung Wikipedia ngôn ngữ khác và Dự án liên quan.

Về vấn đề canh đều 2 cột: Ở giao diện Vector, để 2 cột được đều nhau, không quá chênh lệch, thì có khuyến cáo như sau (xét trên độ phân giải màn hình 1366x768):

  • Nội dung mục BVCL giới hạn dưới 1000 ký tự.
  • Nội dung mục BVT, DSCL giới hạn dưới 500 ký tự.

Wikipedia tiếng Anh hiện cũng đang giới hạn 975 ký tự đối với mục BVCL. Có thể dùng công cụ https://www.charactercountonline.com/ để đếm số ký tự.

► Về kỹ thuật

Giao diện Giao diện Wiki hộp phẳng 2021 áp dụng một số kỹ thuật thiết kế web hiện đại. Điển hình như:

Khả năng co giãn theo kích cỡ màn hình: Được gọi là Thiết kế web đáp ứng (Responsive web design). Khả năng này giúp thiết kế của Giao diện Wiki hộp phẳng 2021 đạt được mức độ tương thích cao với nhiều kiểu màn hình khác nhau (từ điện thoại, máy tính bảng, laptop, desktop). Thiết kế gốc được dựng theo cỡ màn hình điện thoại, rồi dần bổ sung mã để phù hợp các màn hình to hơn (kỹ thuật mobile first). Xem các ví dụ (xem tập tin gốc để nhìn rõ hơn).

  • Giao diện Wiki hộp phẳng 2021 trên Di động
    Giao diện Wiki hộp phẳng 2021 trên Di động
  • Giao diện Wiki hộp phẳng 2021 trên máy tính bảng
    Giao diện Wiki hộp phẳng 2021 trên máy tính bảng
  • Giao diện Wiki hộp phẳng 2021 trên Laptop độ phân giải 1366x768 (skin Vector)
    Giao diện Wiki hộp phẳng 2021 trên Laptop độ phân giải 1366x768 (skin Vector)

Sử dụng thẻ div thay cho thẻ table: Giao diện Trang Chính hiện tại sử dụng thẻ table để dàn trang, đây là một kỹ thuật thiết kế web đã lỗi thời từ 10 năm nay, và thẻ table cũng khiến website khó tương thích với các phần mềm screen reader (phần mềm đọc nội dung cho người khiếm thị). Giao diện Giao diện Wiki hộp phẳng 2021 đã chuyển sang dùng thẻ div toàn bộ.

Tổ chức định kiểu CSS thông qua <templatestyles>: <templatestyles> là một phần mở rộng (extension) mới của phần mềm MediaWiki, giúp tổ chức mã CSS sang một trang riêng, nhằm tách trách nhiệm "định kiểu" khỏi mã wikitext. Điều này giúp tránh việc sử dụng inline CSS (CSS nội dòng), đồng thời sử dụng được các kỹ thuật CSS tiên tiến khác.

Sử dụng flexbox theo dạng bản mẫu để dàn trang: Flexbox là một kỹ thuật dàn trang mới của CSS, giúp mã sạch, đẹp và gọn hơn, cũng như dễ dàng điều chỉnh sự tổ chức các phần tử HTML linh động theo từng trường hợp.


Ý kiến/Đồng thuận cộng đồng

Đây là giao diện Trang Chính được tôi đầu tư một thời gian dài để giúp Wikipedia chúng ta thu hút thêm ánh nhìn từ công chúng và cố gắng đạt mức hoàn thiện cao, thanh lịch và hiện đại. Đồng thời, đã lắng nghe nhiều góp ý từ các lần thảo luận trước của các thành viên trong cộng đồng. Hiện tại, giao diện vẫn còn trong giai đoạn thử nghiệm, nhằm kiểm tra thêm một số lỗi nếu có phát sinh.

Các bạn có thể cho {{OK}}  Đồng ý để đạt đồng thuận cộng đồng về việc triển khai giao diện Giao diện Wiki hộp phẳng 2021 cho Trang Chính, {{yk}}  Ý kiến nếu cần góp ý gì thêm (một số điều chỉnh nếu vượt quá các nguyên tắc thiết kế ban đầu thì tôi xin phép từ chối) hoặc {{OK?}}  Chưa đồng ý. Các bạn cũng có thể đề xuất các thiết kế khác trong đợt này.

@MeigyokuThmn, Nguyễn M. Đức, DHN, Greenknight dv, Khủng Long, TheletterofRhea, Mongrangvebet, Nacdanh, Trần Nguyễn Minh Huy, Nguyentrongphu, Kim cương xanh, Đông Minh, Băng Tỏa, Lệ Xuân, P.T.Đ, Alphama, Truy Mộng, Langtucodoc, Mintu Martin, Violetbonmua, Keo010122, Baoothersks, Buiquangtu, Đức Anh, Tàn Kiếm, Mạnh An, ThiênĐế98, NXL1997, Mxn, Prenn, Tuanminh01, Quenhitran, Q.Khải, NhacNy2412, và Nguyenhai314: Xin mời một số anh/chị từng góp ý về vấn đề Trang Chính tham gia thảo luận. Nếu có tag nhầm thì thứ lỗi.Thiện Hậu – Pokémon Trainer (thảo luận) 04:33, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]

  •  Ý kiến Mình đã thử so sánh cái của bạn với cái của bạn Thành viên:P.T.D và thấy cái của P.T.D khá hơn về độ mềm, bắt mắt nhưng cái của P.T.D lại ko có cái slider ở phần bài viết tốt. Nhưng ít nhất thì mình không cần lắm cái slider, và mình lại tự hỏi là làm thế nào để chuyển cái slider để hoạt động được ở bên kia? Professor Damn (Talk) 04:56, ngày 22 tháng 2 năm 2021 (UTC)[trả lời]
  1.  Ý kiến Có vẻ khá mờ nhạt so với bản của P.T.Đ. Bạn có thể giới thiệu thêm ưu điểm của bản này so với của bạn P.T.Đ được không? Đức Anh (Thảo luận · Wikibooks) 04:40, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
Đức Anh Về cơ bản, Trang chính mới này có thiết kế:
  • Đơn giản nhầm hướng đến một giao diện thống nhất, rõ ràng.
  • Sử dụng Font chữ rõ ràng giúp người đọc hiểu rõ nội dung.
  • Khung hộp có viền dày giúp phân cách nội dung hiệu quả.
  • Sử dụng một màu nền duy nhất cho tất cả các thành phần (kể cả tiêu đề)
  • Hướng người đọc những nội dung chất lượng tại Wikipedia tiếng Việt, phương châm coi trọng "nội dung là chính, đóng góp là phụ" thay vì tập trung vào nhiều thành phần mà có lẽ ít người đọc quan tâm như "Cải thiện nội dung" hay mấy cái liên kết hướng dẫn đóng góp khi có một bộ phận người đọc không có ý định đóng góp. Thiện Hậu – Pokémon Trainer (thảo luận) 05:12, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
    Phần "Cải thiện nội dung đó" đang được thảo luận, và nó cũng chưa chắc là chủ đích của thiết kế của P.T.Đ – Đức Anh (Thảo luận · Wikibooks) 07:02, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
Đức Anh Không biết bên Wikibooks tiếng Việt có cần giao diện Trang Chính này không nhỉ?.--Thiện Hậu – Pokémon Trainer (thảo luận) 13:58, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
Tôi đã thiết kế một giao chính cho Wikibooks từ 2 tháng trước rồi cơ. Nếu được bạn có thể giao diện mang sang dự án Wikiquote! – Đức Anh (Thảo luận · Wikibooks) 14:03, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
Đức Anh Wikiquote cơ bản trang chính chỉ có thể làm ở mức giới thiệu là chính, vì bên đó không có mục chọn lọc hay có phần về những nội dung tốt nên rất khó để bắt đầu. Còn Wikibooks của anh thì có mục nội dung chọn lọc nên em có thể làm 3 cột giống bên tiếng Anh và phần đầu như trên, đổi một chút là được. Thiện Hậu – Pokémon Trainer (thảo luận) 17:03, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
  1.  Ý kiến Nhìn trên iPad (768px), khúc sau chữ quá to, trật với khúc đầu. Mục từ đơn điệu cần cách tân, chữ "Chào mừng..." không có gì đặc sắc. Tất cả các mẫu các bạn đã nêu đều có 1 đặc điểm là "đóng khung, đóng khung, và đóng khung". Để gợi ý các bạn có thêm sự thanh thoát, mời xem 1 số mẫu của 1 số Wiki để lấy ý tưởng:
    Wiki Ý sử dụng khung 1 lần, bo tròn góc, đẩy vệt nền tiêu đề đậm nhạt.
    [1] Cố định 4 vùng, chỉ dùng 2 khung bên phải, 2 khung slide hình ảnh.
    Wiki xứ Basque, phong cách của 1 trang tin tức.
    Dùng vạch màu dọc theo khung
    Chia bố cục lệch
    Chắc là bố cục cách tân nhất. Nói chung có giao diện cách tân tôi vẫn ủng hộ. Mấy thiết kế cũ có vẻ nhàm chán, nhìn gần chục năm rồi.  A l p h a m a  Talk 14:34, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
    Nếu có thì giờ nghiên cứu thì bạn có thể đề xuất thêm giao diện mới cho mọi người lựa chọn. Cá nhân tôi lướt qua các ví dụ trên thì cũng không đánh giá cao các giao diện này, vì ngoài việc hiển thị thì còn nhiều phẩm chất thiết kế khác không đạt (kinh nghiệm cá nhân), một số thì không phù hợp với một trang bách khoa thư, và mức độ hoàn thiện chưa cao. Cơ bản thì Wikipedia không cần phải quá đẹp hay cách tân. Nếu muốn đẹp thì có thể qua Wikiwand, hay lướt Themeforest, Dribbble, Behance để nắm các xu hướng thiết kế. Đương nhiên là nhìn đẹp hơn các trang bách khoa thư nhiều lần. P.T.Đ (thảo luận) 18:22, ngày 6 tháng 2 năm 2021 (UTC)[trả lời]
    Các giao diện cách tân kiểu quý BQV Alphama gợi ý tôi đều đã xem và hầu như đều không thể hiển thị trên di động, hoặc có hiển thị được thì vẫn bị vỡ cấu trúc (đối với các thiết bị có độ phân giải thấp). Một trang chính cách tân đòi hỏi phải hiển thị tốt trên cả giao diện máy tính lẫn di động. Với cá nhân, tôi khá ưng ý giao diện của wiki này. – ~ Nguyenhai314 (thảo luận) 13:43, ngày 7 tháng 2 năm 2021 (UTC)[trả lời]
    Đợt trước tôi có hỏi Thienhau2003 về một phần mở rộng, phần mở rộng có phép chúng ta hiển thị giao diện máy tính một kiểu, di động một kiểu mà chúng ta chọn. Từ đó xây dựng riêng cho 2 cấu trúc giao diện cho máy tính và di động, khỏi sợ vỡ. – Đức Anh (Thảo luận · Wikibooks) 13:49, ngày 7 tháng 2 năm 2021 (UTC)[trả lời]
    Chỉ cần dùng kỹ thuật thiết kế web đáp ứng là đủ. Cách viết giao diện riêng cho từng trường hợp đã lỗi thời 10 năm nay. Trừ trường hợp website quá to, nặng như Facebook, YouTube thì mới tách. P.T.Đ (thảo luận) 18:06, ngày 7 tháng 2 năm 2021 (UTC)[trả lời]
Thảo luận trên đã được đóng lại. Xin đừng sửa chữa nó. Mọi ý kiến tiếp theo nên được viết ở một đề mục mới.
Lấy từ “https://vi.wikipedia.org/w/index.php?title=Wikipedia:Thảo_luận/Trang_Chính_mới_(Giao_diện_Wiki_hộp_phẳng_2021)&oldid=65090934”