回顾在迅雷的这一年多的时间，好像真的没有什么做的让自己满意，可以引以自豪的成绩！所以拿着奖杯有些心虚，但我不得不说我一直热爱着我的职业，极尽疯狂与执着！每当有人询问我是从事什么工作，我都很自豪的对他说我是迅雷的一名UI设计师，每当如此我都不厌其烦对他讲解什么是UI设计，即便如此还是有很多朋友不了解我在做着什么，也正如他们说我做的其实就是美工！我不介意在外行人的眼里我们从事UI的就是美术工人或当美工这一职称来理解，在很多情况下，为了避免不必要的解释我很乐意介绍自己是从事美工一职！简单又容易理解，何乐而不为呢？我很清楚自己现在所从事的工作和我所追求的，我的大学专业一开始是电脑美术设计后来大二转到视觉传达专业，初识UI设计是在05年上大二，有一位新来的老师给我们上了一堂“人机界面”的课程，从此我的职业奋斗目标就定在这一课堂上，我今后要成为一名优秀的UI设计师。

05年UI的概念才进入国内不久，这绝对是一个新的行业，这让我一个初识UI并要以此为今后奋斗目标的毕业生显的很无力！坦白说我上了一个二流的学校，拿了一个不入流的毕业证书，这给我今后找工作带来了相当大的困难，因为我没有任何的工作经验，学校也没有给推荐。那时基本没有UI设计师的需求，也许我很笨选择了一个比较不靠谱的方法,拿着简历去人才市场挨个去问挨过去投！很遗憾没有任何与UI相关的工作，为了生存我妥协了选择从平面设计开始………………此处省去一万字……………….

我知道UI设计一直是我心中渴望的工作，为此我一直努力着慢慢在向UI工作靠拢，因此我成功的从一个做海报做排版的平面设计转到了软件美工，再从软件美工转向了现在的视觉界面，这绝对是一个很漫长的道路。UI设计工作一直在我心里幻想的是多么有趣并赋予激情的工作，它绝对不是设计师坐在电脑屏幕钱捣鼓着画图标与做界面这么单一的工作，而是思维的发散，对用户的研究，以及团队的合作与交流，这是我一度对工作模式的幻想与期待，我始终认为在如今的互联网里,做服务应用只有以用户体验为中心的产品才能保持一直的领先，才能同同类产品去竞争！

为何我对进入迅雷工作感到无比的期待与欣喜，不是说我进了一家有名气的公司不是说马上我可以享受高薪资！因为我想迅雷是一家积极、团结、顽强拼搏的团队，我幻想我加入此团队我一定能成为一个工作狂赋予我所有激情来完成每一个项目，坦白说我是一个耐不住空闲的人,我总想集结我所有的思想、时间、激情去尽情的做一件事或者是网络游戏或者是么项爱好或者是工作。进入迅雷转到视觉界面一职我很高兴我终于可以做着自己喜欢做的事，但这依然不是我所渴望追求的理想目标，只能说它离我的目标又更进一步了！

有很多人认为UI设计就是视觉界面，但是不是这样的，UI设计包含的范围很广就工作流程来说可以分为结构设计、交互设计和视觉设计。我最想做的是结构与交互因为这是一个赋予挑战与趣味的工作，当然能做好界面视觉那也是非常牛的一件事。据我所知一零年公司那时好像没有任何产品结构与交互设计以及用研之类的职位与部门，这让我有些失望，我面试进入迅雷原本是做无线UI的，我所知道的，在一零年迅雷无线只有一款产品“手机迅雷下载”那时我很不理解迅雷为什么会出这一样款在手机上毫无意义的产品，我想这款产品一定没有做任何的市场用户调研与产品的定位以及针对手机移动平台的交互设计。也正是如此更让我期待这份工作，因为我认为迅雷需要我，如此我做好一切进入迅雷工作的准备，可是后面的路是如此的顺利吗？非也…

人们常说的在人生道路上处处充满未知与挑战，我想这句话是真确的，这是命运安排的一次机遇又或许是一种考验。来到迅雷我没有顺利的加入无线而是留在了下载，刚来的时候无线的事情不多，主管就让我暂时留在了下载，做些与迅雷7相关的设计小需求，比喻一些主题皮肤、小图标等，算是熟悉下迅雷的工作模式与环境，这是每一个设计师去到新环境的必经之路。

很快我接到了第一个独立的项目需求-移动中心界面设计，我很兴奋，因为我终于有机会完整独立的去做一套产品界面设计，这是我期待已久的，并且充满信心。移动中心是迅雷7的一个插件，却是一个相对功能完整独立的应用工具，当接到项目的需求文档时，我想我不能只是做好一个视觉界面如此完了，我也从来不认为我只甘愿如此，我很期待同产品同开发一起研究讨论如何更完美的完成产品的设计，因为我想做好每一款产品，去体验那种无比自豪的成就感！

