© 视觉设计
Powered by LOFTER

从微信WeUI设计规范,解读移动界面设计

说明一下目的:看到传播很热的微信WeUI,应该说是一种比较简单暴力的表现形式,但落实到设计者进行学习和实操时,具体数值应该会更有参考性;

说明一下过程:部分数据来自CSS样式,部分数据来自截图后PS测量。

说明一下成果:数据中类似色值本身并不具有参考价值,但是动态变化方法值得参考。

其实,规范首页设计上配色清爽、排版简洁、内容上分类清晰,甚得我心(相比于IBM庞大的结构复杂的没汉化的设计规范,真的是业界良心);

每个类别内的交互做得很直观,测试过程真是痛并快乐着;

微信WeUI设计规范查看链接:WeUI

接下来的内容是对WeUI中列举到的控件的一些理解,除了微信中的实例 ...

移动端界面中的版式设计原理

“我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好,相信很多人也有过感同身受的无奈。

其实设计本身就是一门理性的学科,审美因人而异,只有言之有理的设计才能够说服别人。当设计师拿到产品的原型开始做设计时,如果只是单纯的按照原型进行而不考虑任何规则,那么很多时候就会产生一些不协调的结果。设计完之后产品不满意,自己也不满意。在UI设计中其实也存在大量的版式设计原理,如果产品和设计都能对版式设计有一定的了解,那么设计师拿到原型的时候,评审设计输...

如何把握登录界面易用与安全的平衡

编者按:不论是网页设计师还是UI设计师,登录和注册页面的设计是必然经历过的工作内容。登录界面的设计说难不难,说容易也不是那么轻松就可以做好的,要在安全和可用性之间找到登录界面的平衡点,还是需要相当的经验来支撑的。今天的文章来自GoSquared团队,他们在登录界面的设计上细致入微,值得学习哦~

对于GoSquared 的每一个设计细节,我们都非常之上心。最近登录界面改版,新加入的双重认证机制使得用户账户更加安全,与此同时,我们也借此机会逐步提升用户登录的体验。

提升登录界面的用户体验并没有看起来那么简单。当你让登录界面越发漂亮、直观、快速且好用的同时,你还需要让这个过程不那么简单,不会...

专业产品经理的原型是什麽样


修改记录 

这是某项目1.06版原型,因此针对上一个版本原型修改了哪些内容,在第一页做了说明


总览

用来说明产品页面结构和主要功能流程

首先是结构:


然后是流程


全局说明 

关于全局设计、交互的统一说明


界面原型 

这是界面


这是模块功能的流程


这是内容与操作说明


导航 

在导航部分我用字母、数字分别说明了所在模块、页面编号、页面层级等信息。只是一种便于我自己寻找以及...

移动端尺寸基础知识科普指南

@十萬個為什麽 :初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦 >>>

现象

首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone...

网页的栅格系统设计

栅格系统的形成
1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。


栅格系统...

为设计师量身打造的DPI指南

本文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。 没有复杂的计算和不可分析的图表,只是按照划分直截了当地将内容呈献给读者,便于读者理解以及直接运用到设计过程中,非常实用且专业的知识,记得收藏唷。

什么是DPI、PPI?

DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。

安...

iPhone6和iPhone6 plus的iOS8设计尺寸参考指南

1. 分辨率(px)


2. UI元素高度(px)


3. 文字(px)


4. 图标(px)


iPhone 6 屏幕揭秘

几天前,Apple发布了iPhone 6 Plus. 新的iPhone大幅改变了图像在屏幕上渲染的方式。我们做了一个图表进行详细分析:


一根线的渲染 

为了说明多种设备的不同像素渲染情况,我们比较了一个一像素宽的线是怎样渲染的:

  • 最初的iPhone – 没有高清屏,比例系数是1。

  • iPhone 5 – 有高清屏,比例系数是2。

  • iPhone 6 Plus – 超高清屏(Retina display HD)。比例系数是3,并且图像会先渲染为2208 × 1242像素然后缩小为1920 ×...

iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。


加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?一个基本思路是:

1、选择一种尺寸作为设计和开发基准;

2、定义一套适配规则,自...

设备像素比(devicePixelRatio)

