从版式与交互设计的角度来看前端重构
Author：zhoulujun Date：
前言：
看着这个标题，貌似是设计师+交互设计师+产品经理等的活，前端不就是 UI代码实现，能够前端后端跑通不就行了么？
但是，俺这个公司项目，是没有正儿八经的交互设计师、UI设计师、产品经理……
作为前端，不管怎么样，用户看到眼里的最终结果——最后一道工序是出自前端之手。起码用户反馈bugger、吐槽体验不好，第一手还是转交到前端不是么？
UX看起来好像跟代码关系不是很多，但是想做好是需要花时间花心思的，当然也离不开代码技术的支持。但是，很多公司很多项目都只追求数量，不停的需求迭代，开发新功能，开发时间有限。所以开发计划里面没有排UX的时间，他们的时间只够你开发功能的。这个时候希望大家在开发功能的时候可以顺手做一些能做到的UX优化的事，至于更多的，时间不允许的话，我们也只能just so so了
作为有点点设计经验的前端工程师，或者作为有些许最求的前端工程师，起码，不能让产品太糟心不是，最起码得喊一句：提升用户体验，人人有责。但代价也是沉痛的——就是没完没了地加班咯……
不扯这些没用的玩意了，不管怎么样，还是要好好学习，天天向上！
先来弄点概念——当然，这也是我看到的，整理拼凑一下记忆而已——非本人原创哈。
版面设计与用户习惯
版面设计是平面设计的一部分，其旨在处理页面上视觉元素的排列。它根据构图的组织原则来实现特定沟通目的。
版面设计决定文本和图像的整体布局及媒介大小或形状，这一级别的设计需要智慧、感知力和创造力，并且需要设计者不仅受到文化、心理学的影响，还要能根据文档作者和编辑的希望传达并强调特定主题。
其就是把想要展示出来的信息 排版，让其美美哒而已！
排版：在固定版面内，排版(Typesetting) 摆置各种不同类型的资料，如数字、文字、表格、图形和影像等等，以最合适的方法呈现。
就是把文字、插画和照片等各种信息，整理的更有条理，易于人们阅读和理解，并在一定的版面里排列的技术。
如果说排版，网上给你的答案有（排版套路）：1、上下分割型。2、左右分割型。3、竖向排版。4、满版型。5、中轴型。6、并列型。7、对称型。8、曲线、斜置型。9、重心型。10、自由型。11、并置型……
然后去套这些板式的 适应场景，但是这样，只是知其然而不知其所以然。这是一个有最求的理想主义者（diaosi）该干的事情吗？
页面版式原理--比例
美的比例是网页设计成功的基础，好页面的首部、菜单、页面和底部的合理安排和选择,首先取决于良好的比例!
对称原理
对称原理：宇宙中，结构相同的物体稳定存在的寿命与对称性成正比。
这个原理的意思是：所有物体，对称越完美，其稳定性越好，更适宜外部环境生存，不易损坏，自然寿命也最长。
什么是美？
大陆学者易万成对美的阐述：即人对自己的需求被满足时所产生的愉悦反应的反应，即对美感的反应。
美感的本质是生命对有序而丰富的信息趋利避害的条件反射。
美可以作如下定义：美，是生命体对自我和外界更能适应生存要素做出选择的一种本领，是意识的愉悦感觉。
这些美无不透露着符合生存的需求和要素，甚至包含了繁衍的能力，这些都是与生存息息相关，哪怕是延伸的经济实力也嬗变为一种美，因为与生存相关啊。
大眼睛比小眼睛更美，因为大眼睛视野开阔，适应生存的能力更强，所以大眼睛比小眼睛美，人类对大眼睛做出本领选择，自然就有了愉悦感，就是美；
以女性胸部丰满为美，是与繁衍的后代哺乳相关，也是生存的要素与选择，女性丰满的胸部，自然就是一种美，是一种愉悦。
基于以上两点，别说电视剧这么拍，游戏是这么玩的，连动漫也是这么设计的（**权主义者求放过——屌丝癖好）。
当然这不是绝对的，比如亚洲黄色肤色，以吃的白白胖胖为美，欧美现在以有时间晒阳光浴而造就的古铜色为美，非洲的某些部落以黑为美，但是现在都是以为白美（意识形态的改变），顺便安利下之前的爽文《以胖为美的根由—中世纪时中西的审美标准》。
对称为何美？
我们说对称是美，是因为对称结构具有稳定性，利于稳定存在和存续时间更长，对于生命来说，是更适应环境生存，更健康，寿命更长。正因为符合生存需要，所以意识里，对称是美，看到和选择对称就有愉悦感觉。这是一种意愿，一种快速选择的表达。美是一种意识，而意识的目的是生存选择，即趋利避害的本领。利于生存就会本能的选择，快速选择、表现为满意、满足，心情的愉快，这就是愉悦感。
例如，向日葵围绕太阳转，目的是为了获得更多的阳光，利于其生长，这是趋利避害的选择，是原始的本领意识起源。人类以绿色为美，因为绿色代表植物色，植物能提供食物和新鲜的空气，适合人类生存，所以绿色是美的，看到绿色就有了本领的愉悦感。
同样，人类以整洁为美，因为整齐意味工整，具有秩序，存在对称美，而清洁意味病毒、病菌少，利于健康和生活，所以也是美，有愉悦感。
我们说一个人很美，首先是五官端正、身材匀称，这是对称美；
对称，也许是中国人最喜欢的美。古语有云：“夫美者，上下、内外、大小、远近皆无害焉，故曰美。”里里外外皆均衡妥帖，方为“美”。对称即是这样的美。
建筑师梁思成曾说过：“无论东方、西方，再没有一个民族对中轴对称线如此钟爱与恪守。”
放眼中国的建筑，无论是宫殿、庙宇、亭台、楼阁、园林无不有着对称之美。
寻常百姓家住的院子，也是对称分布，内里是长幼有序，不慌不忙的秩序。家中的座椅、摆设，均要成双成对，从不含糊。
器物上的纹样，最喜对称，仿佛无限的循环；
诗词，“天对地、日对月、楼对阁、晚照对晴空
传说中的“三庭五眼” 一看就是个 “瓜子脸、鹅蛋脸”——所谓的最美的脸形
古代审美：瓜子脸，柳叶眉，樱桃嘴，明眸善睐 | 柳叶眉，杏核眼，樱桃小口一点点。
黄金比
自古以来,公认为最美的比例是黄金比(黄金分割)
人类对"黄金分割比"(简称"黄金比")的应用，可上溯到4600年前埃及建成的最大的胡夫金字塔，该塔高146米，底部正方形边长为232米(经多年风蚀后，现在高137 米，边长227米)，两者之比为0.629≈5：8；在2400年前，古希腊在雅典城南部卫城山冈上修建的供奉庇护神雅典娜的巴特农神殿，其正立面的长与宽之比为黄金比；于1976年竣工的加拿大多伦多电视塔，塔高553.3米，而其七层的工作厅建于340米的半空，其比为340： 553≈0.615。
公元前4世纪，古希腊数学家欧多克索斯，他第一个系统的研究了这一问题，他把长为L的线段分为两部分，使其中一部分对于全部之比，等于另一部分对于该部分之比，即黄金分割之比——取AB线段的二分之一作垂线与点B得BO，取O为圆心，BO为半径作圆与AO交于点C，AB为长边，C为短边，它们的比例既为黄金比。
黄金分割概念最早提出者是毕达哥拉斯，据说有一天，毕达哥拉斯走近一家铁匠铺，觉得打铁的声音非常动听，他细加研究发现，这声音的节奏富有规律，用数学的方式表达出来，具有一特定比值，这就是黄金分割值，其精确比值为：1:1.618。
可能一个长期打铁的匠人，打铁的声音是一种噪音，是外部环境对人体的干扰。打铁的匠人为了适应打铁声音，必须不断的改进用锤子的频率，使得发出的声音和节奏与人体相关的心理频率，如心率、呼吸频率等，吻合黄金分割数值。这样，打铁的声音就不再是噪声，而是音乐。
中世纪的意大利数学家斐波那契在《计算之书》中提出了一个有趣的兔子问题，从而得到一个数列，即：1，1，2，3，5，8，13，21，34┅┅
后来被称为斐波那契数列，数列从第三项起，相邻两数之比，即：2/3，3/5，5/8，8/13，13/21,...的近似值都趋向于0.618。
欧洲文艺复兴时期，黄金分割广泛运用于美学中，绘画、雕塑、建筑都有黄金分割的身影，因此，维纳斯的雕像、达芬奇的绘画都具有黄金分割的应用，自此，黄金分割更加神秘和神圣化
页面版式原理--力场
凭借人类敏感、细微的感受力，可以觉察到，页面中存在于上部的物体与下部的物体，存在于左边的物体与右边的物体，给人以不同的感受，受重力经验的影响，下图中A有沉稳、凝重之感，版面B则像轻气球浮在空中，受习写习惯方向的影响，版面C使人感到舒畅，版面D则感到圆点走到了头，顶住了。版面F充满向外的力，开阔而大气。版面G充满向内对抗的力，形成紧张对峙的气氛，版面H中图形由深处逼向浏览者，使人震动、兴奋，版面J、K中的图形则从近处向远处运动，悠远而梦幻，使我们感觉到一条潜在的导线，是它引导着人们的视线在版面中运动，指引着人们先看什么，后看什么。
一个平面有四条边，四个角，人的视线顺其周边运动，会在角上停留片刻，然后继续顺周边运行，并自然的感受到中心点，这就形成了一个潜在的结构图（如下图），当我们将一个点放在水平中铀和垂直中铀以及其它结构线上时,会给人稳定、舒服的感觉（如图中的A、B、C），当点被放在偏离结构线的位置，则会产生新颖、别致的效果，从这点引出水平线和垂直线，与周边相交后形成的四个长方形，它们之间的形状、面积差异越大，版面越生动，反之则呆板（如图F）
《网站制作中的页面版式原理--力场》这篇文章的原文来源地址google都找不到了，知道的留意告知一下。
其实这方面，可以多跟摄影师学学，起码去给妹子拍照也好，比如《摄影构图的3个底层原理，你get了吗？》
阅读规律不容忽视：
阅读一般是从上到下，从左到右的。用户往往忽视右侧边的内容，大致的扫一眼而已，因此不要在右侧边下太大功夫。应该把内容栏放在用户注意力高度集中的左边。
F式布局简介
F式布局是一种很科学的布局方法，基本原理依据了大量的眼动研究。
一般来说，用户浏览网页的视觉轨迹是这样的——先看看顶部，然后看看左上角，然后沿着左边缘顺势直下….而用户往往不太注意右边的信息，这是不是有点像字母F?据此，我们习惯性的把重要元素（诸如品牌Logo，导航，行为召唤控件）放在左边，而右边一般放置一些对用户无关紧要的广告信息。
F式布局能够奏效的原因，在于F式布局符合用户的浏览习惯，更自然。符合“从上到下，从左到右”的阅读模式。
改版案例：
像这种一眼看的就不合适的，就不提了
你拿个后端与运维童鞋弄的页面，改一下有啥好说的呀（^_^）
F式布局与重心调整
这个改的也不是非常棒，但比之前效果还是有非常显著的提升的。
整改前的问题
之前编辑面板，预览图在最上，sql在下边，右边是样式编辑。貌似还行，但是，产品编辑，最主要的功能是配图！
配图最重要的是配各种参数和写SQL。但是尴尬的就是，下面写了sql，你有滚动到头部去看预览。SQL信息写多了也得滚动。
基本信息其实可以不填的。
整改后：
图一为单SQL模式
sql编辑器 自动最大化，让用户去写。用户可以自己拖曳预览界面与配置界面大小。
sql大小与编辑器高度纸币大致为黄金比（在16：9屏幕下，大部分屏幕都是如此，参看电脑屏幕纵横比Aspect Ratio 标准为什么是16:9》),
左右比为对称，当然，用户可以拉伸，采用flex布局，右边flex：1，左边设置一个初始宽度，设置最大宽度。
左边，让用户聚焦 图表配置，配置完成后，执行，检查一下右边结果对不对。
右边上下为对称。形成一个三角构图（三分法横向排版）。
切换图表，之前就是一个小icon，单独标蓝，放右边，降低学习成本。图表标题加错。
图2为多SQL，自动排列，当SQL收起，flex弹性布局，自动分配高度。
flex：1，等比高度，注意设计一个最小高度，超过最小高度，父容器滚动。
不管这么样改，你喜欢就好。但是一定要注意，你想让用户看到什么，这样会不会违反用户直觉。
采用这个原则，同样的调整还有场景模型和接入。
其实这些，都有一定规范和标准 可以参看。上面的概念只是一个引子（这些玩意，写个上千篇文章也谈不完）。
UI规范优化：
之前在顺丰金融的时候，整理过《UED团队规范设计参考及建议》。
现在成体系的有很多参考，比如：
https://material.io/design/introduction
https://ant.design/docs/spec/introduce-cn
公司里面，也有很多多，顺手从群里点一个链接看看
原则
设计上的大是大非，不必多说，随便抄点东东瞅瞅：
http://coral-design.pages.oa.com/#/指导原则?id=section-导言
清晰（Elegant)
简单直白：去掉多余元素，突出核心数据，帮助用户在复杂分析场景中快速获取信息。
层次分明：结构逻辑严谨，元素层级清晰。可参考倒金字塔法则，以重要性递减的顺序呈现信息，核心功能、高频功能优先展示。
明确（Explicit）
表意精准：使用数据化图形或文字明确客观的表述内容，避免模糊表达，帮助用户获取准确信息。
快速反馈：行为即有反馈，操作即有结果，通过视觉元素呼应用户，减少用户产品体验中的困惑。
高效（Efficient）
模块组合：按照原子设计的原则构建设计组件，使各设计元素可以按照根据需求和规范拼装成新的组件，提高可维护性。
可见易取：通过视觉样式降低用户使用产品时的理解成本，减少用户记忆负担与操作成本。
吸引（Engaging）
视觉愉悦：考究的设计、合理的图形化元素可以吸引用户，提升视觉体验和阅读舒适度，激发用户达到新的理解高度。
品牌认同：可靠和稳定的品牌语言，可活得用户的认同、信任，提升满意度和关注程度。
这四个点，其实要做出来也是”台下十年功“的玩意儿。
改版案例
调整前与调整后的——这个是没有画新的UI图再改，大部分都是直接代码DIY，搞出大致的效果
颜色感觉不协调，五颜六色的，花里胡哨的
第二个，给每个卡片增加阴影，增加层次感。以及各个卡片间的间距统一
细节之处
直接用占位图，把他填上。其实用户对报错内容知道个大概就行了。=
同时对于加载慢的图有内容，后台也做了配合，可以先不加载，快图全部加载完后，再去异步加载慢图。
还有loading
一些hover的效果以及动画，这些细节，算是锦上添花吧，没有不影响功能，做这些，不更精致吗
经验之谈
其实之前都是产品经理、交互设计、UI设计师，这个流程中。但是现在的工作很都是直接动手撸。
其实很多后台页面，在没有设计师的介入情况，要想把一个项目做好。
首先的就是选择好一套 icon库、UI库，如：bk-icons、MagicBox/TDesign
然后根据项目工程，选择一套配色。这里不一定就非得一次性完全定好（毕竟是变量），可以先列出来，然后后面再去调整下：
千万不要一个项目好几套 UI库、icon库（接手后，流泪满面）。
工作之余，看看摄影构图（妹子人物也行）、板式设计方面的东东，调理下神经
交互体验优化
这个标题的概念也非常大，比如搜个设计原则《设计原则总结：最全的交互设计原则和理论汇总》
格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则
个人感觉其实就是围绕一个目的：快速响应用户的需求以满足其期待。
其实更多的工作可能是在：板式设计上，让用户一套操作下来，不烧脑，快速完成流程。
使用畅快-及时响应
系统应该通过在合理时间内的适当反馈，向用户通知正在发生的事情或者当前的状态。
快速响应的网站提供更好的用户体验。用户期待内容快速加载和交互流畅的Web体验。
加载流畅
最基本的，比如首屏加载——首屏加载是用户体验中最重要的环节之一，可能没有之一。
如果一个页面完成首屏加载需要5秒以上，可能用户下次就从心理排斥打开这个页面。换言之，首屏加载时间对用户留存率影响很大。
比如前端SPA（single page web application）直接打包程一个文件，一次来个10m以上的js。这个必定是要优化的——即使你的产品可能只在内网访问。
改版案例
之前的系统，存在非常明显的问题，
直接使用vue-cli打包，导致首屏加载的js 18M
图片没有处理，首屏css背景图近2M，各类icon 太多——图片压缩、雪碧图、icon库管理icon、http2多路复用
请求的接口数据，冗余数据太多（可能有些童鞋可能select * 直接回吐)——前后端商量 数据接口，前端熟悉数据流（要啥数据，传啥数据
接口太分散，一个页面需要非常多接口去组装才能最终渲染出——可以合并部分接口，已结先渲染空白数据再等请求回填
页面入口到最终陷入页面，层层路由跳转……
从前期的空白页面，到全局loadng（APP入口），到home页面loading，到业务入口loading，到业务loading——各种华丽的loading
本人就是默认直接跳到访问最多的页面（记住上次的访问页面，再次进入直接跳）
这个实现起来很简单，就是webpack拆包、压缩、缓存、CDN等配置，第二个是 路由、组件 异步加载。这个怎么实现就不在这里讲了——直接搜首屏优化。当然这仅仅是技术上能做的。
其实同样的操作加载时间，还可以通过设计与交互的改动，减少用户的慢的感知。这个准备单独出一篇文章。
操作流畅
其实跟多的优化项是操作上的卡顿，比如导航栏，业务切换选择器，这个关键的位置卡顿，体验极不友好。
这个换成蓝鲸的magicBox的选择器，启用虚拟滚动，瞬间丝滑起来。
像table、Treee 都可以通过虚拟滚动解决。
希克法则-化繁为简
一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为反应时间 T=a+b log2（n）。
T=作出决定的反应时间
a=与做决定无关的总时间(前期认知和观察时间)
b=对选项认识的处理时间（从经验衍生出的常数，对人来说约是0.155s）
n=备选选项的数量
概括即：选项增多，做出决定的时间就是会增加。
其实就是化繁为简。据传，乔布斯与其学徒黎万强都是对设计的简洁性方面的追求是极度偏执的。
比如之前的loading，也可以算得上化繁为简吧。再来讲一个案例
改版案例
之前的编辑页面，可以选择的操作太多。比如编辑的时候，切换业务，切换编辑的项，都需要做逻辑一堆的逻辑处理。这样，开发的代码量大大的增加。代码量增加，那么bugger的出现概率也会增加。
适当地隐藏一些功能
类似的操作，可以做很多。
减少不必要的用户提醒与思考
直接给改变后的的结果
与其让用户操作后再提示，不然直接操作前禁止掉。或者干脆直接拿掉
这样无论是界面还是代码，都简洁许多
一致性原则
对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同一用语、功能、操作保持一致。
结构+操作一致性
保持一种类似的结构，新的结构变化会让用户思考，规则的排列顺序能减轻用户的思考负担；
能让产品更新换代时仍然让用户保持对原产品的认知，减小用户的学习成本；
改版案例：
直接给改版后的效果。虽然看起来还是不很高大上——我只是个码农呀！顺手调整下样式，还不够？
又是十一点了，还是打车回家，先写到这里
这个文章拖的蛮久了，先发了先吧。还有很多东西写，看反馈再来补充吧。
参考文章：
网页设计中的F式布局：https://www.uisdc.com/understanding-the-f-layout-in-web-design
您的【用户体验优化方案】到了，请签收~ https://segmentfault.com/a/1190000016271004
为什么黄金分割是最美的？依据是什么？ - 若漂的回答 - 知乎：https://www.zhihu.com/question/19601018/answer/1245185430
为什么黄金分割是最美的？依据是什么？ - 华龙的回答 - 知乎 https://www.zhihu.com/question/19601018/answer/711714887
为什么黄金分割是最美的？依据是什么？ - 文庫君Zed的回答 - 知乎 https://www.zhihu.com/question/19601018/answer/461423566
UI进阶干货-尼尔森十大交互原则 https://zhuanlan.zhihu.com/p/71773038
游戏交互设计】希克法则：多“项”维度下的化繁为简 https://blog.nowcoder.net/n/1939495f80ef4ea9a56bfff80b9d75eb?from=nowcoder_improve
GameUI如何正确的化繁为简？ http://www.gameuekey.com/1832.html
转载本站文章《从版式与交互设计的角度来看前端重构》,
请注明出处：https://www.zhoulujun.cn/html/design/ID/2021_0608_8638.html