Giao diện đồ hoạ người dùng (viết tắt tiếng Anh: GUI) cho phép người dùng tương tác với phần cứng máy tính một cách thân thiện. Theo năm tháng, một loạt GUI đã được phát triển cho các hệ điều hành (HĐH) khác nhau như OS/2, Macintosh, Windows, Amiga, Linux, Symbian OS... Chúng ta hãy cùng ôn lại kỉ niệm qua các bức ảnh.

Bài viết sẽ mang đến một cái nhìn về sự tiến hoá trong thiết kế giao diện của các HĐH phổ biến từ những năm 1980 cho đến nay. Lưu ý rằng chúng ta chỉ quan tâm đến giao diện mà thôi, và cũng chỉ quan tâm đến các tính năng nổi bật. Không phải tất cả GUI của các HĐH đang tồn tại sẽ được liệt kê.

Giao diện đồ hoạ đầu tiên được phát triển bởi các nhà nghiên cứu thuộc Xerox Palo Alto Research Center (PARC) trong những năm 1970. Từ đây mở ra một kỉ nguyên hoàn toàn mới cho sức sáng tạo trong đồ hoạ máy tính.

Máy tính cá nhân đầu tiên sử dụng GUI hiện đại là Xerox Alto (1973). Đây không phải là sản phẩm thương mại.

Ảnh
Ảnh: toastytech.com.

Giai đoạn 1981 - 1985

Xerox 8010 Star (1981)

Đây là hệ thống đầu tiên được tích hợp đầy đủ để làm thành máy tính để bàn, bao gồm các ứng dụng và GUI. Được đặt tên ban đầu là “The Xerox Star”, sau đó đổi thành “ViewPoint” và sau nữa là “GlobalView”.

Ảnh
Xerox 8010 Star, Ảnh: toastytech.com.
Apple Lisa Office System 1 (1983)

Còn được gọi là Lisa OS (chữ OS ở đây là Office System). Được phát triển bởi Apple với mục đích trở thành một máy trạm xử lí tài liệu. Tiếc là máy trạm này không “thọ”, Apple đã khai tử Lisa OS và giới thiệu hệ điều hành Macintosh với giá cả hợp lí hơn.

Ảnh
Apple Lisa OS 1, Ảnh: GUIdebook.

Có một số bản nâng cấp cho Lisa OS, như Lisa OS 2 (1983) và Lisa OS 7/7 3.1 (1984), nhưng chỉ là nâng cấp hệ thống, không có thay đổi về GUI.

Ảnh
Apple Lisa OS 1, Ảnh: GUIdebook.
VisiCorp Visi On (1984)

Visi On là GUI đầu tiên của IBM PC. Hệ thống này nhắm đến các doanh nghiệp lớn và giá cũng không rẻ chút nào. Giao diện hỗ trợ chuột, có hệ thống hướng dẫn và không sử dụng biểu tượng.

Ảnh
VisiCoprt Visi On, Ảnh: toastytech.com.
Ảnh
VisiCoprt Visi On, Ảnh: toastytech.com.
Mac OS System 1.0 (1984)

System 1.0 là giao diện HĐH đầu tiên được phát triển cho Macintosh, mang nhiều tính năng của HĐH hiện đại như dựa trên cửa sổ với các biểu tượng. Bạn có thể dùng chuột để di chuyển cửa sổ, dùng thao tác kéo-thả biểu tượng để sao chép tập tin, thư mục.

Ảnh
Apple Mac System 1.0, Ảnh: toastytech.com.
Amiga Workbench 1.0 (1985)

Khi được giới thiệu lần đầu tiên, Amiga đã đi trước thời đại. Giao diện hỗ trợ đồ hoạ màu (4 màu: đen, trắng, xanh da trời và cam), đa nhiệm ưu tiên, âm thanh nổi, biểu tượng nhiều trạng thái (chọn, không chọn).

Ảnh
Amiga Workbench 1.0, Ảnh: GUIdebook.
Ảnh
Amiga Workbench 1.0, Ảnh: GUIdebook.
Windows 1.0x (1985)

