首页

兰亭妙微|网页字体排版基础规范:让文字更易读、界面更专业

涛涛 网站设计文章及欣赏

作为深耕网页设计与品牌视觉的专业团队,兰亭妙微在大量 Web 端项目中反复验证:字体排版是网页设计的底层骨架,直接决定阅读舒适度、信息传递效率与品牌专业度。遵循标准化字体排版规范,既能提升用户体验,也能让设计与前端对接更高效、落地零偏差。

兰亭秒微| PC 网页 UI 设计 12 大趋势 下

涛涛 网站设计文章及欣赏

兰亭秒微作为专注于PC 端网页设计、品牌官网定制、B 端系统界面的设计团队,长期跟踪国际前沿设计趋势与技术演进。本篇基于 2015 年全球 PC 网页 UI 主流方向,结合原文核心观点,为你完整解读下半部分 6 大趋势,还原当年设计浪潮的底层逻辑与落地要点。

2015 PC 网页 UI 设计新趋势(下):体验升级与技术赋能的双重革新

涛涛

在数字化浪潮席卷的 2015 年,PC 网页 UI 设计正经历从形式探索到体验深耕的关键转型。继上篇分享的七大趋势后,本文将聚焦剩余五大核心趋势,深入解析立体表现回归、动态交互优化、字体革新、SVG 应用及视频融合如何重塑网页设计生态,为设计师提供兼具前瞻性与实用性的参考方向。

高端 UI 设计公司凭什么比模板更贵?

清阳

在 UI 设计领域,“模板” 似乎成了 “高性价比” 的代名词 —— 几百元就能买到成套的界面组件、几千元就能获取适配多端的设计素材,而高端 UI 设计公司的报价往往是模板的几十倍甚至上百倍。这种价格差距的核心,从来不是 “设计界面的数量” 或 “视觉精致度的高低”,而是 “价值维度的本质不同”:模板是 “标准化的素材堆砌”,解决的是 “有无界面” 的基础问题;而高端 UI 设计公司提供的是 “定制化的体验解决方案”,解决的是 “如何通过界面提升用户留存、促进商业转化、传递品牌个性” 的核心问题。高端 UI 设计的贵,贵在 “看不见的价值”,而非 “看得见的界面”。

一、先理清:模板与高端 UI 设计的 “价值底层差异”

模板与高端 UI 设计的价格差距,本质是 “标准化产品” 与 “定制化服务” 的价值逻辑差异。模板的核心优势是 “低成本、高效率”,但这种优势建立在 “牺牲个性、忽视体验、脱离商业目标” 的基础上;而高端 UI 设计的核心价值是 “精准匹配需求、深度优化体验、赋能商业增长”,这种价值需要通过 “调研、分析、迭代、落地” 的全流程服务实现,自然对应更高的成本与定价。
具体来看,两者的底层差异体现在三个维度:
价值维度
模板(标准化产品)
高端 UI 设计公司(定制化服务)
需求匹配度
通用化设计,仅支持基础修改(如换色、改文字),无法适配品牌独特需求(如医疗行业的 “严谨感”、儿童产品的 “趣味性”)
基于品牌定位、用户群体、业务场景做定制化设计,例如为高端金融 APP 设计 “低饱和色调 + 清晰信息层级”,贴合高净值用户的 “专业感” 需求
体验完整性
仅提供界面视觉素材,缺乏 “交互逻辑设计”“用户流程优化”“多端适配细节”,易出现 “界面好看但不好用” 的问题
从 “用户行为分析→交互逻辑设计→视觉落地→开发适配” 全流程把控,例如为电商 APP 优化 “商品详情→加入购物车→结算” 的路径,减少操作步骤,提升转化
商业关联性
与品牌的商业目标脱节,无法针对 “提升用户留存”“促进付费转化”“强化品牌认知” 做设计优化
以商业目标为导向设计,例如为会员制 APP 在 “会员权益展示区” 采用 “高对比色按钮 + 数据化权益说明”,提升会员开通率
这种底层差异决定了:模板适合 “预算有限、无明确商业目标、仅需基础界面” 的场景(如个人博客、小型工具类产品);而高端 UI 设计适合 “追求品牌个性、重视用户体验、需通过界面实现商业目标” 的场景(如高端品牌 APP、企业级 SaaS 系统、核心业务平台)。两者解决的不是 “同一维度的问题”,价格差距自然显著。

二、再拆解:高端 UI 设计公司 “贵在哪”?4 个核心价值维度

