展开

关键词

为什么页面设计稿差距这么大

设计设计师是最贴近产品体验的人,但是术业有专攻,设计师往往更加注重视觉的表现,而容易犯一些美丽的错误: 1,以原生 APP 的体验类比 H5 页面设计 我们都知道,原生 APP 的体验非常流畅,界面也非常华丽 所以这里,建议设计师可以多比照其他 H5 网站的表现来进行设计,而不要经常比照 APP 的体验。 2,设计稿都是最完美的状态 是的,设计稿上面往往体现的都是最完美的状态。 这些情况多数在设计稿上不会体现,往往要到开发过程中再去确认细节,比较浪费时间。 3,活字用了非系统字体 所谓活字,就是直接以文本形式展示在页面上,而不是用图片模拟的文字。 当拿到设计稿时,确认好布局之后,就是各种溢出状态的确认了。 2,不分析设计稿就动手写代码 作为新手拿到设计稿之后,往往都想很快写代码,因为写代码才有快感。 虽说调个宽度也不麻烦,但是当开发大型复杂页面的时候,这些联动的小改动也足够搞死人了。 5,不仔细看设计稿 最常见的错误就是,设计稿上有边框,但是颜色太淡没看到。

40430

H5运营类页面设计浅谈

作者:major,微信高级设计师 2014至2015年,H5发展得如火如荼,各类手机端小游戏、运营、广告,纷纷采用H5的形式来进行产品和品牌传播。 在这里聊一下对H5运营类页面设计的观察和思考,抛砖引玉。 一. 简介 H5运营类页面设计,是指用来承载运营活动、品牌活动或信息传递的移动端页面设计;具有展示空间小、时间碎且短、操作可互动的特点;直接目的是引起用户病毒式分享,从而提升活跃度和品牌形象。 ,提供内容让用户对运营活动有更进一步的了解,同时,常会有表单出现,与用户进行互动; 进行H5设计的时候,需根据主题和内容,选择适合自己产品的H5类型,来最大化地促进传播和分享。 H5移动端页面设计心得分享》 http://www.uisdc.com/html5-case-experience-summary 3.

