Điều gì làm cho thiết kế POS này trông ngày?

Tôi đang cố gắng hiểu những gì làm cho thiết kế màn hình Điểm bán hàng (POS) này trông có vẻ cũ.

Có phải đó là các nút 3D, màu sắc, bố cục, phông chữ? Và bạn sẽ làm gì để khiến nó trông như hiện tại?

Không phải là một chuyên gia thiết kế, tôi có thể thấy rằng nó là ngày. Nhưng tôi không chắc tại sao và làm thế nào để thay đổi điều đó.

Các câu trả lời khác tập trung vào cách cải thiện thiết kế, nhưng vì bạn đã hỏi tại sao thiết kế trông có vẻ ngày:

Phông chữ quá nhỏ . Bên trái trông ít hơn so với phần còn lại, tại sao vậy? Ở bên trái, kích thước phông chữ phù hợp với không gian dọc có sẵn cho văn bản, trong khi ở tất cả các nút khác, phông chữ quá nhỏ. Chúng ta cũng sử dụng tất cả chữ hoa, Arial và 3 dòng văn bản cố định trên mỗi nút (mọi nút khác ngoài Pay dường như được định dạng để nhận văn bản trên đỉnh dọc, giữa và dưới, dẫn đến lúng túng nếu chỉ có 2 dòng của văn bản thực tế).

Màu sắc không bắt mắt . Màn hình trông giống như sử dụng 9 màu gần như ngẫu nhiên, tất cả đều là một phần của 64 màu EGA gốc. Nhiều GUI hiện đại sử dụng sự khác biệt màu sắc tinh tế hơn, trừ khi có sự khác biệt lớn giữa các nút. Một số GUI hiện đại cũng sử dụng độ dốc màu trong các nút.

Không có hình ảnh.

Hiệu ứng 3D 2 màu. Các nút 3D sử dụng viền rộng 2 pixel với màu trắng đồng nhất ở phía trên bên trái và màu xám đồng nhất ở phía dưới bên phải, cộng với một pixel toàn viền đen xung quanh chúng thực sự lỗi thời.

Quá đơn giản. Chỉ bằng cách sử dụng các nút, có một cơ hội bị bỏ lỡ để chỉ ra bằng trực giác chúng ta hiện đang xem phần Thực phẩm. Một Gui hiện đại sẽ sử dụng các manh mối khác để chỉ phần Magenta và các phần màu vàng thuộc về nhau, chẳng hạn như một hình chữ nhật đầy phía sau các nút màu vàng kéo dài đến nền phía sau nút thức ăn:

Cuối cùng, tiêu đề Hệ thống POS làm phiền tôi, nhưng tôi nghĩ đó chỉ là thiết kế tồi và không có gì để làm với nó.

Trước khi thay đổi bất cứ điều gì, hãy đảm bảo màn hình hiện tại hỗ trợ nhiều hơn EGA (bảng màu 16, được chọn từ bảng 64 màu) và nếu bạn muốn sử dụng hình ảnh, hãy đảm bảo độ phân giải của màn hình cho phép người dùng nhận ra những gì hiển thị trong hình ảnh. Đôi khi các thiết bị được sử dụng trong lĩnh vực này hơi cũ hơn một chút so với người ta tưởng tượng. Ngoài ra, khi thay đổi màu sắc hãy nhớ mù màu.

Xem xét đây là một hệ thống POS, tôi muốn nói rằng chức năng là có. Các nút lớn, tương đối dễ đọc và chúng được sắp xếp theo nhóm, điều này sẽ tạo điều kiện cho tôi tìm thấy những gì tôi đang tìm kiếm.

Phải nói rằng, tôi thấy các quyết định cấu trúc tốt, nhưng không có nhiều quyết định thiết kế. Đây là những gì tôi sẽ xem xét:

• Phông chữ : Mọi thứ trong ứng dụng của bạn đều sử dụng chữ hoa Arial, nhưng không phải mọi yếu tố đều giống nhau. Có một hệ thống phân cấp và bạn có thể sử dụng các kiểu phông chữ hoặc gia đình để thể hiện điều đó. Ví dụ, các hàng dưới cùng có thể sử dụng trường hợp hỗn hợp, vì chúng không thực sự là một phần của các tùy chọn chính. Bạn đã chọn làm cho "Thanh toán" lớn hơn, điều này thật tuyệt, nhưng đó là nút duy nhất có kích thước phông chữ khác nhau. Tại sao thay đổi phông chữ, và không ví dụ màu sắc? Không nói bạn nên, tôi có nghĩa là suy nghĩ theo cách này có thể khiến bạn khám phá những cách mới để tách các yếu tố. Ví dụ: Bạn đã cân nhắc sử dụng dải phân cách chưa?