Cũng trong năm này, Microsoft cuối cùng đã nhập cuộc và cho ra mắt Windows 1.0, là HĐH với giao diện đồ hoạ đầu tiên. Hệ thống sử dụng các biểu tượng 32x32 pixel, đồ hoạ màu. Tính năng hấp dẫn nhất (mà sau đó bị loại bỏ) là biểu tượng hoạt hoạ của đồng hồ. Dù vậy, nhìn chung, không ai gọi Windows 1.0 là một HĐH hay giao diện đồ hoạ.

Ảnh
Microsoft Windows 1.01, Ảnh: makowski-berlin.de.
Ảnh
Microsoft Windows 1.01, Ảnh: makowski-berlin.de.
GEM (1985)

GEM (Graphical Environment Manager) là giao diện cửa sổ được phát triển bởi Digital Research, Inc. (DRI). Được thiết kế ban đầu cho hệ điều hành CP/M trên Intel 8088 và Motorola 68000, GEM sau đó được phát triển để sử dụng trên DOS. Hầu hết mọi người sẽ nhớ GEM như là GUI cho dòng máy tính Atari ST.

Ảnh
Ảnh: Wikipedia.

Giai đoạn 1986 - 1990

IRIX 3 (1986, phát triển lần đầu: 1984)

IRIX là HĐH 64 bit dành cho UNIX. Một tính năng thú vị của GUI là hỗ trợ các biểu tượng véc-tơ, từ trước khi Mac OS X ra đời rất lâu.

Ảnh
Silicon Graphics IRIX 3.0, Ảnh: osnews.com.
GEOS (1986)

Hệ điều hành GEOS (Graphic Environment Operating System) được phát triển bởi Berkeley Softworks, ban đầu dành cho Commodore 64. GEOS bao gồm một chương trình xử lí văn bản đồ hoạ (geoWrite), một chương trình vẽ (geoPaint).

Ảnh
Ảnh: Wikipedia.
Windows 2.0x (1987)

Trong phiên bản này, việc quản lí cửa sổ đã được cải tiến đáng kể. Các cửa sổ có thể được chồng lên nhau, co giãn, cực tiểu hoá và cực đại hoá.

Ảnh
Microsoft Windows 2.03, Ảnh: guidebookgallery.org.
Ảnh
Microsoft Windows 2.03, Ảnh: guidebookgallery.org.
OS/2 1.x (1988)

OS/2 ban đầu được phát triển chung với IBM và Microsoft, nhưng đến năm 1991 thì liên minh này tan rã. Phiên bản đầu tiên này chỉ hỗ trợ các biểu tượng đơn sắc và cố định.

Ảnh
Microsoft-IBM OS/2 1.1, Ảnh: pages.prodigy.net.
Ảnh
Microsoft-IBM OS/2 1.1, Ảnh: pages.prodigy.net.
NeXTSTEP / OPENSTEP 1.0 (1989)

Steve Jobs có ý tưởng xây dựng máy tính hoàn hảo cho các trường đại học và phòng nghiên cứu. Ý tưởng này đã sinh ra tập đoàn NeXT Computer.

Máy tính NeXT đầu tiên ra đời năm 1988, nhưng những tính năng quan trọng nhất được giới thiệu năm 1989 với phiên bản NeXTSTEP 1.0 GUI, sau đó đổi tên thành OPENSTEP, các biểu tượng lớn hơn (48x48), nhiều màu hơn.

Ảnh
NeXTSTEP 1.0, Ảnh: kernelthread.com.
OS/2 1.20 (1989)

Phiên bản nhỏ kế tiếp của OS/2 mang theo nhiều cải tiến. Biểu tượng xinh xắn hơn và cửa sổ mượt hơn.

Ảnh
OS/2 1.2, Nguồn pages.prodigy.net
Windows 3.0 (1990)

Từ phiên bản này, Microsoft đã nhận ra tiềm năng của GUI và bắt đầu có những cải tiến đáng kể.

HĐH hỗ trợ chế độ chuẩn và chế độ nâng cao cho 386 (dùng nhiều hơn 640 KB bộ nhớ, dung lượng đĩa lớn hơn, màn hình độ phân giải cao hơn, như là Super VGA 800x600 và 1024x768).

Microsoft đã thuê Susan Kare để thiết kế các biểu tượng cho Windows 3.0 và mang một kiểu dáng nhất quán cho giao diện.

