KeyFansClub

首页 » - 站务讨论区 - » 键社营业部 » KeyFC2.0主题设计#K20T811231918
Koori - 2008/11/23 20:55:00
想了一下,根据上次2.0的体验,结合我的记忆,今天抽空设计并制作了这个UI框架。

首先是本主题的结构图


  看似简洁明了……哼哼……实际上嘛……还是简洁明了= =|||

  首先,KeyFC2.0给我的印象是空间窄。经过回忆我想起当初使用的时候,控制项目是在左侧的,这自然也就使画面变得不美观,紧凑,甚至不习惯。

  其实同样的宽度也可以,只要把左边的用户控制内容放置到上方即可,所以我在这里将该部分信息包含在了BODY的头体DIV折叠容器中并使其居右下对齐。

  先通过body样式表,将框架主体定义,由于用户浏览器一般都是1024x768这个分辨率的,所以,在这个状况下,最佳论坛展示宽度我觉得是800x768最为合适。不过在设计的时候定位高度肯定是768个像素点的,实际上最终结果是要根据需要进行动态调整的。

  最终,主结构如下:

  body{}
  └#Container{width:800px;margin:0px auto;}
  ├#Header{}
  │  └#Button_Container{}
  ├#MainBody{}
  └#Footer{}

  我在DW上已经根据这个设想,制作了一套简易的框架分布案例,UI框架样式表现如下:

考虑到多浏览器兼容问题,我加入了<Center>标签给整体内容作了一个居中处理,以保证在FireFox和Safari上的浏览效果都是一致的。


 


框架虽然好写,但是要应用还是需要对论坛主体有一定了解才可以的。所以只好在这里将工作交手给开发/制作者来应用了。具体的应用和拓展的方法还有一些特殊说明我都写在了CSS内,代码在楼下贴出,暂时通过Userview标签传递给陈君保管。


如果需要,UI图形我也会制作一份并随后发出。经过应用和调整,外加上我最初设计的UI界面图形,最终的KeyFC2.0主题将会十分华丽(当然,我是这么认为的),并且不会耗费过多资源,浏览舒畅。以下为根据UI框架制作的最终设想图以供各位参考:


Koori - 2008/11/23 20:55:00
由于忘记了米人陈的UID,所以暂时发给UID1了= =|||
样式表代码
[userview=1]
@charset "utf-8";
/* BODY设置 */
body {
background:#FFF;
margin:10px auto;
text-align:center;
}
/*************************************
设想:Koori
授权:Key Fans Club
[主结构]
  body{}
  └#Container{width:800px;margin:0px auto;}
  ├#Header{}
  │  └#Button_Container{}
  ├#MainBody{}
  └#Footer{}
[说明]
-在JAVA环境以外的地方追加DIV标签可形成主框架
-在DIV折叠标签中插入内容即可
-按钮尺寸推荐在120*45个象素点
[特别说明]
-未来框架为自动调整垂直边距,所以请删除MainBody的height属性
-Header最好能确定一个高度,高度基本上就是主头Banner的高度;
-button_Container是右下对齐模式,不用担心走形问题;
**************************************/
/*主容器*/
#Container {
background:#CCC
width:800px;
margin:0px auto;
}
/*论坛展示区*/
#MainBody {
background:#CCC;
width:800px;
height:350px;
color:#000;
}
/*页脚信息*/
#Footer {
background:#06C;
width:800px;
height:50px;
color:#FFF;
}
/*主头区*/
#Header {
background:url(./Banner.png);
width:800px;
height:200px;
}

#button_Container {
background:#0075ba;
width:500px;
height:20px;
color:#FFF;
margin-bottom:0px;
margin-right:0px;
margin-left:auto;
margin-top:180px;
float:right;
clear:right;
}
[/userview]
DIV样式折叠标签应用示例代码
[userview=1]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>KeyFC2.0主框架框架</title>
<link ***="./KC20811231918.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="Container"><!--主容器-->
  <div id="Header"><!--主头信息-->
