搜索
查看: 25015|回复: 27

[web] QQ Web 登陆之UI设计(二)

    [复制链接]

39

主题

195

帖子

1269

积分

四级会员

Rank: 6Rank: 6

积分
1269
发表于 2011-11-2 02:47:33 | 显示全部楼层 |阅读模式
经过了几天w.qq.com协议探索,对于协议这块,基本需要告一段落,而且使项目具有完整可用性,开始设计应用程序UI,我也是第一次采用WebUI来设计界面。第一个就拿W.QQ来开刀了。献丑了。

【UI流程】
1、相对QQ官方客户端,已经有一个成型的参考应用,我们第一步就要根据操作界面,构思几个界面,比如登陆、登陆中、用户面板、消息面板等等
2、每个界面大概有哪些元素呢? 我先去收集基本素材,可以直接“偷取”官方QQ的资源Res包,教程传送门 http://apps.hi.baidu.com/share/detail/18811646
3、初次接触aardioWebUI设计,我们先看看aardio范例,针对我这个项目,重点看“无边框WEBUI”这个东东。
4、设计过程,多多看看官方的html和css文件,就可以了解UI组成部分是哪些,可以针对修改。(建议先了解html代码和css样式,有网站设计的可以略过)
5、由于我对Jquery比较熟悉,写手Jquery或者开发小插件没有问题,所以这次我们以Jquery框架来辅助设计UI。(暂时未接触到Dojo、HTMLlayout, 我的想法就是用自己熟悉的东西,可以更快的投入开发进程中,暂时避免增加学习成本)。
6、对于界面宽度问题,在UI设计软件的宽度应用到aardio界面,就少了大概3个像素,我记得也有人反馈过。这个时候,我们需要灵活针对aardio界面设置right和bottom。这是我设计过程中发现的一个问题。
7、aardio无边框UI范例中css的#caption_title定义,我觉得有些不完美。主要有2个问题,A-应用小图标在IE6情况下非透明,这个问题我已经用IE6的hack解决了,具体请查看我的css文件。B-应该把应用小图png内嵌在a标签内(因为a标签已经块化了block)。
8、我用到的设计软件有  aardio最新版, DreamWeaver CS5(html、CSS、Javascript设计), Fireworks CS5(图像设计), IconWorkshop(导出exe中ico图标资源), EditPlus3(快捷阅读修改代码)
9、下次分享之三,暂时未定,我弄一个阶段就先分享一下。如果有问题,请回帖即可。

Hi: 独乐乐不如众乐乐

【界面预览】
wqq.gif


【完整项目包】 webqq3_form_20111102f.rar (112.97 KB, 下载次数: 1236)

评分

参与人数 10专家分 +180 银币 +585 收起 理由
s1986q + 5 很给力!
wanderer_hh + 30 很给力!
fantasynew + 90 很给力!
donque2010 + 90 赞一个!
vqimwr + 90 赞一个!
qqmmcc + 100 谢谢分享
quickerfans + 30 + 100 很给力!
游戏 + 90 很给力!
低调点 + 50 + 50 赞一个!
aauaau + 40 很给力!

查看全部评分

回复

使用道具 举报

39

主题

195

帖子

1269

积分

四级会员

Rank: 6Rank: 6

积分
1269
 楼主| 发表于 2011-11-2 03:01:47 | 显示全部楼层

保留帖!!!

保留帖!!!
回复

使用道具 举报

39

主题

195

帖子

1269

积分

四级会员

Rank: 6Rank: 6

积分
1269
 楼主| 发表于 2011-11-2 03:01:53 | 显示全部楼层

保留帖!!!

保留帖!!!
回复

使用道具 举报

0

主题

13

帖子

128

积分

一级会员

Rank: 2

积分
128
发表于 2011-11-2 03:51:31 | 显示全部楼层

这个要顶。。。{:3_59:}

这个要顶。。。
回复

使用道具 举报

16

主题

101

帖子

639

积分

三级会员

Rank: 4

积分
639
发表于 2011-11-2 08:31:56 | 显示全部楼层

