３.０ＵＩ设计探讨！总结了Ｎ久希望开发组尤其负责这块的netac参与一下 netac, 探讨, 开发, 设计

fghxy

一、
滚动条问题（重重中之重的建议）


作为浏览器的后生FF、opera在UI方面是有下了很大功夫的，chrome向opera学习但是没学到家，仔细看一下FF、opera不管系统主题滚动条怎么变，滚动条一直是皮肤自定义的，而chrome用的是VS主题滚动条（补充一下，chrome正式版似乎也用自带的抛弃系统滚动条了），WB无法对其渲染，这样就有可能与皮肤不配套。再看一下IE及诸壳大部分随explore滚动条变完全与皮肤脱节，看一下上图TW3的滚动条用了我的WB主题渲染使得UI极不协调。所以我建议TW3一定要用皮肤自定义的，而有些博客会定义页面滚动条也会造成与UI不协调，应该再加入一选项强制滚动条用皮肤自定义保持UI的一致性。
二、
UI动画
想做成chrome的平面布局还是相对容易，但是chrome的UI动画可是一绝，特别是标签切换效果真是让人着迷，甚至按钮状态转换也是渐变的。坚决反对别人说这花哨，相对而言我倒觉得别的UI恰恰是一种缺失，希望TW早日弥补这种缺失，即使3.0实现不了也期待4.0能得以改善，这该是TW着重模仿的，单单一个界面没什么模仿价值。
三、
界面分割
如果布局学习chrome无可厚非，UI实现方式学习Windowblinds应该是理所当然的了。2.0分割的有很大问题，3.0已有所好转。

先看一下WB分割方式


通过这样分割以后就不需要外框了，而3.0还是没摆脱增加边线实现外围轮廓。对3.0在分割方面提一下建议：3.0分割还是挺合理的，既然取消了上边框，那么下边框也应该和状态栏合并的，如果担心状态栏按钮靠下可以像定义VBorder=3#标签上文字和图标的Y方向的边界高度一样定义状态栏内容。这样处理以后就可以完全抛弃掉外围边框，直接由标题栏背景、状态栏背景、BG_FRAME_BORDER_VL、BG_FRAME_BORDER_VR这些图片接管。

2.0皮肤改进意见：



2.0是不能很好的做成这样的UI的，尤其左右边框默认是中间固定两端拉伸的方式，这样毫无意义，因为中间跟其他部分没有关联怎样拉伸无所谓，而两端与标题栏、工具栏和状态栏都有个纹理连接，拉伸以后就会在接口部分出现错位尤其是与标签栏背景的联接尤为突出。如果修改为两端固定中间拉伸就能很好的解决问题。上下左右的边框设置为一样的宽度是极不合理的，上有标题栏下有状态栏已经可以代替边框了，所以边框尺寸是可有可无的，而左右边框应该可以定义更宽一些这样就能做出上图中的UI了。所以我建议：上下左右边框都能自定义宽度和拉伸方式，不束缚设计者的手脚，这样才能使风格多样化。估计2.0还会存在相当一段时间，所以请开发组慎重考虑一下。
四、
背景填充方式
WB已经做得很好了，当然咱们不是专业搞UI的，但是希望能尽量做得更好，给皮肤作者更多的发挥空间。2.0采用的是三段式填充，而WB也是三段式的，可是WB很显然有更多的参数设置。


整体背景有平铺和拉伸可选，1-8部分是保留区域，就是不对这些区域做拉伸处理，但是背景大小一变这些区域肯定要变，这个算法就很有意思了，而WB也做得效果很好，这样皮肤作者就有很大的发挥空间了，希望TW3能借鉴一下。
再说一下各元素在背景区域的分布，借用一下上图，其中1-8部分是留空部分，9区是各元素排列位置，TW好像在这方面不对设计者开放的，希望改进。
五、
图像元素、图标动画
有的人对UI并不在意，觉得能用就行以实用为主，但是像我这样的还是比较注重界面的，就好象有人把系统桌面设置为单一的蓝色觉得不错了，而现在Vista已经支持梦幻桌面了，即使这样也满足不了一些人的需求，所以我设想TW是不是走得靠前一些，做出一流的浏览器UI。
现在TW的图标往往是4部分组成，现在我建议每一个状态做成一个文件，其实很多浏览器也是这么做的。我的目的就是实现动态UI，首先每个状态可以做成多帧的，举个例子就像下图，正常状态是静止的，当鼠标悬停时通过一个动画转换到悬停状态，当鼠标按下又通过一个动画转换到悬停状态（鼠标没动）或正常状态（鼠标移走），这样图片参数就可以多加几个参数，比如BTN_HOME=home.png（8 #8帧，10 #每帧时间间隔（ms），0 # 0表示各帧顺序播放一次结束动画 1表示一直循环播放），对于按钮比较适合从一个静止状态通过动画转换到另一个静止状态，而对于背景可以做出一直循环的动画。如果设计合理绝对不会觉得界面喧闹，完全取决于设计者的素质，就像Vista的梦幻桌面一样。对于png的动画效果要比gif的好很多，实现起来比较容易，因为标签栏的页面加载动画已经有了先例了。