设备像素比是物理像素与设备无关像素的比值,单位可以用dppx。它用于描述整个渲染环境在硬件设备上的缩放程度。在程序中可以通过window对象上的devicePixelRatio属性来得到这个值。它是只读的,但不是常量,对浏览器的一些特殊操作会改变这个值。
  首先是对几个概念的解释
  物理像素(physical pixel):设备能控制显示的最小单位。
  设备独立像素(DIP,device-independent pixel,density-independent pixel):独立于设备的用于逻辑上衡量像素的单位。
  每英寸像素量(PPI,pixels per inch):一英寸长度上可以并排...

浅谈移动Web开发(上):深入概念

如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分。没关系,我将用两篇文章的篇幅来解决这些问题。上篇文章关于解释和区分一些入门级别
概念。这些概念你或许一直在各种场合看到或者听说,好像熟的很,但你真的了解它们背后的含义吗?下篇文章我们就需要用到这些概念,聊一聊移动设备上的图片加载方案。至于响应式设计,已经有太多写的非常好的文章来叙述它们,这次在这里我就不赘述了。

我们先从听说最多一个概念——PPI开始。

PPI什么是PPI

PPI的复杂之处在于如果他所属的上下文环境不同,意义也会完全不一样。 当

iPhone 6出现后,如何将一份设计稿支持多个尺寸?

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。


加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?一个基本思路是:


1、选择一种尺寸作为设计和开发基准;


2、定义...

以用户为中心思维下的Web设计

“轻轻的将手肘撑在桌子上,托着脸来看这个世界,眼前的一切似乎也会随之有所不同。我们观看世界的视角与感受世界的方法可能有千万种,只要能够下意识的将这些角度和感受方法运用到日常生活中,就是设计。”


读了原妍哉的《设计中的设计》,或多或少有些感触,设计师的工作一直是在追求艺术与设计的融合。而设计,无所谓你华丽或纯净的表现手法,都必须完成其所承载的或商业、或用户诉求等目标。Web设计的核心与目标便是“以用户为中心的设计”,追求极致的用户体验。


AnyForWeb是一家知名的WEB设计与开发机构,为国内外知名的机构与组织提供WEB设计与技术开发服务。本文分享了团队进行...

浅谈网页设计中有趣的交互设计

交互设计的本质是对用户行为的一种设计,直达内心的设计能够影响用户自身的情感,从而引导用户的行为、提升趣味性和愉悦度等,这些都是针对用户情感化设计的领域。针对用户情感进行设计时,需要考虑产品的用户群,有趣的交互设计将会为产品塑造个性,需要明确产品个性是否与目标用户相符。富有灵感和创意的设计与一般设计的区别在于,它不那么容易被想到和实现,一旦它被实现,一定是个非常有趣并且迷人的网站。


1.图形视觉化

 

人们往往会忽略身边所熟悉的事物,这是人本身的适应性所造成的,当在熟悉的状态当中出现新奇有趣的东西时,人们的注意力也会被集中过来。网页中,不规则的形状设计可以生成最有...

隐藏在背后的交互设计

  外行人对交互设计的第一印象是什么?画线框图的?做草稿的?


  的确,大家所看到交互设计师的日常工作成果都是一些线框图,从表面上理解的确是这样。


  其实,交互设计师做的远远不止这些。往深一步想,信息架构、界面、流程,都是设计师需要考虑的问题。下面,想谈一下我理解的交互设计。


  交互设计最重要的两个因素:信息&互动


  1.信息


  人们每天面对那么多信息,在杂乱的信息中筛选出对用户有价值的,呈现给用户,帮助用户做选择,指引用户完成任务。信息的筛选直接影响着用户使用,在用户需要的时候无法提供有用的信息,将导致任务无法进行下去。所以信息是交互设计...

2014年移动应用交互设计10大趋势

  在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来。2014年,又有哪些新的设计趋势脱颖而出呢? 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。


  1、转场动效的极致平滑(TRANSITION ANIMATION IS SMOOTH EXTREME)


  移动APP越来越强调沉浸式的体验,页面和页面之间切换也需要更加的流畅,转场动效需要更加的极致和平滑。如果你还没有为你...

UI设计中的48DP定律

先说说什么是dp

(魅族工程师):其实对于一个非技术人员要把这个概念完全搞清楚还挺复杂的,所以我们就知道他是干什么用的就好,因为安卓阵营的碎片化,所以会有杂七杂八的不同分辨率的屏幕,但是一个UI人员不可能对不同分辨率把应用的图片都切一遍吧?所以就用dp这个单位,用这个玩意儿可以保证同一个图片在不同分辨率下的屏幕上保持基本相同的物理大小。

