Blog

移动端适配总结

1. 视口 viewport1.1 viewport 基础viewport 解释为中文就是‘视口’的意思,也就是浏览器中用于显示网页的区域。在 PC 端,其大小也就是浏览器可视区域的大小,所以我们也不会太关注此概念;而在移动端,绝大多数情况下 viewport 都大于浏览器可视区,保证 PC...

无标题

10分钟教你如何选择筛选组件

[图片]“生活需要筛选,App页面也一样。”筛选组件概述筛选组件的作用是帮助人们在面对大量信息时,通过更高效的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析。组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。本文通过案例分析,从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。位于 Tab 栏的筛选组件组件样式筛选按钮位置:一般位于Tab...

如何打造一款静态开源站点搭建工具

[图片]如何打造一款静态开源站点搭建工具本文涉及的所有代码可以在 docsite 的开源代码仓库 https://github.com/txd-team/docsite 中找到,如果对你有所帮助,欢迎 Star 关注我们。背景诸如github pages...

Javascript 模块化指北

[图片]前言随着 Web 技术的蓬勃发展和依赖的基础设施日益完善,前端领域逐渐从浏览器扩展至服务端(Node.js),桌面端(PC、Android、iOS),乃至于物联网设备(IoT),其中 JavaScript 承载着这些应用程序的核心部分,随着其规模化和复杂度的成倍增长,其软件工程体系也随之建立起来(协同开发、单元测试、需求和缺陷管理等),模块化编程的需求日益迫切;JavaScript...

语音交互设计(二):设计流程与方法

[图片]“ 语音交互设计仅靠书本上的知识是不够的,在实际项目中,除了要了解需求、目标用户以外,还要了解语音设计所应用的场景、技术水平、设备配置等,从而有的放矢的展开设计。本文结合参与的项目,将语音交互设计的流程、设计关键点以及如何通过设计化解技术限制,和大家进行分享。”日常设计工作中,大家都会按照一定的设计流程开展工作,通用的流程一般有:探索调研 > 分析聚焦 > 设计策略 &gt...

语音交互设计(一):VUI发展及特征

