5 个范例告诉你什么是自适应网页设计

移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?自适应网页设计的出现很好的解决了这个问题。这篇文章将带你了解一些关于自适应网页设计的基础知识和设计范例。一、理论基础:什么是自适应网页设计?2011年,网页设计师Aaron Gustafson在他的书《自适应网页设计》里率先提出了自适应网页设计的

视频(腾讯视频)APP 原型资源分享

2017版腾讯视频APP原型资源分享,页面库和原型可下载使用,所有组件均可编辑。视频类APP应该是每个人手机上的必备应用,很多小伙伴可能手机上还不只一款:腾讯视频、爱奇艺、优酷、搜狐视频、芒果TV、乐视视频,为了能第一时间看到各个热播剧,我们会经常在不同APP间来回切换。在这里给大家分享一套「腾讯视频」的APP原型, 里面有QQ登录流程、录制GIF流程、截图分享流程、发表评

实体联系模型|如何用 ER 图绘制业务实体 (更新了一下配图)

当你设计一个新的功能模块,服务端童鞋一定会追问你具体有哪几种实体以及之间的关系,如果你没想清楚或者描述含糊,那么就有必要学习一下ER图。你是否碰到过类似的问题?设计优惠券模块,有几个概念容易混淆。比如运营新建的一批优惠券,然后用户领了其中一张优惠券,而这一张有可能可以多次使用(比如uber)。请问这3种分别是什么,之间的关系,以及如何区分这3者……设计商品模块,spu、sk

史上最实用的原型设计流程和规范 (一)

摘要:因公司产品采用远程分布式开发,产品和技术分隔两地,没有面对面交流那么直接明确,无论是之前的文档、原型还是沟通方式都存在很大的不足,容易造成信息缺失或误解,给技术小伙伴造成极大不便。工作之余一直在思考:什么样的原型文档,标注方式才是异地开发最高效的?现将自己梳理出的原型文档规范模板分享出来,希望能对需要的人有所帮助。一、原型设计流程怎样才有效?需求大纲——>页面结构——

如何使公司在用户模型构建的投资最优化

本文作者将对用户体验设计的基础——用户模型进行剖析,重点讨论用户模型之构建。现今消费者对于企业的要求越来越多。他们期望获得的产品、服务和信息可以及时地迎合自身特定的需求和欲望。传统上,企业的发展和市场产品的推出是以市场细分和人口数据统计为基础的,并且会假定产品的特性、功能和信息的传递可以满足人口数据统计中消费者的所有需求——即是“一刀切”的方式。然而,随着市场由大规模批量化

在 APP 中,Tab Bar 是固定好还是不固定好?

本文作者将来着重谈谈APP中的Tab Bar 是固定好还是不固定好,你觉得呢?国内的现状是绝大部分APP的Tab Bar不固定,即进入二级界面后Tab Bar消失。难道Tab Bar 是不固定的好?但是我们也可以看到一些行业具有代表性的APP的Tab Bar是固定的(进入二级界面不消失)。这篇文章我来着重谈谈APP中的Tab Bar 是固定好还是不固定好?先来看看行业具有代

我们给 keep 做了一次版本迭代—原型篇

按照产品设计的整个流程来讲,在做原型界面之前,需要我们进行需求的收集和整理,形成一个需求池,在需求池中提炼出有效的内容,分阶段释放出不同的需求,以此进行产品不同版本的规划。 注意,版本需要封闭,没有封闭的版本是无法完成的。 这里不讨论如何进行需求分析的方法论,只具体探讨对原型界面的制作和表现方法!首先,我们应该要了解产品开发的整个流程;其次,对产品每个阶段所涉及到的方法论,

如何正确地画出页面流程图

说到页面流程图,看似很简单。但是其实很多人画得不规范,不能清晰表达产品整体的页面架构。希望我的经验可以对一些不太会画图建模的PM有点启发。页面流程是什么页面流程是指产品的所有页面以及相互间流向关系。包含元素页面,有向线条。可能包含判断条件。不包含具体功能。不包含弹层、元件等视觉组件。 页面命名要么是名词,比如购物车。可加定语,比如我的红包。要么是动宾短语,比如确认订单。要么

一个好的原型应具备的 5 个特点

一款成功的产品,一定是团队共同努力的结果,绝不仅仅是产品经理一个人的功劳。在产品的初期,产品经理需要让团队成员了解到产品做什么,为什么做,以及怎么做,而产品原型就是最好的沟通语言。因此,好的原型设计总能够让产品进程事半功倍。巴别塔,原本是全人类齐心协力建造的,一座通往天堂的高塔。然而上帝从中作祟,为了阻止人类的计划,上帝让分散各地的人类说不同的语言,使人类互相之间不能沟通,

778 位产品经理推荐的产品原型设计工具(含操作手册)丨工具箱 Vol.2

