XDash Weblog » design

EVILUTION

xdash — Wed, 19 May 2010 11:27:47 +0000

装帧设计课作业，成品书一本。断断续续折腾了一个多月，最后效果还算满意。157g铜版纸印刷，封面腹反光贴膜。EVILUTION 是 EVIL + EVOLUTION 的合成词。

内页。其实全书总共才30页，内容都是从博客上扒拉的，凑足了页数。

霸王举鼎。看出来没，举鼎的这位正是封面上那个卡通的原型，《蜘蛛侠》里的毒液（Venom）。

我嘞个擦，45度角仰望，这一刻四娘灵魂附体。图为参加DAF比赛的公益海报设计作品。

扭捏傲娇读书状。感谢cece协助拍摄，感谢何老板的相机。对了，要先感谢国家。（BTW，这张可以命名为 Google Reader）

您可能对这些文章也感兴趣：

Creating Realistic User Interfaces

xdash — Wed, 17 Feb 2010 10:52:34 +0000

一直对绘制高度仿真的UI原理很好奇，网上也只有按部就班的、使用何种工具调节何种参数的傻瓜式教程，直到我发现这篇《Crafting Subtle & Realistic User Interfaces》。它算是比较系统地剖析了如何生成高度 subtle realistic 的UI。

其中最生动的对比演示技巧，就是这个噪点的运用。在普通的纯色上运用1.2%的噪点，能够使材质更加仿真，有了流行的亚光质感。

文末作者总结的几个技巧：

精致。避免模糊的线条和边缘处理。
运用不透明（opacity）。如半透明黑白线条、发光、阴影等。现实世界没有什么是完全纯色的。
使用参考线。
不断尝试层样式（Layer Styles）。白色内发光使形状更流行。用混合选项增加生气和饱和度。
慎用投影。一般而言，根据情况使用1-3px投影，0-3px距离。
将复杂的PNG或GIF图形转换成智能对象（ Smart Object），再行调节，可保留色彩混合模式。
在界面元素中使用样式时，要么都在上方（黑色1px投影），要么都在内部嵌入（白色1px投影）。
现实世界物体很少有完美的直角。设计中要适当运用圆角。
现实世界的一切物体都有阴影（除非你要绘制吸血鬼）。如果你绘制的物体有深度或置于其他物体上，最好加上投影。

现在再去阅读网上那些教授制作苹果风格UI的教程，就更游刃有余了。

您可能对这些文章也感兴趣：

低保真阶段产品模型设计工具 Balsamiq Mockups（已收到S/K）

xdash — Mon, 08 Feb 2010 09:56:41 +0000

在网上看到 Balsamiq Mockups 这款工具的介绍，试用之后感觉很顺手，推荐给大家。

Balsamiq Mockups 是一款用来完成产品模型设计的工具，能够创建手绘风格的草图，适合快速将创意想法通过电脑记录和表现出来。虽然我还是喜欢用笔和纸完成草图，但当灵感转瞬即逝或身边纸笔到用时方恨少时，开 BM 来勾勒一番也很省事。

该软件适合于应用在Web设计、人机交互产品界面设计等领域，自带的素材库里就包括Web浏览器、iPhone手机界面等框架，以及各种控件（按钮、对话框、文本框、etc），外加标注元素。

Balsamiq Mockups 官方主页：

http://www.balsamiq.com/

软件功能特点已经由黄海均总很好地总结过，这里灰常偷懒地直接转载：

