Hướng dẫn chuyên nghiệp về thiết kế giao diện người dùng

Tác Giả: Randy Alexander
Ngày Sáng TạO: 25 Tháng Tư 2021
CậP NhậT Ngày Tháng: 16 Có Thể 2024
Anonim
Bản tin sáng 20-4-2022 | Tin tức thời sự mới nhất hôm nay
Băng Hình: Bản tin sáng 20-4-2022 | Tin tức thời sự mới nhất hôm nay

NộI Dung

Khi tôi bắt đầu sự nghiệp của mình, tôi là một nhà thiết kế web. Tôi đã làm việc trong lĩnh vực thiết kế web trong bốn năm, bắt đầu với các trang web kinh doanh nhỏ và cuối cùng chuyển sang các khách hàng lớn hơn. Tôi phát hiện ra rằng đó không phải là thiết kế đồ họa khiến tôi quan tâm, cũng như không làm việc cho các thương hiệu lớn hơn. Tôi quan tâm nhiều hơn đến các mẫu phân trang, cách mọi người tương tác với các biểu mẫu và những thứ như hiệu suất cảm nhận, hơn là thiết kế trực quan của một trang web.

Khi tôi xem phim khoa học viễn tưởng, tôi sẽ nhìn vào các giao diện. Và khi tôi chơi trò chơi điện tử, tôi sẽ quan sát cách trình bày các menu. Nếu bất kỳ đặc điểm nào trong số này nghe quen thuộc với bạn, bạn cũng có thể là một nhà thiết kế giao diện người dùng.

Tôi nghỉ việc ở cơ quan và thành lập công ty riêng. Trên trang LinkedIn của mình, tôi đã cố gắng tóm tắt mục tiêu nghề nghiệp mới của mình: tạo ra phần mềm tốt nhất có thể. Đã bốn năm kể từ khi tôi bắt đầu với tư cách là một người làm việc tự do và cuộc hành trình của tôi vẫn chưa dừng lại. Những ngày này, tôi giúp điều hành một công ty thiết kế giao diện người dùng nhỏ có tên là Bệnh tăng bạch cầu đơn nhân. Gần đây chúng tôi đã chào đón thành viên nhóm thứ tư của chúng tôi.


Trong bài viết này, tôi muốn mô tả việc trở thành một nhà thiết kế giao diện người dùng sẽ như thế nào, bao gồm chính xác những gì công việc đòi hỏi, nơi để tìm các tài nguyên học tập tốt nhất và cách hoàn thiện kỹ năng của bạn hơn.

Một nhà thiết kế giao diện người dùng làm gì?

Tôi thấy rằng nhìn chung bạn có thể chia công việc của một nhà thiết kế giao diện người dùng thành bốn loại. Bạn giao tiếp với khách hàng, bạn nghiên cứu, bạn thiết kế và tạo mẫu, và bạn giao tiếp với các nhà phát triển. Chúng ta hãy xem xét từng giai đoạn chi tiết hơn.

Giao tiếp với khách hàng

Giao tiếp với khách hàng là để hiểu vấn đề của khách hàng. Mục đích là để hiểu rõ công việc kinh doanh của khách hàng của bạn, do đó, việc bắt đầu một dự án thường tạo ra rất nhiều cuộc nói chuyện. Bạn không cần biết quá nhiều về miền của khách hàng khi bắt đầu - bạn có thể xem xét hoạt động kinh doanh của họ một cách mới mẻ trong khi hình dung các giải pháp thiết kế khả thi.


Để trở thành một nhà thiết kế giao diện người dùng giỏi, cuối cùng bạn cần phải có khả năng suy nghĩ cùng với công việc kinh doanh của khách hàng của bạn. Ví dụ: khách hàng của bạn có thể làm việc trong ngành hàng không. Làm việc cho họ cuối cùng sẽ giúp bạn hiểu biết khá nhiều về ngành đó. Vì vậy, một mẹo cho hạnh phúc của chính bạn ở đây là hãy chọn những ngành bạn làm việc một cách khôn ngoan, để cuối cùng bạn không trở thành chuyên gia trong lĩnh vực mà bạn không quan tâm hoặc không có hứng thú.