高端 UI 设计公司的报价,从来不是 “按界面数量收费”,而是 “按价值贡献收费”。这些价值藏在 “设计前的调研”“设计中的优化”“设计后的落地” 等环节,是模板无法提供的 “隐性服务”。
  1. 前期调研:基于 “数据与需求” 的设计,避免 “拍脑袋决策”
模板的设计逻辑是 “通用化适配”,无需考虑具体的用户群体与业务场景;而高端 UI 设计的第一步,是通过深度调研明确 “为谁设计、设计什么、如何设计”,这一步的成本占比可达项目总成本的 20%-30%,却是设计 “不脱离需求” 的关键。
高端 UI 设计公司会通过两种核心调研,为设计提供依据:
  • 用户调研:明确 “用户需要什么”
通过用户访谈、问卷调研、行为数据分析,掌握目标用户的 “使用习惯、痛点需求、体验偏好”。例如为老年健康 APP 设计时,调研发现 “60 岁以上用户更习惯‘大字体、高对比色、简化操作’”,因此设计时将按钮尺寸从 44px 放大至 60px,文字颜色从浅灰色改为深黑色,减少 “二级菜单” 数量,直接在首页展示核心功能(如 “在线问诊、用药提醒”)。这种基于用户需求的设计,能让 APP 的老年用户留存率提升 40%,而模板的 “通用化界面” 无法做到这种精准适配。
  • 业务调研:明确 “商业需要什么”
与品牌方深度沟通 “核心业务目标、关键转化路径、品牌个性定位”,让设计服务于商业增长。例如为高端生鲜电商 APP 设计时,业务目标是 “提升高客单价商品的复购率”,因此设计团队在 “商品详情页” 加入 “食材溯源信息(如产地实拍、检测报告)”“烹饪建议(如食谱推荐、搭配食材)”“会员专享价提示” 等模块,用界面设计强化 “高端、安全、便捷” 的品牌认知,最终高客单价商品的复购率提升 25%。这种 “业务导向” 的设计,需要对品牌业务有深度理解,模板完全无法替代。
  1. 交互逻辑设计:让 “界面好用”,而非仅 “好看”
模板的核心是 “视觉素材”,几乎不包含 “交互逻辑设计”—— 用户点击按钮后跳转哪里、滑动页面时如何反馈、表单填写时如何提示,这些 “看不见的操作逻辑” 往往需要用户自行摸索,易导致 “操作困惑、流程卡顿”。而高端 UI 设计公司的核心价值之一,是通过 “交互逻辑设计” 让界面 “好用”,降低用户的 “操作成本” 与 “认知负担”,这也是 “体验感” 的核心来源。
例如某企业 SaaS 系统的 “客户管理模块”,模板提供的界面仅包含 “客户列表 + 添加按钮”,用户需要 “点击添加→填写 15 个字段→提交” 才能完成客户录入,且字段无先后顺序、无填写提示,导致用户录入效率低、错误率高;而高端 UI 设计公司优化后:
  • 交互逻辑上:将 “15 个字段” 按 “基础信息(必填)→扩展信息(选填)” 拆分,优先展示必填项,选填项折叠隐藏;加入 “实时填写提示”(如 “手机号格式错误时即时标注”)、“字段关联推荐”(如选择 “行业” 后,自动推荐相关 “客户标签”);
  • 操作流程上:支持 “批量导入客户数据”“从历史客户复制信息”,减少重复录入;
  • 反馈设计上:提交成功后不仅提示 “录入完成”,还推荐 “下一步操作(如‘为客户分配跟进人员’)”。
优化后的界面,用户客户录入效率提升 60%,错误率下降 70%—— 这种 “交互逻辑设计” 是模板无法提供的,需要设计师具备 “用户行为分析能力” 与 “业务流程理解能力”,对应的人力成本与时间成本自然更高。
  1. 品牌个性传递:让界面成为 “品牌的视觉延伸”
