UI

分类下相关文章

网站/应用的生命周期是不是可以像电影一样

关键词 时间限制 感官刺激 只让人来爽一回即可。 有感于三池崇史快速拍出的大烂片。 如果从这个角度看,版面设计是不是更应该突出爽。 如果电影是限定在90分钟,那么留给网站展现自我的时间上限应该是一分钟。 那么展示的方式就不能局限于传统的N栏结构了。 就是把一个网站当成一个电影来做。 图片效果 http://webdesignerwall.com/trends/47-amazing-css3-animation-demos quote 效果 http://jinkan.org ...

阅读全文...

字号、字体在网站、小程序、APP 中的规范

蚂蚁金服的规范 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 ...

阅读全文...

高大上的商标 Logo 自动生成工具 - My brand new logo

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

阅读全文...

希区柯克的蓝色剧本与绿色剧本

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

阅读全文...

如何设计原型图

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

阅读全文...

wordpress 企业站主题开发总结

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

阅读全文...

下拉滚动时的炫酷效果 (animate.css + waypoints.js)

具体的动画效果可以通过 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 ...

阅读全文...

邮件排版

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

阅读全文...

User Experience Design

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

阅读全文...

关于轮播图的设计

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

阅读全文...

时下主流 PC 站的页面宽度

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

阅读全文...

色弱党的颜色主题

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

阅读全文...

停止页面设计,开始流程设计

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

阅读全文...

字体

中文的楷体(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; ...

阅读全文...

设计

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

阅读全文...