UI UX là gì? - UX UI Design là một ngành khá hot và có tiềm năng rất lớn trong thời đại công nghệ số ngày nay. Vậy bạn có từng tự hỏi rằng công việc của một UX/UI designer là như thế nào? Một  UX UI Designer thì phải có những tính cách hay tố chất như thế nào? Người làm UX UI Design sẽ phối hợp với những chức năng khác như thế nào? Bài viết này sẽ giải đáp những câu hỏi đó. UX UI là gì? UX (User Experience) và UI (User Interface) là hai khái niệm quan trọng trong lĩnh vực thiết kế và phát triển ứng dụng, trang web và các sản phẩm số. UX là gì? UX (User Experience - Trải nghiệm người dùng): Đây là khái niệm liên quan đến cách mà người dùng tương tác với sản phẩm của bạn và cảm nhận về trải nghiệm đó. Mục tiêu chính của UX design là đảm bảo người dùng có [...]

Bạn muốn trở thành một UI/UX Designer và đang chuẩn bị cho buổi phỏng vấn tuyển dụng? Chắc hẳn bạn đã hiểu rằng, phỏng vấn là bước quan trọng để có thể đạt được mục tiêu nghề nghiệp của mình. Tuy nhiên, để vượt qua được buổi phỏng vấn UI/UX Designer, bạn cần có những kinh nghiệm và kiến thức vững chắc về lĩnh vực này. Để giúp bạn chuẩn bị tốt hơn cho buổi phỏng vấn, bài viết này sẽ cung cấp cho bạn những gợi ý trả lời cho các câu hỏi phỏng vấn UI/UX Designer thường gặp nhất, giúp bạn nâng cao cơ hội được nhận vào vị trí mình mơ ước. 1. UX Design khác với UI Design như thế nào? Các thuật ngữ về UX, UI thường đi chung với nhau nhưng chúng lại thể hiện một vai trò riêng biệt. Câu hỏi này sẽ giúp nhà tuyển dụng đánh giá được kiến thức chuyê [...]

Bài viết được sự cho phép của vntesters.com Trong bài này, mình sẽ sử dụng mã Selenium WebDriver cho C# Trong kiểm thử tự động, đôi khi tốc độ của công cụ kiểm thử tự động nhanh hơn tốc độ của ứng dụng cần kiểm thử (AUT/SUT) dẫn đến việc thực thi kiểm thử của chúng ta thất bại (Failed). Hầu hết các công cụ kiểm thử tự động đều hỗ trợ cho chúng ta cách để có thể chờ đợi một đối tượng UI hoặc một sự kiện của đối tượng UI xảy ra. Selenium WebDriver cung cấp cho chúng ta hai phương thức để làm việc này: Explicit (công khai) và Implicit (ngầm). Chờ đợi Implicit Chờ ngầm là việc sử dụng một thời gian nhất định để Selenium WebDriver cố gắng tìm một đối tượng UI trong trường hợp đối tượng UI không xuất hiện ngay lập tức. Giá trị mặc định là 0 giây, và giá trị này được gắn kèm với đối tượng IWebDriver. Một khi được thiết lập, giá [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Chuyện là cái ông owner của Kieblog nhận được yêu cầu build UI Library cho một dự án lớn. Build thì được nhưng gặp phải một số điểm khó nhắn. Khó nhằn thì cũng xử xong, nhưng muốn viết ra đây cho anh em nào tương lai muốn build UI Library có vài điểm để lưu ý. Tránh đi vào vết xe hơi sâu chứ méo đổ nha =))) Rồi bắt đầu, bài viết này viết theo ý kiến cá nhân nên có cái nào chưa đủ nhờ anh em comment thêm nha. 1. Có depend trên UI Library nào khác không? Hiện tại có rất nhiều UI Library, với Vuejs ta có Vuetify, Bootstrap Vue và Element UI. Nói chung là rất rất nhiều UI Library khác, nhưng trước khi build UI Lib ta cần ra quyết định. Câu hỏi như cái title, có cần dựa vào một UI Library nào khác không?. Dựa vào thì có cái lợi là thời [...]

