60个优雅诱人的设计
星期三, 五月 23rd, 2007
原文：http://www.smashingmagazine.com/2007/05/21/60-elegant-and-visually-appealling-designs/
翻译：linnchord
smashingmagazine.com是专业的设计电子杂志站点，使用wordpress搭建。
60 Elegant and Visually Appealing Designs
你在创作过程中很容易被卡住，并且往往很难脱离这种状况。特别是在时间紧迫，并且因为你的专业原则不愿意做妥协去实现一个龌龊的“快速解决方案”时。为了搞定这一切，你需要一些灵感和创造性的思路。你需要新的点子和更好的方法，并且你需要尽可能快速的找到他们。这时候，便捷的参考和示例，是非常有效的方法，并让你乐在其中。毕竟，谁会拒绝华美专业的、优雅诱人的设计呢？
It’s quite easy to get stuck in creativity blocks, but it’s damn hard to get out of them. Particularly if you are out of time and don’t want to compromise your professional principles selecting the first “quick-n-dirty” solution you can think of. To get things done, you need inspiration and creative thinking. You need fresh ideas and elegant approaches. And you need to be able to find them as quick as it is possible. Handy references and examples are therefore both useful and enjoyable – after all, who can resist gorgeous, professional, elegant and visually appealing designs?
我们从符合上面标准的设计中为你选择了一些。在下面你将看到60个最新更新的，优雅而专业，并且讨人喜欢的设计，他们在注重细节的同时力图保持简洁、友好同时也漂亮的界面。
We’ve selected some of them. In an overview below you’ll find 60 fresh, elegant, professional and visually appealing designs, which pay close attention to details and manage to remain simple, user-friendly and nice-looking.
也许在此同时你也有兴趣看看我们以前发布的设计展示：
You might be interested in taking a look at design showcases we’ve published before:
- Keep It Simple, Stupid – Showcase Of Simple And Clean Designs
- 50 Beautiful CSS-Based Designs in 2006
- 45 Fresh, Clean and Impressive Designs
- 30 Dark Designs
- 11 Almost Perfect Business Layouts
请你对这些设计尽情的发表评论：没有什么比你的建设性意见对我们更重要的了
Please feel free to comment upon the selected designs: nothing is more important to us than constructive criticism from your side.
You can also Digg this post, bookmark it on Del.icio.us and Stumble it!.
Elegant Designs
1. Tomáš Ledba _ grafický design _ web design _ corporate identity
2. Intype
3. BigFilebox
5. FluidBook
6. Panic – Coda – One-Window Web Development for Mac OS X
7. boo-box, as simple as that…
9. Freshview – Refreshingly Simple Software
13. StyleSpion
14. Online Portfolio of Vijay S Nair
15. Svenigson™ – Yes, a Blog Kind of Thingy
16. Iconkits.com
17. The Big Noob
18. Cómete Mallorca
19. DNA 11 – From Life Comes Art.
20. smashLAB
21. Playground Blues
22. Design Workflows at Work: How Top Designers Work Their Magic
23. Idécollection – effektiva golv för din miljö
25. the Geniant blog
26. North x East
Selected Designs
27. blog.critical | Andy Pearson
28. Chris Shiflett: PHP and Web Application Security
29. inspired web – affordable web design, marketing and hosting on the gold coast australia
30. Nitram+Nunca
31. unFortunate – Cookies Not Included.
32. 3daysafter — Journal of Rian Triharyana
33. Krabi & Mask
34. OkapiStudio
35. Reise-Community globalzoo.de
37. Immo Varro vastgoedmakelaar
38. Webdesign, Usability, Grafik und Design – Kai Müller
40. Breeze
41. The TLC
42. Jogger.pl – bloguj przez Jabbera
43. Global Moxie :: The Hypertext Laboratory of Josh Clark
44. Quo Consulting
45. mezzoblue
46. Mala krcma Skalinada | Volosko
47. Period Three
48. Express4J – The Lightweight & Flexible UI Framework
49. Tony2Nice – Once ate dog food to see how crunchy it was (hint: very)
50. Spouse Notes – Submitted by Apollo Loose
51. elixir graphics | professional rapidweaver themes
52. ErgonoMind
53. Nathan Carnes – Bellingham, WA Website Development and Graphic Design
54. nclud | Our Work
55. EUtelNet :: Web design and development ::
56. Welcome to Buzz — Buzz Recruitment
57. None-Design Media | Webdesign Recklinghausen
Flash
60. Merten Snijders, Mhq Interactive 2007.
www.rothaniko.hu
星期五, 二月 16th, 2007
独特的绘画风格网站，放了作者很多作品，值得逐个鉴赏。
一个Web系统界面设计和开发.5
星期二, 六月 1st, 2004
6.典型交互模式
界面交互中，根据功能不同，有不同的交互方式。应该尽量提取抽象，尽可能减少交互模式的种类，或者把交互方式尽可能设计的类似，以方便用户快速熟悉系统。
下面列举3个系统中比较典型的交互模式，供大家参考。
单项选择
多项选择
项目分解（GIF动画 4桢）
7.Demo开发
Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面Demo原型，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。
本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后的代码编写工作中严格执行。
本系统整个Demo包括大约50个页面，耗时月3周。
在后续的开发过程中，仍然要严格控制整个开发过程，保证整个系统界面的统一，并随时维护更新系统界面的设计。
8.结语
太长了……需要对以前很多东西进行回顾，实在很困难。很多细节，包括很多设计、技术上的东西，都已经记忆不清了，文章也显得有些紊乱。
因此，如果大家有什么疑问，或有意见、指正，请提出或来信与我交流。
一个Web系统界面设计和开发.4
星期一, 五月 31st, 2004
5.典型界面
以下是系统中几个比较典型的界面模型。
在整个系统界面的设计过程中，需要注意整个系统的统一，设计风格要一致，界面中的交互元素，从色彩、样式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作。
一个Web系统界面设计和开发.3
星期一, 五月 31st, 2004
4.主界面设计
设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。
该主界面包含以下部分
用户信息区域 显示当前用户信息
用户导航区域 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板
用户导航功能树 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板
功能树隐藏 可水平扩展页面空间
一个Web系统界面设计和开发.2
星期一, 五月 31st, 2004
2.需求分析
在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。
主要包括以下内容
一个Web系统界面设计和开发.1
星期一, 五月 31st, 2004
早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。
但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。
我写这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考。
另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。
1.工作流程
下图，是整个开发过程中与界面设计相关的主要流程工作。
从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。
在需求分析阶段，参与了对客户的访问和调研；
在概要设计阶段，参与了部分系统设计分析工作；
在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；
在代码开发阶段，参与了系统表现层的设计开发。