模板的视觉设计是 “通用化风格”(如极简线性、扁平色块、渐变质感),无法传递品牌的 “独特个性”—— 无论是高端奢侈品牌还是亲民快消品牌,用同一套模板设计出的界面,都会显得 “千篇一律”,无法让用户形成 “品牌记忆”。而高端 UI 设计的核心价值之一,是将 “品牌个性” 融入界面设计,让用户通过界面 “感知品牌调性”,强化品牌辨识度。
例如同样是 “购物车图标”,不同品牌的 UI 设计会传递不同的个性:
  • 高端奢侈品品牌:设计为 “金属质感的购物袋图标 + 细微的皮革纹理”,搭配低饱和的金色调,传递 “精致、高端” 的品牌个性;
  • 儿童玩具品牌:设计为 “圆润的卡通购物车图标 + 彩色渐变效果”,搭配活泼的橙色调,传递 “可爱、有趣” 的品牌个性;
  • 户外探险品牌:设计为 “硬朗的帆布材质购物车图标 + 做旧效果”,搭配深绿色调,传递 “耐用、冒险” 的品牌个性。
这种 “品牌化的 UI 设计” 需要通过 “品牌视觉体系梳理(如色彩、字体、图形元素)→界面视觉落地→一致性把控” 的全流程实现。例如某高端茶饮品牌 APP,设计团队将品牌的 “茶绿色” 作为主色调,字体选用 “柔和的衬线体”,界面元素融入 “茶叶纹理、茶杯轮廓” 等品牌符号,甚至在 “加载动画” 中设计 “茶叶飘落” 的效果 —— 用户打开 APP 的瞬间,就能通过界面感知 “自然、雅致” 的品牌调性,这种 “品牌个性传递” 的价值,是模板无法替代的,也需要设计师投入大量时间做 “品牌视觉与 UI 设计的融合”。
  1. 全流程落地支持:确保 “设计不打折”,避免 “体验失真”
模板的交付是 “一次性的素材打包”,后续如何适配开发、如何解决界面与技术的冲突、如何优化上线后的体验问题,都需要用户自行处理;而高端 UI 设计公司的服务,从 “设计落地” 到 “上线迭代” 持续覆盖,确保设计价值不被 “开发适配” 或 “后期维护” 损耗,这也是其价格中 “服务成本” 的重要组成部分。
具体来看,高端 UI 设计公司的落地支持包含三个核心环节:
  • 设计标注与资产交付:提供 “精细化的设计标注”(如字体大小、颜色值、间距、组件状态),输出 “可直接用于开发的设计资产”(如切图、组件库、交互原型),避免开发因 “理解偏差” 导致界面变形。例如为某智能硬件 APP 设计时,设计师标注 “按钮圆角为 8px、阴影参数为‘0 2px 8px rgba (0,0,0,0.1)’”,并提供 “不同分辨率的切图”,确保开发还原度达 95% 以上,而模板的 “模糊标注” 易导致开发还原度仅 60%-70%;
  • 开发联调支持:设计师全程参与开发联调,解决 “设计与技术的冲突”。例如开发发现 “设计的‘动态渐变背景’在低端机型卡顿”,设计师会同步优化为 “静态渐变 + 轻微动画”,既保留视觉效果,又适配技术限制;若开发实现的 “表单交互逻辑” 与设计预期不符,设计师会现场调整交互原型,确保体验不变形;
  • 上线后体验迭代:基于上线后的用户数据(如点击热图、停留时间、转化路径),提供 “体验优化方案”。例如某电商 APP 上线后,数据显示 “商品详情页的‘加入购物车’按钮点击率低”,设计师通过分析发现 “按钮颜色与背景对比度不足”,优化为 “高对比色按钮” 后,点击率提升 35%—— 这种 “数据驱动的迭代优化”,是模板无法提供的长期价值。

三、最后算笔账:高端 UI 设计的 “贵”,是 “长期性价比” 而非 “短期成本”

很多人只看到高端 UI 设计的 “前期报价高”,却忽略了 “长期价值回报”:模板虽然前期成本低,但可能因 “体验差” 导致用户流失、转化低下,最终造成 “隐性损失”;而高端 UI 设计虽然前期成本高,但能通过 “提升用户留存、促进商业转化、强化品牌认知” 带来长期回报,其 “性价比” 远高于模板。
举个实际案例:某互联网金融 APP 初期使用模板设计,前期成本仅 5000 元,但因 “界面混乱、操作复杂”,用户注册完成率仅 30%,月活用户流失率达 40%;后来委托高端 UI 设计公司做定制化设计,报价 50 万元,设计后用户注册完成率提升至 75%,月活用户流失率降至 15%,仅 3 个月就通过 “用户增长带来的营收提升” 收回了设计成本,后续每月因 “用户留存提升” 带来的额外营收超 100 万元。
对品牌而言,UI 设计不是 “一次性的成本投入”,而是 “长期的价值投资”:模板的 “便宜” 是 “短期成本低”,但会牺牲 “长期增长潜力”;高端 UI 设计的 “贵” 是 “短期成本高”,但能带来 “长期的商业回报”。这种 “投资思维”,正是理解高端 UI 设计价格的关键。

