Thư Viện dành cho Thiết Kế Wireframe và Giao Diện

tristar 04.11.2011 0

Để mô tả giao diện sử dụng của website, phần mềm hay những sản phẩm khác, bạn sẽ phải cần một số thành phần giao diện cơ bản. Và đây là tập hợp những dụng cụ rất có ích cho việc thiết kế Wireframe và giao diện người dùng. Khi bạn muốn tạo ra mô tả đơn giản nhưng có tính chân thực cho dự án của mình, bạn có thể sử dụng những bộ dụng cụ dưới đây để mô tả ý tưởng của mình, giữ cho nó sự trừu tượng nhưng không làm mất đi những chi tiết quan trọng của bạn.

Trong bài viết này, chúng tôi đã tập hợp những bộ dụng cụ hữu ích cho thiết kế giao diện web và mobile, những phải PDF tiện dụng và tài nguyên để bạn có thể sử dụng cho dự án của mình. Chúng tôi đã rất cẩn thận để lựa cho những gì hữu ích nhất để giúp bạn trong giai đoạn đầu của dự án.

Giao Diện Mobile Miễn Phí PSD

Android GUI PSD

Đây là giao diện dành cho Andoid 1.5 và chúng được tạo ra để giúp cho những dự án liên quan đến cộng đồng với những ứng dụng của Android. Phần lớn những thành phần và hình minh họa điện thoại được tạo ra và lưu dưới dạng vector nên rất dễ chỉnh sửa kích thước.

Screenshot

RIM Blackberry PSD
Một file PSD hoàn chỉnh với nhiều mẫu layer, nó có chứa 135 layers trong Photoshop.

Screenshot

Android Sketch Stencil Version 1.0
OmniGraffle là một phác thảo dành cho Android. Mục đích của những phác thảo wireframe này là giúp giảm bớt sự tưởng tượng dành cho thiết kế trực quan và khuyến khích người thực hiện chú tâm nhiều hơn và chức năng, cách sử dụng và thao tác.

Android Sketch Stencil Version 1.0

Tất cả các yếu tố để thiết kế giao diện cho Maemo 5 dạng PSD
Bộ download PSD này có chứa những thành phần giao diện dành cho những ứng dụng dựa trên nền tảng Maemo. Đây là những mẫu không thể thiếu nếu bạn muốn thiết kế giao diện ứng dụng chạy trên các thiết bị Maemo.

Screenshot

iPhone 4 GUI PSD (Retina Display)
Đây là công cụ dành cho những người muốn thiết kế cho retina display (640×960). File này rất nặng (62.7MB) và độ phân giải (4074×2986).

Screenshot

Bộ Thiết kế dành cho iPad trong PSD
Phiên bản này cung cấp giao diện chuẩn của Ipad là 768×1024, Ngoài ra các định dạng tại đây dưới dạng Vertor cho phép bạn có thể thiết kế ở độ phân giải cao hơn. Phiên bản này được trình bày trong các Layer Photoshop, nó giúp bạn dễ dàng trình bày với khách hàng.

Screenshot

Android 1.6 Wireframe stencil for Omnigraffle

Android 1.6 Wireframe stencil for Omnigraffle

Google Android GUI PSD
Đây là giao diện cho Android, thiết kế dạng vectors.

Screenshot

iPad GUI PSD Kit
Gói này chứa đầy đủ các kích thước đồ họa như 256, 128 và 64 pixel cho icon. Gói này còn chứa 4 kích thước cho ipad trong các định dạng PSD, PNG và Mac ICNS.

Screenshot

Google Android PSD
A stencil set for Google Android prototyping.

Screenshot

Fireworks template for Android
Trong đây là những những template Firewok, đồ họa dành cho Android và được vẽ dạng vector. Trong thư mục, những thành phần được dán nhãn theo từ vựng Android.

Screenshot

Sexy Vector Cell Phone
Chiếc điện thoại này có thể co dãn tùy ý. Dể dàng đưa vào trong hình ảnh của bạn. Tất cả các chủ thể đều được sắp xếp, gom nhóm và dán nhãn cho tiện sử dụng.

Screenshot

iPad Stencil for Omnigraffle
Bao gồm hình nền, title bars, buttons, selectors và những thành phần giao diện dành cho Iphone.
Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. Các văn bản trong list, title bar, button và scroll wheels có thể chỉnh sửa được.

Screenshot

iPhone App Wireframe Template

Screenshot

Mobile – iPhone

Screenshot

iPhone GUI Elements
Some beautiful iPhone elements. All graphics are layered Photoshop files.

Screenshot

iPad and iPhone Design
Thiết kế dành cho các ứng dụng Iphone, Ipod Touch và Ipad của bạn. Tất cả các thành phần trong iphone được tạo bằng tay và có thể nhóm, kéo dãn và xuất ra các định dạng vector khác trong Graffle.

Screenshot

Design Stencil for iPhone and iPad
Phát triển cho các ứng dụng OS trong iPhone, iPod Touch và iPad. Những thiết kế tập trung dành cho nhà phát triển của IUKit.

Design Stencil for iPhone and iPad

Apple iPad fully editable PSD
Một định dạng PSD đẩy đủ và có thể chỉnh sửa dành cho iPad. Từng thành phần ở đây đểu có thể chỉnh sửa dễ dàng.

Icon designer Kevin Andersson » Apple iPad fully editable PSD

Palm Pre GUI PSD
This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.

Screenshot

iPhone UI Vector Elements
Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.

iPhone UI Vector Elements

iPad Vector GUI Elements: tabs buttons menus icons
This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

ipad vector GUI elements: tabs buttons menus icons

