网页设计软件有哪些(5个好用的网站设计工具)

当你想知道一个设计精美的网站设计使用了什么字体时,可以安装一款叫做 WhatFont 的浏览器插件,开启时鼠标 hover 到文字上即可快速识别出字体、字号、字重、行高和颜色。对于不习惯使用控制台的朋友来说非常简单实用。

1. 字体识别神器:WhatFont

当你想知道一个设计精美的网站设计使用了什么字体时,可以安装一款叫做 WhatFont 的浏览器插件,开启时鼠标 hover 到文字上即可快速识别出字体、字号、字重、行高和颜色。对于不习惯使用控制台的朋友来说非常简单实用。

网页设计软件有哪些(5个好用的网站设计工具)

插件最新的版本停留在 2017 年,不过在大部分网页上都是可以正常使用的。同类产品还有 Fonts Ninja 等,除了识别字体还可以收藏和管理字体,可根据你的需要进行选择。

2. 用户体验设计档案: UXArchive

该网站收集了来自世界一流的科技公司的产品用户体验流程。例如,你正在设计“忘记密码”体验,需要参考时通常都是打开不同的 App 一个一个体验和截图。而通过这个网站,你可以根据场景快速浏览其他公司的示例,对比不同的解决方案。

地址: https://uxarchive.com/

3. 灵感速记: Flomo

Flomo 是一款非常轻量的笔记工具,用类似发微博的方式快速记录一些知识片段。相比剪藏已有的内容,Flomo 更注重主动创造和记录。产品的功能目前非常简单,但背后的「卡片笔记法」理念很有意思,提倡先快速积累卡片,然后通过标签和关联让结构涌现,积累知识的复利。感兴趣的朋友可以了解他们对于“知识管理”的思考。

调研和分析

当我们进入到产品设计工作中时,了解用户往往是最重要的前提和基石。大公司的团队往往有专职的用户调研团队来协助产品设计,但对小型一点都团队可能用户调研这个流程是全部归到设计师角色里的。而且即使有专门的用研报告,直接观察用户的行为和描述往往是最直观的,也更容易洞察到问题和机会。这里介绍两种我们常用的低成本的方法。

1. 用户反馈什么: 七麦

如果你的产品是一个成熟的上架了各大应用商店的 App,可以通过一些第三方平台看到各应用商店的评分评论汇总,构成和趋势,也可以将自己的 App 和竞品放到一起对比。例如我日常使用的“七麦”,可以通过微信订阅每日评分变化,也可以导出指定时间段的评论的汇总表格,做更深入的检索和分析。

2. 用户谈论什么: 微博

商店评分和用户反馈通常的内容通常比较有针对性,大部分都是围绕已有的功能。如果想要看到用户在生活中如何使用我们的产品,使用过程中有什么样的情绪和感受,看他们如何理解在用的这个东西,则可以去社交平台上搜索产品的关键词,常常会有些很有趣的发现。据说早期微信的剪刀石头布的想法就来源于一个微博用户的分享。

设计和打磨

来到我们最熟悉的设计实操阶段。设计类工具非常多,Sketch 和 Figma 也都有相对丰富的插件市场,这里选择了几个我们日常使用的小工具来进行分享。聪明地使用已有资源,可以帮助我们呈现最好的设计概念。

1. Mesh Gradient 网格渐变工具

一款 Figma 插件,Illustrator 里强大的 Mesh 功能在 Figma 里也能用了。做好的渐变还可以保存下来多次复用。

2. Runner Pro

如果你主力使用 Sketch,习惯键盘操作,熟悉各种指令名称,而且有完整的组件库,那么 Runner Pro 将会是一个很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系统聚焦搜索,通过一个搜索框即可快速完成组件插入,指令运行,插件安装,以及快速前往某个画板。

Runner 的组件搜索支持中文,但对于多个关键词的模糊搜索还是对英文支持比较完整。

3. Blush 插画插件

一个由 Pablo Stanley 设计的免费可商用的手绘风格的插图库。任务造型有数十种选项可供选择,可以自定义角色的头发、裤子、肤色等等,无需打开 Illustrator 即可创建独一无二的插图。适合用来做运营插画,拼用户故事版,PPT 配图等。需要搭梯子访问。

