Các kiểu giao diện người dùng web phổ biến

Tôi phải trình bày nguyên mẫu của một ứng dụng web trong những ngày tiếp theo cho một trong những khách hàng của mình, có điều là tôi không giỏi CSS và tệ nhất là tôi gần như không bao giờ hài lòng với kết quả mình nhận được.

Mã hóa logic nghiệp vụ không đặt ra thách thức nào đối với tôi, tuy nhiên, thiết kế giao diện người dùng chiếm hơn 80% thời gian của tôi. Tôi không cần thứ gì hấp dẫn, chỉ cần một môi trường sạch sẽ, tốt đẹp và dễ chịu, một ví dụ:

Đây là một vấn đề lặp đi lặp lại mà tôi đang gặp phải, tôi ước gì phát triển giao diện người dùng web có thể có phong cách mặc định ít trần trụi hơn , một cách tiếp cận tương tự như Visual Studio hoặc iPhone SDK sẽ rất hữu ích với tôi.

Mockup ở trên được tạo bằng Balsamiq Mockups là một ví dụ tuyệt vời, tất cả các "thành phần" phổ biến nhất đều có sẵn để sử dụng và trên hết: chỉ có một kiểu dáng đẹp để lựa chọn.

Có một cái gì đó như thế này cho web? Khung giao diện người dùng CSS hoặc Javascript trung tính nhưng đẹp?

Các tùy chọn cho đến nay:

• Bootstrap
• Qooxdoo
• giao diện người dùng jQuery
• Công cụ jQuery
• MochaUI
• JS mở rộng
• Yahoo! Thư viện giao diện người dùng
• BlueTrip
• Bản vẽ thiết kế
• Uki ( Demo )
• Napkee
• YAML
• Đường cơ sở
• iPlotz
• Sproutcore
• Giao diện người dùng

Tôi muốn biết liệu có bất kỳ khung giao diện người dùng chỉ CSS nào không.

Tôi thấy trang này có danh sách rất đẹp các Thư viện giao diện người dùng Web , nhưng hầu hết chúng (ít nhất là những thư viện tốt) dường như dành riêng cho Java, có lựa chọn thay thế nào tốt như nhau trong CSS hoặc JS thuần túy không?

Tái bút: Tôi không quan tâm đến AJAX, hiệu ứng, hành vi, v.v. ... mối quan tâm chính (duy nhất) của tôi là phong cách.

Cảm ơn tất cả những lời đề nghị tất cả mọi người!

Sau khi xem xét rất cẩn thận tất cả các thư viện UI được đề xuất, tôi đã đi đến kết luận rằng ExtJS và Qooxdoo là những thứ phù hợp nhất với nhu cầu của tôi. Giao diện người dùng jQuery có vẻ đầy hứa hẹn nhưng chỉ cung cấp một lượng nhỏ các phần tử hơn.

Theo như các thư viện chỉ CSS, tôi thấy BlueTrip / BluePrint và các chủ đề do tambler đề xuất là tốt nhất. Bên cạnh đó, Flex và Napkee dường như cũng đáng để khám phá.

Đã đến lúc tìm hiểu ExtJS ngay bây giờ! =)

Tôi không thể tin rằng không ai đã đề cập đến:

http://www.extjs.com/

Nó là một khung js thương mại, nhưng giá cả khá phải chăng và làm cho việc kết hợp một giao diện người dùng đẹp mắt trở nên dễ dàng. Có một tập hợp các yếu tố hoàn chỉnh hơn nhiều so với jqueryui và nó được thiết kế để tạo ra toàn bộ ứng dụng. Tôi chỉ chơi với nó một chút, nhưng tôi thực sự yêu thích nó cho đến nay. Miễn phí cho sử dụng cá nhân.

Nếu bạn thực sự muốn cảm nhận về một giao diện người dùng hoàn chỉnh được phát triển bằng EXT, hãy thử url này:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

Sự kết hợp của 960gs cho bố cục và jQuery-UI để tạo kiểu có lẽ là thứ bạn đang theo đuổi.

Bạn cũng có thể xem xét khung CSS chi tiết thay vì 960gs.

Sử dụng dojo và dijit thì sao?

Dijit là một cách nhanh chóng để tạo các widget và phần tử. Nó cũng đi kèm với 3 chủ đề mặc định rất dễ sửa đổi.

Một danh sách tốt các vật dụng khác nhau ở đây