由于项目产品是全新的，我看过文档有很多地方产品的交互与结构是极其不合理的，我到不是说产品经理不注重用户体验，做的不够好而是他们并非专业的UI交互设计师与结构设计师并且迅雷也没有专门的用研团队。我很乐意将我有限的专业知识和一些设计经验与认识同产品一起交流共同成长，以完善产品的设计。很快我便投入了移动中心项目的实际工作中，我很满足现有的工作状态，移动中心项目是我来迅雷做的第一个独立完整的产品设计它倾注了我很多心思并赋予我那时的全部激情，当产品界面一步步的走到完善我感到无比的激动与满足感，我很感谢产品经理对我的支持与信任，我同样感谢我的主管对我设计能力的认可，也因此主管让我继续留在了下载，因为他认为我很适合做客户端界面，但我就很委屈了，一直幻想着去无线呢，到后来我知道希望是渺茫了，我也慢慢屈服了现有的安排，再后来无线加了很多人，而我已经在下载扎下根了！

移动中心项目进入了结尾工作-配合开发完成界面贴图，这其实是一个非常不好把控的事，讲求的是配合，在这里我想说下题外的，我是一个爱好广泛的人，曾几何时我疯狂的爱上程序开发与代码，如是买了很多程序开发的教材书籍与相关学习资料，无奈缺乏那种毅力与天分，最终只学了点皮毛就放弃了，不过在这里真心的佩服加羡慕外加嫉妒那些写代码的学长們是多么牛逼啊，同时也为他们感到实实在在的幸苦，表示尊敬。学习了点程序开发的知识还是没白学的，毕竟我们做的UI设计的今后是要经常与程序开发打交道的，并且我们设计师设计的界面要被程序本身所支持不能太找不着调了，一个对程序开发与代码完全不了解的设计师，它绝对不是一个优秀的UI设计师（个人愚见，望各位同是UI设计师的不要责怪）。如此便不能很好的与程序开发沟通配合完成自己辛苦设计的界面，要知道一个成功的产品不是某一个人的能力就能完成，而需要整个团队的共同协作努力与配合才可以。

实事上在这里我想说移动中心项目与程序开发的配合并非那么尽善尽美，那时产品经理和我说公司一直界面贴图把关是由产品经理在中间协调工作的，设计师只需按需求切图即可，我认为这事极其不合理的，难道设计师自己设计的界面不比产品经理要了解的更细吗？当然随后产品和我说由我去配合开发贴图那当然最好，我很乐意这份工作因为看着自己的设计作品在一点一点慢慢成为现实，那是一件多么有成就感的事情，事实上我与程序开发那边也没有配合好，开发那边显的过于被动，而我又显的太过主动，感情现实很无奈！毕竟我来迅雷时间不长，经验不足，要学习的地方实在太多了，还有很多事情是我不能处理好的，最后界面实现那块与效果图相比只完成了百分之六十吧。不过我已经很满足了，我在这个项目中学到了很多也体会到了自身的不足，这让我面对后面的工作与挑战更加的期待并赋予激情！这一切只是刚刚开始…

经过半月加班加点的努力，网购生活模版终于一步步的走向完善与成熟，也终于可以拿出来见人了！

在这之前我很纠结，我为是否该分享此模版考虑了很久，因为此模版付出了我太多的心血，就像是我的孩子，虽然他如今还不算很完美，但我相信我会一直陪伴它的成长。

为何最终我决定分享？在这期间有不少的淘友向我询问是否可以分享此模版，他们表示对此模版的肯定与喜爱,这让我更加期待它的成长。我知道如果想要它更好的完善与成长它必须经过更多的考验，我想这是时候了！

在此我还要感谢那些曾经无私奉献分享淘宝客推广经验与网站SEO优化，给我建议的好友。

废话说太多了，下面进入正题：

首先是效果图：去网购生活浏览效果

支持环境：陶掌门V3.11正式版

模版功能与特点：完美支持会员返现功能、深度优化SEO、页面加载速度快、模版文件架构清晰方便修改。

模版的安装：
1.请在文章的结尾处下载模版安装包，解压后得到名为“wgosh”的文件夹。
2.将名为“wgosh”文件夹拷贝至 陶掌门程序“\pisces\code\view\frontend\”目录下。
切记!是整个wgosh文件夹，切勿将目录中的JS、图片、CSS等取出另放！
3.进入陶掌门后台在“网站设置”项 里的“模板选择”修改为“wgosh”保存，再清除一下模版缓存，OK！