高端 UI 设计的 “贵”,是 “价值的合理定价”

高端 UI 设计公司的贵,不是 “漫天要价”,而是 “基于价值的合理定价”—— 贵在 “前期调研的深度”,确保设计不脱离需求;贵在 “交互逻辑的优化”,确保界面好用易用;贵在 “品牌个性的传递”,确保设计强化认知;贵在 “全流程的落地支持”,确保价值不打折扣。这些价值维度,是模板无法覆盖的,也是品牌通过界面实现 “用户增长、商业转化、品牌沉淀” 的核心支撑。
对追求长期发展的品牌而言,选择高端 UI 设计公司,不是 “买界面”,而是 “买一套‘体验 + 品牌 + 商业’的解决方案”—— 这种解决方案带来的长期价值,远非几百元、几千元的模板所能比拟。这正是高端 UI 设计公司比模板更贵的根本原因。

UI设计公司兰亭妙微打造卓越网站设计:UI 的艺术与科学

蓝蓝设计的小编

打造卓越的网站 UI 设计需要从视觉设计、用户体验设计、品牌塑造和测试优化等多个方面入手,将艺术与科学相结合,深入了解用户的需求和行为,以创建一个既美观又实用、能够吸引用户并实现网站目标的优秀网站。

ui设计分享:黄色调网站设计

蓝蓝设计的小编

以下是关于黄色调网站设计的特点和设计方法,但请注意这里的黄色调是指积极、明亮的色彩倾向,与不良内容无关。
一、黄色调网站 UI 界面设计特点
  1. 活力与热情
    • 黄色是一种充满活力和热情的颜色,能够瞬间吸引用户的注意力。使用黄色调的网站界面给人一种积极向上、充满生机的感觉,激发用户的探索欲望。
    • 例如一些运动品牌的网站,可能会运用黄色调来传达品牌的活力与动感,鼓励用户积极参与运动。
  2. 温暖与友好
    • 黄色也可以营造出温暖和友好的氛围。相比于冷色调,黄色更容易让人产生亲近感,使网站更具亲和力。
    • 社交类网站或亲子类网站可以适当运用黄色调来打造温馨的用户体验,让用户感受到社区的温暖和家庭的关爱。
  3. 突出重点
    • 由于黄色的醒目性,它可以很好地用于突出重要的元素和信息。比如在按钮、链接或关键的文本内容上使用黄色,可以引导用户的视线,提高交互的效率。
    • 电商网站常常会用黄色来突出促销信息、购物车按钮等,吸引用户进行购买行为。
  4. 情感共鸣
    • 不同深浅的黄色可以唤起不同的情感反应。浅黄色可能给人带来轻松、愉悦的感觉,而深黄色则可能传达出稳重、可靠的印象。设计师可以根据网站的主题和目标受众,选择合适的黄色调,以引发用户的情感共鸣。

 

二、黄色调网站 UI 界面设计方法
  1. 色彩搭配
    • 黄色虽然醒目,但单独使用可能会过于刺眼。因此,需要与其他颜色进行搭配,以达到平衡和和谐的效果。
    • 常见的搭配有黄色与白色搭配,营造简洁、明亮的氛围;黄色与蓝色搭配,形成强烈的对比,增加视觉冲击力;黄色与灰色搭配,显得稳重而不失活泼。
  2. 色彩比例
    • 确定黄色在界面中的比例非常重要。如果黄色使用过多,可能会让用户感到疲劳和厌烦;如果使用过少,又可能无法发挥黄色的特点。
    • 一般来说,可以将黄色作为主色调之一,占据一定的比例,但不要超过整个界面的三分之一。同时,可以通过调整黄色的明度和饱和度,来控制其在界面中的强度。
  3. 布局设计
    • 在布局上,黄色可以用于引导用户的视线。例如,可以将黄色的元素放置在页面的重要位置,如导航栏、标题区域或关键内容周围,以吸引用户的注意力。
    • 同时,要注意保持界面的简洁和清晰,避免过多的黄色元素造成混乱。合理的布局可以让用户更容易理解网站的结构和内容,提高用户体验。
  4. 交互设计
    • 黄色可以在交互设计中发挥重要作用。比如,当用户鼠标悬停在某个按钮上时,可以用黄色来显示反馈效果,增强用户的交互感。
    • 此外,还可以通过动画效果来突出黄色元素,增加界面的趣味性和吸引力。但要注意动画效果不要过于复杂,以免影响用户的使用体验。
  5. 品牌一致性
    • 如果网站有特定的品牌形象,那么黄色调的设计应该与品牌风格保持一致。从品牌的价值观、目标受众和市场定位出发,选择适合的黄色调,并将其融入到整个网站的设计中。
    • 这样可以增强品牌的识别度和用户对品牌的认知度,提高品牌的影响力。