由于工具箱第1期流程图设计工具收到了大家的一致好评!所以我们马不停蹄的为大家整理了工具箱第2期,将给大家奉上最常使用的【产品原型设计】系列。本期包含8款最受产品经理欢迎的产品原型设计工具及配套使用手册。除此之外还会有项目管理、项目演示、思维导图、个人管理、信息获取、知识管理、数据分析、团队沟通工具、文档与表格协作、邮件客户端 等方向的工具推荐及使用教程。希望能给大家提供理论

一周的“探探”体验之后,我画了它的主要流程和原型

本来呢,我是拒绝这类交友软件的。在想要成为PM之前,我也喜欢体验一些新App,但社交软件始终装的不多。可能我对很多事情都很感兴趣但就是对社交有些苦手。(手动摊手)不过,既然有了新的梦想,那稍稍体验一下也不会少斤肉啦。( 真能少肉的话,100遍我也是会下载的 )只是粗略体验了一下,没有真正聊过,也没有碰上“擦肩而过”的人,所以流程里一定会有不完善的地方,希望走过路过的朋友们多

同一份 PRD,如何满足不同受众的查看需求?

看到网上有PM提问“UI、后端、前端看完原型之后,产品逻辑应该写几份怎么交付”。清一色的回答是应该写多份逻辑给不同的受众,然后分别交付。而我的经验是仅需写一份原型和逻辑,以不同的呈现方式交付给不同的受众。前提是你能够善用Axure写PRD。为什么这样说呢,你要知道按照多份逻辑分别交付的方法是存在很多问题的。重复工作多。比如视觉逻辑是UI和前端开发都需要的。修改很麻烦。如果有

外卖(饿了么)APP 原型资源分享

2017版「饿了么」APP原型资源分享,组件库和原型均可下载使用。恭喜你!又获得一套「饿了么」APP原型!^_^o~这期的分享主题是「外卖」,于是,作为一个一年365天能在「饿了么」APP原型组件库, 点击引用组件库:或者2.如上图所示,点击引用后,组件库即成为自己的引用资源(库内的资源也会实时更新),大家可在项目中使用它来搭建自己的页面,比如快速搭建一个「浏览足迹」页面:

论快速原型设计的重要性

快速原型设计的重要性主要体现在三个方面:(1)保证设计者流畅的设计思路;(2)通过快速演示帮设计人员更好地推广想法;(3)在高效地修改,迭代中提高设计人员自身项目能力。产品原型是用于还原用户体验最直接的手段,一个可触击原型不仅能检测产品的可用性,还能最大限度地节省时间,降低资源消耗。权威案例表明,原型设计对产品逻辑的精确再现,避免了产品发布后约25%的bug。同时,原型设计

善用 Aure 写 PRD,把原型放到手机里查看

前几天讲了《为什么375×667是移动端原型设计的最佳分辨率》,然后《如何生成适配手机的原型》,以及《如何设置手机APP原型尺寸》。这一篇讲解如何将原型放到手机里面查看,先分享效果电脑打开网址,手机打开网址。核心是应该是把原型发布到网络上。一方面可以用手机查看原型并模拟用户使用APP的交互体验;另外一方面,让技术随时随地能够查看原型并写代码。为什么选择Github其实将原型

善用 Aure 写 PRD,如何生成适配手机的原型

之前2篇文章讲了《为什么375×667是移动端原型设计的最佳分辨率》和《如何设置手机APP原型尺寸》,这一篇讲解如何设置Axure来生成可以在手机上完美查看的APP原型。逻辑上有点复杂,但是按照我的方法操作起来并不难。所谓的APP原型适配手机,是指用手机浏打开原型页面的时候,横竖都刚好撑满屏幕。当然如果页面比较长,高度超过一屏是没问题的。如果你的原型是你手机屏幕的逻辑分辨率

WeUI(微信)原型资源分享

WeUI 原型资源分享,组件库和原型均可下载使用。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。目前官方为开发者和设计师提供了Sketch和PSD基础样式库源文件,但对于产品童鞋来说,带交互的原型组件库才是王道!^_^o~为方便大家进行公众号、小程序等微信相关的产品原型创作,我们在这里分享给

为什么 375×667 是移动端原型设计的最佳分辨率

部分PM在设计移动端产品的时候,往往是随意画了个原型尺寸或者上网找个模板套进去,当然也有部分知道用375×667比较好,但是不知其所以然。接下来,我来讲清楚为什么以及前世今生。 原型尺寸的历史既然是设计移动端原型,理论上来说最佳的原型尺寸最好是和你的目标用户手机尺寸保持完全一致。好比iPhone刚出来的时候,设计iOS APP原型使用iPhone自身分辨率320×480就是

3 个细节,轻松区分效果图和原型图

产品设计是一个相对宽泛的概念,其中包含的内容不胜枚举。尤其对于新人小白来说,产品设计的分工分类着实令他们头痛。有些设计人员很多时候连自己画的到底是什么都不知道。领导叫你画个图,结果拿过来一看:天哪!你画了个什么?今天我们就来讲一下,效果图和原型图,这对常常扰乱大家工作的完美CP。首先,我们需要对两者有一个充分的认识:原型图,是产品或数据系统的一个基本的实用模型,通常为示范目