Bài viết được sự cho phép của tác giả Giang Phan Trong bài trước tôi đã giới thiệu với các bạn một số kiến thức cơ bản về Swagger. Trong bài này, tôi sẽ hướng dẫn các bạn cách cài đặt và sử dụng Swagger UI tool. Tải thư viện Swagger UI Các bạn download thư viện Swagger UI từ github repository tại link sau: https://github.com/swagger-api/swagger-ui. Trong repository trên, bao gồm 3 npm module khác nhau: swagger-ui : là một npm module có thể được sử dụng trong single-page application (SPA), nó tương thích với webpack để quản lý các dependency. swagger-ui-dist : module này bao gồm tất cả mọi thứ cần thiết để sử dụng Swagger UI ở phía server side hoặc SPA mà không cần cài đặt thêm các npm module dependencies. swagger-ui-react : cung cấp các React components được sử dụng cho các React application. [irp posts="2580" name="10+ tools và extensions tuyệt vời cho GraphQL APIs"] [irp posts="19157" name="3 bước tối ưu hiệu năng React App bằng các API mới của React"] Xem thêm tuyển dụng Designer  [...]

Bài viết được sự cho phép của tác giả Giang Phan Trong các bài viết trước, tôi đã giới thiệu với các bạn Swagger và cách cài đặt, sử dụng Swagger UI. Trong thực tế, các API thường được thay đổi bởi các developer và họ ít khi mở Swagger editor để cập nhật lại các document hoặc vì lý do nào đó mà họ không cập nhật document mới nhất theo source code. Một vấn đề đặt ra là có cách nào để API document có thể cập nhật một cách tự động mỗi khi code thay đổi và đặt cùng một nơi trong code để developer dễ dàng cập nhật hay không? Câu trả là là có và tôi sẽ hướng dẫn các bạn thực hiện trong phần tiếp theo của bài viết này. [irp posts="45109" name="SWAP-No ROOT: Cách tạo Ram ảo cho Android không cần Root"] [irp posts="10662" name="Các kĩ sư Pinterest đã xây dựng Progressive Web App như thế nào?"] Xem thêm việc làm Linux lương cao trên TopDev Tích hợp JAX-RS [...]