网站设计的教程详解

蓝蓝设计的小编

在当今数字化的时代,拥有一个出色的网站对于个人、企业和组织来说都具有重要意义。那么,如何设计一个吸引人且功能强大的网站呢?下面就为您带来一份详细的网站设计教程。

网站设计之八:为什么千万别随便学国外的极简设计?

博博

很多人很喜欢国外的极简设计,先不看 Dribbble 上五花缭乱飞机稿,哪怕是博客编辑器 Wix.com 上的模板看着都很令人羡慕。为啥国外的网站都那么极简,国内就学不来呢?

十年前,我以为这是因为国民审美和设计师水平没上来。现在,我发现这件事情没那么简单啊!假想一下,你去下一个国外的极简 UI 模板来,把文字改成中文,评审时能过稿吗?

为什么千万别随便学国外的极简设计?

我估计十有八九过不了,产品经理肯定有一大堆信息、功能和运营入口要塞进去。可这应该怪万恶的资本主义,为了赚钱而不把审美自由当回事吗?


用户期待差异


尼尔森(Jakob Nielsen)和 Yunnuo Cheng 在 2016 年做过一次研究试验,发现不光是中国的公司决策层,就连中国的用户也未必就喜欢非常极简界面。

这次研究中,12 个中国人和在中国生活的外国人(应该是欧美为主)被邀请来,在 8 个网站上完成简单的任务,并且一边使用一边说出他们的想法和意图(Think Aloud)。

P.S. 这 8 个网站中有简洁的也有复杂的,对中国人展示中文,对外国人展示英文,以此形成对比。

很多外国人在使用较为复杂的网站时(被翻译成英文的中文网站),抱怨比较多。他们在中国生活,对这种网站设计已经见怪不怪了。

虽然也有人说好话,称赞信息展示明确直白,但也有人抱怨很难用的。至少大部分外国人对于复杂页面的问题比简洁页面的问题要多得多。

为什么千万别随便学国外的极简设计?

而相比他们,中国人普遍不觉得那些复杂页面有什么特别的,因为那些很“普通”、“正常”,甚至“传统”。

相反,抱怨简洁页面难用的反倒更多,例如:

“单从设计角度来看,图标、图片、布局都很好,符合很多人,至少年轻人都喜好。简单、干净,既没广告,又没有无用信息。但问题是,它也没什么有用信息——我在这些网站里看不到什么有用的东西。所有的功能介绍都只是在玩文字游戏,没有实际含义,没点真实内容。”

P.S. 以上是从英文资料的翻译。

为什么千万别随便学国外的极简设计?


中英文语言差异


中文的信息传递效率就是比英文高,我们也早就习惯了这一点。《联合国宪章》被翻译成六种语言,其中就数中文最薄。

为什么千万别随便学国外的极简设计?

2017 年,Twitter 把原有 140 个单词的限制放宽到了 280,却唯独没有把这改版提供给中文、日文和韩文,理由就是语言密度足够大了。

为什么千万别随便学国外的极简设计?

所以说,中文用户对单页信息量要求更高,这就是很正常的事了。


视觉密度差异


同样的一句话,虽然中文更简短,但是视觉密度更高啊。

为什么千万别随便学国外的极简设计?

会点排版的人都知道,视觉密度的节奏很重要,要全局考虑的。如果有一个地方的视觉密度比较高,那么整个页面的视觉密度都要匹配上才能和谐。否则一下子太疏一下子太密,就会丧失统一感。中文的间隙和比划之间的间隔都比较小,也注定了页面的其它部分为了匹配上这个节奏,不能太疏。

为什么千万别随便学国外的极简设计?

这就是为什么,把一些英文板式直接拿来填充中文会很奇怪。难怪我去一些繁体中文网站时,会感觉比简体中文网站更复杂拥挤。其实咱们大陆地区由于使用简体字,视觉密度已经比繁体字要松很多了。

为什么千万别随便学国外的极简设计?


