‘网页重构’ 分类的文章

  • 页面重构中的模块化思维

    “模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

    什么是模块化？

    对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

    先看一下百度词条是怎么解释“ 模块化 ”的：

    模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

    相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

    页面制作为什么需要模块化？

    站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

    2010.01.18 / no responses / 分类: 网页重构, 设计制作

  • 你是一个职业的页面重构工作者吗？

    做为一个专职的页面重构者， 我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

    单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写 HTML 和 CSS ”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

    跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

    2009.12.31 / no responses / 分类: 网页重构, 设计制作

  • 输入框的大小

    开始的时候我写了个标题：输入框的高度，再一想单讲输入框的高度实际上是没法限定的，输入框的高度取决于需要输入的文本的多少、输入框的宽度这2个因素。
    　　我简单的把输入框归为以下几类：搜索、表单、地址栏、状态栏类；微博、IM工具聊天输入域、短评输入域、自我介绍；博客文章编辑、大段文字输入。

    　　对于第一类这样的输入框似乎是没有什么规则可依的，google.com、g.cn、baidu.com等等这些搜索引擎的输入框貌似都是随性而为的？
    　　好事的对比了一下：google最多允许输入2048个字符而百度最多只能输入100个字符，这也导致了google的输入框要明显比较百度宽许多；g.cn的输入框高度现在已经调整到和百度一致了而google.com还是系统默认的25px。
    　　 我的猜想是这样的：g.cn的调整在于在同等px下汉字要比英文略高一点，因而google.com采用了系统默认的25px高度，而g.cn后来意识到 这个问题调整到了跟百度一样的28px？但是就搜索引擎而言，关键词一般都不会太长为什么google.com的限度是2048个字符呢？木有想明白
    　　对于第三类大段文本的输入框实际上也没有什么可说的，简单说就是刨去必要的功能按键之后其他的区域都是为输入服务的，如果文本长度再大的话就采用下拉条的方式。这个新纸模型大概是来源于我们的纸质笔记本了。

    2009.11.18 / no responses / 分类: 网页重构, 设计制作

  • 由黄钻等级图标处理引发的思考

    null

    在实际工作中，图标类的应用非常广泛，如同数组般的等级图标更显其特殊性。下面要共同探讨的两个方向，以什么方式实现及怎么更好在贴近项目实际更好地实现并供应用。

    假设：业务的用户等级共有10个，加上大小2种视觉尺寸的图标，还有“过期未续费用户”的表现，共有38个图标需要入库供调用（如下图）。

    null

    在项目的CSS框架研发中，会有几个key作为考虑：请求数、代码量、兼容性、图片文件大小、是否可并为组件模块且方便逻辑性实现。

    1. 众多不同等级的图标在不同方式的广泛应用时，是否会产生过多的文件请求；
    2. 等级图标的代码在实现上是否会使用过多的代码，且页面上真实应用的只是少量代码，从而造成代码臃肿；
    3. (x)html+css输出的图标应用到页面中，是否和页面上其它元素兼容，否则将为达到兼容目标而增加一系列代码；
    4. 如果各图标合并后，权衡项目应用的实际情况，图象文件是否会过大而消耗带宽；
    5. 图标的HTML固定，className命名中的某个数字命为作为变量，通过修改变量来达到表现效果。

    回顾之前的出现的处理方式，可以归总为三种：

    1. 前景图的插入
    这应是最原始的处理方式了，将众多单个等级的图片有序命名存放到一个目录，由前端页面应用，通过修改文件名的方式更换不同的等级显示。在实际的用户列表页面中，因为不同的用户通属不同的等级，那么，就会显示不贩等级图标，如上面假设，就会同时产生38个请求。且在项目的维护上，极易存在瓶颈。假设根据需目需要对图标文件更换存放目录或更改其尺寸大小，那么需要大面积对所有应用过的开发 template文件排查处理（更改URL，宽高定义，文件名等），很多情况难以维系在可控范围。

    2009.11.15 / no responses / 分类: 网页重构, 设计制作

最近文章

最近评论

分类目录

紫枫印迹

2010年三月
一 二 三 四 五 六 日
« 二    
1234567
891011121314
15161718192021
22232425262728
293031  

标签云

banner CSS+HTML css2.0 HTML5 SEO SNS User Friendly2009 VIP web 中文手册 互联网 交互 交互设计 产品 产品设计 产品设计师 体验 信息架构 制作网页 前端开发 命名规则 图片居中 垂直居中 小广告 小技巧 手机网站开发 按钮 支付宝 李开复 流程 用户习惯 用户体验 用户界面 用户研究 用户访谈 瞬间的设计 网站运营 网页设计 背景 行动 视觉设计 设计 设计师 身体语言 页面重构

用户体验设计(UED)

紫枫友情收藏

86ue_rss

设置