易操作：从 Balsamiq Mockups 自带的元素里可以很方便地拖拽，效果图轻易形成；元素对齐很贴心；
可偷懒：根据 Balsamiq Mockups 提供的 Wiki 风格的代码规则，画图时可以「偷懒」，输入文本符号则能生成图标。因此相比其它繁琐的软件操作，Balsamiq Mockups 也能更快地完成画图任务。
控件足：Balsamiq Mockups 软件包括 50 多个控件， 70 多个图标。基本自带了所有常用的小控件，并在导航处进行分类；图标设计赏心悦目。要是 Balsamiq Mockups 允许用户导入自定义的控件就更好了，当然现有的也足够了 -:)
新风格：让人眼前一亮的涂鸦风格，很能还原手绘效果；
可中文：在菜单栏 View 里将 Use System Fonts 勾上，就能完美支持中文输入（注：非 Balsamiq Mockups 中文版）；
其它点：Balsamiq Mockups 使用 xml 记录，方便移植、二次利用；可导出为 png 格式图片。
跨平台：Balsamiq Mockups 基于 Air ，因此能同时在 Windows、Mac OS 及 Linux 下使用。
多版本：包括桌面版本，以及集成于 Confluence、JIRA、XWiki、FogBugz 中的版本。

软件售价79美刀，有博客的朋友可以通过写一篇我这样的介绍文章，向作者换取一份 License Key 。否则使用五分钟会弹出提示信息，且无法导出草稿图像，还是挺麻烦的。

Update 2010/2/10：已经收到作者寄来的 Serial Key ，成功激活软件。尊重作者开发，请勿向我索取。

您可能对这些文章也感兴趣：

《UI Designer》第二期下载正式发布（5P）

xdash — Tue, 14 Jul 2009 19:37:56 +0000

《UI Designer》是由UIRSS.com创办，UIRSS.com、ChinaUI.com、UItimes.com三家UI设计媒体联合主办的UI行业权威电子杂志。这一期伴随视觉同盟（联合主办）和iconfans（联合发行）的加盟，声势更加浩大。

下载地址：

http://www.china-channel.com/ui/UI_Designer_2009.zip

《UI Designer》第二期主要内容：

独家揭密：OPhone UI诞生背后的故事
走进企业，走近UI
- 中国移动UI Team
- 百度用户体验部
- 群硕软件用户体验部
设计秀场（GUI作品秀）
专家专栏
- 你准备好了吗，可用性测试，主持人系列
- 谁为用户买单，电子商务中的交互设计
- 手持移动设备交互与界面设计精要
- 手机MP3播放器界面设计（GUI教程）
- 一个写实风格的ico是如何诞生的（GUI教程）
UX界
- 中国VS国外（作者：刘超，中国移动研究院UI Team负责人）
- 戒盲目、戒浮躁（作者：张海龙，百度用户体验部高级经理）
- 设计的价值（作者：朱印，前微软设计主管）
- UI业的持续健康发展（作者：邹翔，SKYUI创始人）

您可能对这些文章也感兴趣：

博客氛围营造漫谈

xdash — Sat, 27 Jun 2009 17:07:00 +0000

Web2.0使互联网由传统的单向信息推送转换为由用户产生内容并交流分享的互动性平台。在此进程中，我们更加关注精准营销，关注体验研究，关注用户在我们的网站上的一举一动及其背后的细微心理变化。

最近手头的几个网站/博客的case涉及地方专业门户和电子商务领域，由此也让我产生了探究新生网站/博客如何媲美既有成熟网站以争夺自身市场份额的好奇。

除了采用SEO、公关、广告投放等常规手段外，我的关注视角锁定在网站氛围的设计营造上。通过查阅资料、比较同类网站和亲身实践，现以博客为例，浅谈网站氛围营造的手段及其效果。

一、基础设计知识的运用

尽管同其他任何事物一样，出位的博客需要具备自己的特色，但这与恪守基础的设计理论并不违背。不同色彩传达的含义、色彩之间的配搭组合、版面布局的技巧、留白的作用、字体大小及疏密排列、重点信息突出的方法、怎样的图片更具吸引力、如何引入细节处的一些巧思等技巧，都值得专业Web设计师和非专业的网站制作爱好者学习掌握。

缺乏经验的新手制作者往往有这样一些误区：