Trong một dự án, giao tiếp không ngừng. Là một nhà thiết kế, bạn sẽ liên tục trình bày công việc của mình. Tại công ty của chúng tôi, chúng tôi là một nhóm làm việc từ xa, vì vậy chúng tôi không có nhiều cuộc họp trực tiếp. Thay vào đó, chúng tôi sử dụng nhiều chia sẻ màn hình thông qua hội nghị truyền hình. Các công cụ liên lạc như Skype và Slack được sử dụng hàng ngày.

Sẽ rất hữu ích khi kết hợp các phương thức giao tiếp đồng bộ và không đồng bộ. Một cuộc gọi là tuyệt vời nếu bạn cần nhiều thông tin nhanh chóng, nhưng bạn phải ở xung quanh một lúc. Chúng tôi coi Slack là 'máy làm mát nước ảo' của mình và sử dụng Basecamp để quản lý các dự án thiết kế phức tạp. Khi chúng tôi thiết kế nguyên mẫu bằng HTML và CSS, chúng tôi sử dụng Vấn đề GitHub để thảo luận trực tiếp về mã.


Nghiên cứu

Cũng như giao tiếp với khách hàng, bạn sẽ nghiên cứu rất nhiều. Điều này có thể bao gồm nghiên cứu thực địa, hội thảo với khách hàng, phân tích sự cạnh tranh hoặc xác định chiến lược - về cơ bản, chỉ về bất kỳ điều gì giúp bạn hiểu được vấn đề đang gặp phải.

Nghiên cứu là những gì thông báo cho các lựa chọn thiết kế của bạn. Đó là một bài báo bạn đã từng đọc hoặc một thứ mới mà Apple vừa phát hành. Khi đã đến lúc giải thích lý do tại sao bạn đưa ra một lựa chọn thiết kế cụ thể, nghiên cứu của bạn sẽ hỗ trợ bạn.

Nghiên cứu có thể rất rộng. Tôi thường thử nghiệm các thiết bị mới cho mục đích nghiên cứu hoặc đăng ký một ứng dụng web mới để nghiên cứu giao diện người dùng của nó.

Thiết kế và tạo mẫu

Là một nhà thiết kế, bạn có thể sẽ dành phần lớn thời gian để làm công việc thiết kế và tạo mẫu. Một dự án thiết kế giao diện người dùng có thể tiến lên theo bất kỳ cách nào, từ phác thảo, thiết kế chi tiết, đến mã hóa.

Phương pháp bạn sử dụng phần lớn phụ thuộc vào loại dự án. Bạn đang thiết kế cái gì? Nó là một trang web, hay bạn muốn gọi nó là một ứng dụng? Nó có sử dụng công nghệ bản địa không? Nó là một thiết kế lại hay bạn đang bắt đầu lại từ đầu?

Tại công ty chúng tôi không có quy trình cố định, nhưng hầu hết các dự án đều tuân theo cùng một trình tự sơ bộ: chúng bắt đầu với bản phác thảo và khung dây, tiếp tục thiết kế hình ảnh và tương tác chi tiết, và kết thúc bằng một nguyên mẫu.

Là nhà thiết kế, chúng tôi dành nhiều thời gian để suy nghĩ về các công cụ của mình. Mặc dù các công cụ tuyệt vời là quan trọng, nhưng chúng không phải là điều quan trọng nhất. Có thể sử dụng thành thạo Adobe Creative Suite và các ứng dụng như Sketch tương đương với việc bạn có thể sử dụng bút chì để vẽ hoặc bút lông để vẽ. Bạn vẫn cần phải làm cho bức tranh.

Điều đó đang được nói, một sự quan tâm lành mạnh đến các công cụ là một điều tốt. Tôi thích thử các công cụ mới có thể giúp tôi làm việc hiệu quả hơn. Công cụ chỉnh sửa vector yêu thích của tôi là Illustrator, nhưng hầu hết công việc thiết kế trực quan của tôi được thực hiện trong Sketch những ngày này. Các thành viên khác trong nhóm đã chuyển sang các công cụ mới hơn như Affinity Designer.

Công cụ là một sự lựa chọn rất cá nhân. Miễn là chúng ta có thể dễ dàng làm việc cùng nhau, mọi người đều có thể tự do lựa chọn của mình. Để làm cho việc nói chuyện về thiết kế của chúng tôi với khách hàng trở nên đơn giản hơn, chúng tôi tạo các nguyên mẫu với InVision. Tuy nhiên, để tạo mẫu nâng cao hơn, chúng tôi sử dụng HTML và CSS. Công cụ bạn cần tất cả phụ thuộc vào công việc bạn muốn làm với nó.

