《方寸指间》是一本由无线工坊著作,电子工业出版社出版的平装图书,本书定价:48,页数:264,特精心从网络上整理的一些读者的读后感,希望对大家能有帮助。
《方寸指间》读后感(一):很适合-1-1岁产品经理和产品设计从业者阅读
说明
我是一位入职刚满1个月(之前实习了3个月)从事移动社交产品的产品策划助理(公司产品策划助理要求偏向产品设计,需要输出原型)。原型输出好之后,需要让设计师设计产品设计图,并切出图片,确认图片后,交付前端。在和设计师的一次沟通中,他推荐了这本书。对于新入职的产品策划,做出符合设计规范的原型,有利于减少和设计师的沟通成本,也有利于设计师对原型的理解,从而效率更高地输入设计稿。
关于小册子
我觉得对于我来说还是很实用的。首先它像一部百科工具书,对于一些图标、按钮、状态都给出了很标准的解释。在以后制作原型的过程中可以利用标准的语言来描述原型的细节。
够细,有料。特别是导航设计和细节设计这一节,讲到了很多我作为新人不常去思考的细节,然后你读到之后,有一种“喔!!原来是这样的啊!”的感觉。然后你就会把这本小册子放在身边,需要用到的时候就会拿出来翻动。
引导、聚焦。书中讲到了平台规范,也就是IOS、Android、WP出的设计规范,但是并没有全部介绍,而只是作为一个引子,点出来,如果你想要学,还需要自己去找这类资料,然后加强学习。具体书中的细节我就不剧透了,自己可以找来看看。
小册子的不足
左图右文很方便,但是册子中有些图片过小,文字也很小不利于阅读。特别是对于从事互联网的伙伴,眼睛整天盯着各种屏幕已经很累了。希望以后的版本可以在这方面注意一下~:-D
祝各位产品新人能够沉下心来事无巨细的饥渴学习。有需要交流的可以关注我的微信公众号哦
《方寸指间》读后感(二):《方寸指间》读书笔记
ative app不需要前端设计师,直接由开发实现。
圆形元素的尺寸——手指的舒适点击区域大于等于44px,最小元素不小于30px
原型界面的标注——直接对原型图就行解释说明
视觉标注和输出——*2 480 3套
简洁;突出重点,删除、隐藏、转移——safari浏览器——乐滔隐藏底部栏??用户习惯
——多采用手势操作,可以让内容最大化。。。。
将操作方式转移到传感器等硬件设备上。。。
红色缓存灰色最新——提示不明显
稳定、流畅和快捷都是高效的体现。。。
避免键盘输入,效率低、容易出错。。——用手势替代点击,让操作更加快速???
减少页面的跳转,功能上,设置全局性功能,救生舱
增加小按钮的操作范围,比如表情
使用抽屉;;
局部“删除”操作
一致性——设计上的一致性、与平台的一致性——提升产品易用性
及时反馈,任何情况都要及时反馈
——选中效果的交互,尤其在性能差的设备上有用
平台差异——iOS 肯定按钮在右边,否定按钮在左边
标签式导航——个性化设计,比如中间位置融合logo或者产品核心功能点
抽屉式导航——追求核心功能的突出,弱化导航界面,常见于信息流产品
桌面式导航——工具窗口的导航
《方寸指间》读后感(三):新人PM、设计师的实战工具书
这本书刚出没几天就拿到手了,打开包装之后一眼便知是“设计师们”出的书:横开本设计,左图右文,纸质优良,排版清晰,拿着感觉很厚重,绝对对得起这个价钱。
作为一名新人PM,对本书的内容还是十分感兴趣的,从设计的流程、原则、平台规范开始讲起,然后深入到导航、引导、通知等的细节设计上,最后还附上了移动用户、环境、硬件的特征,并结合了大量的app案例,十分给力。
我花了1个小时左右翻完了这本书,让我对移动产品的设计有了一定的认识,各处的细节讲解也很完善,也有一些我以前不知道的设计方式,很受启发。
本书是实实在在的一本工具书,特别适合新人阅读,既可以系统了解移动产品设计规范,也可以开阔一下自己的设计思想。
《方寸指间》读后感(四):有不少的……笔记
一、设计流程design cycle
1.web app和native app的区别?
聊聊Web App、Hybrid App与Native App的设计差异
Web App 和 Native App,哪个是趋势?
ative不需要前端设计师,界面实现由开发人员完成,视觉设计师配合开发做产品切图。上线前需要审核。
2.原型宽度320PX,视觉:iOS640px,Android480px。
3.原型元素尺寸,点击区域最好44px以上,不能小于30px,文字大小可以是AXURE默认的13号字。
4.iOS,元素的尺寸和间距必须为2的整数倍
Android有ldpi/mdpi/hdpi/xhdpi/xxdpi五种规格,分别对应0.75/1/1.5/2/3五种系数的单位尺寸,480对应mdpid 1.5系数,所有元素尺寸和间距必须是6的整数倍。
同时做iOS和Android版本的APP,需要8的整数倍。
5.视觉标注和输出:320px,640px除以2,480px除以1.5,得到的单位是dp。
二、设计原则design principle
6.移动设计六原则,
简洁,突出重点,在小屏幕上聚焦内容,删除、隐藏、转移。
高效,避免键盘输入(减少输入,保留之前的输入内容,关键字联想匹配;转化输入方式),有效触动(点击区域比看到的大,调整恰当间距,),减少跳转,任务连续性。
一致性,降低认知成本,设计的一致性(结构布局,模块化内容,文案,交互性为,视觉风格),平台的一致性(iOS左上角返回),跨平台的一致性(多平台布局,包括iOS,Android,Web app),规范,
反馈,让用户知道自己的行为正在被后台程序响应和处理
情感化,视觉愉悦,幽默,惊喜互动效果,贴心智能关怀,个性化独特气质
移动化,跳出PC的思维逻辑
三、平台规范platform norm
7.iOS平台
Android平台
Windows Phone平台:全景视图,无限扩展空间
8.层级返回:iOS的需要返回按钮,物理home键只负责退出。返回上一级按钮和物理返回。
编辑:iOS通过导航栏的编辑按钮,可多选;Android通过长按进入编辑模式,可多选;wp平台通常没有多选。
模板组控件:标准,帮助设计师快速搭建APP高保真设计稿。
对话框按钮:iOS一直把否定按钮放在左边;早期Android与iOS相反,4.0以后和iOS相同;wp平台和Windows系统一样把肯定放在左边,否定放在右边。
平台移植:优先考虑iOS
四、导航设计navigation design
9.主导航:
标签式,<5个,可融合logo、相机等
抽屉式,默认隐藏,通过左上角按钮或手势呼出
桌面式,适于工具类APP,每个工具有独立体系,也可扩展更多入口,使用趋势减少
菜单式,位于顶部,点击呼出,点击导航外的区域收起菜单,位于顶部,不适合结合手势,操作上有难度,不适合频繁切换的功能,一般使用列表来展示
点聚式,来源于path,动态,趣味
10.二级导航:(和主导航相互转化)
旋转木马
走马灯,左右手势滑动聚焦到当前内容,5-7个以内,避免疲劳。视觉暗示,显示下一张部分内容,或添加分页提示器,让用户保持清晰的方向感和对数量的认知
列表,扩展,分组,大量数据,结合图标、标题、或消息数字提示
图示,适合以图片为主的内容,及时更新,增加吸引力,配置固定的栏目或标题
分段选项卡,一般位于顶部导航栏下方,<4个
五、细节设计details design(精华部分,加载,引导,通知,控件,动画)
11.加载,有价值,有趣,连续性。
启动页加载,logo、口号、出品方,传递品牌和情感内容;和首页一样,快的错觉;闪屏,后台配置,定期更新,运营活动和节假日
页面间跳转,当前页加载(一般用在需要判断处理的页面,也适合web app中及时反馈加载信息)和进入页加载(点击链接后直接进入下一个页面,给用户带来流畅感觉,分步加载,优先框架和默认元素,让用户尽快看到基本布局和内容)
分步加载,优先加载占用网络资源少的内容,如框架、文字和默认图案,让用户更快看到页面框架内容
懒加载,长界面,无尽列表,达到某个点或触发拉动后加载
预加载,闪屏时提前加载首页内容;对于一些表单,提前加载表单
智能加载,不同网络情况生成不一样的界面,显示和隐藏;多套资源,根据网络情况做差异处理,如图片的高质量和一般质量
缓存加载,无网络时,看到本地缓存的有用信息,解决了设计体验和观感的很多问题。(避免空白界面,减少流量,加快访问速度, 不能无限制加载,防止占用太多系统空间)
12.加载样式
loading图标加文案说明
直接覆盖页面上方,半透明toast,嵌入界面内容
状态栏加载,系统默认,或覆盖状态栏
导航栏加载,主要是文案提示
界面中加载,主要有下拉刷新、懒加载和toast加载
工具栏加载,少见,例,iOS邮件列表
情感化:旋转,特别样式,意外惊喜,乐趣
13.引导,快速熟悉产品,遇到困难及时帮助,简单有趣,恰当时间和地方。
幻灯片引导,一般用于首页启动,聚焦,精简,创新。很容易被用户直接划过,追求核心和简单。故事型,功能型,游戏型,左右上下滑动翻页,自动翻页。3-5个。
浮层式引导,半透明,轻量级,目标性强,结合文案。非模态浮层,三秒左右消失;模态浮层,需用户点击确认。
遮罩式引导,强势的引导方式,半透明,通过各种图形结合盖住界面内容,需要确认或退出
嵌入式引导,状态栏,导航栏,工具栏,内容区。局部嵌入(温和,保留当前内容,增加引导提示)和整体嵌入(代替,一般用于“空状态”)空状态包括初始状态,清空状态和出错状态。
互动式引导,比较隐蔽,手势互动(加载),语音操作(告知用户正在接收)
多媒体引导,动画,音视频
14.通知设计,信息的传递,引起注意而不打断当前任务,针对性,不引起反感。
通知中心,系统,最便捷最不影响用户
顶部横幅,顶部短暂停留,引起注意,而不打断当前界面
alert,打扰程度最大,打断所有操作
toast,操作后反馈,一般3秒左右
标志,告知用户有新内容,提示查看,用户习惯消除这样的数字角标
15.状态栏
Android,电话、短信等
iOS,本身不带状态栏通知,但设计APP时可以覆盖状态栏
16.浮层通知,用于APP内的通知提醒,以浮层横条形式出现,较强引导性,不打断当前操作
标志通知,红点和数字,数字过大时容易被忽略。分为点击后消失和查看后消失
硬件提示,借助提示音,LED灯等
17.细节设计
文字
hotoshop,iOS平台,中文用黑体-简或Heiti SC,英文Helvetica(Neue)
Android平台,中文用Droid Serif,英文用Roboto
22,18,14,12,9dp,状态有:常态、选中、强调、辅助说明、链接等
图片(尺寸和质量)260×260,220,180,145,90,60×60
按钮,没有hover划过状态,有normal,press和disable等,长按属性,小按钮的点击区域要比本身大提高点击的准确度
输入框,默认显示提示文字,光标插入提示文字不消失,输入文字显示清除按钮
18.键盘,不同场景不同的键盘面板,
19.图形布局,细节的丰富程度,图片裁切方式,空间利用,信息缺乏与过载,趣味性与新鲜感,大小对比
20.卡片信息集中化,整体感,易操作,更大的点击区域。翻转,折叠展开,堆叠,自适应。
21.动画设计:告知用户来往,引导用户行为,减少用户焦虑,情景融入。
六、适配方案 adaptation plan
22.不同尺寸的屏幕(延伸,缩放,调距,截取),横竖屏切换(延伸,模式转换,增加模块,锁定),硬件性能(降级处理)。
23.延伸,文字、背景、文本框、按钮、下拉框等
缩放,图片
调距,不适合拉伸的,图标和图片,
截取,上下截取、左右截取,保留需要的部分,大图
闪屏,启动页,纯色背景(延伸),大图背景(截取)
满屏设计,防止长屏幕手机底部出现空白,优先考虑宽高比(0.56-0.67)最小的屏幕开始。
24.横竖屏切换
宽高的变化
模式转换
增加模块
锁定转向
七、移动特征mobile feature
25.用户:年龄,性别,学历,职业,收入,平台差异,隐私安全,持机方式,拇指
26.常用手势
tap点击,
double tap双击,智能放大或缩小
drag拖拽,移动
flick滑动,切换内容,滚屏
hake晃动,
inch/spread放大/缩小
ress长按
twist双指旋转
27.环境:
碎片化时间,内容突出,快速获取信息;记忆上次操作,让打断的操作继续进行;清晰显示当前位置
应用时间段,娱乐、咨询、社交,注意时间高峰,对营销的好处
环境光,自动调节屏幕亮度,夜间和白天模式
噪声,识别环境声调整系统音量;语音即时聊天工具,扬声器和听筒播放
用户姿势
不稳定的网络,切换场景,缓存和预加载
流量,包月,月底谷底
电量,不足20%会忧心忡忡,寻找电源或放弃不必要的使用手机的情况
28.硬件:
硬件按钮
iPhone,一个home键,单击返回主屏幕,双击可以切换任务或关闭后台程序
Android,菜单,返回主界面,返回按钮;新版虚拟化到界面
Windows Phone,返回,返回主界面,搜索
29.屏幕:电容屏,多点触控
屏幕尺寸,物理尺寸,对角线
屏幕分辨率,屏幕上像素的个数
屏幕密度,每平方英寸的像素点的数量
存储空间,清除机制,自动清理
摄像头,前置和后置;扫描二维码,屏幕操控,截屏,脸部识别,认字翻译,镜子,测距离……留给开发者和设计者
麦克风和扬声器
距离传感器,靠近耳朵,屏幕熄灭,防止脸部误操作,节省电量
加速传感器,加速度大小和方向
GPS和方位传感器,位置和朝向
三轴陀螺仪,重力感应只是单维度;射击类游戏,街景浏览
《方寸指间》读后感(五):*方寸指间*读书笔记
移动设计流程 需求→交互原型→视觉效果图→开发→测试→上线 移动设计原则 简洁 -删除不必要的 -隐藏非核心的 -转移高难度的 -组织要提供的 高效 -避免键盘输入 减少输入:历史记录填充/联想匹配 转化输入方式:选择控件/语音输入/传感器 -提供有效触动 提高点击有效性:扩大点击区域/预留足够间距 增加手势操作 -减少页面跳转 使用抽屉 使用浮层 局部处理 一致 -设计上保持一致 -与平台环境保持一致 -跨平台保持一致 反馈 -为用户的行为操作提供即时反馈 -反馈提示要合理 情感化 -优雅的视觉界面 -幽默的文案风格 -惊喜的互动效果 -贴心的细节处理 移动化 -充分利用手势 -充分利用移动设备 导航设计 常见主导航 -标签式 -抽屉式 -桌面式 -菜单式 -点聚式 常见二级导航 -走马灯 适合模块:相似内容并列展示 视觉暗示:显示上下图文部分内容/添加分页指示器 -列表 适合模块:大量内容展示和分组 配合元素:图标、消息数字提示、(可伸缩)二级列表 -图示 适合模块:以图片为主的内容展示 -分段选项卡 适合模块:对主导航内容的再次分类 加载设计 原则 -让加载时间变得更有价值 -保持用户感受的连续性 类型 -启动页加载 -页面跳转加载:当前页加载/进入页加载 形式 -分步加载:优先加载占用网络资源少的内容,再加载占用网络资源多的内容 -懒加载:用户不断向下查看内容,达到或触发某个点自动加载更多内容 -预加载:提前加载某些内容 -智能加载 隐藏内容:网络好时加载所有内容,网络差时隐藏部分内容 差异处理:网络好时加载高质量内容,网络差时加载低质量内容 -缓存加载:在无网络情况下仍然让用户能看到缓存在本地的有用内容 样式 -状态栏加载:图标提示 -导航栏加载:文案提示 -界面中加载:下拉刷新/懒加载/Toast加载 -工具栏加载:图标提示 引导设计 幻灯片引导 -原则:聚焦 精简 创新 -类型:功能型/故事型 浮层式引导 -原则:明确目标 减少干扰 -类型:非模态浮层 三秒自动消失/模态浮层 需要点击确认 遮罩式引导 -需要有确认或退出按键 嵌入式引导 -类型:局部嵌入/整体嵌入 互动式引导 -类型:手势互动/语音互动 通知设计 原则 -及时传递有效信息,要能引起用户注意,但又不打断当前任务 -能够简单预览通知内容,让用户决断是否立即查看 -如有多条同类消息,合并处理 样式 -通知中心 -顶部横幅 -Alert -Toast -红点或数字标志通知 -状态栏通知 -浮层横条通知 -硬件辅助 控件设计 字体 -样式:IOS默认 平方|Android默认 中:Droid Serif 英:Roboto -状态:常态/选中/强调/辅助说明/链接 按钮 -状态:常态/点击/禁用/长按 键盘 -类型:数字/电话/url/email 输入框 -默认显示提示文字,光标插入仍然显示,输入文字后消失并显示清除按钮 适配方案 适配缘由 -不同的屏幕尺寸 -横竖屏切换 -不同的硬件性能 适配方案 -屏幕适配:延伸|缩放|调距|截取 -横竖屏切换适配:改变宽高|转换模式|增加模块|锁定转向 -性能适配:降级处理 移动特征 用户 -年龄:年轻用户偏多 -性别:男性用户偏多 -群体:学生和职员用户偏多 -平台:IOS平台追求精致的用户偏多,Android平台追求实惠的用户偏多 -隐私:注重自身隐私安全的用户偏多 -持机方式:单手竖屏持机的用户偏多 -常用手势:点击/双击/拖拽/滑动/晃动/缩放/长按 环境 -碎片化时间 类型:工作/休息/通勤/睡前/运动/徒步/旅行/购物 启示:让用户快速获取信息/记忆操作/显示当前位置 -环境光 启示:自动调节屏幕亮度/增加对比度/设置白天和夜间模式 -不稳定网络 启示:考虑频繁的网络切换场景/为用户节省流量 硬件 -硬件按钮 IOS:返回主界面 Android:返回、返回主界面、菜单 Windows Phone:返回、返回主界面、搜索 -储存空间 考虑缓存清除机制 考虑自动清除 -摄像头 -麦克风与扬声器 -距离传感器 -加速传感器 -GPS与方位传感器 -三轴陀螺仪