简洁 ≠ 好用


说到这里,不是要为一些又复杂又不好用的设计进行辩解。只是说,简洁并不代表好用。当我们随口说出“少即是多”这种设计概念时,也不可忽视,凡事都有个度。看到国外那种极简设计时,也稍微自信点,简洁并不是我们唯一追求的方向。

作者:体验进阶

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






网站设计之六:4000 字快速回顾20多年的网页设计发展史!

博博

20 世纪末到 21 世纪开始,宣传品牌与产品的阵地不再局限于印刷品,电视、电台及现场活动,而是出现了网站,网站可以链接更多陌生人,而且没有时空限制。

4000 字快速回顾20多年的网页设计发展史!

1997 年的谷歌网站

美国最火的设计风格只要有人将资料放到网上,远在日本的一名中学生都可以去学习了解,所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展,但在展开内容前,要搞清楚一个问题,就是网页设计属于平面设计吗?

国内早在差不多 20 年前,建站公司就开始独立存在,所以这个问题蛮有争议,尤其是 UI 设计也很成熟之后,大家更愿意认为此学科是独立的。

4000 字快速回顾20多年的网页设计发展史!

中国建于 1994 年的第一个网页,主要对外沟通

平面设计的定义不管怎么粉饰,简单而言就是:以某种目的,将文字、图像、图形安排在一起。网页设计也是如此,唯一区别是网页具有动态,但这种动态属于若干个静态设定的切换关系,其关键帧也是平面设计。

4000 字快速回顾20多年的网页设计发展史!

2003 年时候的淘宝网

我在国内蛮早就从事网页设计工作,早年甚至可以自己独立完成网站,除了页面设计,还包括套 ASP 程序(Active Server Pages 动态服务器页面),用 table 布局前端等,当然这些技术如今早已过时。

4000 字快速回顾20多年的网页设计发展史!

12 年前史太浓独立完成的网站

因此这段历史我就是参与者之一,所以本回不仅是对搜集资料的剪裁分析,还会结合不少自身经历体验跟大家分享。

首先我们来简单回顾下互联网的发展与网页设计的演变。


国际互联网络与超级媒体


互联网发展到如今已经像空气一样存在,断网已经如同缺氧那么严重,而互联网的诞生最初跟两件事情相关。

第一件大家也许比较熟悉,就是在 20 世纪 50 年代末美国国防部高级研究项目总署(the United States Department of Defense,Advanced ResearchProjects Agency,简称 ARPA)成立了。

4000 字快速回顾20多年的网页设计发展史!

美国国防部高级研究项目总署 logo

其成立的根本原因是冷战背景下,苏联不但先于美国在 1957 年将卫星送上太空,而且世界第一枚多级远程弹道火箭发射也试验成功,因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人,所以 ARPA 是一个专门研究国防技术的“事业部”,聚合美国当时最牛的几百位科学家,研究如何将最先进技术应用到美国国防。

4000 字快速回顾20多年的网页设计发展史!

人类第一个卫星由苏联在 1957 年发射

由于这些科学家当时分散于全国各地,因为如此厉害的科学家肯定本身有重要事务,而不是放着随传随到,因此大伙无法专门聚在一起专门干这事,而是远程协作,所以就需要一个有效的远程沟通工具。

这个工具不能只局限于语言声音,还要做到资源共享,更关键的是要高效安全,信息不可被盗取,当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。

4000 字快速回顾20多年的网页设计发展史!

麻省理工科学家约翰·利克利德 

此处省略一堆过程与专业技术术语,反正如此这般,利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”(the World Wide Web)。

4000 字快速回顾20多年的网页设计发展史!

互联网时代开启

事后证明,国不国防是一回事,这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”,将他们发送到目的地后可以重新组装,也就是“分组路由”的雏形。大家了解到这个程度就可以了,再往深里说意义不大,况且我也说不清楚,

而时间很快去到 1987 年,这是第二件事情,这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件,名为“超级文件”(Hypertext)。

4000 字快速回顾20多年的网页设计发展史!

苹果 1987 年的“超级文件”软件

比如在电脑上打“设计史太浓”就可以将当时整个网络与此相关的文字内容集中起来(当时网络上的内容其实非常有限),等于是谷歌百度的前身了。

后来这个软件进化为“超级媒体”(Hypermedia),除了可以检索文字,还可以找到图形、声音、电影及电视图像。

4000 字快速回顾20多年的网页设计发展史!

苹果软件“超级媒体”软件

