it-swarm-vi.tech

Mô hình UI cho trình soạn thảo bố cục lồng nhau

Tôi có một ứng dụng với trình soạn thảo bố cục, hơi giống với trình soạn thảo WinForms trong Visual Studio - với vị trí widget kéo và thả, bảng thuộc tính, v.v.

Tôi đang thêm tùy chọn để có lồng nha bố cục, trong đó tiện ích "NestedLayout" được đặt (Bố cục B trong hình ảnh) có thể biểu thị toàn bộ bố cục khác.

Sketch of nested layout editor

Loại giao diện nào bạn muốn giới thiệu để cho phép người dùng chỉnh sửa các bố cục lồng nhau này? Làm việc trực tiếp trong khung hiện tại sẽ quá cồng kềnh, vì rất nhiều bất động sản trên màn hình đã được sử dụng bởi phần còn lại của bố cục cấp cao nhất.

Các khả năng có thể bao gồm tải tối đa hóa bố cục lồng nhau trong trình chỉnh sửa hàng đầu (có thể với một số loại chuyển đổi thu phóng), bật lên trình chỉnh sửa mới ở trên, v.v.

Bạn đã thấy bất kỳ ví dụ về các ứng dụng biên tập xử lý loại kịch bản này một cách hiệu quả chưa?

6
kpozin

Phản xạ đầu tiên của tôi khi được trình bày với màn hình trên sẽ là nhấp đúp vào bố cục lồng nhau để chỉnh sửa nó. Tôi đồng ý với bạn rằng việc người dùng chỉnh sửa bố cục lồng nhau trong khung hiện có không phải là giải pháp phù hợp và nó có thể trở nên khá khó hiểu cho người dùng của bạn.

Tôi sẽ trình bày bố cục lồng nhau, được hiển thị đầy đủ, ở trạng thái màu xám hoặc mờ dần và hiển thị thông báo trên chuột để giải thích cách chỉnh sửa nó (ví dụ: "Nhấp đúp để chỉnh sửa"). Tôi cũng sẽ chọn mở một trình soạn thảo thứ hai trên đầu trang đầu tiên thay vì tối đa hóa bố cục lồng nhau với hiệu ứng thu phóng. Tôi thấy rằng hiệu ứng phóng to, mặc dù khá thông minh, có thể dễ dàng gây nhầm lẫn cho một số người dùng - bạn phải rất cẩn thận với giao diện người dùng để họ không tự hỏi điều gì vừa xảy ra và tại sao tất cả các vật dụng của họ đột nhiên biến mất.

3
Tania Gobeil

Bạn đã xem cách các công cụ thiết kế web của WYSIWYG xử lý iframe chưa? Thông thường iframe (hoặc đối tượng nhúng khác) được mô tả dưới dạng một đối tượng không tương tác mà người ta phải nhân đôi hoặc kích hoạt để đưa trình soạn thảo cho đối tượng cụ thể đó. Trong trường hợp iframe, tôi nhớ các công cụ như Dreamweaver hiện ra một ngăn thuộc tính cho phép bạn truy cập vào trang nguồn của iframe từ đó.

Nó có thể không phải là khả năng sử dụng tốt nhất, nhưng tùy thuộc vào đối tượng của bạn, tuân theo các quy ước của WYSIWYG có thể là một lời kêu gọi tốt để thực hiện.

Có lẽ bạn cũng sẽ đặt kỳ vọng tùy thuộc vào cách bạn hiển thị NestedLayout trong điều khiển cha mẹ của bạn. Nếu nó được hiển thị đầy đủ, người dùng có thể mong đợi có thể tương tác với nó. Nhưng nếu đó chỉ là một khung có biểu tượng thể hiện trạng thái của nó là "widget" hoặc đối tượng nhúng, thì điều đó có thể có hiệu ứng khác. Hãy thử kiểm tra cả hai trong một mockup tương tác độ trung thực cao để xem mọi người làm gì. Điều này sẽ rất tuyệt khi thử nghiệm với một bài kiểm tra khả năng sử dụng từ xa dựa trên một kịch bản thử nghiệm cụ thể như "Tương tác với NestedLayout" hoặc một cái gì đó!

2
Rahul

Hãy xem IntelliJ IDEA Java IDE. Nó có trình chỉnh sửa rất đẹp cho các biểu mẫu GUI với bố cục lồng nhau, hỗ trợ chỉnh sửa kéo và thả khá dễ sử dụng.

1
extropy

Xem xét việc đại diện tái sử dụng * kiểm soát * s. Vì vậy, bạn sẽ chỉnh sửa bố cục thứ hai dưới dạng bố cục hoàn toàn mới, nhưng trong một tab/cửa sổ khác của nhà thiết kế, như một user control trên Visual Studio. Nếu người dùng không cần nhiều dung lượng, họ sẽ không quan tâm đến bất động sản màn hình nhỏ hơn (có thể nó sẽ chỉ chứa một vài nút).

0
Camilo Martin

Đầu tiên tôi sẽ thêm một câu trả lời tương tự như một số câu hỏi ở trên, ví dụ như flash sẽ tắt và khóa bối cảnh kèm theo nếu bạn nhấp đúp chuột vào một đối tượng ghép. Nhưng sau đó tôi nhận ra rằng về mặt thiết kế, bạn tùy thuộc vào ứng dụng của mình, bạn có thể không muốn chỉnh sửa "Bố cục B" quá dễ dàng. Nếu những gì bạn hiển thị trong ví dụ của bạn là những gì thường được thực hiện trong trình chỉnh sửa GUI, thì nó ngụ ý rằng mọi thứ chúng ta thấy trên màn hình đều nằm trong một Đối tượng. Việc dễ dàng chỉnh sửa bố cục lồng nhau sẽ thúc đẩy thêm nhiều chức năng hơn cho một đối tượng này, khiến bố cục A chứa tất cả các tiện ích.

Cuối cùng, việc tạo ra một rào cản nhẹ nhàng để chỉnh sửa các bố cục lồng nhau sẽ khiến người dùng tách rời việc thực hiện và do đó tạo ra các đối tượng được đóng gói tốt hơn, dễ xử lý hơn.

Ví dụ. Trình thiết kế Qt cho phép bạn chỉnh sửa nội dung của từng tab của một cửa sổ bên trong trình soạn thảo gui, nếu không cẩn thận, bạn sẽ có một triển khai một cửa sổ thực hiện công việc của tất cả các tab của nó. Đó thực sự không phải là một điều tốt.

0
Harald Scheirich

Adobe Flash

Bạn có thể có các tác phẩm (được gọi là Biểu tượng trong Flash) mà bạn có thể tương tác. Bên trong các tác phẩm này, bạn có thể có các lớp và các tác phẩm khác. Trải nghiệm có phần tồi tệ vì Flash hoạt động quá chậm và có giao diện người dùng quá phức tạp với các nút được đặt sai vị trí và thiếu phím tắt. Nhưng đó là một điểm khởi đầu tuyệt vời cho cảm hứng.

Một số loại kết hợp giữa Interface Builder, World Craft và Adobe Flash sẽ khuấy động để chỉnh sửa các tác phẩm lồng nhau.

0
neoneye