Giao tiếp nhà phát triển

Một phần không thể quên trong công việc của một nhà thiết kế giao diện người dùng là giao tiếp với nhà phát triển. Ngày nay, bạn không thể bỏ qua việc chỉ gửi thiết kế của mình cho các nhà phát triển và hy vọng chúng được triển khai chính xác. Những nhà thiết kế giỏi nhất biết thách thức không nằm ở việc tạo ra thiết kế, mà ở việc truyền đạt nó - không chỉ cho các bên liên quan, những người phải chấp thuận mà còn cho các nhà phát triển, những người phải thực hiện nó.

Truyền đạt một thiết kế có nhiều hình thức: thông số kỹ thuật chi tiết, cung cấp nội dung, cùng nhau xem xét thiết kế. Ý nghĩa của việc cung cấp trong mỗi trường hợp chủ yếu phụ thuộc vào việc dự án là ứng dụng gốc hay ứng dụng web.

Cách tiếp cận truyền thống là phân phối nội dung bên cạnh thiết kế màn hình. Các thiết kế màn hình có thể được sử dụng để xem toàn bộ thiết kế sẽ trông như thế nào, trong khi nội dung là các biểu tượng PNG và SVG đã sẵn sàng để sử dụng, vì vậy các nhà phát triển không phải xử lý trình chỉnh sửa đồ họa.

Tại công ty của chúng tôi, chúng tôi là những người ủng hộ việc cung cấp nhiều hơn thế. Chúng tôi sử dụng các hướng dẫn kiểu thành phần để giúp duy trì tính nhất quán trong thiết kế của mình. Khi chúng tôi xử lý một dự án web, chúng tôi cung cấp các bộ HTML và CSS chi tiết, được ghi lại từng phần một, sẵn sàng để triển khai. Tôi tin rằng có con mắt thiết kế trong mọi giai đoạn phát triển phần mềm là cách duy nhất để đạt được mục tiêu tạo ra phần mềm đẳng cấp thế giới.

Ứng dụng web so với ứng dụng gốc

Khi bạn thiết kế một ứng dụng gốc cho một nền tảng (ví dụ: iOS hoặc Android), bạn có xu hướng tuân thủ các nguyên tắc nhất định. Khi bạn thiết kế cho web, không có quá nhiều hướng dẫn. Điều thường xảy ra là khách hàng của bạn có một bộ nguyên tắc đồ họa cho thương hiệu của họ để xác định mọi thứ sẽ trông như thế nào.

Tuy nhiên, những nguyên tắc này có xu hướng được điều chỉnh cho phù hợp với các trang web tiếp thị và những gì có trong đó không phải lúc nào cũng dẫn đến các quyết định tốt về giao diện người dùng. Phông chữ có xu hướng được chọn vì lý do tiếp thị, không phải vì lý do dễ đọc. Màu sắc có thể đậm và nổi bật, hoạt động trong chiến dịch quảng cáo, nhưng không phù hợp với ứng dụng bạn sử dụng hàng ngày. Các hướng dẫn này phải được giải thích.

Có một số hướng dẫn về giao diện người dùng cho web. Bạn có thể tranh luận rằng web là một tập hợp các phong cách khác nhau. Nếu bạn đang tạo bất cứ thứ gì giống một ứng dụng hơn là một trang web, bạn cần biết về các framework được sử dụng rộng rãi như Bootstrap và ZURB Foundation. Khuôn khổ bắt đầu xác định mọi thứ sẽ trông như thế nào, bởi vì bạn không muốn phát minh lại bánh xe. Và đó có lẽ là một điều tốt.

Tại công ty của chúng tôi, chúng tôi thích sử dụng Bootstrap. Nó cung cấp kích thước mặc định hợp lý cho các phần tử giao diện người dùng phổ biến như nút, bảng dữ liệu và phương thức.

Trong thiết kế web, bạn bị hạn chế nhiều hơn bởi năng lực kỹ thuật của web. Trước đây, sẽ rất khó để triển khai các hình ảnh đơn giản như các góc bo tròn trên một trang web. Những ngày này đã qua lâu rồi - giờ đây bạn có thể tự do vẽ giao diện người dùng với nhiều bóng đổ, chuyển tiếp, hoạt ảnh và thậm chí cả 3D.