六、
界面布局文件
现在UI风格多样化，在设计皮肤时的原始布局就会相差很大，比如标签栏有放在工具栏上方的也有放在下方的，而用户在切换皮肤时不做调整就不会出现作者设计的效果，如果允许皮肤作者设定默认布局就方便了，目前千千静听和MT都有这样的条件。2.0的布局是放在theworld.ini文件中的，现在我建议在每款皮肤目录允许作者存放一个默认的设置这个文件TW是不能修改的，然后对布局修改以后会自动在该目录生成一个用户配置文件。在由其他皮肤切换到这个皮肤时给予提示是否应用该皮肤默认配置或上次配置，还是维持当前配置，三选一的提示窗口。
七、
按钮定义
对于菜单中的主要功能项都定义一个按钮，可放在浏览页面上方的任何位置，体现超可定制性，一定要定义一个菜单按钮，因为chrome界面没了TW2.0的菜单对老用户很不方便，增加一个按钮可替代原来的一行菜单栏体现了TW的简洁风格。
八、
最大化窗口模式
Chrome的最大化界面说实话实在不能认同，标签栏顶到显示器顶部，再加上各标签之间留下的缝隙真是奇丑无比，所以我建议TW要在标签顶部强制加入5-10像素的背景间隙，这部分或者从标题栏截取或者由作者自定义，我的效果


九、
色调调整
把色调调整应用到浏览器UI我想TW该是首创，很欣喜。但是遇到了一些问题，调来调去感觉还是没有原色效果好，调节也不太方便，下图是KMPlayer的调整界面，他分两种方式调节RGB和YUV，我用RGB调的效果感觉不好，而用YUV效果很好，我感觉TW3的调节效果介于这两者之间。TW3有色调、饱和度、亮度调整是不是还要增加个对比度调节，不要留下盲区；调整方式还有很大的改进空间，如果能像此图一样支持鼠标滚轮和数字设定就更好了，数字调整很关键，这样有利于用户之间的交流。
  
十、
2.0的一些Bug
1.标签栏中激活标签叠加于后台标签时，后台标签中的网站图标错位，3.0倒是木此问题，如图


2.标签栏中的页面加载动画不连续效果很差，半天才变化一次。
3.标签栏一列中的元素（新建标签按钮、标签、控制按钮）不共用同一个背景，每个元素都用了一个背景导致一些特殊的边框出现以下问题





十一、【2008.12.30新加】手动停止了3.0的多功能标题栏，出现了出乎意料的结果。请看图

仔细看一下，都在情理之中，3.0默认皮肤的主工具栏背景和状态栏背景都有边框元素，而取消多功能标题栏以后标题栏和四周的边框就交给了系统，而在XP下主工具栏背景和状态栏是透明不掉的，而这两背景图片的边框元素自然还保留着，就造成了图示的模样。再看一下标签栏，3.0的标签背景已没有专用的了，而是用标题栏和主工具栏的组合图片作为背景可能是为标签背景透明做准备的，标题栏背景消失以后标签栏自然下移，这样原来的标签背景就不复存在，但是此标签和原来的背景是有衔接关系的，如果透明以后就出现上图A区的断裂。标签铁定不会由系统透明了，如果标签还在主工具栏上方而主工具栏背景开启aero透明效果这样标签就成孤家寡人了。如果此背景不能由aero渲染，两头的边框元素还是取消不到，XP是铁定取消不掉的，而且标签栏背景会变，如图。看来3.0UI还有很多功课要做，我只有坐观其变了。

十二、【2008.12.31新加】不规则边框
如果能像众多播放器皮肤一样支持不规则边框，那TW的主题创作空间就更大了，当然浏览器跟播放器应用方面差别很大，但是如果对边框进行合理的不规则化还是有很大的改观的，不妨看看WB主题很多是不规则边框而且效果很好