Ảnh
Microsoft Windows 3.0, Ảnh: toastytech.com.
Ảnh
Microsoft Windows 3.0, Ảnh: toastytech.com.

Giai đoạn 1991 - 1995

Amiga Workbench 2.04 (1991)

Phiên bản này mang đến nhiều cải tiến: màu sắc thay đổi, giao diện 3D. Màn hình có thể chia dọc thành nhiều vùng với độ phân giải và độ sâu màu khác nhau (hơi lạ đời trong thời đại này). Độ phân giải mặc định là 640x256, nhưng phần cứng cũng hỗ trợ các độ phân giải lớn hơn.

Ảnh
Commodore Amiga Workbench 2.04, Ảnh: guidebookgallery.org.
Mac OS System 7 (1991)

Mac OS 7.0 là giao diện đồ hoạ đầu tiên của Mac hỗ trợ màu.

Ảnh
Apple Mac OS System 7.0, Ảnh: guidebookgallery.org.
Ảnh
Apple Mac OS System 7.0, Ảnh: guidebookgallery.org.
Windows 3.1 (1992)

Phiên bản Windows này hỗ trợ các font TrueType, và lần đầu tiên biến Windows trở thành nền tảng cho việc xuất bản trên máy tính. Trước đây, để có chức năng này, cần dùng hệ thống quản lí font ATM của Adobe.

Một gam màu Hotdog Stand được thiết kế riêng để giúp những người mù màu (một mức độ nào đó) có thể xem dễ dàng hơn.

Ảnh
Ảnh: Wikipedia.
OS/2 2.0 (1992)

Đây là giao diện đồ hoạ đầu tiên được “thi thố” trên chiến trường quốc tế, với các bài kiểm tra về tính khả dụng và khả năng truy cập. Toàn bộ GUI được phát triển bằng thiết kế hướng đối tượng.

Ảnh
IBM OS/2 2.0, Ảnh: toastytech.com.
Ảnh
IBM OS/2 2.0, Ảnh: toastytech.com.
Windows 95 (1995)

Giao diện được thiết kế lại hoàn toàn so với phiên bản 3.x. Đây là phiên bản Windows đầu tiên có nút Đóng cho mỗi cửa sổ. Các biểu tượng và các đối tượng đồ hoạ khác đều có trạng thái (kích hoạt, không kích hoạt, chọn, đánh dấu...). Nút Start nổi tiếng lần đầu tiên xuất hiện.

Đây là bước tiến lớn của Microsoft.

Ảnh
Microsoft Windows 95, Ảnh: guidebookgallery.org.
Ảnh
Microsoft Windows 95, Ảnh: guidebookgallery.org.

Giai đoạn 1996 - 2000

OS/2 Warp 4 (1996)

Phiên bản Warp 4 này được IBM cải tiến khá nhiều về môi trường làm việc.

Ảnh
IBM OS/2 Warp 4, Ảnh: toastytech.com.
Ảnh
IBM OS/2 Warp 4, Ảnh: toastytech.com.
Mac OS System 8 (1997)

Mac OS 8 là một trong những hệ thống sớm hỗ trợ các biểu tượng giả-3D.

Ảnh
Apple Mac OS 8, Ảnh: guidebookgallery.org.
Windows 98 (1998)

Giao diện gần như không đổi so với Windows 95. Điểm khác biệt là hệ thống có thể hỗ trợ hơn 256 màu. Windows Explorer thay đổi hoàn toàn, và lần đầu tiên “Active Desktop” được giới thiệu.

Ảnh
Microsoft Windows 98, Ảnh: toastytech.com.
KDE 1.0 (1998)

Theo nhóm phát triển KDE thì đây là “một môi trường desktop đương đại cho các trạm làm việc UNIX. KDE đưa là một desktop dễ dùng cho các hệ thống UNIX, tương tự các môi trường dưới MAc OS hay là Windows 95/NT. Hoàn toàn miễn phí và mở.”

Ảnh
Ảnh: Wikipedia.
BeOS 4.5 (1999)

Giao diện của BeOS được phát triển với tiêu chí mang đến một thiết kế sáng sủa, gọn gàng.

Ảnh
Ảnh: Wikipedia.
GNOME 1.0 (1999)

