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

KeyFC2.0主题设计#K20T811231918

[ 9061 查看 / 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

    这个看上去和现在的风格差异不大啊
    猫还想要当年的侧边栏、主页和版娘啊 ><
    折户伸治~~~~伪~

    大坑开挖
    TOP

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

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


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

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

    侧边栏啊,KFC的侧边栏是传统,是美德,不能给吞吃掉啊
    像喜剧一样。
    TOP

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

    如果是侧边栏的话,快速切换是很简单的,也符合现在屏幕趋向于宽屏的习惯问题
    折户伸治~~~~伪~

    大坑开挖
    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

    侧边栏实现起来应该不是问题吧
    Frame或者iframe更或者Div层+iframe都很好实现
    当然iframe需要用JS配合,但是类似的控制猫在Opera、Safari、Firefox、IE上测试都没问题(前提是不加多余的层滤镜)
    最后编辑『折户伸治』 最后编辑于 2008-11-23 21:23:01
    折户伸治~~~~伪~

    大坑开挖
    TOP

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

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

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

    突然妄想了一下KFC超華麗化以後的效果...發覺超華麗化要改的地方不算太多(死

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

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

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

    大概要說的就只有這些了,剩下的只有期待最終的完成品了= =
    最后编辑忘了名字 最后编辑于 2008-11-23 21:51:26

    没有存在感的某人...
    TOP