Kết nối với người chuyên về thiết kế giao diện người dùng.

Nếu bạn xử lý logic nghiệp vụ tốt hơn, thì thời gian của bạn tốt hơn nên dành riêng cho việc viết mã logic nghiệp vụ để bạn có thể thành thạo nó. Điều này sẽ yêu cầu bạn học cách giao tiếp với người khác xuất sắc trong việc trình bày. ( xml và json là những phương tiện phổ biến)

Logic kinh doanh và cách trình bày rất khác nhau. Việc thiết kế một hệ thống không chỉ đẹp mà còn trực quan và dễ sử dụng là điều khá khó khăn. Khó khăn và tốn thời gian tương tự như việc thiết lập hoạt động bên trong của một ứng dụng phức tạp.

Một giao diện tốt không chỉ đơn giản là bao gồm một khuôn khổ css.

Tôi tự cho mình là một lập trình viên 'sáng tạo' hơn, người thể hiện xuất sắc. Tôi tình cờ đủ may mắn để giao du với một người, trước hết là ... rất có động lực, và thứ hai là rất giỏi 'logic kinh doanh'. Anh ấy có nhiều kinh nghiệm hơn trong việc lập kế hoạch và triển khai các hệ thống phức tạp, trong khi tôi chủ yếu tập trung vào thiết kế giao diện.

Nếu bạn làm việc hiệu quả hơn khi làm kiến ​​trúc hệ thống, lập kế hoạch, phát triển, bất cứ điều gì ... bạn nên thúc đẩy bản thân theo hướng đó. Mặc dù các dự án phát triển solo có thể khá thành công, nhưng tôi cho rằng nó không hiệu quả. Rất hiếm khi ai đó có kỹ năng phát triển các ứng dụng cấp cao một mình.

Thách thức là tìm một người mà bạn làm việc tốt.

Kiểm tra Bộ công cụ Web của Google . Nó có một giao diện mặc định khá rõ ràng. Họ có các ví dụ . Đặc biệt, ví dụ Showcase của họ thể hiện tất cả các widget có sẵn và kiểu css được sử dụng để đạt được giao diện.

Có một vài khung công tác nhằm vào (G) UI Design; Qooxdoo , JQuery UI và MochaUI là một vài trong số đó (mặc dù cái cuối cùng là một bằng chứng về khái niệm hơn là một khuôn khổ có thể sử dụng). Các khuôn khổ này thường cung cấp nhiều phần tử do JS hỗ trợ (các phần tử biểu mẫu, chẳng hạn như trường nhập và nút gửi, nhưng các phần tử khác như tab cũng vậy). Tuy nhiên, vẫn sẽ tùy thuộc vào bạn để định vị các yếu tố này và có thể tạo kiểu cho chúng theo ý thích của bạn.

Có lẽ việc tự làm quen với một khung CSS (chẳng hạn như 960GS ) có thể bổ sung cho các Khung giao diện người dùng JS ở trên.

(Với tư cách là tuyên bố từ chối trách nhiệm cá nhân; tôi có rất ít kinh nghiệm với bất kỳ khuôn khổ nào được đề cập ở trên. Nhưng tôi chắc chắn rằng Google hoặc SO có thể cung cấp câu trả lời mà tôi không thể.)

Điều này sẽ không giúp ích cho bạn cho dự án hiện tại của bạn, nhưng nó đáng để xem xét cho các dự án trong tương lai. Sau nhiều năm tạo các ứng dụng GUI trong HTML 4 và liên tục vật lộn với những hạn chế của CSS và HTML, tôi nghĩ mình sẽ dùng thử Adobe Flex. Thật là một cải tiến!

Thay vì giả mạo kiểm soát trang theo thẻ hoặc lưới dữ liệu, với Flex hoặc Silverlight, đánh dấu của bạn có thể chỉ định một lưới dữ liệu hoặc kiểm soát trang theo thẻ. Và các khung công tác đi kèm với các phong cách mặc định tuy nhàm chán nhưng không hề xấu. Tôi không nói những thứ này thay thế hoàn toàn HTML, nhưng nếu bạn cần các widget và bố cục GUI, tôi tin rằng chúng là một sự thay thế tốt hơn nhiều.

Bạn có thể cân nhắc duyệt trang web sau:

http://themeforest.net/category/site-templates/admin-skins

