UI

2019-02-19 · 阅读 933 · 字数 108

蚂蚁金服的规范 https://ant.design/docs/spec/font-cn 在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。 苹果 iOS 的规范 https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ 里面列出了常见的几种文本场景。 Google 的 material d ...

阅读全文...

2019-02-12 · 阅读 1975 · 字数 109

生成过程非常简单，到网站 https://mybrandnewlogo.com 输入公司名称，输入 slogan，选一个喜欢的颜色。 Logo 就瞬间生成了，效果看上去确实不错。 ...

阅读全文...

2018-12-18 · 阅读 1318

中午吃饭时，在微信读书上翻书时，读到了这么一段话： 产品的功能当然重要，但产品与用户之间的情感联系也不可忽视。就像希区柯克的两个剧本，“蓝色剧本”完全是功能性的，满足观众的理性的需求，“绿色剧本”则关注内容细节、情感主线等，关注观众的感受、情绪，满足观众的感性需求。好的产品，应该是在理性（功能上）和感性（情感需求）上同时抓住用户。 我觉得这个描述非常生动，产品应同时具备蓝色剧本跟绿色剧本。比我之前的产品认知：“有用，好用，有趣”，更触及产品的本质。 例如，好的导演作品，在叙事时候，总能恰到好处的融入主人公的生活细节，诸如，父亲与子女的关系等。 ...

阅读全文...

2018-03-14 · 阅读 2301

原型图本质上是将想法具体化的一个过程. 心里障碍在哪里 担心设计的太丑，太粗糙 不尝试怎么知道；用工具做出来的不会差太多。 无从下手 just do it 方式1：把最核心的部分表现出来，其他部分一点点补上。 方式2：从用户注册、登录开始表现，太形式了，容易失去激情. 设计这两个字太虎人 这个名字不好 原型图本质上是将想法具体化的一个过程 这个过程也是不断验证自己想法、发现新需求的过程 工具选型 跨平台 -- 方便多人协作修改 小而轻 可持续维护 开源免费 目前来看只有 http://www.processon.com 满足这些要求。 ...

阅读全文...

2017-06-14 · 阅读 2462

一定要用 bootstrap。节省大量时间。 nav 高度需要拉高，active 效果要明亮轻快些 body 下不要加统一的 wrapper, 因为有的是全屏的，有的是 1200px 固定宽度的 每个功能页面加点图片，会好看很多。例如，顶部图片 企业的重要信息最好显示在首页 着手编码之前，先在纸上将 HTML 结构构思好 轮播图能否配合 jumbotron 巨幕来展示 常用的基础功能 公司地址的地图展示 留言系统 ...

阅读全文...

2019-01-18 · 阅读 3250

具体的动画效果可以通过 Animate.css 实现。 下拉到某处以触发 animate.css 效果，可以通过 waypoints 实现。 demo： var waypoint = new Waypoint({ element: document.getElementById('element-waypoint'), handler: function(direction) { this.element.className += " fadeInLeft"; }, offset: '75%' }); 注意，该 element 需要提前加上 cla ...

阅读全文...

2017-05-01 · 阅读 6084

工具 查看邮件打开率，点击率，排版技巧等 怎样评价一封邮件的排版 内容优先 需要适配 PC，mobile，pad 的屏幕 手机、Web 端在邮件收件箱视图里能看到概要信息, 把重要数据显示在概要里，类似验证码短信会把验证码排前显示一样。 邮件排版相对 web 排版的特殊之处 只能使用 table 来排版 layout (tr>td 里再嵌套 table) css 推荐写成 inline 样式. head 里的 style 有可能被 email client 过滤掉。 宽度不要超过 600px，目前我使用的是 580px 图片域与邮件域最好相同 template 推荐使用 ...

阅读全文...

2017-05-01 · 阅读 2178

将想法具化的一个过程。 为何要关注用户体验 一个产品成败的关键，在于用户如何评价： "这个产品能否给我带来价值?" "真的易用么？" "用起来愉悦么？" 这3个问题，会在潜意识里影响其是否成为你的忠实用户，而不是扫一眼就跑。 UX desgin 的目标就是，让用户对这三个问题都回答 “Yes”. UX 的第一原则 "一切皆是交流" “You cannot not communicate. Every behaviour is a kind of communication. Because behaviour ...