十三、【2009.01.06新加】支持PNG透明背景
     VISTA下aero效果是随主题变的比较单一，修改皮肤后透明背景不受影响，如果支持PNG的自身透明度就会使风格多样化而且不限于VISTA，XP也能享受到绝好的效果。可能会增加系统开支，但是现在的机器配置都提升了是不是可以考虑开发此功能，以性能优先考虑的用户可以关闭此功能，各取所需吧！

十四、【2009.01.20】智能设置UI色调
       对页面颜色进行分析，根据页面色彩动态调整UI色调，只是大胆设想一下，估计也不会太难实现，如果有空闲不妨尝试一下




[ 本帖最后由 fghxy 于 2009-1-20 21:23 编辑 ]

审美疲劳

深夜抢沙发啊

hblf

楼主的精神可嘉啊 嘿嘿
刚刚下了2.0的ctp来用 当年的我还没开始泡坛子 没来得及尝鲜 现在算是补补
发现2.0的ctp跟正式版 改动还是蛮大的 2.0ctp也没菜单栏的那些东东 不知道3.0的正式版 会不会像当年那样 没了菜单栏的确不太适应还

fghxy

原帖由 hblf 于 2008-12-27 23:39 发表 http://bbs.ioage.com/cn/images/common/back.gif
楼主的精神可嘉啊 嘿嘿
刚刚下了2.0的ctp来用 当年的我还没开始泡坛子 没来得及尝鲜 现在算是补补
发现2.0的ctp跟正式版 改动还是蛮大的 2.0ctp也没菜单栏的那些东东 不知道3.0的正式版 会不会像当年那样 没了菜单 ...

这个问题是我提的十几个建议中的第一个，不知兄台有没有更好的解决办法
1、标题问题
缺少了标题栏的chrome总是感觉缺少了什么，可能是IE多年培养出来的习惯吧，但是有个标题栏还是不错的，但是chrome的UI确实很简洁，怎样有个两全其美的办法，我建议显示在状态栏，当鼠标有动作时比如指向链接时这时状态栏显示链接地址，在状态栏空闲时就显示标题，也就是在不影响使用时让状态栏见缝插针的显示标题，但是显示标题的长度应该能让用户自定义

hblf

没啥办法 ctp就是ctp  只能等着后续版本啊  既然2.0ctp是这样 那么3.0ctp是现在的样子 我可以理解了 嘿嘿 不着急 有的是时间 而且我对现在的2.3完全满意的 功能和资源各方面

netac

一、在IE内核浏览器中，滚动条是页面内容的一部分，不受浏览器外壳的控制，如果自己做网页的滚动条可能导致很多的问题，得不偿失。
二、会改进的
三、TW支持多像素的边框，支持图片做为边框
四、WB的主题制作非常复杂，TW的皮肤制作较为简单。而区别大概就在这些地方。TW的背景支持5种填充方式，已经能满足绝大部分的需要。如果有些实在无法满足，到时候会考虑加入自定义左右区域的参数的。
五、这种效果会增加资源占用，同时开发量也不低，带来的效果可能并不大（因为这对皮肤制作者的要求太高了，将这些效果运用地比较好的皮肤将会很少）。暂时可能不会加入。
六、已在计划中，目前的皮肤也能看出端倪 - 皮肤能决定标签栏放在哪里。
七、已在计划中
八、目前的皮肤支持就能实现。
九、调节时显示出具体刻度可以加上
十、 2.0的皮肤支持改进不能导致对现有皮肤有大的影响，所以有一些在2.0上就无法改进了。有些可以尝试改进。

fghxy

谢谢netac，再折中谈一下第三个问题
仔细看了一下3.0的皮肤元素，像标题栏的图像

没有黑色边线，实际的效果还是在四周加了一圈的黑线，如图

这样既麻烦，也会出现副作用，尤其在带有纹理的皮肤中。做上图分割后，在组合时按此拼接完全没必要再添加四周的边框了（不管是色彩填充还是像素图片），VS和WB主题都是这样做的。

[ 本帖最后由 fghxy 于 2008-12-29 10:04 编辑 ]

netac

设置边框=0即可。

fghxy

哦，变动挺大的，skin.ini注释什么时候能出来啊好方便研究一下

april

大叔好专业啊

412268499

孟达兄果然是有研究的

沉沉暮霭

看完之后汗颜啊，我决定不灌水了，要好好活，做有意义的事～～～