头前先顶{:3_46:}

头前先顶
回复

使用道具 举报

5

主题

129

帖子

1403

积分

四级会员

Rank: 6Rank: 6

积分
1403
发表于 2011-11-2 12:07:08 | 显示全部楼层

意外收获,从楼主的博客下载了火狐8.0 速度真的爽

意外收获,从楼主的博客下载了火狐8.0 速度真的爽
回复

使用道具 举报

1

主题

5

帖子

87

积分

一级会员

Rank: 2

积分
87
发表于 2011-11-2 23:39:56 | 显示全部楼层

楼主再接再厉!

楼主再接再厉!
回复

使用道具 举报

0

主题

1

帖子

21

积分

新手入门

Rank: 1

积分
21
发表于 2011-11-3 09:01:22 | 显示全部楼层

多谢LZ,非常好的参考,学习~

多谢LZ,非常好的参考,学习~
回复

使用道具 举报

6

主题

59

帖子

443

积分

二级会员

Rank: 3Rank: 3

积分
443
发表于 2011-11-3 22:18:15 | 显示全部楼层

好东西 感谢 收藏了

好东西 感谢 收藏了
回复

使用道具 举报

0

主题

11

帖子

140

积分

一级会员

Rank: 2

积分
140
发表于 2011-11-6 11:02:39 | 显示全部楼层

好好学习 天天向上 初学 收藏一下先 内容好多 顶下楼主

好好学习 天天向上
初学 收藏一下先
内容好多
顶下楼主
回复

使用道具 举报

0

主题

3

帖子

63

积分

一级会员

Rank: 2

积分
63
发表于 2011-11-14 17:02:43 | 显示全部楼层

好东西要支持

好东西要支持
回复

使用道具 举报

0

主题

2

帖子

27

积分

新手入门

Rank: 1

积分
27
发表于 2011-11-18 09:59:36 | 显示全部楼层

就是不知道怎么用,希望楼主能出一个教程{:3_45:}

就是不知道怎么用,希望楼主能出一个教程
回复

使用道具 举报

0

主题

1

帖子

23

积分

新手入门

Rank: 1

积分
23
发表于 2011-11-25 18:08:29 | 显示全部楼层

能过验证码吗

能过验证码吗
回复

使用道具 举报

65

主题

953

帖子

5036

积分

荣誉会员

Rank: 8Rank: 8

积分
5036
发表于 2011-11-25 20:07:56 | 显示全部楼层

[quote][size=2][color=#999999]guaguaffs 发表于 2011-11-25 18:08[/color] [url=forum.

guaguaffs 发表于 2011-11-25 18:08
能过验证码吗

你起码看一下楼主发的是什么再问吧??.............
aaa
回复

使用道具 举报

0

主题

2

帖子

16

积分

新手入门

Rank: 1

积分
16
发表于 2011-11-26 16:29:46 | 显示全部楼层

学习了 顶一个 {:soso_e179:}

学习了 顶一个 {:soso_e179:}
回复

使用道具 举报

1

主题

33

帖子

192

积分

一级会员

Rank: 2

积分
192
发表于 2011-11-30 11:06:55 | 显示全部楼层

顶,顶,顶{:3_48:}

顶,顶,顶
回复

使用道具 举报

6

主题

37

帖子

339

积分

二级会员

Rank: 3Rank: 3

积分
339
发表于 2011-12-15 23:17:07 | 显示全部楼层

楼主再接再厉!

楼主再接再厉!
回复

使用道具 举报

0

主题

2

帖子

15

积分

新手入门

Rank: 1

积分
15
发表于 2011-12-16 13:58:36 | 显示全部楼层

{:3_41:} 太强大了。。。。



太强大了。。。。
回复

使用道具 举报

0

主题

1

帖子

5

积分

新手入门

Rank: 1

积分
5
发表于 2012-2-3 09:15:41 | 显示全部楼层

{:soso_e104:}

{:soso_e104:}
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-11-13 08:50 , Processed in 0.125000 second(s), 32 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表