搜索
aardio官方社区 门户 查看主题

QQ Web 登陆之UI设计(二)

发布者: ninja911 | 发布时间: 2011-11-2 02:47| 查看数: 21561| 评论数: 28|帖子模式

经过了几天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, 下载次数: 1205)

评分

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

查看全部评分

最新评论

ninja911 发表于 2011-11-2 03:01:47

保留帖!!!

保留帖!!!
ninja911 发表于 2011-11-2 03:01:53

保留帖!!!

保留帖!!!
aonoco 发表于 2011-11-2 03:51:31

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

这个要顶。。。
dafei2599 发表于 2011-11-2 08:31:56

头前先顶{:3_46:}

头前先顶
fyy 发表于 2011-11-2 12:07:08

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

意外收获,从楼主的博客下载了火狐8.0 速度真的爽
vvv 发表于 2011-11-2 23:39:56

楼主再接再厉!

楼主再接再厉!
生命的弧度 发表于 2011-11-3 09:01:22

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

多谢LZ,非常好的参考,学习~
dasan 发表于 2011-11-3 22:18:15

好东西 感谢 收藏了

好东西 感谢 收藏了
fangbaiyu 发表于 2011-11-6 11:02:39

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

好好学习 天天向上
初学 收藏一下先
内容好多
顶下楼主
wishvk 发表于 2011-11-14 17:02:43

好东西要支持

好东西要支持
aaaAraaa 发表于 2011-11-18 09:59:36

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

就是不知道怎么用,希望楼主能出一个教程
guaguaffs 发表于 2011-11-25 18:08:29

能过验证码吗

能过验证码吗
低调点 发表于 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
能过验证码吗

你起码看一下楼主发的是什么再问吧??.............
xiaojiakm 发表于 2011-11-26 16:29:46

学习了 顶一个 {:soso_e179:}

学习了 顶一个 {:soso_e179:}
988668 发表于 2011-11-30 11:06:55

顶,顶,顶{:3_48:}

顶,顶,顶
weell 发表于 2011-12-15 23:17:07

楼主再接再厉!

楼主再接再厉!
eleven0220 发表于 2011-12-16 13:58:36

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



太强大了。。。。
辉强 发表于 2012-2-3 09:15:41

{:soso_e104:}

{:soso_e104:}
12下一页

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

GMT+8, 2017-9-25 19:23 , Processed in 0.062500 second(s), 28 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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