GNOME ban đầu được phát triển cho Red Hat Linux, sau đó được mở rộng cho các hệ thống Linux khác.

Ảnh
Red Hat Linux GNOME 1.0.39, Ảnh: visionfutur.com.

Giai đoạn 2001 - 2005

Mac OS X (2001)

HĐH hoàn toàn mới với giao diện Aqua được Apple trình làng. Các biểu tượng mặc định có kích thước 128x128, bán trong suốt. Ban đầu người dùng không quen với sự thay đổi lớn này, hàng loạt chỉ trích ngay sau khi phát hành OS X. Nhưng không lâu sau đó, họ đã bắt nhịp và giao diện cơ bản được giữ nguyên đến hôm nay.

Ảnh
Apple Mac OS X 10.1 Ảnh: guidebookgallery.org.
Windows XP (2001)

Microsoft có xu hướng đổi giao diện hoàn toàn trong mỗi phiên bản, và XP không phải là một ngoại lệ. Người dùng có thể thay đổi giao diện theo ý thích, các biểu tượng có kich thước mặc định 48x48 và sử dụng 24 bit màu.

Ảnh
Microsoft Windows XP Professional, Ảnh: guidebookgallery.org.
KDE 3 (2002)

KDE 3 mang đến sự thay đổi đáng kể so với phiên bản 1.0.

Ảnh
KDE 3.0.1, Ảnh: netbsd.org.

Giai đoạn 2007 - 2009 (hiện nay)

Windows Vista (2007)

Đây là lời đáp trả của Microsoft cho các đối thủ: giao diện mang dáng dấp 3D và nhiều hoạt hình. Hệ thống widget được giới thiệu, có dáng dấp của một Active Desktop được cải tiến.

Ảnh
Microsoft Windows Vista, Ảnh: technology.berkeley.edu.
Mac OS X Leopard (2007)

Về cơ bản vẫn là giao diện Aqua, nhưng Leopard mang nhiều dáng dấp 3D hơn. Nhiều hoạt hình và tương tác.

Ảnh
Apple Mac OS X 10.5 Leopard, Ảnh: skattertech.com.
GNOME 2.24 (2008)

GNOME đã nỗ lực nhiều để mang hương vị nghệ thuật đến cho giao diện. Có hẳn một cuộc thi chọn lựa hình nền cho phiên bản 2.24.

Ảnh
Ảnh: gnome.org.
KDE 4 (4.0 2008, 4.2 2009)

Phiên bản KDE 4 mang đến nhiều cải tiến như mang tính năng hoạt hình, mượt cho các cửa sổ, hỗ trợ widget, dễ dàng thay đổi kích thước biểu tượng. Sự thay đổi đáng kể nhất là bộ biểu tượng, mẫu và âm thanh được cung cấp bởi dự án Oxygen.

Hiện giờ KDE còn có thể sử dụng trên Windows và Mac OS X.

Ảnh
Ảnh: Wikipedia.

Hải Nam (theo Web designer depot)




Bình luận

  • TTCN (27)
ATK  1019

Win 2000 và Server sao ko thấy nhắc đến!

Hải Nam  30903

Vì 2K/NT không có gì khác nhiều so với 98 chăng?

ATK  1019

Vì tên bài viết là nói về giao diện các hệ điều hành từ trứoc đến nay. và Win Server2003/2008 cũng là 1 hệ điều hành cơ bản cũng nên nhắc đến. Còn nếu dựa trên tiêu chí là dao diện khác nhau thì cần phải thêm rất nhiều

Hải Nam  30903

Ở đầu bài tác giả có nói là chỉ kể ra các giao diện khác nhau thôi, chứ không kể ra hết các HĐH. Đó cũng là lí do mà KDE, GNOME được liệt kê (chứ không phải RHEL hay Debian). Hoặc là Mac OS X chỉ kể hai phiên bản 10.0 và 10.5 và bỏ qua 4 phiên bản (chính) ở giữa.

Minh Đạt  823

Năm 1989 mà NeXTSTEP 1.0 có giao diện đẹp quá.. K0 biết bây giờ thằng này ra sao nhỉ?

Hải Nam  30903

Nhìn thằng NeXT mà nhớ lại CDE trên Solaris. Không biết chúng có bà con gì không.