• Giãn cách : Bạn không sử dụng cùng một khoảng cách (lề) cho nhiều yếu tố. Nhìn vào hệ thống lưới , bạn sẽ được hưởng lợi rất nhiều từ việc sử dụng một. Một bố cục cân bằng sẽ làm cho thiết kế trông có trật tự và đánh bóng hơn. Bạn cũng có một số vấn đề về khoảng cách lạ (IMO) với văn bản bên trong các nút. Nút có 1 dòng được căn giữa, 2 dòng có khoảng cách lớn giữa các hàng và 3 dòng trông ổn, bởi vì có khoảng cách đều nhau ở mọi nơi. Sẽ không có ý nghĩa hơn khi luôn có cùng một không gian giữa các dòng văn bản, thay vì cố gắng kéo văn bản càng gần các đường viền càng tốt?

• Màu sắc : Nhóm hoạt động để làm cho nó rõ ràng các nút khác nhau làm những việc khác nhau, nhưng tôi không thấy một lý do đằng sau bảng màu. Hãy thử suy nghĩ theo hướng: Tôi có thể sử dụng màu sắc để tiếp tục đẩy thông điệp của mình không? Tôi có thể sử dụng màu sắc để tạo điều kiện cho nhiệm vụ tìm nút không? Bạn đã làm điều đó bằng cách cho "Gửi" một âm điệu khác. Đây là một quyết định tuyệt vời. Nhưng sau đó tôi thấy màu được chọn của bạn khác nhau tùy thuộc vào màu bên phải hay cột trung tâm. tại sao?. Thenn nghĩ, nơi nào khác bạn có thể sử dụng màu sắc theo cách tương tự? Hãy xem Google Material , họ có thể truyền cảm hứng cho bạn để thử các combo mới.

• Bóng và hiệu ứng : Hiệu ứng 3D rất hữu ích trong bối cảnh này và tôi nghĩ bạn có thể đẩy nó đi xa hơn nữa. Đây là một ví dụ về 3D POS . Ngoài ra, bạn đã xem xét sử dụng các biểu tượng chưa? Họ có thể làm cho một trợ giúp trực quan tốt đẹp.

Tôi nghĩ rằng ứng dụng có vẻ lạc hậu bởi vì nó không thực sự theo bất kỳ xu hướng nào, ngoài các khối màu với một số bóng đổ, đó là tiêu chuẩn khi phần mềm thiết kế và ngôn ngữ mã hóa không cho phép sáng tạo nhiều về mặt đó. Bây giờ, bạn có thể làm hầu hết mọi thứ. Thiết kế của bạn có vẻ lạc hậu vì nó không tận dụng những thủ thuật và lựa chọn thiết kế đã trở nên phổ biến trong những năm qua.

Tôi khuyên bạn nên xem các ứng dụng tương tự khác, kiểm tra xem chúng đang làm đúng hay sai, xem cách bạn có thể nuôi dưỡng từ một số ý tưởng đó. Bạn đã có một bộ xương tuyệt vời rồi, nó chỉ cần một chút da thịt. Một lưới và có lẽ chơi với một số màu bổ sung sẽ làm những điều tuyệt vời cho ứng dụng của bạn.

Thoạt nhìn, tôi không thể nhanh chóng biết được đâu là gì (và tôi có kinh nghiệm với hệ thống POS của nhà hàng). Đối với tôi, các mục màu xám ở bên phải của UI dường như không thuộc về nhau. Các mục màu vàng ở giữa màn hình dường như thực sự là 3 phần, nhưng điều này không rõ ràng?

Từ các ví dụ tôi đã trình bày bên dưới (và tôi không nói gì về chất lượng của chúng, chúng là một lựa chọn ngẫu nhiên từ tìm kiếm nhanh) Bạn có thể thấy việc sử dụng Biểu tượng, Hình ảnh và các khối màu lớn. Đây là những công cụ hữu ích để xác định các hành động và phân biệt các khu vực chức năng riêng biệt hoặc một hệ thống phân cấp thông tin.

Tôi không có thời gian cho câu trả lời chi tiết hơn nhưng những gì tôi sẽ nói là hãy xem các ví dụ về thiết kế UI (Giao diện người dùng) hiện tại. Ví dụ: tìm kiếm nhanh cho 'Thiết kế giao diện người dùng POS' sẽ cung cấp cho bạn các hình ảnh như:

Thiết kế sang một bên, nó có chức năng không, và những người vận hành nó có hiểu cách sử dụng nó không? Có một yếu tố không sửa chữa những gì không bị hỏng nếu đó là trường hợp.