再然后,苹果公司将这种技术跟日本索尼公司发明的 CD-ROM(compact disc read only memory,于 1982 年发明)进行结合,变成“互动光盘”,这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中,苹果公司的工作人员往里面塞进了文字、图形、动画,而且形成一个复杂的索引架构。

4000 字快速回顾20多年的网页设计发展史!

CD-ROM 中的互动界面 

这样一来就形成一个灵活且可互动的内容库,大家可以根据需要选取想看的部分,有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑,比如“平行文本”、“多层”“矩阵”“网络系统”等,这里作很简单的介绍:

平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写,这等于如今的鼠标经过效果。

4000 字快速回顾20多年的网页设计发展史!

网页中的“鼠标经过”效果

多层就是看一个内容的时候可以看到其它相关部分,等于如今网站中的“相关推荐”。

4000 字快速回顾20多年的网页设计发展史!

网页中的“相关推荐”效果

矩阵就是将资料布局到一个网格中方便大家查询,等于现在的产品系统,新闻系统一类。

4000 字快速回顾20多年的网页设计发展史!

网页中的“产品系统”效果

网络系统就是可以联系外部信息,其实就等于友情链接一类了。

当时间去到 1991 年,美国政府开始投入资金将“互联网”引入公共学校,而经过 6 年,世界上就有 3000 万个网络用户,2000 年左右,美国就有三分之一的家庭实现了联网。有流量就有商机,于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站,变成一种宣传展示的渠道,不亦乐乎。

4000 字快速回顾20多年的网页设计发展史!

90 年代可口可乐的官网

所以最初的“互动光盘”设计其实就等于第一代网页设计。


网页设计的高速发展


1994 年时候,中国有个人因为公务出差去美国见证过互联网的神奇,回国之后辞职,在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴,这人就是马云。

4000 字快速回顾20多年的网页设计发展史!

阿里巴巴早期的网页设计样式

20 世纪 90 年代恰好是网站建设数量急剧暴增的时候,充满了商机,大家可以理解为近几年短视频暴增一样,根据回顾统计,在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。

所以用“网页”一词是因为最初蛮多网站都是静态,网站后台是后来慢慢才发展形成。

4000 字快速回顾20多年的网页设计发展史!

1997 年时候的麦当劳网站设计

但网页设计最初的暴增还没有直接为平面设计师创造岗位,因为第一代网页设计师其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来,以便有更专业的表现。

我在 2010 年时候开始从事网页设计,恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司,大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

他们本质上就是从一名开发人员入行,所以他们会从实现效果端来规划设计,跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题,也因此产生出更多更好的视觉效果,反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”,争论要点就是很多效果程序根本做不出来。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

这样的事情其实一直在全世界发生,所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久,css+div 布局就成主流了,再然后 HTML+css+js 也成熟起来,而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

这样的变化结果就是不断优化网页设计的表现效果。

那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时,最典型例子莫过于 Flash 的“死亡”。2010 年前后,懂得用 fash 建站的人非常吃香,因为人才稀缺,收入可以是我们的 2-3 倍,那时候最流行就是用 flash 做所谓的“体验馆”。

4000 字快速回顾20多年的网页设计发展史!

全 Flash 网站

“体验馆”的大致效果就是能在网站场景中做一些换部件,换颜色,或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站,开发制作费用高达 300 多万。

但好景不长,因为智能手机的崛起与 4G 通信技术的发展,互联网的主阵地慢慢往移动端迁移,而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛,而我们这一代网页设计从业者可以说见证了全过程。

4000 字快速回顾20多年的网页设计发展史!

全 Flash 网站

当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城,据说后来项目就没发展起来。

说到商城,网页设计还有一个重要的主题变化,就是从企业网站到平台网站到电子商城再到手机网站,App 应用,公众号,小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”(User Interface 用户界面)这样更专业化的称谓取代。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2013 年前后的 UI 设计

因为革命性的屏幕触摸技术的诞生,很多网站本身就可以通过触屏控制,所以从定义上来说,UI 设计可以说包含了网页设计。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2013 年前后的网页设计

随着移动互联网的不断发展其实也拔高了 UI 设计门槛,因为要考虑很多交互体验问题与技术规格标准,有点像当时乌尔姆学院做产品设计那一套,有很多理科属性的知识融入进来。

所以网页设计经过仅仅 30 年的发展,就走向细分领域的拆解,分裂出企业网站设计(偏向品牌与广告)、电商设计(偏向营销)跟移动端设计(偏向交互体验)。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2018 年前后的电商网站设计