quoc tuan  36

bình luận

Sao không thấy nhắc đến hệ điều hành made in việt nam nhỉ?có phải là không có đâu, chỉ là chưa phổ biến thôi. mình phải tự hào về những gì làm được chứ

Hải Nam  30903

Tác giả bài viết này không phải là người VN nên không biết. Mà mình là người VN cũng chỉ biết có 3 cái: Vietkey (RH/KDE), CMC (RH/GNOME) và Hacao (Puppy/không rõ), cả 3 cái này đều không có giao diện riêng nổi bật. Ngay cả Ubuntu còn không có chỗ trong bài này, thì đừng hỏi các distro VN Big Grin

Mình chỉ thắc mắc là tại sao không có Xfce. Dạo còn dùng Debian Sarge thì Xfce là một GUI gọn nhẹ và khá phổ biến.

Bùi Anh Tuấn  624

@md Tèo: Sau khi thất bại với NeXT, Jobs quay về Apple, sau đó Apple mua lại NeXT, và Mac OS X ra đời.

Bùi Anh Tuấn  624

@Nam: Bài này của Mít tờ Nam dịch đấy à? Hay đấy chứ?

Nhưng...có nhiều "vấn đề" lắm. Kết quả dịch so với nguồn hơi bị "méo" ,và Cách hành văn trong tiếng Việt cũng không ổn.

Hải Nam  30903

@BAT: thí dụ?

Bùi Anh Tuấn  624

@Nam: Chưa nhìn thấy à?

"Đây là lời đáp trả của Microsoft cho các đối thủ: giao diện mang tính 3D và nhiều hoạt hình."

Lần đầu tiên trong đời nghe nói 3D có chữ "tính" ở phía trước.

Còn "artwork" thì bị chế biến thành "hương vị nghệ thuật".

Đầu bếp Nam quả thật đại tài.

Hải Nam  30903

"mang tính 3D" vì nó không phải 3D hoàn toàn. Còn "hương vị nghệ thuật" không phải là tiếng Việt?

Một bài viết cần hai yếu tố: viết đúng (nghĩa là không sai thực tế) và viết hay. Khái niệm "CTV dịch bài" phải bỏ dần dần (mà thực tế có nhiều websie không cho phép dịch bài của họ), thay bằng "viết bài". Viết khó hơn dịch, vì muốn viết phải hiểu rõ hơn dịch, biết cái nào là nội dung chính.

Bùi Anh Tuấn  624

Vậy nếu có ai đó nói tác phẩm này "có tính nghệ thuật" hay phát hiện này "có tính học thuật" thì có nghĩa là "không phải nghệ thuật hoàn toàn" và "không phải học thuật hoàn toàn" ?

Dùng từ và lý luận kiểu này thật buồn cười quá đi mất! Đăng kí patent đi Nam, độc nhất vô nhị đó!

Vậy có OS Nam dùng "3D" thay cho "tính 3D" thì có nghĩa là nó thật sự 3D hoàn toàn?

Với ý nghĩa như thế thì viết là "giao diện mang dáng dấp/dáng vẻ 3D" là thích hợp nhất, còn "tính 3D" trên thế giới Nam là người dùng đầu tiên, chưa nói đúng/sai.

Còn "artwork", nghĩa của nó là "hình ảnh minh hoạ trên sách/báo; tác phẩm nghệ thuật", và ở đây nó ám chỉ đến hình ảnh, có nghĩa là "hình nền".

Và từ "hình nền" chuyển thành "hương vị nghệ thuật" thì tôi gọi là "méo".

Hải Nam  30903

Đúng là "dáng vẻ" thì chính xác hơn "tính". Còn artwork của GNOME thì không phải là hình nền. Thử vào art.gnome.org xem trong đó gồm những gì. Chính "hương vị nghệ thuật" là đặc điểm để phân biệt GNOME với những cái khác.

Bùi Anh Tuấn  624

Vào xem rồi art chỉ gồm theme và background.

Chính "hương vị nghệ thuật" là đặc điểm để phân biệt GNOME với những cái khác.

Ai bảo thế? Vậy Windows, Mac OS, ... không có trang nào có tên là art thì chúng không có "hương vị nghệ thuật" à?