Là một nhà thiết kế, việc kiểm soát quá trình và thiết kế trong trình duyệt sẽ thực tế hơn. Tôi chưa thấy nhiều nhà thiết kế giao diện người dùng đảm nhận việc lập trình giao diện người dùng của một ứng dụng gốc, nhưng một nhà thiết kế thực hiện HTML và CSS của một ứng dụng web là một việc thường xảy ra. Nếu bạn có thể viết mã các thiết kế của riêng mình, bạn sẽ có lợi thế hơn so với các đồng nghiệp không viết mã và đối với tôi đó là cách duy nhất để thực sự hiểu cách thức hoạt động của web.

Các ràng buộc web

Bạn sẽ sớm phát hiện ra rằng không phải tất cả các thủ thuật thú vị mà bạn học được đều được hỗ trợ trong mọi trình duyệt và đó là thực tế của việc thiết kế web. Bạn nên tuân theo các nguyên tắc nổi tiếng như cải tiến liên tục, trong đó bạn tải nội dung nâng cao bất cứ khi nào có thể, nhưng cũng nên suy nghĩ về cách nội dung xuống cấp.

Gần đây, 'cắt mù tạt' đã trở nên phổ biến. Được hỗ trợ bởi nhóm web của BBC, điều này liên quan đến việc phân biệt giữa các trình duyệt 'tốt' và 'xấu', đồng thời cung cấp trải nghiệm hạn chế cho các trình duyệt 'xấu'. Tuy nhiên, nó thực sự chỉ hoạt động cho các trang web nội dung.

Khi nói đến trải nghiệm giống như ứng dụng, nhiều người chỉ giới hạn hỗ trợ cho một số trình duyệt hàng đầu, để giúp việc phát triển dễ dàng hơn. Đáng buồn thay, điều này đưa chúng ta trở lại tình huống năm 1996, nơi bạn cần một trình duyệt nhất định để xem nội dung.

Cải thiện bộ kỹ năng của bạn

Vậy, làm cách nào để bạn cập nhật ngành công nghiệp web đang phát triển nhanh chóng và cải thiện bộ kỹ năng của mình? Hãy xem xét một số phương pháp khác nhau để nâng cao kỹ năng của bạn ...

Kiến thức nền tảng

Một phần chính trong kho vũ khí của nhà thiết kế là kiến ​​thức nền tảng. Bạn nên biết về các hệ điều hành khác nhau và cách mọi người đang sử dụng chúng. Là nhà thiết kế, chúng ta có xu hướng sử dụng máy Mac, nhưng sau đó dễ dàng quên rằng phần lớn mọi người ngoài kia đang sử dụng Windows box để hoàn thành công việc của họ.

Tôi cảm thấy bạn chỉ có thể thực sự hiểu điều gì đó nếu bạn tự mình sử dụng nó. Tôi thích sử dụng máy Mac của mình để thiết kế hơn, nhưng dành nhiều thời gian để bắt kịp sự phát triển của nhiều nền tảng khác. Tôi đã cài đặt một số bản Windows trên máy Mac của mình dưới dạng máy ảo. Tôi đang bận thử nghiệm các bản dựng mới của Windows 10 bằng Chương trình Người dùng nội bộ của Microsoft để xem các thay đổi khác nhau trong giao diện người dùng.

Tôi cũng thường xuyên mua phần cứng mới để kiểm tra xem nó hoạt động như thế nào. Tôi đã mua một chiếc Apple Watch chỉ để thử nghiệm nền tảng này. Sau đó tôi đã bán nó vì tôi cảm thấy nó không bổ sung quá nhiều vào cuộc sống của tôi.

Hơn nữa, web có thể được coi là hệ điều hành của riêng nó. Nó không ngừng phát triển, với các tính năng mới được thêm vào mỗi nhà cung cấp trình duyệt mỗi tuần. Rất đáng giá khi biết về các khía cạnh kỹ thuật của trình duyệt, đặc biệt là về CSS và khả năng đồ họa. Bạn cần biết SVG và WebGL là gì và cách bạn có thể sử dụng API Web Animations.