但不管如何,这个过程中平面设计的本质属性仍然没变,只是要解决的问题更多元化,更具体了。

根据历史纪录,美国的设计师杰西卡·哈芳德(JessicaHelfand)是较早以平面设计师身份参与到网页设计中的,比如 90 年代她为美国“发现频道”设计了网站。

4000 字快速回顾20多年的网页设计发展史!

美国“发现频道”90 年代的网站

哈芳德生于 1960 年,目前还活跃于设计圈,她也许是最有资格感叹互联网设计形式剧烈变化的人之一。

4000 字快速回顾20多年的网页设计发展史!

杰西卡·哈芳德

本期内容没有谈及太多具体人物及作品,因为在有限篇幅里本期内容已经高度浓缩,更多是在给大家整理一个框架。

关于网页设计发展的经历,也欢迎大家根据自己的体会参与到讨论中,说出你们的故事。

本期故事讲到这里,感谢各位,下期再会!

作者:设计史太浓

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!








网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

博博

经验分享:移动网站设计应该避免的“七宗罪”

移动端网页在今天虽然已经变得越来越重要,但我们在日常使用中依然会遇到一些糟糕的页面。近日,开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。

在移动端方寸地,有细节才能抓住用户,可以参阅这《60个以小见大的设计细节!》,保证会学到很多。还有,记得不要犯《ANDROID应用中十大常见UX错误》


一、页面加载缓慢:


众所周知网页加载速度是网站性能的一项重要衡量指标,毕竟很多时候用户并不总是在WiFi状态下浏览网页,所以加载缓慢无疑是移动页面七宗罪之首。移动网页在设计时应该避免集成过多高分辨率的图片以及累赘的脚本文件。

经验分享:移动网站设计应该避免的“七宗罪”
 


二、排版凌乱:


当网页映入眼前,凌乱的文字排版当然也是访客难以忍受的。就像人们在现实生活中倾向于和思路清晰的人交流一样,当用户和网页“交流”时也希望能快速找到自己需要的信息。所以杂乱的排版同样是移动网页应该避免的设计误区之一。比如Eurosmartz的移动版完全不像是为移动设备设计的网页。


三、导航功能不易使用:


随着移动设备性能的提升,很多移动网页设计者倾向于在移动端堆叠更多的内容,这时导航功能就变得必不可少了。可诸多移动页面在设计导航功能时又没有足够重视其可操控性,比如按钮太过紧密、链接间距过小、菜单过于隐蔽等等。各种社交网站的点赞功能尤其容易在滑动网页时误点击。蹩脚的导航无疑严重影响了用户和网页“互动”的过程,以至于有些用户要“抱怨”自己手指太肥。

经验分享:移动网站设计应该避免的“七宗罪”
 


四、桌面端和移动端页面风格差异巨大:


某些时候我们可能会遇到一些桌面端和移动端页面风格差异巨大的站点,比如Toybox。一些对此站点不熟悉的用户在从Toybox的桌面端跳转到移动端时,也许很难意识到这是同一个网站的两个不同版本。虽然Toybox桌面端的动态效果挺好,但这种会给用户造成极大困惑的设计明显难以得到用户的喜爱。


五、弹窗:


网页弹窗在桌面端已经令用户厌烦不已,可不幸的是一些移动端的网页设计者还是把其带到了移动页面上。毫无疑问由于移动设备屏幕尺寸的限制在移动端弹窗明显会有更好的传播效果,但无疑也会遭受到用户更多的厌恶。

经验分享:移动网站设计应该避免的“七宗罪”
 


六、自动重定向:


当用户使用iPad访问某一个网站时将其自动重定向到适配iPad的版本,这听上去的确是一个好想法,可在实际操作中一样会遇到问题。比如当一个网站的移动版由于以上的种种问题让用户感到难以接受而想切换回桌面版时,自动重定向基本上让用户陷入了死循环。此外由于重定向而导致浏览器无法打开网页的现象也时常出现。所以在使用自动重定向功能时应该三思而行。


七、横幅广告:


作为用户当然可以理解网页开发者在页面上设置一些广告,可横幅形式的广告无疑应该被归为“七宗罪”之一。从互联网的发展历程来看,横幅广告的思维好像还停留在1999年,可现在已经是2013年末尾了。

总结看来,Umer Mansoor列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项,也许是时候考虑做一些改进了。

作者:程远

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!








日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档