认为色彩越丰富越好；认为页面内容越满越好；大量加入java特效和widget挂件；片面追求个性而使网站显得不伦不类；大量堆砌广告；网站各页面风格混乱，缺乏统一性，等等。

以上种种，皆可以通过学习常用的设计知识予以弥补。在进入设计学院之前，我进行网站设计也是靠跟着感觉走（幸好感觉也还不错）。在进行了两年的专业熏陶后，我的设计风格有了比较系统的转变，对过去犯下的错误有了深刻的认识，也对如何确立一个网站的设计有了更加成熟的见解。

现在的我认为，在网站建设者技术实力越来越高，创建网站成本日益低廉的今天，网站制作者能否适当掌握一些基础设计知识，对于网站整体氛围的确立有着比较重要的影响。

看看淘宝UED和腾讯CDC，二者在整体风格上均是遵循清新简洁的设计理念，而呈现的效果让人非常舒服。仔细分析二者在留白、对比色、灰色的运用、字体图片版式等方面的构思，不过也是基础设计理论的诠释升华而已。

二、网站更新情况

没有人会喜欢一个死气沉沉行将就木的网站，博客尤其如此。几周甚至几个月不更新，博主往往给人以“不负责任”的态度感受。如果用户几次登陆看到的都是同样的缺乏新鲜感的界面，那么很可能这个网站已经被用户暗自划了个小黑叉。

许多号称行业门户、地方门户的网站，往往仅凭观察其各个板块最新一篇文章的更新日期，即可对其专业程度有所了解。浮躁的网站更新频率并不固定，甚至当建站者发现网站没有前途是即采取“弃站”。而相对专业的网站则背后依托一支运营团队维持日常维护，更新频率较有保证。

在Web2.0时代，产生内容已经不像过去那么复杂。如果对于完整撰写一篇博客文章缺乏足够的时间或灵感，至少可以通过使用微博客输出挂件、阅读网摘插件、随机阅读分享插件提醒博客读者你的存在。

此外博客最近留言者的留言时间也成为判断网站活跃度的重要标准。对于数周不更新的博客，如果在近日之内仍有读者针对过去某篇文章发表评论（并且最好被博主回复），那么博客氛围不至于过于沉闷。如果一个博客及其衍生平台近期的时间轴上缺乏任何形式的新鲜信息产出，那么极容易被用户判定为死站。

三、让你的用户感觉被重视

博客应当是互动的媒体，而非博主一个人的自说自话。让你的用户感觉到为重视，让他们有事可做，才能增强用户的参与感与满足感，改善用户体验。

例如Twitter这样的微博客网站，会在用户注册之后推荐一些活跃“推”客，供新手follow交流。8box这样的音乐网站，会在注册过程中对用户进行音乐口味测试，并在注册后推荐适合用户口味的音乐（豆瓣也类似）。

引伸到博客，我认为可以一个简单的方式是在侧边栏建立一个“您可能会喜欢”之类的模块，推荐本博客中对目标用户价值较高的文章，使用户可以快速定位，并在第一时间对博客的内容定位、价值输出产生好感。

你还可以在博客中给出其他社交网络的联系平台，例如twitter、饭否、校内，抑或Email、QQ、Skype等传统网络点对点联系方式。使用户获得进一步了解你、了解你的网站的机会。

四、留言评论内容质量

“好。”“路过。”“顶。”“飘过。”——如此种种留言并不会为一个博客增色多少，即便数量再多，只能说明博主人缘不错，但并不代表网站的氛围与价值达到了同样程度。

氛围良好的博客，应当在用户的留言评论中，同样体现出价值传播的力量。针对博主的漏洞进行见解性地补遗，对博主的错误言论进行针锋相对地驳斥，回答博文中抛出的问题，对其他留言者进行点评和回馈。有效的用户留言评论会为一个博客增色不少。

cnbeta和可能吧就是两个典型的网站，二者内容质量很高，而评论也很精彩，值得作为对正文的补充材料一读，往往收益更丰。