Có một số chủ đề "Quản trị" có sẵn để mua ở đây có thể phù hợp với nhu cầu của bạn.

mô hình khung dây như vậy là một cách tuyệt vời để bắt đầu.

Sau khi sử dụng hầu hết các framewroks giao diện người dùng được thảo luận ở đây, tôi muốn hướng dẫn bạn theo hướng jQueryUi vì những lý do sau:

1. jQueryUI CSS framework chăm sóc CSS phù hợp và bắt mắt cho bạn (nó thực sự dễ dàng - chỉ cần tạo một số đánh dấu và áp dụng các lớp)

2. jQueryUI có tính năng điều khiển tab và tập hợp các cách dễ dàng nhanh chóng để tạo kiểu cho biểu mẫu.

Nếu bạn đang nhắm mục tiêu các trình duyệt hiện đại, không phải IE, thì bạn nên xem Sproutcore . Đối với mô hình, tôi sử dụng mockingbird .

Một khuôn khổ PHP tương đối mới được thiết kế đặc biệt để phát triển phần mềm tập trung vào giao diện người dùng. Các phần tử bạn có ở đây bao gồm Tab, Bộ lọc và Lưới được bao gồm và sẽ đưa bạn khoảng 20 dòng mã để thực hiện.

http://agiletoolkit.org/

Bạn đã thử chưa Axure chưa? Đó là một công cụ để nhanh chóng tạo khung dây, nguyên mẫu và thông số kỹ thuật cho các ứng dụng và trang web.

Nó hoạt động theo cách tương tự như Balsamiq, nhưng nó cho phép bạn xuất wireframe / nguyên mẫu của mình dưới dạng HTML, CSS và Javascript.

Sau đó, bạn có thể tải nó lên một máy chủ hoặc chạy nó trên máy tính của bạn như một ví dụ hoạt động.

Bạn có thể tạo biểu mẫu, liên kết, tab, di chuyển, hiệu ứng Javascript.

Nếu bạn đang sử dụng Balsamic Mockups cho nguyên mẫu của mình thì bạn nên xem xét Napkee . Để trích dẫn trang web "Napkee cho phép bạn xuất Balsamiq Mockups sang HTML / CSS / JS và Adobe Flex 3 chỉ bằng một cú nhấp chuột."

Tôi đã gặp phải vấn đề này một lúc trước, và không thể tìm thấy bất cứ điều gì, vì vậy tôi đã coi đó như một cơ hội để học css. Nhưng kể từ đó có vẻ như đã có những bước tiến lớn đối với môn học này.

• Tóm tắt vấn đề của bạn, có trang wikipedia .
• Có yaml-css , lấy yaml và biến nó thành css
• Có đường cơ sở , nhưng nó giả định một số kiến ​​thức css.
• Tôi cũng khuyên bạn nên xem Dreamweaver của Adobe . Họ có rất nhiều công cụ tạo kiểu và css tạo ra mã rất dễ đọc và tương thích với w3c.

Tôi hy vọng rằng sẽ giúp.

Sự kết hợp của 960gs cho bố cục và các công cụ jQuery-UI hoặc Jquery thật tuyệt vời. Tôi sử dụng chúng hầu như trong mọi dự án nhưng tôi muốn thêm vào http://easyframework.com/ mặc dù nó không thân thiện với doanh nghiệp nên hãy nhớ kiểm tra giấy phép của nó nhưng tôi thích nó

Gần đây tôi đã phát hiện ra một trang web hay có tên iplotz.com, nơi bạn có thể tạo một mô hình ứng dụng / trang web / dự án của mình trực tuyến mà không cần cài đặt bất cứ thứ gì. Nó cũng có hầu hết các điều khiển phổ biến, cùng với nhiều tính năng hơn để quản lý toàn bộ dự án và chia sẻ nó với những người khác trực tuyến.

Tôi phải thừa nhận rằng, tôi đã không thử nó bản thân mình, nhưng tôi đã xem xét nó một chút và nó có vẻ khá tuyệt. Tôi có thể sẽ sớm sử dụng nó.

Sass có vẻ như nó có tiềm năng như một cách để giảm thiểu một số cơn đau đầu.

Tôi muốn thêm Bootstrap, nó trực quan và là framework front-end mạnh mẽ để phát triển web nhanh hơn và dễ dàng hơn.

Tôi thích RocketCSS . Thiết kế sạch đẹp, hãy thử.