安装后基本不用修改什么代码（当然如果你懂就可以随意修改）只需后台配置，你要做的仅仅是更换您的LOGO，所有相关的CSS、js、图片都包含在“wgosh”一个文件夹中，大家可以看着办。若有不明白的地方可以发帖求助！

声明：模版代码中无任何后门与隐藏连接，只有一个底部的友情连接，在这里我希望大家不要删除作为小弟的一点点安慰，我会继续努力的为大家提供一套完善的模版。如果确实不爽那还是删了吧！

最近更新：2011.12.04 V1.1
————————————————————————————————-
2011.12.04 V1.1 历史更新记录
1.优化各页面视觉效果
2.导航菜单添加至网站全部页面
3.调整当前位置导航栏
4.主页增加banner焦点图与最新动态
5.丢掉首页泰山压顶广告
6.代码优化，去无用google统计代码
7.微调整社区界面！
8.多处细节代码调整与优化
————————————————————————————————-
2011.11.30 V1.0 历史更新记录

1.全屏泰山压顶广告。
2.改进网站地图页界面。
3.改进新建页界面。
4.改进合作伙伴显示样式。
5.SEO优化，全站img加alt属性，全站关键字描述改进！
6.主页界面CSS样式优化。
7.修正导航在ie浏览器中的错位问题。
8.更新单页专题页面。
9.添加网站客服助手功能浮窗。
————————————————————————————————-

更多有关于模版功能与修改以及安装的问题请大家在此留言或加入QQ群：191987008 （请备注来意）交流！

模版安装包下载：点击这里

废话不多说大家看效果图：

大家可以去我网店看实际效果http://www.wgosh.com

下载实例：请点击这里

欢迎围观，也希望各位设计高人路过时多提宝贵意见，这是迅雷UITeam的第一期电子杂志，下一期我们会继续努力，添加更多设计精品，2011，我们加油！

下载杂志（免费）请转移至：http://u.115.com/file/t0ee68c866

看看影视视窗的设计灵感即来源如此，有如浩瀚星空一样美丽而神秘！当我们选着影片就如观看一望无际的星空一样选定一个目标我们会发现在它的周围有更多更为吸引,因为你的思想以超越你当前所见到的！

2.结构说明：

这是“看看影视视窗”启动界面，

看看影视视窗基本功能：提供最全最方便便捷的选片操作、提供高清流畅影片播放、提供用户好友平台进行影片交流和评级

界面区域：界面主要分为三个区域,即顶栏用户账户功能信息和基本设置与操作、中间为影片展示和影片信息以及播放区域、底栏主要是影片搜索和赛选区域。

3.简单交互说明：

视窗启动界面过后进入影片展示界面

影片展示主页显示的影片会随着用户习惯所感兴趣的信息以及用户设置而变动！

第一次启动默认随机显示当前热门影视。

影视展示是以游览的方式，匀速（速度快慢可设置）的向四种放肆呈现，即从左至右、从右至左、从远至近、从近至远。

游览呈现方式控制可鼠标点击顶栏右侧“游览：从左至右” 也可以直接按键盘上的方向键控制方向及加速浏览，

“全屏“按钮可以全屏预览并可设置屏保。

顶栏左边是logo 、用户登录、用户操作、设置

用户操作是用户基本的使用功能可以查看观看历史和分享信息以及好友查看，设置是关于视窗的一些基本默认展示与提示的设置等…

底栏提供了快捷方便的影片分类信息以及影片搜索可快速定位用户所期望获得的影片信息，以及返回默认主页。

鼠标滑过影片展示去的影片海报将会变亮并发光，单击选中打开影片信息面板如下

影片信息面板提供了影片的基本信息和返回与观看按钮。

点击面板顶部中间半圆可翻开面板另一面，为此影片的网友评论信息，如下图

在这个面板你可以查看网友对此片的评论，并且可以发表自己不同观点。

在点击面板顶部中间半圆可返回影片基本信息面板，如下

接下来点击返回会回到影片游览界面，点击播放进入影片播放界面，如下

在影片播放界面下你可以点击全屏播放，点击关闭将回到影片游览界面，点击评论影片将不会关闭只是播放面板翻过来，查看影片评级与发表观后感。

点击面板顶部中间半圆可返回影片播放面板继续观看影片….

影片：影视视窗
更多详细请待后续更新…

]]> http://www.s-shidi.com/thunder-look-at-the-movie-star-design/feed/ 0 http://www.s-shidi.com/start-a-video-converter-icon/ http://www.s-shidi.com/start-a-video-converter-icon/#comments Fri, 22 Oct 2010 15:54:48 +0000 S.shidi http://www.s-shidi.com/?p=627