网站版权的声明体现了内容作者对于自身合法权益的重视和对他人著作权的应有尊重，一定程度上反映了网站的形象和专业程度。

基本的做法是网站下方的copyrights说明以及文章来源的原作者信息和链接。进阶一些的博客会在醒目处标明网站遵守的网络协议。譬如本博客右侧个人信息下方就清楚地标明，“本博客采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可，遵守 BLOG IN REAL NAME 实名博客之潜规则”。

现在我的博客订阅RSS同样增加了版权说明部分。我使用的是better feed这款wordpress插件，它允许用户定制可视化的个性feed。

六、博客广告

广告也能增强博客的氛围？没错。但这牵涉到投放广告的质量和内容。

设计别致、养眼动态的广告，能使博客显得更加生动有趣，内容丰富。煎蛋顶部的小格子和右侧的RAYWOW TEE广告，色彩绚丽，设计独特，符合煎蛋活泼、生气的感觉。而少了首页那些制作精巧内容特别的广告，MSN中国也与一般CMS搭建起来的信息网站无异，甚至更难看。

而广告、广告内容与站点定位无关、广告设计丑陋、广告显示方式影响阅读，是应当坚决避免的。网上的反例有很多，在百度上随手以“网赚”为关键词搜索就能收获一堆，或者来看看这个页面，它的广告方式还不是最令人作呕的。

最后，关于网站氛围的营造，推荐来自Tencent CDC官方博客的这篇文章。

您可能对这些文章也感兴趣：

[Design]近期完成的平面设计课程作业（10P）

xdash — Tue, 16 Jun 2009 09:07:01 +0000

在临近期末的最后一个月迎来了平面设计这门专业课。磨磨蹭蹭做了三个星期，昨天起个大早进入市区图文店，终于将设计稿付梓了。整套设计包括卡片、折页和一本12P的册子。

没错，诚如各位所见，这个设计围绕的项目就是本人的同步控网站。我也曾在同步控开篇语的花絮部分爆料，正是本次平面设计课程催生了本人头脑中一直盘算的这个项目的诞生。

整体设计以耍酷和卖弄技术感为主，配合流行的Web2.0配色方案。内容方面则是纯粹的YY，所谓的同步技术交流会Syncoo，所谓的同步志Syncoo Zine，都是二次元世界的臆想（当然如果哪天成为现实那更好）。部分凑数内容来自网络。

这个就是全套成品了。采用的分别是300g、250g和200g不同触感的纸质。

传说中的YY杂志——《同步志》的封面和封底。售价没好意思往上写。就当创刊号赠阅吧。

《同步志》内页。右边的更新速报，内容均是实打实来自同步控网站的哦。搞得跟真的一样。自己都Orz。

《同步志》内页。极简主义配合精致图片。

《同步志》内页。装订的时候失策，把白底的两页摆在了一起，削弱了视觉对比。原计划Opera那页跟之前Lenovo那页搁一块的。右页内容来自ShowWeb2.0网站的孙晗，原地址在这里。

非常恶趣味地加入了个人偏好，放了一版给口袋妖怪游戏。排页失策同样影响到了这里。居然跟这么GEEK的WWDC报道放在了一块儿。好在我的口袋妖怪那版设计的还不太幼幼，否则真囧了。

末页和封三。看咱还装模作样弄了个NEXT下期预告。这些YY出来的下期内容，标题灵感来自随手抄起的一本《程序员》杂志。封三下方的合作伙伴更是把YY精神发挥到了极致。

这是折页君。正面四版。貌似字体还是大了点？

折页背面。强悍的跨版整图外加写意留白。立即凑了2P。

# 最后丢一张在宿舍走廊拍成品照片时顺带拍来的小猫。很小，怕生，见人来了就窝在角落里，很是可爱。没人的时候偷喝牛奶相当速度。写此文时发现盒子里居然没有装猫砂！OMG…小童鞋不要怕，咱们这群怪蜀黍会把你带大的～～～