KeyFC欢迎致辞,点击播放
资源、介绍、历史、Q群等新人必读
KeyFC 社区总索引
如果你找到这个笔记本,请把它邮寄给我们的回忆
KeyFC 漂流瓶传递活动 Since 2011
 

KeyFC2.0主题设计#K20T811231918

[ 9076 查看 / 21 回复 ]

想了一下,根据上次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框架制作的最终设想图以供各位参考:


1

评分次数

    分享 转发
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复:KeyFC2.0主题设计#K20T811231918

    由于忘记了米人陈的UID,所以暂时发给UID1了= =|||
    样式表代码


    DIV样式折叠标签应用示例代码

    最后编辑Koori 最后编辑于 2008-11-24 00:48:34
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复: KeyFC2.0主题设计#K20T811231918

    原帖由 『折户伸治』 于 2008-11-23 21:03:00 发表
    猫还想要当年的侧边栏、主页和版娘啊 ><


    这些应该在论坛首页制作集中展示页,上面的导航完全是为了快捷
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复: KeyFC2.0主题设计#K20T811231918

    原帖由 『折户伸治』 于 2008-11-23 21:11:00 发表
    如果是侧边栏的话,快速切换是很简单的,也符合现在屏幕趋向于宽屏的习惯问题


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




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


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


    嘛~~~等我的ACG DEMO发布了再说吧=v=
    最后编辑Koori 最后编辑于 2008-11-23 21:16:11
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复:KeyFC2.0主题设计#K20T811231918

    额……影响浏览效果的不是iframe控制,而是div的id控制……这个说来话长了……用iframe肯定是不好的。不美观。最好用div id来设置成可隐藏的,这样也很方便我这种一向“横”惯了的人……= =|||
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复: KeyFC2.0主题设计#K20T811231918

    原帖由 『折户伸治』 于 2008-11-23 21:36:00 发表
    设置成可隐藏又不是啥难事,Div id的控制也不是问题,预先定义好一组界面的API怎么处理都简单
    实在不行还有Frame可用
    而且可以写成多界面的啊,不同习惯的人用不同的


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

    Frame效果也是类似的

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

    具体的大家也拿出各自的方案好了= =|||
    最后编辑Koori 最后编辑于 2008-11-23 21:55:06
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复: KeyFC2.0主题设计#K20T811231918

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

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


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

    扯远了~

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

    那应该和我没啥关系= =|||我只是个写主题的(误:打酱油的?)……= =|||
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复: KeyFC2.0主题设计#K20T811231918

    原帖由 laputachen 于 2008-11-23 23:33:00 发表
    真的要设计的话,用PS做就行了……暂时还没必要真的去写代码……做好了效果图,太公公会去调好的……

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

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

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

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


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






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

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

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

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

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

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

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

    PS2:
    话说……Tai公就没出现在群里?= =|||我貌似密过他本人,但是一直被无视……我也超想使用UserView啊……叹!……
    最后编辑Koori 最后编辑于 2008-11-24 01:12:57
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP

    回复:KeyFC2.0主题设计#K20T811231918

    (Banner是给一部分空间放功能连接的……)

    ||| orz...
    果然还是我太失败了么……
    好吧……我继续努力好了……T_T……
    :miffy13: :miffy13:
    克里喵子是一只小黑喵,脖子上有一条水蓝色的蝴蝶结~
    TOP