Vâng, nó có vẻ lạc hậu, nhưng nhiều hệ thống cho đến khi tôi sử dụng đều có lỗi với cùng một kiểu dáng đơn giản. Các nút tròn và màu sắc được chọn với khả năng tiếp cận trong tâm trí có thể làm tăng nó lên, nhưng cảm giác ruột của tôi là đây hoàn toàn là một phần chức năng và để thử và "jazz nó lên" có thể gây thêm nhầm lẫn cho nhân viên.

Hiệu ứng 3D thực sự hữu ích trong trường hợp này vì nó nhanh chóng cho người dùng biết rằng đây là nút có thể nhấp và tôi tưởng tượng trong thời gian giao dịch nhà hàng có tầm quan trọng rất lớn.

Tôi cũng không phải là một chuyên gia thiết kế, nhưng vì tôi phải xem xét loại điều này khi xây dựng các ứng dụng di động ....

1. Bỏ hiệu ứng 3d win32 trường học cũ. Đó là sự lạc lõng trong thời đại mà mọi người đều mong muốn mọi thứ trông thật thân thiện với màn hình cảm ứng. Những gì bạn muốn sử dụng là các vùng phẳng lớn cho từng khu vực hành động (nút) không có khoảng cách giữa các nhóm nút hoặc bóng liên quan dưới các nút. Nhìn vào Thiết kế Vật liệu của Android . Nó hữu ích ngay cả đối với các ứng dụng không dành cho thiết bị di động.

2. Sử dụng các đường viền (không phải màu sắc) để nhóm các mục liên quan nếu các mục đó có khoảng cách giữa chúng. Nếu không có khoảng cách giữa chúng, thì hãy sử dụng màu sắc để toàn bộ khu vực liên quan trông giống như nó có một màu nền vững chắc.

3. Chọn màu sắc nhẹ nhàng hơn (nghĩ màu pastel) và một phần của bảng màu miễn phí. Hãy chắc chắn có các phiên bản sáng và tối của từng màu trong bảng màu của bạn. Tôi hy vọng bạn vẫn không xử lý một hệ thống chỉ có thể hiển thị từ bảng màu CGA / VGA 16 cũ.

4. Các yếu tố UI nên được tô màu nhất quán theo bảng màu. Ví dụ: các nút cung cấp đầu vào UI có thể được coi là khác với các nút thay đổi trang hoặc kích hoạt chức năng chính, nhưng thường có 1 màu được sử dụng cho mỗi loại nút này thay vì 1 màu cho tất cả các nút trong khu vực chức năng nhất định. Điều này giúp người dùng có được ý tưởng tốt hơn về những gì từng thành phần UI sẽ làm.

5. Thích sử dụng khoảng cách giữa các khu vực hành động để phân tách chúng và các đường viền phẳng, mềm giữa các mục hành động. Các mục hành động trong một khu vực nên có kích thước thông thường (hãy tưởng tượng mỗi mục hành động là 1 hoặc nhiều ô liền kề trong một lưới).

6. Khi sử dụng một vùng tiêu đề trong cửa sổ:

   a. Tất cả các mục hành động trong khu vực đó phải phù hợp với khu vực tiêu đề.

   b. Tất cả các mục hành động trong khu vực đó phải là toàn cầu cho ứng dụng (ví dụ: đăng nhập, cài đặt, v.v.).

   c. Tiêu đề không được chồng chéo bởi bất cứ điều gì khác ngoài logo.

Tôi hi vọng cái này giúp được.

Hầu như tất cả các yếu tố dường như là các nút. Nhưng khi tôi đọc nhãn, có vẻ như một số nút là nút hành động, trong khi những nút khác là để điều hướng.

Trong một giao diện người dùng hiện đại, bạn sẽ phân biệt hai. Một hàng các tab đóng vai trò là công cụ hỗ trợ điều hướng hiệu quả, cả hai để hiển thị vị trí hiện tại của bạn và cách đến một nơi khác. Có một tab Pizza dành cho tất cả các tùy chọn pizza và một tab Pasta cho tất cả các loại mì ống.

Có lẽ nút THỰC PHẨM màu tím đã hoạt động như một tab như vậy và UỐNG là một tab khác. Họ chắc chắn không nên ở bên phải - Tiếng Anh được đọc từ trên xuống dưới, từ trái sang phải và quy trình làm việc của bạn nên sao chép điều này.

Một hàng các tab hoạt động hợp lý tốt, nhưng ở đây bạn có thể có một hệ thống phân cấp sâu hơn. Trong trường hợp đó, có thể là khôn ngoan khi hiển thị trạng thái UI hiện tại dưới dạng đường dẫn : Food > Starters >, một dòng trên đầu trang bắt đầu. Đặt mục nhập đầu tiên của menu "Starters" thành nút "<Back to Food"; điều này cho phép bạn ẩn khá nhiều điều khiển.