另外也有越来越多的设计师开始用 Figma 的原型功能直接做 PPT 了,顺应这个趋势他们还提供同系列的 PPT 模板,一键套娃。

4. POSE 人体姿势参考

在自己画人物插画的时候,如果对人体动作和比例难以把握,那一定不能错过这个插件—POSE。它是我发现的用于创建解剖学和身体插图的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有众多的粉丝,这是他在 Snapchat 做插画师时创作的软件。

5. 动画曲线预览

细腻的动画能够让体验更有温度,这个网站提供了五种简单的网页版式和最基础的三组动画曲线,你可以选择最适合你的 demo,体验不同动画曲线在实际页面上的感受。底部还可以调整具体参数来达到想要的效果。

输出还原

需求过程中我们需要反复和上下游沟通,在这个阶段里设计稿是解决方案的可视化呈现,是中间产物,首先要满足方便沟通和传递的诉求。方案定稿后,交付的则是产品的设计蓝图,首要确保方案的完整性,要能够拆解和执行。

1. Design Project Template

这是由 Dropbox 团队整理的设计项目模板,可以从 Figma Community 中复制一份使用。每份设计稿都包含基础的项目信息,责任人,进度等概览信息,尤其对于直接和开发、产品经理共享 Figma 稿件的团队而言很好地保留了相关的上下文信息,提升项目沟通效率。

2. 设计协作工具 XSHOW

XSHOW 是一款由 ISUX 研发的高效设计协作平台,通过其官方 Sketch 插件,你可一键将设计稿上传到云端,XSHOW 会保留完整的版本记录和成员操作。上传到云端后分享给开发人员即可在线查看标注,多端预览。除此之外 XSHOW 的团队管理还可以控制权限时效,这一点在敏感项目对外合作的场景下可以说非常实用了。

3. 还原自检 Window Resizer + Zeplin

Window Resizer 是一款 Chrome 插件,正如其名就是可以把浏览器窗口固定到指定尺寸,可用于检查网页的自适应策略,或截特定尺寸的图。

我们常常配合标注工具 Zeplin 的叠图功能使用。将浏览器设置为和设计稿相同的尺寸,再将半透明设计稿叠上去即可一眼看出网页是否还原到位,还有哪些地方需要调整。一图胜千言,再也不怕开发哥哥说“看不出来”了,显著提升了沟通效率和团队和谐气氛。

使用示例: 上层为设计稿,下层为对应浏览器尺寸的实现效果。

4. 图片压缩工具

如果仍采用非在线的较为传统的交付方式,通常需要导出为图片发给对方。有时输出网页设计或者完整流程交互稿的尺寸较大,可以多做一步压缩工作。一来同步方案的时候合作方更容易打开,另外需要导出多个版本时占用我们自己电脑空间也比较少。

如果图片在 5M 以内或者需要批量处理,可以用 ImageOptim 或者 Tinypng 应用来进行无损压缩,通常可以减少 60-90% 左右。但如果图片尺寸超过 5M,使用以上两个应用耗时较长而且容易失败,此时可以试试在线压缩网站 ,即使是超过 20M 的大图也可以稳定压缩。

本文系发布者爱跨境 发表,本站仅提供信息存储空间服务。

本文为作者独立观点,不代表羽毛出海立场,转载请注明出处:https://www.salesba.com/archives/31834

(0)

