您现在的位置是:百科 >>正文

网站框架设计

百科38516人已围观

简介网站框架设计不是画几张线框图就完事。我见过太多项目,需求文档写了三十页,Axure里拖了上百个组件,上线后用户连注册按钮都找不到。问题出在源头:框架没对准内容逻辑,只堆了页面。 先想清楚一件事——用户 ...

网站框架设计不是网站画几张线框图就完事。我见过太多项目,框架需求文档写了三十页,设计Axure里拖了上百个组件,网站上线后用户连注册按钮都找不到。框架问题出在源头:框架没对准内容逻辑,设计只堆了页面。网站

先想清楚一件事——用户来你网站干什么。框架去年帮一个做工业配件的设计客户改版,他们原先把“公司简介”放在导航第一项,网站访问量最高的框架却是“型号查询”页面。后台数据显示,设计70%的网站用户从搜索引擎直接落地到产品详情页,看完参数就跳出。框架他们根本不关心公司成立于哪一年。设计后来我们把导航改成“查型号→看参数→问库存→联系销售”,首页只留搜索框和最近浏览记录。跳出率降了18%。

导航结构要跟内容层级对齐。不是你觉得什么重要就放前面,是用户找什么方便就放什么。常见错误是把导航做成公司组织架构图:产品中心、解决方案、新闻动态、关于我们。用户脑子里想的是“我要找那个能装在我设备上的传感器”,不是“我要看解决方案”。把“解决方案”改成“按设备找”,点击率翻了一倍。

页面之间的跳转关系比页面本身更重要。我习惯用“路径法”来验证框架:从首页出发,点到任何一个具体内容,不超过三次点击。超过三次,用户就迷路了。有个做在线课程的平台,课程详情页藏在“学习中心→我的课程→已购课程→课程详情”下面,新用户根本找不到试听课入口。后来把试听按钮直接放在首页推荐位,注册转化率涨了27%。

移动端和桌面端的框架不能简单缩放。桌面端可以放横向导航栏,移动端就得收进汉堡菜单。但汉堡菜单里的项目顺序要重新排——高频功能放前面,低频的收进“更多”。有个做本地服务的客户,移动端把“在线预约”藏在菜单第三层,结果电话预约量是线上预约的三倍。把预约按钮做成底部悬浮条之后,线上预约占比从12%升到41%。

内容区块的优先级靠视觉权重来体现。不是所有内容都值得占首屏。首屏只放三样东西:你是谁、你能解决什么问题、下一步点哪里。其他内容往下滚。我见过一个SaaS首页,首屏塞了轮播图、四个功能图标、两段公司介绍、一个视频播放器。用户滚动深度中位数只有23%。砍掉轮播和视频,首屏只留一句话标题加一个注册按钮,滚动深度升到61%。

框架设计要留出扩展位。别把导航塞满,别把首屏排死。新功能上线时,你得有地方放。我习惯在主导航留一个“更多”下拉,在首屏下方留一个可配置的推荐位。这样加新栏目不用重做框架,改配置就行。

最后说个反常识的:框架设计阶段别急着画高保真。用纸和笔,或者白板,把页面方块和箭头画出来就行。高保真会让团队纠结按钮圆角是4px还是6px,忽略了大结构的问题。我见过一个团队花两周打磨首页视觉稿,上线后发现用户根本不用首页,都是从分类页进来的。框架错了,视觉再美也是白搭。

框架设计就是给内容搭骨架。骨架歪了,肉再多也站不住。

Tags:

相关文章

  • 防火墙webshell

    百科

    某天凌晨两点,某金融公司的安全工程师老周收到告警——生产服务器上某个PHP文件被修改了。他打开日志一看,攻击者上传了一个伪装成图片的webshell,文件名是`logo.jpg.php`。防火墙规则 ...

    【百科】

    阅读更多
  • 11岁发现西游记漏洞

    百科

    我11岁那年,蹲在我爸的书房里翻那本硬壳精装《西游记》,封皮都快被我翻掉了。那天看到第二十七回“尸魔三戏唐三藏”,我盯着书页愣了半天,突然觉得哪儿不对。 白骨精变的那三样东西——村姑、老妇、老翁。她变 ...

    【百科】

    阅读更多
  • 垃圾大专website

    百科

    “垃圾大专”这四个字,是我在那所学校的贴吧里第一次看到的。发帖人贴了张图:教务系统首页,正中间一行楷体字——“欢迎访问XX职业技术学院网站”,下面一排链接,三个里有俩打不开。他配文:垃圾大专,连网站都 ...

    【百科】

    阅读更多


友情链接