Mọi nền tảng đều phát triển theo thời gian và với tư cách là nhà thiết kế giao diện người dùng, nhiệm vụ của bạn là phải luôn cập nhật. Rốt cuộc, bất cứ thứ gì bạn đang thiết kế không tồn tại riêng lẻ mà là một phần của hệ sinh thái phần mềm lớn hơn.

Quay lại những điều cơ bản

Những gì chúng ta đang phải vật lộn với ngày hôm nay không khác quá nhiều so với những gì chúng ta đã phải vật lộn với 20 năm trước. Có rất nhiều lời khuyên tốt trong sách. Hãy thử Thiết kế phòng thủ cho web của Jason Fried và Matthew Linderman và Don’t Make Me Think của Steve Krug để bắt đầu.

Nếu bạn không biết về các khái niệm như phương thức và khả năng chi trả, bạn cần phải đọc. Bạn sẽ có thể giải thích luật Fitts là gì. Định luật Gestalt về độ gần? Đây là bánh mì và bơ của thiết kế giao diện người dùng.

Lấy cảm hứng từ trò chơi và phim

Là một nhà thiết kế giao diện người dùng, tôi dựa trên các nguồn cảm hứng khác để thực hiện công việc của mình. Tôi tìm thấy rất nhiều cảm hứng trong các trò chơi. Một số trò chơi rất phức tạp và các nhà thiết kế giao diện người dùng đã phải giải quyết các vấn đề giao diện phức tạp tương tự như nhà thiết kế giao diện người dùng làm việc trong các dự án kinh doanh.

Trò chơi cũng có thể biểu thị xu hướng. Sự tối giản được tìm thấy trong menu của Colin McRae Rally khiến tôi liên tưởng đến hướng đi của iOS7. Theo một cách nào đó, thiết kế hoạt hình giao diện người dùng hiện đang hợp thời trang đã xuất hiện trong các trò chơi cách đây nhiều năm. Việc chuyển từ chủ nghĩa lệch sang sang các giao diện chức năng, trần trụi và 'thiết kế phẳng' cũng đã rõ ràng trong các trò chơi. So sánh 2006’s Oblivion với 2011’s Skyrim. Cả hai trò chơi đều là game nhập vai trong cùng một series, nhưng sự khác biệt rất nổi bật.

Giao diện tương lai trong các bộ phim Marvel như Iron Man cũng là nguồn cảm hứng cho tôi. Chúng không phải là những ví dụ chính xác có thể sử dụng được, nhưng chúng khiến tôi nghĩ nhiều hơn về máy tính nói chung. Chúng ta muốn một tương lai của màn hình hay chúng ta muốn màn hình biến mất? Đây có lẽ là một câu hỏi hay để đặt ra trong một quán rượu đầy những nhà thiết kế.

Bạn phát triển như một nhà thiết kế nhờ làm việc chăm chỉ, bền bỉ, nói chuyện với đồng nghiệp của bạn và đọc rất nhiều điều. Khoảng một năm trước, tôi đọc một mẩu tin trên New York Times về những người ở độ tuổi 80 vẫn tiếp tục trau dồi nghề của họ. Tôi cảm thấy như tôi chỉ mới bắt đầu. Thế còn bạn?

KhuyếN Khích
Tác phẩm nghệ thuật pixel khéo léo được tạo bằng các mô-đun Pantone
Phát HiệN

Tác phẩm nghệ thuật pixel khéo léo được tạo bằng các mô-đun Pantone

Pixel art là một loại nghệ thuật kỹ thuật ố trong đó các nghệ ĩ chỉ định vị trí của các pixel riêng lẻ, được xây dựng để tạo ra các cảnh phức tạp, nền trò ...
Đánh giá: Các nguyên tắc cơ bản về nghệ thuật
Phát HiệN

Đánh giá: Các nguyên tắc cơ bản về nghệ thuật

Nó ngắn gọn về chi tiết kỹ thuật, nhưng Ngoài Nghệ thuật Cơ bản là một hướng dẫn tuyệt vời để mang cảm xúc vào tác phẩm của bạn. Đầy những hình ảnh đầy cảm hứng Rất ...
Sách điện tử thiết kế giao diện người dùng web miễn phí
Phát HiệN

Sách điện tử thiết kế giao diện người dùng web miễn phí

ách điện tử mới về thiết kế giao diện người dùng web cho mắt người: Nguyên tắc nhất quán về hình ảnh giải thích nội dung cơ bản của tính nhất quán trực quan: l...