Đầu tiên, tôi sẽ hỏi mục đích là gì?

Có yêu cầu nhà điều hành nhanh chóng tìm thấy khóa và thực hiện đơn hàng nhanh hơn mà không có bất kỳ mục nhập sai? hoặc nó có phải thu hút và khuyến khích người dùng sử dụng GUI cho máy không?

Trong trường hợp này, mục đích của phần này chỉ rõ rằng nó dành cho mục nhập giao dịch nhanh và hiệu quả. Do đó, chúng ta có thể đi theo cách có tổ chức đơn giản hơn mà hình thức, màu sắc và phân cấp cần phải ra lệnh theo thứ tự hợp lý theo xu hướng thiết kế và sự huyền ảo.

Vấn đề với GUI hiện tại là:

Màu sắc : Màu sắc quá khắc nghiệt, điều đó sẽ tạo ra căng thẳng theo thời gian và sẽ ảnh hưởng đến hiệu quả của quyết định của người dùng. Nền trắng với các màu tương phản cao khác, chắc chắn tạo mỏi mắt và khó có thể nhanh chóng tìm thấy thông tin cần thiết mà người dùng cần thu thập.

Phông chữ : Quá nhỏ để tìm và đưa ra quyết định, điều này cũng bị ảnh hưởng bởi màu sắc và độ tương phản giữa văn bản. Điều này có thể ảnh hưởng lớn đến người dùng lần đầu làm quen với hệ thống, lâu hơn và tạo ra nhiều mục nhập sai.

Đặt hàng và nhóm : Chúng ta có phải có tên "Hệ thống POS" ở đó với cỡ chữ lớn không? Có lợi không? ĐẠO ĐỨC! Người dùng hệ thống này và các yếu tố trên màn hình cho biết rõ ràng như vậy. Liệu việc phân nhóm có ý nghĩa? Không thực sự, rất nhiều có thể được nhóm lại, vì vậy người dùng có thể tìm thấy nó một cách hợp lý. Liệu một số lựa chọn từ, có ý nghĩa? ĐẠO ĐỨC! "GỬI"? gửi cái gì? "Đặt thực đơn"? Bạn có thiết lập thực đơn hàng ngày? ĐẠO ĐỨC! ra Sự phân cấp và lựa chọn từ cần phải được xem xét cẩn thận.

Một số người được đăng tải bằng GUI với hình ảnh và nội dung lạ mắt, vì mục đích của chính thiết bị, nó nói rõ rằng nó không cần phải cầu kỳ, nhưng cần phải có tính ứng dụng cao và chu đáo.

Bởi vì nó trông không giống như cách "gạch" được thiết kế cho các thiết bị di động, Android hoặc Windows OS đặc biệt xuất hiện trong tâm trí, nên nó cũng hoàn toàn không giống như - điều này gây ra xung đột vì chúng chỉ ra rất nhiều thứ trực quan. Khá nhiều thứ về nó là "sai" vì vậy tôi sẽ bỏ qua chi tiết cụ thể.

Tất cả đều là những câu trả lời tuyệt vời, nhưng nếu bạn muốn một số tài liệu tham khảo, một ví dụ sáng chói về hệ thống POS hiện đại, tốt như thế nào, hãy xem ứng dụng Square trên iPad.

https://itunes.apple.com/us/app/sapes-register-point-sale/id335393788?mt=8

Điều lớn nhất tôi nghĩ bạn có thể làm để cải thiện cái hiện có (và tại sao nó trông quá cũ kỹ) là giao diện người dùng hiện đại có xu hướng thích nhiều khoảng trắng - và cũng để làm cho khoảng trắng trở nên trắng. Rất nhiều thiết kế ngày nay sử dụng kiểu đảo ngược (văn bản màu trắng trên nền đen hoặc văn bản màu trắng trên bất kỳ màu tối nào) rất ít. Thích trang web này: https://developer.wordpress.com/calypso/

Các nút phải được sắp xếp theo chức năng, phân cấp và các nút phải phù hợp với phương pháp bố trí.

Trong điều khoản của Giáo dân:

1) Đặt các nút được sử dụng nhiều nhất ở nơi mà tất cả có thể dễ dàng tìm thấy chúng;

2) Các nút bên trong phải được "điều khiển" bằng vỏ ngoài (cửa sổ trong một cửa sổ, trong cửa sổ);

3) Nếu bạn có nút enter (hoặc bất kỳ nút nào khác cho vấn đề đó, hãy giữ nó ở cùng một vị trí mặc dù màn hình có thể thay đổi.

Nhiều hệ thống POS đã cố gắng tối ưu hóa thiết kế chức năng nhưng một POS tôi nghĩ là đi trước một chút so với trò chơi là Rezku POS .