Bùi Anh Tuấn  624

Nguồn: "GNOME put a lot of effort into creating the themes and artwork into v2.2.4"

Nếu nói artwork= "hương vị nghệ thuật"
thì "hương vị nghệ thuật" = cái gì?

Theo tôi: "hương vị nghệ thuật" = theme + background

mà như thế thì chỉ cần nói artwork không thôi là đủ rồi, tại sao phải nói:

"GNOME put a lot of effort into creating the themes and artwork into v2.2.4 " ?

Mà họ đã tách rời theme và artwork, vậy cuối cùng artwork là cái gì?

Hải Nam  30903

Có phải là dịch từng từ một đâu mà thắc mắc Smile
- Từ điển: artwork = tác phẩm nghệ thuật
- Tác giả bài viết: artwork = hình nền
- GNOME: art(work) = theme + hình nền

Còn tôi thì không dịch, mà chỉ dùng chữ "hương vị nghệ thuật" để diễn tả cái GUI (theme + hình nền).

Bùi Anh Tuấn  624

Ồ vậy hả, cứ cho là vậy đi.

Bùi Anh Tuấn  624

"một môi trường desktop đương đại cho các trạm làm việc UNIX."

Đọc cái này có ai thấy méc cười không zậy?

Dao Hai Nam  31

Khi nói đến việc xây dựng giao diện, artwork là từ được dùng để chỉ đến rất nhiều thứ: icon, hình nền, ngay cả cách hiển thị của một thanh scrollbar, hay một button cũng đều được coi là artwork. Đó là những thứ không phải do đội ngũ lập trình nghĩ ra, mà phải có các hoạ sĩ, nhà thiết kế chuyên nghiệp xây dựng.

Bùi Anh Tuấn  624

Nếu artwork bao gồm nhiều thứ như thế, vậy theme bao gồm cái gì? Và artwork bao gồm luôn theme không?

Theo cách nói của ĐHN, thì artwork =....+theme ?

Vậy tại sao người ta lại tách riêng chúng?:
"GNOME put a lot of effort into creating the themes and artwork into v2.2.4"

Bùi Anh Tuấn  624

Theo tôi, thì ngược lại với ĐHN:
Theme = icon+button+scrollbar.... - (background)
còn artwork=background

Còn chuyện chăm chút cho giao diện do một đội ngũ hoạ sĩ thiết kế chuyên nghiệp đảm nhiệm, điều này ai cũng biết, kể cả từng âm thanh cũng thế, do nhạc sĩ đảm nhiệm.

Đâu có ai nói là do lập trình viên làm đâu mà ĐHN phải nói như thế?

Bùi Anh Tuấn  624

Tại trang http://bit.ly/1wyOtbc, thì:
+Theme =
* Controls
* Window Borders
* Icons
* Splash Screens
* Login Window
+Background được tách ra thành một phần riêng.

Và trong ngữ cảnh của bài viết này, khi người ta nói
"themes and artwork" thì tôi cho rằng nó có nghĩa là "themes and background", vì vậy"
artwork(trong ngữ cảnh này) = background .

Hải Nam  30903

Đúng rồi, trong bài viết của người ta thì artwork = background. Nhưng trong bài viết của tôi thì không có chữ artwork nào cả, và cũng đừng ai hiểu "hương vị nghệ thuật" = background nhé.

(Nhắc lại) Còn ở GNOME thì họ hiểu art(work) = theme + hình nền. Tức là họ nói giống tôi: cái "hương vị nghệ thuật" nó tương đương với art của GNOME.

Vấn đề tưởng đã kết thúc ở trên rồi chứ? Đây không phải là một bài dịch từng chữ một.

Bùi Anh Tuấn  624

À! Tôi đã kết thúc với Hải Nam, nhưng lại có 1 Đào Hải Nam khác lại làm cho tôi phải bắt đầu.

Dao Hai Nam  31

Ha ha ha, đấy chỉ là ý kiến cá nhân của tôi thôi. Tôi không có ý định phản bác ý kiến của bạn, tôi cũng không nghĩ comment của tôi lại phải làm bạn bận tâm như vậy đâu, nếu bạn thấy sai thì cứ coi như tôi phát biểu bậy vậy nhé Smile