<div id="button_Container">
    这里是板块按钮,用Javascript制作,或者定义成样式列表框做内容跳转。
    </div>
  </div>
  <div id="MainBody">
  这里是论坛帖子列表或展示区,也可以使用iFrame以相应JS的window.open();方法。
  </div>
  <div id="Footer">
  页脚信息展示
  </div>
</div>
</center>
</body>
</html>
[/userview]
『折户伸治』 - 2008/11/23 21:03:00
这个看上去和现在的风格差异不大啊
猫还想要当年的侧边栏、主页和版娘啊 ><
Koori - 2008/11/23 21:04:00
原帖由 『折户伸治』 于 2008-11-23 21:03:00 发表
猫还想要当年的侧边栏、主页和版娘啊 ><


这些应该在论坛首页制作集中展示页,上面的导航完全是为了快捷
watashia - 2008/11/23 21:11:00
侧边栏啊,KFC的侧边栏是传统,是美德,不能给吞吃掉啊 :miffy1:
『折户伸治』 - 2008/11/23 21:11:00
如果是侧边栏的话,快速切换是很简单的,也符合现在屏幕趋向于宽屏的习惯问题
Koori - 2008/11/23 21:14:00
原帖由 『折户伸治』 于 2008-11-23 21:11:00 发表
如果是侧边栏的话,快速切换是很简单的,也符合现在屏幕趋向于宽屏的习惯问题


原帖由 watashia 于 2008-11-23 21:11:00 发表
侧边栏啊,KFC的侧边栏是传统,是美德,不能给吞吃掉啊 :miffy1: 




那就把SideBar{}加上好了……左边兰肯定不能用iFRAME的……
或者做成可隐藏的那种?= =|||嗯……那个效果需要制作者努力了……= =|||
那我再看看修改一下容器分配好了……希望不要重写……= =|||


===========================