很早绘制的一枚Video Converter程序启动图标，现在看来技术还是有所欠缺，怎么看都少了一种感觉。

就快要离开现在的公司了，整理了一下以前的作品发现有好多当时胡乱画的一些东西，现在看这些东西真的不怎么样，都 不敢拿出来见人的不过他们却见证了我一步步的成长，还是非常值得我好好珍藏的。

在漠野工作两年多，这快要离开了想想还是有些失落与不舍，但是现实还是离开的好吧，漠野好像不需要我的能力！或许我应该知道那只是一份安定的职位。

离开不知道是得还是失，现在纠结这个已经不是很重要了，我即将迎来新的起点来完成今年的的一个小愿望，那就是成功的换职，其实对于我来说这是要付出很大勇气的！

在这里留下一个记号，感谢漠野在这两年里给予我的帮助和考验，在这里我学会了很多，也给我带来许多的快乐。我衷心的祝愿漠野在今后能给茁壮成长 成为行业里的领先企业！

职业描述：
1.参与产品前期界面视觉用户研究、设计流行趋势分析
2.设定软件产品的整体视觉风格和VI设计
3.参与设计体验、流程的制定和规范
4.分享设计经验、推动提高团队的设计能力

职位要求：
1.美术、设计或相关专业大专以上学历（优秀人才，专业和学历可适当放宽)
2.精通Photoshop、Illustartor、Flash等设计工具，了解flash（Actionscript）动画设计者优先
3.对视觉用户研究有一定经验和见解，对软件可用性有一定的认识
4.从事设计相关行业，具有软件产品界面风格设定以及VI设定（包括界面、图标风格与统一规范等）经验者优先
5.具有一定的交互分析以及理解能力
6.具备良好合作态度及团队精神，并富有工作激情、创造力和责任感

待遇：
1.非常有竞争力的薪酬；
2.国家规定的各种常规福利；
3.工作日免费中、晚餐；
4.每月进行绩效考核，每个季度根据本季平均绩效考核分数发奖金；
5.每季度根据当季公司销售情况，进行季度调薪；
6.每年年底提供基础的绩效奖（1－2倍月薪）加额外的年终奖；
7.每周五晚固定的各种体育活动：羽毛球、篮球、乒乓球等；
8.每年至少两次免费的市外游，若干次市内游。

有意者请将你的简历与作品一同发送到S.shidi(at)gmail.com,或直接添加QQ：273930100 进行交流。非诚勿扰 谢谢！

集网页浏览与iPad文件管理功能为一体，以下是S.shidi为“迅雷HD”尝试设计的UI界面图！

此为学习参考请勿用于商业用途！

主功能图标：

横屏文件下载：

横屏网页浏览：

竖屏文件下载：

在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）.从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。

UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

UI设计在国内还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。界面设计，在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

UI设计工作内容

UI设计从工作内容上来说分为3个方向。图 它主要是由UI 研究的3个因素决定的， 其分别是研究工具，研究人与界面的关系，研究人。

1.研究工具

研究界面—-图形设计师Graphic UI designer

国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。

这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。

2.研究人与界面的关系

研究人与界面的关系—交互设计，interaction designer

在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。

交互设计师一般都是软件工程师背景居多。

3.研究人

研究人—-用户测试/研究工程师User experience engineer

任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。

用户研究工程师一般是心理学人文学背景比较合适。

综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。

UI设计流程

1.确认目标用户

在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于电脑入门用户的设计重点就不同。

2.采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

3.提示和引导用户

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。

对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

一致性原则

1.设计目标一致

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。

例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

2.元素外观一致

交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

3.交互行为一致

在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

例如：所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

可用性原则

1.可理解

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

2.可达到

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。

用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）

3.可控制

软件的交互流程，用户可以控制。

功能的执行流程，用户可以控制。

如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

vivi（薇薇，26岁，一位优雅迷人的OL）打开钱包，从卡夹层里拿出那张有着金黄葵花的银行卡，又了到发工资的时候，不知道今天到帐了没有，还约好了明天和死党一起Shopping呢！刚才路过银行想查一下余额，但是排队的人太多了，不过还有电话银行嘛，vivi一边想，一边拿出手机，拨通了电话银行的号码：

一个温柔礼貌的MM语音提示：“您好，欢迎使用招商银行电话银行系统，1，自动语音服务，2人工服务；”

vivi把手机从耳边拿下来，找到1号键，按了一下；

“1个人银行服务，2公司银行服务，3银证通功能，4个人外汇买卖服务，5基金服务，0退出；”

vivi又按了1；

“1存折户，2一卡通户，3个人信用卡户，4新旧卡号查询 0 退出；”

vivi按下了1旁边的2号键；

“请输入一卡通卡号，以#号结束；”