首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Mac全栈开发-视觉设计

12月我们将邀请专业的视觉设计师协助撰写此文档。...软件推荐 Adobe CC 2015全系列 Sketch Sketch 是当下UI设计师不可避免的软件,主要专注于移动端,其引入的Artboard、Symbol、Export等概念极大的提升了移动界面导向...UI设计,由于其初期的轻巧、快捷、没有历史开发包袱等特点,迅速占领了移动UI设计这一垂直领域的市场,撼动了Adobe在这里领域的地位。...这个页面 寻找适合自己的插件:) 新近版本的 Sketch 加入了Storyboard特性,对于原型图的产出提供了支持,同时你可以通过 Sketch 配套的移动应用 Mirror 在局域网络下实时预览你的设计在以真实屏幕上的显示效果...Sketch 是付费软件,也是Mac平台独占的优质软件,其优良的设计,便捷人性的操作和完善的操作流所带来的效率远远大于软件费用,墙裂推荐购买正版。

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

    UI 设计中的视觉无障碍设计

    UI 设计中的视觉无障碍设计 2017-12-10 10:58 我给博客改了主题色,从 这样的 改成了 这样的;然而我问小伙伴看看效果他却并没有发现改变...我们将人类这种通过三种颜色感知细胞对颜色的识别称为三色视觉。 双色视觉,三色视觉和四色视觉 有些动物有更多的感受光线的细胞种类,比如鸟。...从进化的角度来想象色盲眼中的世界 所以,人类现在的三色视觉其实是从爬行类的四色视觉“进化”至哺乳类的双色视觉,随后基因突变再次形成灵长类的三色视觉的,其中黄绿色和绿色的感知是同一个基因突变产生,波长感知差异很小的两个部分...UI 设计中的视觉无障碍设计 作为三色视觉的程序员和设计师,刚刚我们想象了一把双色视觉的色盲世界,又被四色视觉的异人逼着看叶子的形状找草体验了一把当色盲的感觉。...推荐一些工具用来手工检查界面是否做到了无障碍设计 本文开头我们说到色盲模拟器并不能模拟色盲眼中的世界,但是我们却可以用这些模拟器来评估我们的 UI 设计是否能让色盲者无障碍地使用。

    1.5K20

    新拟物风格,视觉垃圾or设计趋势?

    作者观点颇为犀利,直接称Neumorphism为视觉垃圾。...对比度和视觉限制 Neumorphism风格设计师好像忘记了设计的基本原则,如何设计更好的对比,如何向用户证明,Neumorphism设计稿上的按钮都有很强的对比度和识别度。 ?...如果你打算将界面做成Neumorphism风格,那所有人都会感谢你,色盲和视觉障碍用户会彻底将你的应用抛弃,而其它人在晴天的室外观看Neumorphism设计时,估计也想马上把这该死的应用卸载掉。...视觉垃圾(作者原话) 在看完所有的Neumorphism作品之后,很抱歉我真的对它们喜欢不起来。设计师在Neumorphism风格的设计中不会使用任何线条,分隔线,而仅仅是用阴影来表现层次感。...对残障人士极不友好 在2020年,我们作为设计师的一个重要任务,就是为残障人士,视觉障碍人士设计更易于使用的界面,消除现实与虚拟之间的界限,让用户沉浸在产品使用中而不会产生不必要的麻烦。

    1.4K20

    设计到开发的完美交付(工具篇)

    设计交付对于UI设计师来说是一项必要的工作流程,设计交付影响着界面的最终实现和各尺寸适配效果。那么如何做好从设计到开发的交付呢?本文就教一教大家,如何用工具帮助完成从设计到开发的完美交付。...二、提供设计稿以及标注切图 很明显,移交设计稿以及标注切图是整个交付过程中最重要的环节了。用户手中看到的产品界面,并非设计师的最终效果图,而是一个个单独的切图经由开发技术实现。...从Sketch、PS等设计工具中,通过插件将设计稿上传到标注切图工具里,即刻自动生成标注、一键下载切图: 推荐工具: 1. 摹客iDoc Mockplus iDoc是更快更简单的产品协作设计。...更棒的是,像Adobe XD和Mockplus iDoc这两个工具,原型设计是其中一个出色的内置功能,通过简单地单击选项卡,设计人员可以轻松地将设计过渡到原型。 推荐工具: 1. ...可用于 UX、UI 设计以及快速制作设计原型稿。用户可在短时间内就能轻松制作出互动的 APP 界面、网页原型,并将创意轻松展现给他人。 特点: 从设计切换到原型:在画板之间拖动线条,为原型增添活力。

    2K50

    从零开始的异视觉设计

    所谓从零开始的异化视觉设计,是一种设计的思维方式,有时候我们会苦恼设计能力如何得到更多提升,此文或许能提供一些参考性的思路和设计方法。 ? 从零到一 什么是从零到一? ?...从一个还只是信息框架层面到一个可以启动开发的视觉设计稿,我将这个过程称为从零到一。 举个栗子,说说楼主以前遇到这样一个需求,是个游戏分类的列表页,是需要左右滑动切换标签的,交互图如下: ?...将已有的视觉设计,通过打散布局和信息结果,并将他们通过更优的方式重组,再给一些轻微异化的样式,就能得到新的视觉稿。...通过产品的需求,和对设计的预期,不断尝试重组信息结构,找到合适的版式和视觉样式(注:为了确保自己生命安全 ㄟ( ▔ , ▔ )ㄏ,和不做无用功,该步骤一定要与交互同学、产品同学和技术同学多多沟通)。...这就是“从零”开始的设计方法,往往我们项目的周期会根据项目的紧急程度决定,所以总会有视觉设计周期不同的情况,然而用“从零”方法,是可以在有限的时间里,不断的从”零”到“一”,再又从“一”归“零”的信息归纳

    65770

    视觉设计除了好看,更要走心

    视觉设计是着力于视觉表现上来提高产品的用户体验。在概念上来说,这是非常简单的一件事,但是为什么我们不愿意在视觉设计上花那么多精力呢?然后谁应该在这个过程中参与进来?此外,我们应该从什么时候开始?...为什么视觉设计很重要 视觉设计的重要性源自方方面面。 最显而易见的是,视觉设计决定了用户在使用产品时对其产生的第一印象。研究表明,用户只需要 50ms即可对一个产品产生第一判断。...话虽如此,我们依然需要知道的是视觉设计在工作流程中是需要在后面才开始进行的,这样做才是明智的,因为: 视觉设计的交付物感觉永远也做不完,要做到像素级的完美是非常花费时间的,而且当需要迭代和转变产品方向时...视觉设计是一个很巨大的部分,我们称之为“个性设计”。...产品的个性将很大一部分影响该产品的视觉设计,然而从迭代和视觉设计都是一个非常花费精力的过程,一些精明的设计师将会节省在视觉设计这个过程中的产出直到产品开始有自己的框架结构。

    1.2K90

    仿生视觉:生物视觉模型在传感器设计中的应用

    仿生视觉就是其中之一,通过模拟生物视觉系统的工作原理,设计出具有类似功能的传感器。...本文将介绍仿生视觉技术在传感器设计中的应用,详细探讨其部署过程,并结合实例和代码解释,帮助读者更好地理解和应用这一技术。Ⅰ、项目介绍①. 背景仿生视觉是指受生物视觉系统启发而设计的一种视觉系统。...因此,借鉴生物视觉系统的设计思想,可以帮助我们开发出更加智能、高效的传感器系统。在过去的几年里,仿生视觉技术在传感器设计领域取得了一些重要进展。...仿生视觉传感器设计设计仿生视觉传感器时,需要经历以下步骤:传感器选择——》在选择传感器时,需根据应用场景和需求进行合适的选择。...生物学启发设计仿生视觉传感器将更加深入地借鉴生物视觉系统中的设计原理和机制,实现对生物视觉系统更加精细和深入的模拟。

    28310

    视觉设计师需要懂的4个设计原理

    靠激励自己成为一个更好设计师。 上周,我的一位读者发了一个问题:如何成为一个好的视觉设计师? 正如我在想如何回答这个问题一样。最近我决定自学普通话。当谈到学习新的语言时,你首先要从基础知识开始。...视觉设计是一种视觉语言。学习视觉设计与学习一门新的语言没有什么不同。 好的视觉设计师并不是天生的。他们是后天养成的。成为好的视觉设计师的关键是需要严谨的。如果你下意识地努力,你将会提升为视觉设计师。...这里有一些你应该掌握的基础知识,可以把你的视觉设计提升到一个新的高度。 原理1:回归基本类型 你可以通过查看他们的排版来告诉很多设计师。因为这个类型是设计的基础。...将字体配对可以大大改变设计的动态。 原理2:利用空间创造平衡 间距有助于在你的设计中建立垂直和水平运动。它是创建视觉层次和形成元素之间的关键因素。...然后让朋友看看你的设计。让他们圈出最多的元素。然后,让他们根据视觉重量对圆圈的元素进行编号。结果是你预期的吗? 做这个练习时,请注意以下几点: 目标网页的转化目标是什么? 你如何优化以达到你的目标?

    1.5K50

    腾讯云虚拟直播产品视觉设计探索

    我们进行了一系列的设计探索,下面介绍一下我们是如何克服项目中的这类难点的。 2. 设计策略 虚拟直播产品的视觉该如何考虑呢? 在了解项目情况后,我们针对性的做了以下设计方向。...客户识别路径 首先是分析客户的识别路径,以制定不同阶段的设计目标;在视觉方面,影响客户感官的主要是应用场景的图文识别,以及体验Demo时候的视觉识别,最终要使客户对虚拟直播产品形成“专业”“前沿”的第一印象...登录界面 登录背景视觉确立后,登录的主要操作流程中登录框、loading等元素也延续风格进行设计,形成完整的视觉效果。 4....主播端&观众端界面效果 积累基础框架与规范组件,产品功能交互目前正在进行更全面的梳理,视觉设计后续也会进行迭代。 积累基础框架与规范组件,视觉设计后续也会进行迭代。 5....通过虚拟直播项目我们也进行了总结,以归此类技术产品售前售后的视觉体验设计探索方法: 1.

    2.1K20

    视觉调整-设计师 vs. 逻辑

    toc 对齐+视觉权重 颜色 规模 大写文字 对齐+视觉权重 仅靠宽,高,以及坐标X,y值,电脑没法精确的指导物体的视觉重量。作为设计师我们需要对此进行一种叫做视觉调整的补偿。...就像我们所有的视觉调整一样,这个也很微妙,但是这些调整能够让设计看起来正确。这是一个微调的元素——上下增加了1px直到它感觉正确。...上面的大写文字远比旁边文字大,下面的小写文字调整到2倍才让其视觉上平衡。 除非设计上特意为了突出大写文字,大写文字需要减小大小,譬如16px到14px或者12px到11px。...一旦这变成工作流程的一部分,减小文字2px或者推动三角形10px来达到视觉正确需要时间,当这就造就了设计的像素完美。...电脑或者甚至是人工智能(AI)都无法理解一小块设计中的上下文环境,因此它们不能像设计师一样做出精确的视觉调整。等到电脑可以在孤立设计的上下文设计语言中做出理性的判断,我们才能在复杂设计中历它的判断。

    54810

    精读《设计完美的日期选择器》

    这篇文章对移动端的日期选择暂无涉猎,都是PC端,列举出通用场景,每个类型日期选择器需要考虑的设计。...设计原则 2.1 通用设计 1)明确需求,是实现日期选择、日期区间选择、时间选择 2)用户选中日期后是否需要自动触发下一步?尤其是在某些固定业务流程中 3)日期选择器是否是最佳的日期选择方法?...这个设计点我第一次看到,专门附图说明。 2.3 日期弹出层设计 1)理想状态下,任何日期选择都应该在三步之内完成 2)日期选择弹出层的触发方式? 是点输入框就还是点日期小图标?...2.4 日期区间设计 1)理想状态下,任何日期区间选择需要在六步之内完成 2)用户选中后是否立刻做背景色提示? 3)当用户选择时,区间是否需要随着用户动作改变?...文章中亮点设计 3.1 google flight 这个案例在最小的范围内提供用户找出最优选择。虽然第一眼看到这个方法,我懵了一秒,但仔细一看发现这种展现方法完美的给出了各种组合。

    1.4K10

    你的设计作品!缺少视觉引导吗?

    其中视觉引导对整个平面广告设计来说起着至关重要的引导作用。 ?...视觉引导是指人眼观看事物时经过设计师有意识的引导过程,它是由人类的视觉观看特性所决定的,就是在一定的画面空间中视觉顺序的过程,它是各构成要素组合后对整体画面印象的反映。...在设计的处理上,表现在以强烈的形象与文字独自占据画面的视觉焦点,从而使平面广告设计的主题更为突出;另外在画面中文字、图形的聚散强烈比关系和特异的构成都会引起人们的关注,成为视觉的焦点;其次视觉的向心,离心的运动也是焦点视觉引导的具体表现...在视觉版式构图中加强特定视觉元素间的对立统一关系,以达到突出且具有动感的效果,使其成为画面中的视觉重点所在,也就是我们所说的视觉关注点。因此可知对比手法的设计目的在于建立视觉重点。 ?...在平面广告设计中、各种视觉元素不断的作用于我们的感觉器官,由于形态和色彩的张力对视觉画面的刺激,引起视线的不断移动和变化、这种视觉移动顺序可以表现为多种形式,由于运动的整体形式不同,主旋律也不同、就有不同的序安排

    1.4K10

    腾讯工业云平台视觉设计(上)

    2.设计回溯 此次设计升级主要目的为基于1.0的视觉基础上探索工业云的设计方向和提升平台的整体视觉效果以及规范标准化落地。...设计分析 平台设计中,首先的设计重点是平台首页的视觉升级;首页的视觉重要性就像是两个人相识,和见面第一印象一样重要。那么关键因素也是要给对方留下深刻印象和特点。...情绪版 情绪版的目的是辅助展现最终视觉表达效果,帮助设计师找到合适的视觉演进方向。...视觉延伸与规范 作为平台的设计,很重要的一点便是考虑平台的视觉统一化设计,也是在主视觉完成后需要完善的重点内容。...3.视觉规范化 在视觉建立的过程中也要考虑到视觉规范化,也就是统一的视觉表达与规范的视觉语言呈现,在后续的设计协作以及设计复用时,提供有效的参考。

    5.2K40

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

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

    1.5K50
    领券