嘛~~~等我的ACG DEMO发布了再说吧=v=
『折户伸治』 - 2008/11/23 21:20:00
侧边栏实现起来应该不是问题吧
Frame或者iframe更或者Div层+iframe都很好实现
当然iframe需要用JS配合,但是类似的控制猫在Opera、Safari、Firefox、IE上测试都没问题(前提是不加多余的层滤镜)
Koori - 2008/11/23 21:25:00
额……影响浏览效果的不是iframe控制,而是div的id控制……这个说来话长了……用iframe肯定是不好的。不美观。最好用div id来设置成可隐藏的,这样也很方便我这种一向“横”惯了的人……= =|||
忘了名字 - 2008/11/23 21:32:00
突然妄想了一下KFC超華麗化以後的效果...發覺超華麗化要改的地方不算太多(死

比如把觀鈴做成浮於發帖成功的頁面上方並且有立體感,所需要的工作是重新畫一張圖=w=
比如把所有元素圓角化並且加上水晶效果,所需要的工作是改幾張圖,同時添加一張用於圓角的圖并加上兩行代碼
比如要實現菜單或邊欄的滑出效果(喂喂..),同時還實現邊欄的VISTA式透明化(喂喂喂喂....),所需要的工作是...不知道(某人:(╯‵□′)╯︵ ┴─┴ 不知道的東西也敢拿出來說!想要老子累死啊!)
比如進版效果萊普特共和國化(那是什麽?),只需要抓住米陳做苦力(?)
比如帖子鏈接按鈕化(......)
比如用戶控制面板青蛙化(.............)
比如...啊啊啊啊啊啊啊~我會再回來的!(變成了一顆閃光的星星)

--------------------
若干年后,誕生了一個需要Intel 酷睿2或以上級別CPU,2G內存,網速10M以上,硬盤剩餘空間超過1G才能夠正常瀏覽的KFCBBS(茶)

-------------------------------------------------以下正題-------------------------------------------------
這是我作為一個用戶對新論壇的界面的期望,因為我不是開發人員,不可能就技術問題多說什麽。。。
我主要想表達的就是畢竟過了這么多年了,技術也進步了,希望新的KFCBBS系統UI不要再做得和KFC1.0那樣單調了,能夠讓絕大多數用戶覺得漂亮一些才好,至少希望能多一些圓角和按鈕式樣的元素等這幾年新鮮出現且比較成功的東西。
在此基礎上,如果能讓老人們一進來就能認出“這果然是KFC啊”是很重要的,這有賴于KFC1.0一些細節的元素的保持,比如側邊欄上那隻指向KEY主頁的青蛙,比如發帖成功時的觀鈴(加上陰影效果)和那聲“妮哈哈”,比如在側邊欄的按鈕在做得更像按鈕的同時保持一貫的藍色底色,以及原有的歪歪扭扭的字體。

大概要說的就只有這些了,剩下的只有期待最終的完成品了= =
『折户伸治』 - 2008/11/23 21:36:00
设置成可隐藏又不是啥难事,Div id的控制也不是问题,预先定义好一组界面的API怎么处理都简单
实在不行还有Frame可用
而且可以写成多界面的啊,不同习惯的人用不同的
Koori - 2008/11/23 21:47:00
原帖由 『折户伸治』 于 2008-11-23 21:36:00 发表
设置成可隐藏又不是啥难事,Div id的控制也不是问题,预先定义好一组界面的API怎么处理都简单
实在不行还有Frame可用
而且可以写成多界面的啊,不同习惯的人用不同的


可惜我不是技术达人啊~对我来说也就是麻烦加难了吧~_~
Div id控制说简单,对我来说注意的地方也是一大堆,话说除非WebForm,哪里用得到API么?毕竟2.0不是.net论坛阿……

Frame效果也是类似的

多界面也是一个总的容器集合体啊……

具体的大家也拿出各自的方案好了= =|||
『折户伸治』 - 2008/11/23 22:08:00
关于API来说,猫的意思是以一个页面作为母板,然后在母板上以模块化的层进行布局,而母板上有“后台程序”以及"前台JS"定义的一系列应用接口(API),加载到母板的层都是一个整体化实例,通过控制母板上的API就能对自身和母板上的其他模块进行控制,这样不论怎么变都很简单。

只要预先设计好了整个结构和相互的接口标准,照做就行了,不需要什么程序达人的
Koori - 2008/11/23 22:26:00
原帖由 『折户伸治』 于 2008-11-23 22:08:00 发表
关于API来说,猫的意思是以一个页面作为母板,然后在母板上以模块化的层进行布局,而母板上有“后台程序”以及"前台JS"定义的一系列应用接口(API),加载到母板的层都是一个整体化实例,通过控制母板上的API就能对自身和母板上的其他模块进行控制,这样不论怎么变都很简单。

只要预先设计好了整个结构和相互的接口标准,照做就行了,不需要什么程序达人的


我认为那也许需要制作者讨论了,主题设计和制作毕竟现在是脱节的……= =|||
另外,接口本身已经成型了,所以貌似最后控制环节还是在JavaScript RunAt=Server的那些代码中= =|||

扯远了~

其实我觉得不用这么大费周章才对……整体化……应该一开始就写了……

那应该和我没啥关系= =|||我只是个写主题的(误:打酱油的?)……= =|||
粘土火星 - 2008/11/23 23:29:00
随便插两句,楼主如果说主题设计,应该是美工干的事情,你交的应该是PSD或者其他设计草图~~然后再有程序员想办法转写,尤其是KFC2.0还是开荒阶段,要从具体的设计来做模板。。。

而不是有了楼顶的东西才去想怎么往里填充内容,这是应该是搞出很多漂亮设计有了很多模板之后剩下的有爱人士干的活。

想想你是要做美工,还是要做程序员~~~

PS:从程序的角度上来看,搞<div>布局的话,最好不要搞<center>,当然抵制<iframe>是很好的。。
laputachen - 2008/11/23 23:33:00
真的要设计的话,用PS做就行了……暂时还没必要真的去写代码……做好了效果图,太公公会去调好的……

另外,UI设计的重点在平面设计,算是一个小型的VI系统……

主要包含统一定义的标准色、表格样式、装饰图案……三者在视觉上要和谐统一……

遗憾的说,你写了那么多代码,我也没看出什么来……

UI设计主要是美工活,代码更适合交给技术人员如太公公去实现,因为你也不知道KFC2的界面是咋定义的……

这个坑填起来是需要英格兰乡村般的幽静环境和量子世界般的空灵心情……
忘了名字 - 2008/11/24 0:30:00
那个...等咱明天写完作业就拿出PS画草图好了
[strike]我一定会拿出一个BT的UI设计方案的,同时草图不要指望我能画出来任何效果,只能用写的[/strike]
Koori - 2008/11/24 0:58:00
原帖由 laputachen 于 2008-11-23 23:33:00 发表
真的要设计的话,用PS做就行了……暂时还没必要真的去写代码……做好了效果图,太公公会去调好的……

另外,UI设计的重点在平面设计,算是一个小型的VI系统……

主要包含统一定义的标准色、表格样式、装饰图案……三者在视觉上要和谐统一……

遗憾的说,你写了那么多代码,我也没看出什么来……

UI设计主要是美工活,代码更适合交给技术人员如太公公去实现,因为你也不知道KFC2的界面是咋


没关系,我把附件加上来就明白了= =|||~
嗯……顺便横幅也交出来一并打包了= =|||

[userview=1]
下载地址:
http://xianexs.mail.qq.com/cgi-bin/downloadfilepart/svrid270/KC200811231918.7z?svrid=270&fid=a2605f86c5bd2b4ba0e84d273bac84750decbe53bcda1c5b&&txf_fid=4e92924a2e8ecb2694bd65879aa894052744370c&&txf_sid=

(提取码 4738db74)
[/userview]



话说本身这个主题貌似不需要什么美工技术,所以把代码一并提出来了……= =|||

另外,……整个主题……只有一个横幅,button_Container区(也就是菜单那里)背景颜色只要是#0075BA就可以了。选区方面是通过更改样式表的Combox(<Selection style>)来实现的= =|||

还有一点,构想图的Banner比实际的Banner要大,因为最开始只是想把概念画出来而已,所以为了美观和表示方便,我设置了自动变形->拉伸……嘛……反正PSD外加实例文件和样式表都发出来了= =|||……

放心,这个坑不难填,因为只是在HTML折叠标签应用这些Div ID而已。麻烦点的是给下拉列表写样式表= =|||那个2D化融入的风格我不会写= =|||毕竟我功底还不够扎实的说= =|||……

再毕竟……这也只是我写的一个主题而已……= =|||

话说我居然还有个“坏”主意= =|||把样式自由化(这才是深坑= =|||)给出一个或者几个默认的主题选择,然后可以由用户自定义样式和风格= =|||嗯……一定很"畅销"= =|||

PS:
如果可以,我也不想加Center,不过由于某些情况下FF或者Safari不能识别text-align:center,所以才外加一个保险,这些旧看 TAI公了……

PS2:
话说……Tai公就没出现在群里?= =|||我貌似密过他本人,但是一直被无视……我也超想使用UserView啊……叹!……
vamr - 2008/11/24 1:29:00
某只希望2.0设置的每页帖子数目可以更多些...可以随个人喜好设置的最大值比现在更大一些
比如每页40主题
某懒得翻页...
-  -||
Prz - 2008/11/24 3:17:00
同意楼上,顶部banner太大,浪费有效的浏览空间。
现在流行的netbook纵向只有600个点,目前的论坛都只能显示出几条标题就需要滚动...

另外,标签的使用最好参照w3c的规范,推荐XHTML 1.0 Trasitional或者Strict.
使用像center这种已经被淘汰的标签,不能保证今后的浏览效果。
Koori - 2008/11/24 19:48:00
(Banner是给一部分空间放功能连接的……)

||| orz...
果然还是我太失败了么……
好吧……我继续努力好了……T_T……
:miffy13: :miffy13: :miffy13: :miffy13: :miffy13:
zsdrcdsq - 2008/11/24 19:49:00
侧边栏呀,现在用回来反而会不习惯了。
1
查看完整版本: KeyFC2.0主题设计#K20T811231918