Giao Diện Miễn Phí Dành Cho Các Mạng Xã Hội (PSD)

Free Full-Layered Facebook GUI PSD Kit
Ý tưởng đằng sau bộ sản phẩm này là giúp tiết kiệm thời gian trong việc hình dung và mô tả trang fan pages trong Facebook, bạn có thể chỉnh sửa mọi thứ và sử dụng miễn phí cho tất các các dự án và không có sự hạn chế nào.

Screenshot

Facebook GUI Free PSD Resource
Một giao diện người dùng trên Facebook dạng Photoshop, giúp cho công việc của bạn dễ dàng hơn

Screenshot

Facebook Applications
A sizable collection of elements for creating wireframes for Facebook applications.

Screenshot

Omnigraffle Twitter Widget Stencil
Bộ này bao gồm những dạng widget và badge trong Twitter

Screenshot

Công Cụ Thiết Kế Wireframe

Best Practice UX Forms Stencil v1.1
Mộ ứng dụng hoàn hảo cho bất kỳ một dạng thiết kế nào, nó cung cấp 3 cách khác nhau để tổ chức forms. Version hiện tạo cung cấp các dạng button khác nhau, quy trình, Captcha code, nhản và nhiều thứ khác.

Screenshot

Form Elements UI Kit
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Form Elements UI Kit

Wireframe Shapes
Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Wireframe Shapes

Wireframe kit for UI Designers
A set of various wireframes, such as product details, list of items, front page, mobile phone.

Wireframe kit - Google Text & Tabellen

MBTI sketching paper for ideation

MBTI sketching paper for ideation

A4 sketching paper
Giấy phác thảo này có thể sử dụng sau khi tổng hợp ý tưởng về tính năng. Thiết kế màn hình sơ bộ dựa trên những ý tưởng bạn đưa ra.

A4 sketching paper

Wireframe Magnets (DIY Kit)
Mẫu này dữa trên Konigi wireframe stencils, nó bao gồm ba sheet khác nhau của các thành phần, nó có thể hữu dụng cho whiteboard prototyping. Đơn giản là tải về, in các file PSD lên một

Mẫu này DIY nam châm là dựa trên các giấy nến wireframe Konigi, và nó bao gồm ba tờ của các yếu tố có thể có ích cho prototyping Bảng. Đơn giản chỉ cần tải về và in các file PDF lên một tấm từ (magnet sheets) đơn giản, và sau đó cắt chúng ra.

Wireframe Magnets (DIY Kit)

Paper wireframe templates
The finished product include seven variations, as well as PSDs.

Paper wireframe templates

Wireframe template
A useful print-and-sketch template available for downloading.

Wireframe template

iPad Idea Sheet

iPad Idea Sheet

Scenario, Taskflow and Grid Sketch Sheets

Scenario, Taskflow and Grid Sketchsheets

Free Photoshop browser template
Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.

Free Photoshop browser template

Interactive Sketching Notation 0.1
Ý tưởng đằng sau thiết kế này là sự nhận dạng các trạng thái giao diện người dùng cũng như các hành động tiếp theo một cách rõ ràng và nhanh chóng.

Interactive Sketching Notation 0.1

MobileMe Full iPhone GUI

MobileMe Full iPhone GUI

Android Wireframe Templates (PDF)

Android Wireframe Templates (PDF)

Free Keynote UX Stencils

Free Keynote UX Stencils

Advertising Stencil Kit
A set of very useful advertising stencils.

Advertising Stencil Kit

Dragnet website wireframes kit v 0.9
Kéo thả những thành phần cần thiết trong thiết kế web như scrollbars, button, menu và bảng thông báo.

Android 1.6 Wireframe stencil for Omnigraffle

User Interface Design Framework
Bộ sưu tập này rất đẹp và toàn diện, chúng có chứa hàng trăm các thành phần dạng vector dành cho những thiết kế giao diện. Có hơn 260 vector icon và thư viện với hơn 200 dạng cho Illustrator.

Screenshot

Browser Form Elements PSD
Bao gồm bộ sản phẩm cho Firefox 3 và Mac, ngoài ra còn cho IE7.

Screenshot

Sketching and Wireframing Kit
Đây là một bộ miễn phí dành cho phác thảo và làm wireframe. Nó tập hợp các dạng form, icon, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders và common ad banners.

Screenshot

Photoshop Form Element Templates
This set includes all common form fields and mouse and link pointers, optimized for ease of use.

Screenshot

Web Browser Elements
Rất tuyệt vời và chứa những thành phẩn hữu ích như pull-down menus, input fields, radio buttons, check boxes, buttons, text fields và scroll bars, tất cả đểu có thể dễ dàng chỉnh sửa trong Photoshop.

Screenshot

UI Design Kit

Screenshot

Wireframe Symbols

Screenshot

Web UI Element Pack

Screenshot

Wireframe Kit for Google Drawings

Screenshot

OmniGraffle Stencil for Ext JS v3.0

Screenshot

Flex 3 Stencil

Screenshot

Aqua GUI

Screenshot

Flex Darkskin PSD UI

Screenshot

Web Wireframe Kit

Screenshot

UI Buttons and Icons

Screenshot

Quommunication Stencil Kit

Screenshot

Mac OS X Interface 2

Screenshot

OmniGraffle UX Template

Screenshot

Template for Blueprint CSS Comps

Screenshot

Apple Elements for OmniGraffle

Screenshot

DeviantART ID PSD Kit

Screenshot

Browser Screens and Website Elements

Screenshot

960 Grid Template for OmniGraffle

Screenshot

Control of different browsers for designers (download link)

Screenshot

Bình Luận »