说了dp,就得说说px,px就是屏幕上的一个个物理的像素点,以前的屏幕上的像素点是可以用肉眼看到的,后来乔布斯炒作了个视网膜屏幕的概念,其实就是像素的密度比较大,肉眼已经看不见了。

如下图,是用像素(px)为单位的按钮和图片分别在低分辨率、中分辨率和高...

主流Android分辨率简报

Android设备的碎片化众所周知,分辨率、长宽比千变万化,让设计师与开发者头疼不已。由于工作需要,可乐橙对其简略分析了一下,希望对自己与广大设计师和开发者们的工作有帮助。


19条ANDROID平台设计规范

1、尺寸以及分辨率:

Android的界面尺寸比较流行的有:480*800、720*1280、1080*1920,我们在做设计图的 时候建议是以 480*800的尺寸为标准;

2、界面基本组成元素:

界面基本组成元素包括:状态栏+导航栏+主菜单栏+内容区域;以480*800的尺寸为标准下的 各个元素的高度(其实导航栏和菜单栏每一个应用都或许不一样,android对于尺寸没有太明确的 数据规范)如下:


3、字体:

Android 系统中,Droid Sans 是默认字体,与微软雅黑很像;

4、操作栏:

1、”操作栏”对于 Android 应用来说是...

手机浏览器地址栏及工具栏与可视区域尺寸总结

本片由本人使用iPhone 4s截图之后总结的区域尺寸,欢迎指点,如有错误的地方请提出或留言!


safari浏览器: 内容往上滑动时,地址栏隐藏,但是会有展示公司名称区域,同时工具栏会隐藏

状态栏+地址栏=40+88+1=128+1;工具栏:88+1

内容可视区域:960-128-1-88-1=742     |      960-79-1=880


Chrome浏览器(33.0.1750.15): 地址栏和工具栏合并,内容往上滑动时,会隐藏地址栏与工具栏

状态栏+(地...

黄金分割

        黄金比又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值约为1∶0.618或,即长段为全段的0.618。0.618被公认为最具有审美意义的比例数字。上述比例是最能引起人的美感的比例,因此被称为黄金分割。应用在生活中有神奇魅力。

简介编辑黄金比的概念


        把一条线段分割为两部分,使其中一部分与全长之比等于另一部分与这部分之比。其比值是(...

六个技巧让你的页面设计出彩

工作中,网页设计师经常会遇见这些情况,时间这么短又要出彩,又是要大气要气氛风格不明确很难把握,栏目这么多页面又这么长,,突然觉得素手无策,怎么办呢


设计的骨骼:点、线、面

在我们的生活中,设计无处不在,比如地铁里的大广告牌,橱窗里摆放的衣服,高楼大厦的LED展位,甚至手机里的某个应用界面等,通常在大家眼里,好的设计就是即有创意又大胆,并没有什么规律可循,但其实设计和绘画不同的在于,绘画可以展露个性,而设计的核心却是体现秩序的美感,它不是来自个人,而是来自于社会,好比建筑群的设计构成,不只是一个华丽的皮囊,而是有血有肉的,它的骨骼就是设计的根本。每个设计抽象出来都是一些元素的构成。

相关阅读:
无法忘怀的色彩:移动界面设计中的渐变
视觉艺术与图形设计的区别

康定斯基曾经在《点线面》的一书中,将艺术的形式归结为三种元素之间的构成关系。
“依赖于对艺术单个...

汉字创意 字体图形化设计

设计前的思考

文字是一种记录与传达语言的符号,是人类文明进步的重要标志。随着图形化时代的来临,文字与图形的关系在设计领域起着举足轻重的作用。当练习字体设计时,找有代表性的字体来做,练习有代表性的字体不但可以激发你的创意,还可以提高你的思维能力。文字经过艺术化设计后,可以让文字形象变得情景化、视觉化、强化语言效果,对提升页面设计品质 和视觉 v表现力发挥了极大性的作用。

什么是代表性的字体?

如:时间你就会联想到钟表 ,对话你就会联想到电话 ,爱情你会想到心 想到这些有代表性的字时,谨记不能把钟表等图形直接放在字体里,这样就没有设计的意义了,要巧...

1 / 2
TOP