[图片]随着移动智能终端和云计算的快速发展,人工智能的浪潮正在悄然颠覆着我们生活的点点滴滴,VUI(Voice User Interface,语音用户界面)作为一个新的领域也在快速发展,并对用户体验提出了更多关于语言学、情感塑造、逻辑搭建等方面的新要求。大家想一下VUI技术发展所带来的改变:我躺在沙发上,双手打着游戏,我只需要用声音就可以操控空调、预定一份外卖,并且在一小时左右就能吃上,相信这种体验一定不错!VUI的发展那么,在原有GUI(Graphical User Interface...

后台产品Dashboard设计思考 — 你不知道的折线图

[图片]《白》是原研哉于200...

设计微观——图表动效洞察

[图片]“ 图表动效设计思路”本文针对三類型圖表:折线图、直线图、圆饼图分享动效设计过程,并附带移动端的交互场景动效。网上有许多的图表设计作品,部分也会添加动态的展示,而本文则以团队移动端产品的图表为参考,参考理论、学术依据等来创造有理有据的动效。前置参数好的动效添加应是“无形”的,而这个无形并非用户看不见,而是自然且符合逻辑的感知,同时具有助于功能的价值并符合现实世界物理材质特性。也参考研究数据人类对事物的感知时间为230毫秒(参考文章:How fast should your UI...

迅速掌握不同插画风格的方法:仿型与破型

[图片]不管是UI设计中还是营销活动中,插画都有很高的出场率,原因并不复杂:插画比起图片可控性更强,更容易发挥创意,营造氛围,传递信息。从内容到技术细节,插画都在某种程度上超过现成的图片。作为视觉设计师,我们也常常会接到各种各样的需求,针对不同的项目和产品绘制插画,往往项目时间紧张但又需要在插画展示上有差异性。但看着网上风格各异的插图,往往想学习却又无从下手,该怎么办?下面我将从仿型和破型两个角度来阐述,如何快速掌握风格各异的插画。[图片]dribbble上形式各异的插画  图片来源:dribbble...

如何规范图表的适配—— 以环形图为例

[图片]越来越多的设计师通过组件的方式支持业务需求,组件是设计的沉淀但同时也需要设计师对每一个细节场景的深入思考。本文通过探索常用三大图表之一的环图适配问题,总结图表适配的一般方法。了解环图了解环图之前,我们必须先了解圆饼图。饼图借用了饼干的隐喻,用圆形切角的方式呈现各分量在整体中的比例。而环形图是圆饼图的一种变形,在视觉上,由于去掉中心的部分,使得环形图较圆饼图更“轻” ,但依然能够很好的诠释数据间的占比关系。所以在整页的Dashboard...

从任务中心看状态机功能组件设计

[图片]本文通过设计一个简单的任务中心来展示一个使用有限状态机思想设计该如何做。本文使用 JSDOC 添加注释。关于有限状态机有限状态机 (FSM) 维基 百度百科 是用来表示有限个状态及在这些状态之间转移和动作的数学模型。早在07年就有文章讲解 js...

如何让界面任务流程更清晰 ?向导式设计了解下

[图片]向导式设计是什么?软件界面设计中的“向导式界面”这个术语源自英语中的“Wizard...

如何让你的“在线设计工具”变得优雅

[图片]“ 1985年,当画图工具伴随Windows 1.0诞生时,人们惊喜的发现利用图形界面,用户竟然可以在电脑上绘图了。这些设计工具们如今近已拥有非常强大的功能,然而,最强大的功能也必定伴随着最复杂的界面。”[图片]“你喜欢哪个界面风格呢”近年来,在线设计工具以云存储、轻量化、多人协同等优势受到越来越多人的青睐,而Wix、G Suite、Graffana的大行其道更是令各大厂商们信服其价值。[图片]上图是一款“线上Dashboard设计工具”的交互demo...

好用的npm包:debug

[图片]npm是JavaScript的包管理系统,提供通用的模块给其他开发者及工程内使用,类似于Java语言 的 maven库,设计师使用的素材库。好用的npm包系列致力于挖掘一些好玩实用的npm包,聊些使用场景和实现思路。如果说程序员喜欢用自己的方式去实现别人已实现的东西,叫做重复造轮子, 那么这个系列就是带你去看飞轮海 。基本介绍DEBUG是一种计算机程序。马克2号(Harvard Mark II)编制程序的葛丽丝·霍波(Grace Hopper...

复杂度些事儿 - 前端代码质量系列文章(二)

[图片]Are You Smart Enough To Debug Your Own Code?[图片]Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it...

注释那些事儿 - 前端代码质量系列文章(一)

[图片]以下为早先存档的markdown版本,后来做过一些修改,修改后的版本见这里良好的注释,能够使我们的代码更易读、更可维护。比如(react源码某处):[图片]相反,糟糕的注释不仅对阅读和维护代码无益,还可能带来糟糕的问题。比如:[图片] [图片] [图片]以上都是错误的操作。可以看到,许多同学在写代码时对注释的态度比较随意,也许不知道注释有哪些规范和讲究。因此,本文将从注释的目的、原则、方法、规约、工具等方面对JS...

基于后台产品的设计思考

[图片]首先解释一下后台,它是指服务的管理操作部分,主要是对内容、数据的增删改查。后台产品也主要是To B...

中国前端开发者千人峰会——参会分享

[图片]这几年参加过很多会议,却很少分享出来。这次趁今天没事做(悲伤)赶紧总结一下:(标明 注: 的地方是个人想法和私货)[图片]上午场一、局限和突破 - 谈Web性能瓶颈和未来发展这场介绍了W3C和很多很多的性能规范api,我会尽量列出我记录的部分。1.  由于迟来了几分钟,所以第一部分没有听到,下面会从第二部分开始,希望看看其他人的补充。2.  如何衡量页面性能?(怎么知道自己开发的页面性能如何?)有一系列的性能检测api,基于底层的 high resolution timing(高精度计时)-&gt...

后台产品Dashboard设计思考 — 图表智能推荐探索

[图片]  在设计行业快速变革的这几年,设计师不再只是简单的画图,而是重新思考自己的工作内容,设计价值如何体现? 本文结合在工作中对Dashboard...

如何用服务设计的思维去做民宿房东

一直在探索服务设计的理念可以跟自己日常生活中的那些地方可以有机结合使得自己做的更好。后来发现在做民宿的过程中可以用服务设计的的理念。用最简单的用户体验地图来规划整个房子的动线。用户画像首先是通过自己的「产品定位」以及「项目需求」来描绘了一个目标用户的用户画像(Persona )。[图片]一个叫June的妹子,形式互联网运营的工作,大学本科毕业,今年2...

我的双11 战绩---项目总结

[图片]项目概况“我的双11-战绩”-移动媒体屏项目,是2017年阿里巴巴集团,淘宝&天猫&研发效能等 BU 一起参与设计和推出的营销活动;为吸引更多媒体和用户来参与双11,分享传播双11。项目背景&目标项目背景:往年双 11 PR都是通过大屏对外传播,用户只是了解这件事情,但是参与度和热情不足项目目标:1,分享:通过去中心的方式传播双 112,回流:分享提升站内流量和回访率产品方案如何刺激用户分享?通过去中心的方式传播双 1...

射鸡师必须要了解的设计风格

从2017年天猫造物节到中国有嘻哈的海报,以及抖音app,一大波故障设计正侵入我们的生活。[图片]这个fashion的设计风格名叫赛博故障风,这里先和大家讲述下赛博故障风的由来。背景小谈赛博故障风又称赛博朋克风,赛博朋克(cyberpunk,是cybernetics与punk...

游击测试-高效易用的用研方法

游击测试介绍游击测试属于用户研究方法的一种,特征在于快速获取大方向的用户反馈,非常适合一个需快速实现的产品,与其等到产品开发完整才测试,不如直接听听群众的意见,那怕有所偏差也不要紧。至今,游击式可用性测试形式各异,但追求的都是一种高效反馈与高效修正的过程。[图片]相较于一般问卷或是访谈法等等,我们知道一些严谨的定律如:五个访谈者方可得到85%的资讯,30份问卷方可达到量化的标准依据等等限制。然而这样的限制于游击测试的概念相比已过于聚焦,并且耗时。自2011年Martin Belam发扬了Guerrilla...

使用KANO模型进行产品需求分析

是不是曾发生想到或用户提出了很多需求,但不知道怎么辨识真正有用的需求,或排期优先级怎么安排的情况?以下介绍一种定性研究,透过问卷调研的方式来了解需求属型与必要性。一、KANO 模型简介KANO 卡诺模型是由日本狩野纪昭(Noriaki Kano)博士所提出,主要用途是了解需求实现与用户满意度之间的关系,作为产品需求分析与优先级排序的参考依据。KANO 模型定义了三个层次的顾客需求:基本型需求、期望型需求和兴奋型需求,这三种需求根据绩效指标分类就是基本因素、绩效因素和激励因素。在 KANO...

移动弹窗基础知识浅析——iOS弹窗体系

1 前言前段时间整理移动组件,发现最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景……因此,打算从头整理移动弹窗的基础知识,以iOS弹窗体系为切入点,从定义出发,对移动弹窗进行分类,然后分别分析每一类弹窗的应用场景,以及在使用过程中需要注意的点。...

同学,这道题你会做吗?

[图片]又到了新的收获 (offer) 的季节,当前秋招正如火如荼,各位少侠是否在忙着准备面试和前端的技术题呢?题目介绍今天小编给大家出道题考考大家的 JavaScript 基础,如果你先知先觉,说明一定做足了功课,万一后知后觉猜到了答案,也别忘了给个点赞打赏小编这一番“深入浅出”的操作。废话不多说,有这样一个问题:console.log(a == 1 && a == 2 && a == 3) 运行之后是否可能输出 true...

前端人脸检测指南

Shape Detection API 的发布已经有一些时日,其主要的提供的能力是给予前端直接可用的特征检测的接口(包括条形码、人脸、文本检测)。本文将简单的对其进行介绍,对前端进行人脸检测进行普适性的讲解。(本文不讲算法~望轻拍)1 背景与场景Shape Detection API 的发布已经有一些时日,其主要的提供的能力是给予前端直接可用的特征检测的接口(包括条形码、人脸、文本检测)。本文将简单的对其进行介绍,对前端进行人脸检测进行普适性的讲解。(本文不讲算法~望轻拍)[图片]a...