85860
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    细谈设计稿还原

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: 元素大小 元素与元素之间的间距 元素在页面的位置 总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。 元素在页面的位置 这个相对于前面的来说应该是最简单的问题了,熟练运用各种布局技术一般就能解决百分之九十九的问题了,当然也还有些特别不合理的,那就需要改交互了。 设计师的有些设计到底是故意为之还是出了点小差? 移动端各种手机尺寸,只给一个标准的,其他自由发挥怎么搞? 所以最后如果要细究到0像素还原,最艰难的问题只有两个:文字的问题;完美的设计稿

    32310

    细谈设计稿还原

    按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: 元素大小 元素与元素之间的间距 元素在页面的位置 总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。 元素在页面的位置 这个相对于前面的来说应该是最简单的问题了,熟练运用各种布局技术一般就能解决百分之九十九的问题了,当然也还有些特别不合理的,那就需要改交互了。 设计师的有些设计到底是故意为之还是出了点小差? 移动端各种手机尺寸,只给一个标准的,其他自由发挥怎么搞? 所以最后如果要细究到0像素还原,最艰难的问题只有两个:文字的问题;完美的设计稿

    46370

    如何设计实现H5营销页面搭建系统

    单纯的去看页面的不同呈现,可能仅仅就是加了一个拖拽的操作。但真正准备去落地的时候,发现其中的细节特别多,也包含了很多的设计理念在里面。 我们先来看一下原型图,然后仔细分析一下需要做的事情: ? 这里我基于原型对项目设计进行了功能的铺平,其实还是围绕组件、画布、属性面板这三块。 组件 Schema 如何设计? 画布区域和预览时组件的渲染是否可共用一套渲染逻辑? 从页面呈现上来看并没有太大的差异,那么从代码设计上,这两部分当然就可以共享一个组件。 其实无论是组件动态加载还是组件schema的设计、数据结构的设计、组件库的维护等,每个团队都可以制定一套适合自己的规范,没有绝对的对错之分。

    28920

    设计稿生成游戏界面

    从库的开发到封装的界面编辑器,其实我们的游戏界面搭建效率已经很高了,但是从设计稿直出,业内也一直没有停止过尝试,一些比较主流的引擎像laya、unity都有相关的设计稿生成画面的插件,cocosCreator BINARY_PATH = "/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool"; // 导出画板artboards、页面 有了设计稿的结构描述文件+资源,接下来要在引擎的界面编辑器上还原就比较简单了,这里有两种方式,一种是直接转换,把设计稿的scheme描述文件转换成引擎界面编辑器的fire描述文件,引擎生成界面描述语言这部分源码并没有开源 因为简单的设计稿结构读取和导出是不能满足需求的,最直接的就是设计稿上会有大量的节点的冗余,因为稿子中也保存了设计师创作的一些中间过程,比如大量的路径和未合并的图层,在导出的时候需要做甄别,同时设计师在创作的时候也需要按照一定规范去约束层级关系 最近几年前端有一个很前沿的方向就是前端智能化,就是通过AI/CV技术,使前端工具链具备理解能力,进而辅助开发提升研发效率,其中基于设计稿智能布局和组件智能识别就是其中一个。

    32710

    8个视觉稿设计工具,页面视觉和实时交互就靠它们

    对于视觉设计师、交互设计师来说,他们需要做的不仅仅是设计一张张静态的页面和独立的icon,他们需要将这些元素整体组合在一起,根据整体画面感和视觉体验来做出修改。 因此,一款快速、方便的视觉稿设计工具就显得尤为重要,通过这些工具,设计师可以真实地看到网站呈现的效果,并且可以传递至其他同事,还可以更加便利地与用户进行沟通交流,查看反馈。 1、Invisionapp InVision 是一款强大的设计原型开发工具,可以帮助设计师和设计团队更加高效地做原型设计。 在制作原型设计的时候,InVision可以让你创建互动活动,上传设计文件并添加动画、手势等,便于和同事、用户交流,获取反馈。 在这里,你可以在主屏幕上轻松地测试iOS图标设计。 ? 5、Webflow Webflow无需编写代码,你可以直接在浏览器中完成网站的视觉和交互设计并实时预览,设计师可以随时修改。

    50250

    Redis全异步(HA)Driver设计稿

    Redis全异步高可用Driver设计稿 前言 现在Redis的集群功能已经Release。但是并没有一个官方直接提供的高可用性的API可以使用。有的只有解决方案,Sentinel和Cluster。 所以有必要自己设计一套高可用的Driver层以供业务使用。 Cluster Redis 3.X已经release,这个版本提供了一个重要的功能,那就是集群(Cluster)。 设计总结 简单地说,就是需要在hiredis上包一层,来完成对Cluster中的内部操作。实现的过程中会导致多一次malloc和多一次sds复制操作。 流程图如下: image.png Sentinel适配设计 设计思路 Sentinel比较简单,大体上和Cluster一致,有几个不一样的地方如下: 第一次连接的是Sentinel节点而不是数据节点 设计总结 流程图如下: image.png 集群健康报告 对于Cluster而言,使用**CLUSTER * **命令就可以完成这些功能,并且总是随机取发送目标。

    55010

    千万级日志回放引擎设计稿

    主要就是读了goreplay的源码以及它设计思路,用Java重现实现一遍。 思路 总体设计思路如下: 千万级日志回放设计 PS:流量递增和动态增减尚未实现,还在研究goreplay的源码。 HttpRequestBase request) { this.request = request; } } } PS:这里用到了多个group,原因在设计稿中标记了

    12631

    H5 页面列表缓存方案

    前言 在 H5 日常开发中,会经常遇到列表点击进入详情页面然后返回列表的情况,对于电商类平台尤为常见,像我们平常用的淘宝、京东等电商平台都是做了缓存,而且不只是列表,很多地方都用到了缓存。 但刚才说的都是 App,在原生 App 中,页面是一层层的 View,盖在 LastPage 上,天然就能够保存上一个页面的状态,而 H5 不同,从详情返回到列表后,状态会被清除掉,重新走一遍生命周期, 第二种解决方案就是手动保存状态,即在页面卸载时手动将页面的状态收集存储起来,在页面挂载的时候进行数据恢复,个人采用的就是简单粗暴的后者,实现上比较简单。 -> Detail -> List 需要缓存没问题,但是用户从 List 返回到其他页面后再次进入 List 时,是进入一个新的页面,从逻辑上来说就不应该在用之前缓存的数据,而是重新获取数据。 何时取 在进入缓存页面的时候取,取的时候又有几种情况 当导航操作为 POP 时取,因为每当 PUSH 时,都算是进入一个新的页面,这种情况是不应该用缓存数据。

    39720

    设计稿智能生成代码的神器

    一个由设计稿智能生成代码的神器 imgcook,一个由设计稿智能生成代码的神器 imgcook 是专注以各种图像(Sketch/PSD/静态图片)为原材料烹饪的匠心大厨,通过智能化手段将各种视觉稿一键生成可维护的前端代码 全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束,智能生成代码。一键智能还原与丰富的操作面板,实时保证代码和视觉的高度还原。促进团队的高效协作。 ? imgcook 支持小程序、React、H5、Weex、Rax 等 多样 DSL。 ? imgcook 使用简单,直接上传设计稿(最好找上传sketch或psd源文件) ? 即可快速生成代码。点击后可以选择DSL,最后导出到本地即可。 ? 最后打开浏览器查看界面调试即可。 ? imgcook 可以学习代码的结构,通过手动调整代码有利于进一步提高代码规范以及开发页面结构和调整页面样式的能力。还可以和小伙伴一起协作开发。快快邀请小伙伴一起使用叭。

    37720

    uni-app开发微信小程序和h5应用

    px 和 rpx之间的转换关系如下: 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换言之,页面元素宽度在uni-app中的宽度计算公式: 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 举例说明: 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。 2. h5: 可参考官网发布为H5 最后在项目中生成dist文件。

    12220

    微信H5 页面 ul li

    32220

    H5 原生JS页面传值

    post页面: window.location.href=encodeURI('workList.html? title=aaa&name=吴思源'); Recive页面: var url = decodeURI(location.search); var Request = new Object(); if( split("=")[1]);   } } alert(Request["title"]) alert(Request["name"]) 注意:   传值中文时,会出现乱码现在,我们可以在post页面

    1.2K30

    H5 页面 iPhoneX 刘海屏适配

    safe-area.png 很明显,在讨论适配之前,我们的页面一般有两种分类: 1、H5 页面使用原生 App 的 Navigation Bar 导航栏,此时,status bar 状态栏和导航栏都是原生控件 2、H5 页面在 iOS 中占据全屏页面,在这种情况下,除了要兼顾底部小黑条,我们还要处理页面上部跟 状态栏接触的部分,避免内容出现在状态栏上。 页面适配 在为页面适配刘海屏之前,我们首先得在页面的 meta 中添加一个新的值:viewport-fit=cover <meta name="viewport" content="viewport-fit 看一页目前的<em>页面</em>效果: ? WX20200531-205514@2x.png 可以看到现在我们的测试<em>页面</em>已经铺满了整个屏幕。 这个时候,我们来使用之前提到的 env 函数,适配刘海屏幕。 当你的<em>页面</em>不使用原生导航栏铺在整个屏幕中时,这就是一个不错的适配方案。

    1.7K40

    H5页面测试总结

    H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍   1. H5页面   H5即 HTML5,是最新的 Web 端开发语言版本,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现。 H5其实就是:移动端Web页面。   H5应用在很多地方,如APP的活动专题页面、新闻页面、微信公众号文章页面等都属于H5页面,在PC或者手机浏览器都可以直接访问H5页面。    如何识别H5   从视觉效果上看,H5页面与APP native页面是一样的,因此测试时经常会问到一个问题,这个页面是不是H5页面?如何识别呢? ,能自适应,并且布局不会乱掉,通常情况也属于H5页面;   3)H5页面在PC端也是能访问的,chrome对H5支持最好,功能的测试可以在PC端chrome下先测试,也可以在手机上直接测试。

    77421

    H5页面测试总结

    前言 在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍 1. H5页面 H5即 HTML5,是最新的 Web 端开发语言版本,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现。 H5其实就是:移动端Web页面H5应用在很多地方,如APP的活动专题页面、新闻页面、微信公众号文章页面等都属于H5页面,在PC或者手机浏览器都可以直接访问H5页面。 如何识别H5 从视觉效果上看,H5页面与APP native页面是一样的,因此测试时经常会问到一个问题,这个页面是不是H5页面?如何识别呢? ,并且布局不会乱掉,通常情况也属于H5页面; 3)H5页面在PC端也是能访问的,chrome对H5支持最好,功能的测试可以在PC端chrome下先测试,也可以在手机上直接测试。

    37520

    【干货】送给初级设计师的设计稿修改意见

    我们先来看看这张 改动前 的海报设计图: ? 从海报中提炼出的重点信息有:活动名称是创新课堂,主题是工艺细节和设计的重要性,还有讲师信息,以及电话或扫码报名。 该设计是初入设计行业的设计设计的,首先优点就是已经可以按照重点信息的优先顺序,进行了比较合理的摆放。但视觉美观和细节上还可以有改动的必要。下面我们一起来看一下,改之后的效果 ? 设计师们,企业需要你们! 对你有帮助的话,记得发你的作品PSD过来,我们一同分享!快乐进步!

    30310

    如何把设计稿还原成真实网页

    框化视觉稿设计稿上你能看到的所有元素都放进框中,实际上,一个HTML的标签(例如

    123

    )就是一个框。 框是可以嵌套的。 所以,要框化这个视觉稿,你首先应该找出一个包括整个页面的最大的框,然后再找出将页面明显分成几块的次大框,再找更小的框,一直找下去,直到无法再分下去。 框化后的代码实现 等你把所有元素都框化以后,就可以着手开始写代码还原设计稿了。顺序是从最外面的框写起,不断往里面写。 步骤可以概括如下: 从设计师那里(或者自己设计好)拿到网页的设计稿 分析设计稿,找到那些现成的框 找出那些样式重复的元素(或框)——如1级标题、2级标题、段落等 写HTML代码,把内容盛放进框中 写CSS 代码,定义元素(或框)的样式(从大的样式特征——如框的宽度,到小的——如字体字重) 保存代码,在浏览器中打开,检查和设计稿的差距,调整代码 重复4-6步直到还原设计稿

    54220

    相关产品

    • 设计协作平台

      设计协作平台

      腾讯自研的产品设计研发一站式协作平台,支持在线导入预览Sketch设计稿、自动生成设计标注切图,灵活调用图标库、素材库,支持多种插件上传,让产品设计更轻松高效。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券