Bài viết được sự cho phép của tác giả Lưu Bình An Vấn đề chúng ta cần giải quyết: chúng ta cần render form với các loại field phổ biến như date, number, dropdown, text, với điều kiện là những field này user có thể config được, giống như google form Visitor pattern là 1 phương pháp thiết kế trong OOP, cách làm là chúng ta sẽ có một object với cấu trúc định sẵn, sử dụng object này để thực hiện những xử lý chúng mong muốn object với cấu trúc định sẵn thường được gọi là schema, trong bài toán của chúng ta thì schema cần những property sau fieldType: ví dụ dropdown, textbox, date, number label: ví dụ first name, birthday name: field name dùng để submit form required: thuộc tính có bắt buộc không [irp posts="19157" name="3 bước tối ưu hiệu năng React App bằng các API mới của React"] [irp posts="40569" name="Architectural Styles vs. Architectural Patterns vs. Design Patterns"] Xem thêm các chương trình tuyển dụng React hấp dẫn trên TopDev [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Tuy luôn là hệ điều hành máy tính phổ biết nhất trên thế giới nhưng có một sự thật rằng, Windows 10 không được các lập trình viên sử dụng nhiều như các đối thủ macOS và Linux. Nguyên nhân vô cùng đơn giản, Windows từ xưa tới nay chỉ có Command Prompt (CMD) và Windows PowerShell chứ không hỗ trợ bash, shell – một trong những công cụ quan trọng của các lập trình viên – giống các hệ điều hành sử dụng nhân Linux như macOs, Ubuntu, Elementary OS,… [irp posts="30425" name="10 điều bạn có thể làm với Linux mà bạn không thể làm với Windows"] [irp posts="33860" name="40 phím tắt dành cho người dùng Windows"] Bạn nào có học về lập trình, server thì sẽ hiểu vấn đề này nghiêm trọng ra sao, cái này mình sẽ giải thích chi tiết hơn ở một bài viết khác cho các bạn. Và để bắt kịp [...]

Bài viết được sự cho phép của vntesters.com Vì Appium được phát triển từ Selenium nên Appium cũng hỗ trợ các cách xác định đối tượng UI tương tự như Selenium, bao gồm: ID, Xpath, Class, Name…. Một điểm đặc điểm khác biệt là, trong lập trình ứng dụng Android, chúng ta không sử dụng CSS để định dạng các đối tượng UI nên Appium không hỗ trợ phương thức xác định đối tượng UI thông qua CSSSelector. [irp posts="3452" name="18 designer hàng đầu dự đoán về xu hướng UI/ UX trong năm 2018"] [irp posts="8201" name="7 thủ thuật bỏ túi cực hay cho các nhà tuyển dụng IT"] Sử dụng UIAutomatorViewer Đối với ứng dụng Android, chúng ta sử dụng công cụ UIAutomatorViewer để có thể đọc được mã nguồn giao diện UI của ứng dụng. Tương tự, chúng ta cũng có một công cụ tương ứng như vậy đối với ứng dụng iOS. Công cụ UIAutomatorViewer có thể được tìm thấy trong thư mục tools sau khi cài đặt Android SDK. Kết nối thiết bị thực/ảo [...]

Dịch từ bài viết của tác giả: Szymon Adamiak Giới thiệu Bạn phải trải qua một hành trình gian nan để có được công việc mình muốn, bạn phải rèn luyện rất nhiều để trở thành một dev nhiều kinh nghiệm. Nhưng điều khó khăn hơn nữa là làm sao để duy trì được đam mê của mình với nghề? Để bản thân cảm thấy vui vẻ mỗi khi design được UI UX ấn tượng, phù hợp cho một dự án, được nhiều user đánh giá cao. Muốn thế lập trình viên cần cố gắng trau dồi nhiều kiến thức và kỹ năng hơn cũng như nên tránh những thói quen xấu ảnh hưởng đến quá trình làm việc của mình, để giữ được nhiệt huyết và hiệu quả làm việc. 3 thói quen xấu nên tránh, kể cả với kỹ thuật UI UX Làm việc quá chăm chỉ Mỗi ngày bạn có 8 giờ làm việc tại công ty, quá trình đi lại mấ [...]

AMA (Ask Me Anything), một sự kiện Q&A ( Hỏi đáp trực tiếp ) diễn ra đều đặn trên fanpage của TopDev. Trong chương trình vừa rồi, anh Nguyễn Thanh Tùng đã có những chia sẻ hết mình với những thành viên trên cộng đồng lập trình. Hiện anh đang đảm nhiệm vai trò là trưởng bộ phận phát triển sản phẩm Web - app thuộc công ty cổ phần Thế Giới Di Động. Anh có trên 10 năm kinh nghiệm làm Product Management và UI/UX, cộng thêm anh đã kinh qua rất nhiều dự án ở các công ty lớn như Baamboo MP3 (VCcorp), Anhso.net (Moorecorp),Thegioididong.com, Dienmayxanh.com, Ứng dụng TGDD. Hãy cũng xem qua những chia sẻ của anh với bạn đọc trong tuần qua. Chào anh Tùng, anh cho em hỏi là nếu học UX có cần phải biết kỹ thuật không anh? Em muốn nghiên cứu UX thì nên bắt đầu từ đâu ạ? Muốn làm UX designer không nhất thiết cần phải biết lập trình, [...]

Bài viết được sự cho phép của vntesters.com Trong kiểm thử tự động, phần quan trọng là chúng ta phải làm sao cho công cụ kiểm thử nhận biết và phân biệt được các đối tượng UI trên phần mềm mà chúng ta đang kiểm tra. Trong kiểm thử, chúng ta gọi bước này là xây dựng bộ giao diện người dùng – build GUI Repositories. Cơ bản, nó là một bệ từ điển kết nối giữa một cái tên logic – thứ mà chúng ta dùng trong script – và mô tả vật lý – thứ hiển thị trên phần mềm. [irp posts="3452" name="18 designer hàng đầu dự đoán về xu hướng UI/ UX trong năm 2018"] [irp posts="1489" name="5 bài học quí giá về việc phát triển ứng dụng iOS"] Để có thể tạo một GUI Repository tốt, chúng ta cần xác định mô tả vật lý của đối tượng UI một cách chính xác, đơn nhất và ổn định. Tính chính xác, đơn nhất của mô tả vật lý dùng để đảm bả [...]

Bài viết được sự cho phép của tác giả Đoàn Văn Tuyển Lâu rồi mình mới quay lại viết, chủ đề mình đã muốn viết từ rất lâu rồi: UI/UX. Mình tự nhận không phải là chuyên gia về UX, nhưng mình có thời gian đọc, tìm hiểu thử nghiệm nên cũng có một số kiến thức để chia sẻ với các bạn. Những gì mình viết ở đây chủ yếu là kiến thức liên quan phần visualization (UX thực tế là một khía cạnh rộng lớn hơn). Như mình suy nghĩ thì UX/UI có một số nguyên tắc cần ghi nhớ: First thing first (ưu tiên cho điều quan trọng nhất), Don’t make me think và Consistent (2 cái đầu trùng với tên 2 quyển sách mình khá thích). 1. First thing first FTF nghĩa là mình luôn luôn ưu tiên cho những thứ quan trọng nhất. Nghĩa là mình sẽ ưu tiên nhóm khách hàng quan trọng, nhóm tính năng quan trọng, [...]

Bài viết được sự cho phép của BQT Kinh nghiệm lập trình Chúng ta là lập trình viên. Chúng ta bỏ ra bốn, năm năm để học và để hành về những thuật toán, những dữ liệu. Vậy hẳn công việc của chúng ta chỉ có thể là code rồi! Code chạy càng nhanh, càng khoẻ thì càng thành công. Tại sao lại phải quan tâm đến UI/UX cơ chứ? Chẳng phải công ty đã thuê designer rồi sao? Có thật như thế không? Đã bao giờ bạn tự nói với mình thế này chưa: “Người dùng thật ngu ngốc, cái nút ở ngay đó mà họ không nhìn thấy”? Hay thế này: “Website load cực nhanh, thực hiện chức năng nào cũng nhanh mà họ kêu hơi lag lag”? Đã bao giờ bạn nổi khùng lên với đám designer vì hình như “chúng nó” cứ cố ý chơi khăm? Chúng nó cứ làm ra những thiết kế khó code cực kỳ. Chúng nó cứ bắt sửa lại nhữ [...]

Bài viết được sự cho phép của BQT Kinh nghiệm lập trình Trong bài trước, mình đã bình luận tại sao chúng ta — những lập trình viên — nên bỏ thời gian để tìm hiểu về UI/UX. Hôm nay, mình xin chia sẻ một vài tip nhỏ để nhanh chóng cải thiện UI. Nếu bạn muốn xem lại các lý do, hãy đọc bài này. Những tip dưới đây mình lượm nhặt được dựa trên các bài viết của Marc Andrew. Đó là những điều không quá “vĩ mô” nhưng sẽ cải thiện nhiều cho thiết kế app của bạn. 1. Làm cho các thành phần tách biệt với nhau hơn Các thành phần có thể tách biệt với nhau hơn bằng cách dùng đường viền (border) rất mảnh, đậm màu hơn một chút so với phần bóng đổ (shadow) của đối tượng. 2. Chỉ dùng một typeface Có thể bạn đã nghe nhiều về lời khuyên dùng ít nhất 2 typeface. Tuy [...]