相关推荐

  • 现在亚马逊很难做了(亚马逊难做之原因)

    大家都说最近亚马逊越来越难做了,内卷严重,原因是什么呢? 因为现在大量的亚马逊卖家都在套公式,你套公式所出来的结果都是一样的。国内的很多卖家基本上就是靠大数据,什么火我去卖什么,可能再聪明一点的,会在这款爆款的基础上差异化,或者分析一下品牌的垄断、卖家的数量等多个维度。这其实都是在套公式,现在做大数据软件的拿了那么多融资,疯狂宣传让大家都用,然后大家想法都一…

    2022-04-17
    245
  • 跨境电商代发货的平台有哪些

    再介绍一件代发渠道之前,先了解一下什么是DROP SHIPPING?DROP SHIPPING是外贸术语,是供应链管理中的一种方法。零售商不需要商品库存,而是把客户订单和装运细节提供给供应商,供应商将货物直接发送给最终的客户。而零售商赚取批发和零售价格之间的差价。 通俗上来讲,也可以把DROP SHIPPING理解为“直接代发货”或者“转运配送”,作为零售商…

    2022-04-12
    306
  • ugc运营是什么(一篇关于UGC构成和运营的文章)

    UGC的百度解释比较长,精简出来很简单,就六个字:用户生成内容。这句话说的直白一些,就是在网上说话。只不过这个说话的形式不是口述,而是文字、图片或视频。其实我们每一个互联网的用户都不可避免的在做UGC,比如我们在微信朋友圈里发一条动态、贴吧里发一条贴子等等,这些看似很平常的行为其实就是UGC

    2022-06-01
    259
  • 电商搜索排名优化的方法有什么(分享网店怎么做关键词优化排名)

    淘宝店主现在都觉得淘宝生意是越来越难做了。流量越来越少。好多人开始选择用很多花钱的推广方式,其实还是有很多免费的推广方式的

    2022-07-26
    206
  • rohs检测项目有哪些(解读RoHS十项包括哪些)

    RoHS是由欧盟立法制定的一项强制性标准,它的全称是《关于限制在电子电设备中使用某些有害成分的指令》(Restriction ofHazardous Substances)。该标准已于2006年7月1日开始正式实施,主要用于规范电子电气产品的材料及工艺标准,使之更加有利于人体健康及环境保护。该标准的目的在于消除电器电子产品中的铅Pb,隔Cd,Hg,六价铬Cr6+,多溴二苯醚PBDE,多溴联苯PBB共6项物质,并重点规定了铅的含量不能超过0.1%。2015年6月4日,欧方正式将邻苯二甲酸二(2-乙基己基)酯(DEHP)、邻苯二甲酸基丁酯(BBP)、邻苯二甲酸二丁基酯(DBP)、邻苯二甲酸二异丁酯(DIBP)列入附录II限制物质清单中,至此附录II共有十项强制管控物质。并于2019年7月22日强制实施。

    2022-08-19
    141
  • 什么是FORM A(它有什么作用)

    FORMA是普惠制原产地证明书格式A,它是受惠国的原产品出口到给惠国时享受普惠制减免关税待遇时必备的官方凭证,所有的给惠国都接受,格式A证书由受惠国出品商填制申报,受惠国签证机构审核,证明及签发。在我国,国家出入境检验检疫局是签发普惠制产地证的官方机构,2019年4月20日,关检合并之后,签发机构改为中国海关。

    2022-07-06
    169
  • 复活节是什么(分析复活节为什么叫Easter )

    2019年4月21日是复活节,复活节是每年春分月圆后的第一个星期天。复活节是英文名字是Easter,但是很多人都不明白复活节为什么叫Easter,本篇文章小编就为大家带来了复活节名字的由来和意思,以及复活节的节日意义,一起来了解一下吧。

    2022-07-10
    192
  • 亚马逊商品编号怎么查询(跨境电商亚马逊 FNSKU 编码详解)

    SKU(Stock Keeping Unit)是商品库存进出计量的基本单元,可以是以件,盒,托盘等为单位,由数字或字母组成,也可以是两者混合搭配组成。

    2022-07-28
    375
  • 快团团商家入驻条件是什么(分析成为快团团的供应商的SOP)

    1)直接成为快团团的供应商,走官方渠道

    2)直接联系团长,走自己对接的渠道

    2022-08-01
    1.6K
  • erp系统分支是什么(erp系统包括哪些模块)

    ERP系统是在20世纪80年代初开始出现的。所谓ERP系统(ERP System),是Enterprise Resource Planning企业资源计画系统的缩写,是一种企业管理平台,强调对企业的内部甚至外部的资源进行优化配置、提高利用效率。通过运用ERP,企业能够利用电脑对企业的人力、物力、财力等等资源进行自动化管理。

    2022-07-01
    199

发表回复

登录后才能评论

联系我们

在线咨询: QQ交谈

邮件:mail

工作时间:周一至周五,9:30-18:30,节假日休息