阅读全文...

2017-04-26 · 阅读 4030

carousel 旋转木马 - 即网站轮播图 又名 slider（滑块），slideshow，gallery （美术馆、画廊） 现在几乎每个站都在使用轮播图/carousel，但是我自己做了几个站，并没有一个轮播图效果能让自己满意。 不满意的地方： 仅仅是好看的图片轮播而已，没有有效地传递信息 PC 端与手机端没有完美的自适应方案 如何充分利用轮播图传递有效信息？ 第一个轮播图上的文字，必须能够简明概要的描述这个网页的主题。 例如，客户给了我们两句标语 工作理念：用手，用脑，用心，做最美的牙！ 经营宗旨：品质惠苍生，诚信赢天下。 从概括主题的角度来看，第一句话适合作为第一个轮播图， ...

阅读全文...

2017-01-07 · 阅读 3756

最近关注前端更多一些，发现目前主流的网站屏幕宽度有很大的变化。似乎变得越来越宽，比之前大气很多。 于是好奇地把经常上的几个网站的宽度查了一下 什么值得买 1200px 京东 1190px 淘宝 1190px 亚马逊 全屏自适应 qq.com 1000px 新浪 1000px facebook.com 1012px twitter.com 1190px 看来，使用 1190px 的更多一些 ...

阅读全文...

2015-12-12 · 阅读 3150

昨天写一个 web 页的时候，突然感觉配色有点奇怪。 但是又不知道如何调整，我想这是每一个色弱党的痛点。 看了一圈颜色，发现只能认出蓝色、黄色、白色、黑色、部分红色。其他颜色一律不敏感。 是时候建立一套适合自己的配色方案了。 “对我来说，蓝色是最丰富的颜色。我能看到所有蓝色的东西。” - 扎克伯格(色盲，无法识辨红色和绿色) 整理了一下我喜欢的几个颜色 .color_block { width: 200px; height: 50px; } 蓝色 0000FF 0074D9 黄色 FFFF00 FFDC00 红色 FF0000 FF4136 白色 F0F ...

阅读全文...

2015-12-12 · 阅读 3632

最让人苦恼的事情莫过于用户来了，啥也没点就离开了网站／应用。用户访问页数绝大多数为１。 页面反复改版，也没有效果。 几乎所有人都能看出问题出在哪里，“页面设计有问题！” 但是，如何解决呢？当前页面的设计好在哪里？问题又出在哪里？ 怎样才算是一个令用户、令自己都满意的页面设计？如果一步步构建起来呢？ 关键词 流程设计 你的目标 (objectives) 用户目标 转化漏斗 (Conversion Funnels) 流程设计必须回答的两个问题 你的目标是啥。即，你希望用户在你的应用上执行哪些操作。 用户的目标, 需求以及渴望是啥。如何满足用户。 网站的目标通常很容易细化： 注册账号 点击 ...

阅读全文...

2018-03-06 · 阅读 3172

中文的楷体（KaiTi）还真是好看, 参考 片刻网 但是，更适合标题等醒目文字，正文部分还是使用各系统的常用字体。以增加差异化。 elementui 的字体 http://element-cn.eleme.io/#/zh-CN/component/typography font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; ...

阅读全文...

2016-05-23 · 阅读 3215

判断一个网站是否有价值的唯一标准 是否对自己有有用 网站模板 http://91mb.com.cn 工具 http://www.tubangzhu.com/ 投放广告的技巧 不要出现两个连续的广告 不同人群/不同类型网站的广告选型不同。例如，低端人群选择百度广告；高端人员投放 Google 广告。 Web UI 库 semantic-ui 设计上比 bootstrap 清晰许多 bootstrap pure.css 很多页面 demo, 例如图片站等 WeUI 微信官方的 UI 库，微信嵌入 web 页的首选 Bttn.css - Demo 按钮样式 管理后台模板 ...

阅读全文...