Transcript Molecular Biomedical Informatics 分 子 生 醫 資 訊 實 驗 室 Web Programming 網 際 網 路 程 式 設 計 Web Programming.

Molecular Biomedical Informatics
分 子 生 醫 資 訊 實 驗 室
Web Programming
網 際 網 路 程 式 設 計
Web Programming 網際網路程式設計
1
Design Pattern
設計模式
Web Programming 網際網路程式設計
2
Design pattern

User interface design is getting important
– user experience (UX, 使用者體驗)
– Human-Computer Interface (HCI, 人機介面)
– to stay current, you need to keep an eye on trends, new
resources, and new techniques being implemented and
talked about

Looking at the solutions others have already come up
with for common UI challenges
– help you find the right existing solution
– serve as the basis for coming up with something new and
original
Web Programming 網際網路程式設計
3
Compared to visual candies such as gradients,
rounded borders and ribbons, design patterns
are more fundamental and important
http://www.wedding-zine.com/wp-content/uploads/candy-canes-wedding-serving-option.jpg
Design pattern libraries

User Interface Design Patterns

Pattern Tap

Patternry

Mephobox
Web Programming 網際網路程式設計
5
Prototyping/mockup resources
製作原型的資源
Web Programming 網際網路程式設計
6
Lumzy
http://www.lumzy.com/
Mockingbird
https://gomockingbird.com/
The Pencil Project
http://pencil.evolus.vn/en-US/Home.aspx
UI Design Framework for Illustrator
10
http://www.webalys.com/design-interface-application-framework.php
http://bestblogbox.com/freebies/all-in-one-web-elements-kit/
Design pattern is not for web only

Some handset devices (smart phones) can
share similar design patterns with web sites

Tablets are more like web sites, where the
most difference is the touch screen
– compatible screen resolutions, no hover event
– actually touch screens could be a necessary facility
for desktops in the near future
– consider to depend on as less keyboard as possible
Web Programming 網際網路程式設計
12
Unique Mobile UI Design Elements
http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html
Android UI Elements Set
http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/
iPad GUI Set
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
Desktops?
Sure! Why not to learn from the most senior platform?
Many web applications were inspired by Apple products
Web Programming 網際網路程式設計
17
OSX Leopard GUI Set
http://www.tutorialshock.com/freebie/mac-osx-leopard-gui-set/
Feedback tools

Concept Feedback
– post your designs and concepts and get free
feedback from the design community

Landing Page Optimization
– get feedback from real people on your landing
page’s 5-second impression

Questionnaire systems such as Google Docs,
Wufoo and Typeform
Web Programming 網際網路程式設計
19
Some frameworks include them

Bootstrap

jQuery Mobile

Semantic UI

jQTouch

Foundation

Scripty 2

DHTMLX

Echo 3

Dojo

Midori

ZK
Web Programming 網際網路程式設計
20
Dive into some design patterns
深入一些設計模式
Web Programming 網際網路程式設計
21
Page grids
Web Programming 網際網路程式設計
22
http://net.onextrapixel.com/wp-content/uploads/2010/10/grids.jpg
Vertical navigation bar
Web Programming 網際網路程式設計
23
http://net.onextrapixel.com/wp-content/uploads/2010/10/leftnav.jpg
Horizontal navigation bar
Web Programming 網際網路程式設計
24
http://net.onextrapixel.com/wp-content/uploads/2010/10/horizontalnav.jpg
Any difference between the above two?
Web Programming 網際網路程式設計
25
Tabs
Web Programming 網際網路程式設計
26
http://net.onextrapixel.com/wp-content/uploads/2010/10/modulartabs.jpg
Breadcrumbs/麵包屑
Web Programming 網際網路程式設計
27
http://net.onextrapixel.com/wp-content/uploads/2010/10/breadcrumbs.jpg
Content footer
Web Programming 網際網路程式設計
28
http://net.onextrapixel.com/wp-content/uploads/2010/10/footercontent.jpg
Pagination
Web Programming 網際網路程式設計
29
http://net.onextrapixel.com/wp-content/uploads/2010/10/pagination.jpg
Lazy registration
Web Programming 網際網路程式設計
30
http://net.onextrapixel.com/wp-content/uploads/2010/10/easyregistration.jpg
Information dashboard / 儀表板
Web Programming 網際網路程式設計
31
http://net.onextrapixel.com/wp-content/uploads/2010/10/dashboard.jpg
Form wizard / 精靈
Web Programming 網際網路程式設計
32
http://net.onextrapixel.com/wp-content/uploads/2010/10/dashboard.jpg
Auto-complete/auto-suggest
自動完成
Web Programming 網際網路程式設計
33
http://www.uxbooth.com/wp-content/uploads/2010/03/auto_complete_vaadin.png
Dialog
Web Programming 網際網路程式設計
34
http://www.uxbooth.com/wp-content/uploads/2010/03/rich_dialog.jpg
Floating footer
Web Programming 網際網路程式設計
35
http://www.uxbooth.com/wp-content/uploads/2010/03/rich_footer.jpg
Progress indicator
Web Programming 網際網路程式設計
36
http://www.uxbooth.com/wp-content/uploads/2010/03/rich_progress.jpg
Rating
Web Programming 網際網路程式設計
37
http://www.uxbooth.com/wp-content/uploads/2010/03/rich_rating.jpg
Scoped search
Web Programming 網際網路程式設計
38
http://www.uxbooth.com/wp-content/uploads/2010/03/rich_scoped_search.jpg
Visual candies


Back to visual candies, they are more like
answering the question “how to make xxx more
beautiful?”
For example, you decided to use a horizontal
navigation bar, just Google “horizontal navigation
bar web showcase” and you will find Navigation
Menus: Trends and Examples
– the exact name is not important as Google is so smart
– that’s why you need to first know which design
patterns are already developed and used
Web Programming 網際網路程式設計
39
Style vs. quality
There are many ways to improve the quality of your
web site. But, it’s your responsibility to decide the
style. Sometimes, “low quality” is also a kind of
style.
Web Programming 網際網路程式設計
40
Any Questions?
Web Programming 網際網路程式設計
41
Today’s assignment
今天的任務
Web Programming 網際網路程式設計
42
Enhance the user experience


Re-think about your user interface (widgets, transitions…) and
refine those not so reasonable and those having better solutions
available. If you have no preference of above-mentioned patterns,
please add a off-canvas UI.
Reference
– 40+ UI Design Tools and Resources
– 15 UI Design Patterns Web Designers Should Keep Handy
– 43 Essential Controls for Web Applications

Your web site (http://merry.ee.ncku.edu.tw/~xxx/cur/, ex10) will be
checked not before 23:59 12/10 (Tue). You may send a report (such
as some important modifications) to me in case I did not notice your
features. Or, even better, just explain your modifications in the
homepage.
Web Programming 網際網路程式設計
43
Appendix
附錄
Web Programming 網際網路程式設計
44
Two modern patterns

Many teams used maps
– is it a design pattern? sure, of course you can count it in
– MigrationsMap.net is developed for the author to learn and
have fun with HTML5 technologies
– Knowing the dependent technologies is also helpful for us
• Raphael.js, Color Brewer, Hasher.js and Modernizr

Another fancy UI that I will use in my future web sites
– jQuery.fracs determines the fraction of an HTML element
that is currently in the viewport, as well as the fraction it
takes of the complete viewport and the fraction of the area
that might possibly be visible
Web Programming 網際網路程式設計
45