视觉规范——文字编排
在文字编排中如何使行高、行长看上去更舒适
行高字号的设置字号就是字体的大小,文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。网页字号中,最小中文字号是12,英文是10。页面的字号可以4为基数进行递增的,最好采用偶数。像14号字的正文和13号字的注释,这种比较小的字可以不以4为基数来做。不管怎么去定义字号,只要视觉上美观大方并具有关联性,采用哪种规则去约束它都可以。另外所有的字体都要调试出深色和浅色两种配色,并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。
根据需求随意组合当定义好字号,标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系,字号差异越大它们的层级关系就越明显,但它们之间的差异又不能太大,差异过大会影响整体的视觉平衡性,给人一种不和谐不自然的感觉。例如:标题字号20px搭配正文字号12px;标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。
英文的行高在设置文本行高的之前,需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和 ...
视觉规范——侧导航/分页
侧边导航栏、分页的方法
侧边导航栏侧边导航栏就是固定在侧边或从侧边划出的导航栏,一般应用在企业网站的触发型导航栏上,或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的,方向在那边就往哪边对齐。对设计的理解和审美决定了周围要留多少的空白。
绘制矩形框矩形框的高度可以随着屏幕高度的变化而变化,所以不需要考虑。那只定义矩形框的宽度就行了,宽度分别是:小(240px)、中(280px)、大(320px)。当决定采用哪种尺寸后,就要定义矩形框与内容之间的距离了。下图所示的例子是以中等尺寸来做参考的。
文本行高文字的行高是由鼠标状态(Hover)的高度来确定的,Hover的高度有多高,文字的行高就有多高。但要注意的是,侧边导航栏的文本左右多留一下白,不能使导航栏看上去太紧凑,给人感觉太压抑,就会显得不是很美观了。
层级划分因为侧边导航栏中有树形结构,一个主级别可以分散为多个子级别,所以就需要划分一下层级。划分层级的方法也有很多,可以改变字号、改变颜色、改变字形、改变距离。采用哪种方法还是要看具体需求,像那种需要想突出层级且对比强烈的需求,可以采用 ...
视觉规范——下拉/导航
不管是下拉菜单还是导航菜单,都是设计语言部分中的基础部分中的某个组成部分。当这些组件按照功能和需求整合到一起,就生成了新的页面或用户界面。
了解下拉菜单下拉菜单有两种样式,分别是主菜单和二级菜单。它也是由按钮、菜单栏、鼠标状态(Hover)组成的。
真正整合成组件时,组件会有三种不同的尺寸(大中小),被配置不同的高度,不同的颜色和不同的曲率。
绘制矩形框绘制下拉菜单的矩形框,要定义它的高度和宽度。下拉菜单框的高度是根据内容的增加而随之变化的,而它的宽度是受里面字数影响的。字数的最大宽度定下来,才能定下矩形框的宽度。一般情况下,菜单中的功能名称不会超过9个字,利用7±定律得知,超过9个字不易理解和阅读(易读性),所以这里的矩形框的宽度,不过超过9个字符。那如果下拉菜单中的功能名称,超过9个字,如下图所示。
文本行高添加文本内容,就是在下拉菜单里添加文字。当用7±2定律得知最大字符数不能超过9个字符后,就说明下拉菜单里的文字的宽度定好了,接下来就要定文字的行高了。文字的宽度和行高都计算好,就可以绘制文字与矩形框之间的间距了。文字的行高是由鼠标状态(Hover)的高度 ...
视觉规范——按钮
一个简单的按钮需要经历无数次推敲,才能整合为设计语言
网格基数的设置这里的网格不是平面设计中的网格系统,是包含在绘图工具中的网格功能,虽然它俩在本质上是相同的。用绘图工具绘制网格能帮助我们约束模块,使模块的比例存在一定的关系。如下图尺寸大小为137x31的按钮A,和尺寸大小为128x32的按钮B,尺寸大小为137x31的按钮A是不规范的,宽137和高31是不存在比例关系的。而尺寸大小为128x32的按钮B就是规范的,宽128和高32不仅是倍数关系(128/32=4倍),而且两个数都可以整除,在全局中设的基数4(32/4=8,128/4=32,这里的4为基数)。
网格基数绘制一个按钮的第一步,就是设置网格基数。如果网格基数不设置4px而设置3px,那画一个高度为45px的时间选择器时,得知右面“上”的图标高度就是45/2=22.5px,这里出了小数点,22.5px中包含7个网格位,并多出了1.5个px,即22.5-21(3x7网格位)=1.5px的空位,1.5px<3px。所以网格基数设置为3px它是不规范的。在下图中也做出了相应的解释。把图上按钮中为“上” ...
UI动效常用技能点
在用户体验界面设计中,因交互需求而发生的动效设计,例如:loading、转场、点击反馈等。现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈。在ae常用的技能点有:
缓动
交互动效的初衷是为了给产品带来舒适的用户体验,那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则,比如下拉的重力感、过场的缓入缓出,避免产品像机器般给用户带来生硬的感受。
AE应用
选中关键帧—-动画>关键帧辅助>缓动 | animation>keyframe assistant>easy ease (或点击关键帧右键>关键帧辅助>缓动)
图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view
遮罩
遮罩功能可以解决许多你想不到的动效问题,达到一个比如魔术化的效果,也是MG动画转场常用功能之一。简单理解来说,就是将动效分为2层(底层是展示图,顶层是遮罩),通过改变的遮罩大小,我们可以看到底层展示图的不同部分。
AE应用
选中形 ...
除非有更好的选择,否则就遵从
交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,
费茨定律(Fitts’ Law)费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年。该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。
费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。用数学公式表达为:时间 T = a + b log2(D/S+1)。如下图:上图中,T指的是:移动设备所需时长;a、b指的是:经验参数,它们依赖于具体的指点设备的物理特性,以及操作人员和环境等因素;D指的是:设备起始位置和目标位置之间的距离;S指的是:目标区域的面积大小。
费茨定律(Fitts’ Law)在设计中的应用(1)按钮等可点击区域在合理的范围之内越大越容易点击,反之, ...
药食同源——丝瓜
文章协议:本文内容仅用于本站作者自学记录和知识存储,请勿随意散播及使用,未听劝告使用或分享造成任何问题与本站作者无关。阅读或分享即表示同意该协议。
类型
性
功效
味
瓜茄
凉
清热化痰, 凉血解毒
甘
功效:清热化痰, 凉血解毒
性味功效《随息居饮食谱》清热解毒,安胎行乳,调营补阳,通络杀虫,理疝消肿,化痰。
归经
应用中暑、身热烦渴咳嗽、咳痰、头晕痔疮、便血乳汁不通水肿绿豆丝瓜汤(《中医食疗营养学》引《常见药用食物》)橘杏丝瓜饮(《实用中医营养学》)丝瓜汁(《食疗本草学》)丝瓜肉汤(《李时珍述药菜谱》)丝瓜莲子散(《简便单方》)鲢鱼丝瓜汤(《中国药膳学》)丝瓜增乳散(《儿童药膳》)葱白灯心丝瓜汤(《得配本草》)
人群宜忌宜用体质阴虚、湿热体质尤宜
宜用病症中暑、口渴、咳嗽、咳痰、中风恢复期、癫痫、崩漏、痔疮、便血、乳汁不通、水肿、肾炎、尿路感染
慎用体质阳虚体质慎用;脾胃虚寒体质慎用
var isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|i ...
药食同源——乌梅
文章协议:本文内容仅用于本站作者自学记录和知识存储,请勿随意散播及使用,未听劝告使用或分享造成任何问题与本站作者无关。阅读或分享即表示同意该协议。
类型
性
功效
味
果实
平
敛肺, 涩肠, 生津, 安蛔
酸, 涩
功效:敛肺, 涩肠, 生津, 安蛔
性味功效《神农本草经》下气,除热烦满,安心,止肢体痛,偏枯不仁,死肌,去青黑痔,蚀恶肉。
《本草纲目》敛肺涩肠,止久嗽泻痢,反胃噎膈,蛔厥利。
《本草求真》乌梅酸涩而温,入肺则收,入肠则涩,入筋与骨则软,入虫则伏,入于死肌、恶肉、恶痣则除,刺入肉中则拔,痈毒可敷,中风牙关紧闭可开,蛔虫上攻眩仆可治,口渴可止。宁不为酸涩收敛止一验乎。
归经
应用肺虚久咳久泻久痢虚热消渴蛔厥呕吐腹痛本品味酸而涩,其性收敛,入肺经能敛肺气,止咳嗽。用于肺虚久咳少痰或干咳无痰之证。可与罂粟壳、苦杏仁等同用。乌梅汤(《太平圣惠方》)乌梅粥(《圣济总录》)本品酸涩入大肠经,有良好的涩肠止泻痢作用,为治疗久泻、久痢之常用药,可与罂粟壳、诃子等同用,如固肠丸(《证治准绳》)。取其涩肠止痢之功,配伍清热燥湿、解毒止痢之黄连,亦可用于湿热泻痢, ...
药食同源——乌梢蛇
文章协议:本文内容仅用于本站作者自学记录和知识存储,请勿随意散播及使用,未听劝告使用或分享造成任何问题与本站作者无关。阅读或分享即表示同意该协议。
类型
性
功效
味
肉类
平
祛风, 通络, 止痉
甘
功效:祛风, 通络, 止痉
性味功效《开宝本草》主诸风瘙瘾疹,疥癣,皮肤不仁,顽痹。
《本草纲目》功与白花蛇(即蕲蛇)同而性善无毒。
归经
应用风湿顽痹,麻木拘挛中风口眼㖞斜,半身不遂小儿惊风,破伤风,痉挛抽搐麻风,疥癣本品性走窜,能搜风邪,利关节,通经络,常用于风湿痹证,尤宜于风湿顽痹,日久不愈者。常配全蝎、天南星、防风等,治风痹,手足麻木拘挛,不能伸举。《本草纲目》以之制酒饮,以治顽痹挛急疼痛。乌梢蛇酒(《本草纲目》)本品功善祛风,通经活络,故可用治中风口眼㖞斜,半身不遂,痉挛抽搐,常与全蝎、蜈蚣、天南星等药配伍。乌蛇酒(《食物本草会纂》)本品能入肝祛风以定惊搐,治小儿急慢惊风,可与天麻、钩藤等同用;治破伤风之痉挛抽搐,多与蕲蛇、蜈蚣等配伍。本品善于祛风止痒,配白附子、大风子、白芷等,以治麻风;配甘松、荷叶等,可治干湿癣。此外,本品又可用治瘰疬、恶疮。乌 ...
药食同源——乌贼
文章协议:本文内容仅用于本站作者自学记录和知识存储,请勿随意散播及使用,未听劝告使用或分享造成任何问题与本站作者无关。阅读或分享即表示同意该协议。
类型
性
功效
味
肉类
平
疗口咸, 滋肝肾, 补血脉, 理奇经, 愈崩淋, 利胎产, 调经带, 疗疝瘕, 最益妇人
咸
功效:疗口咸, 滋肝肾, 补血脉, 理奇经, 愈崩淋, 利胎产, 调经带, 疗疝瘕, 最益妇人
性味功效《备急千金要方》——孙思邈骨∶味咸微温,无毒。主女子漏下赤白经汁,血闭,阴蚀肿痛,寒热,癥瘕,无子,惊气入腹,腹痛环脐,丈夫阴中痛而肿,令人有子。
肉∶味酸平,无毒。益气强志。
《食疗本草》——孟诜食之少有益髓。
骨∶主小儿、大人下痢,炙令黄,去皮细研成粉,粥中调服之食。
其骨能消目中一切浮翳。细研和蜜点之妙。
又,骨末治眼中热泪。
又,点马眼热泪甚良。久食之,主绝嗣无子,益精。其鱼腹中有墨一片,堪用书字。
《随息居饮食谱》——王孟英咸平。疗口咸,滋肝肾,补血脉,理奇经,愈崩淋,利胎产,调经带,疗疝瘕,最益妇人。可鲜,可脯,南洋所产淡干者佳。
骨名海螵蛸,入药功相似。
卒然吐血,小儿痰齁, ...
药食同源——乳汁
文章协议:本文内容仅用于本站作者自学记录和知识存储,请勿随意散播及使用,未听劝告使用或分享造成任何问题与本站作者无关。阅读或分享即表示同意该协议。
类型
性
功效
味
饮品及奶制品
平
补血, 充液填精, 化气生肌, 安神益智, 长筋骨, 利机关, 壮胃养脾, 聪耳明目
甘
功效:补血, 充液填精, 化气生肌, 安神益智, 长筋骨, 利机关, 壮胃养脾, 聪耳明目
性味功效《备急千金要方》——孙思邈味甘平,无毒。补五脏,令人肥白悦泽。
《随息居饮食谱》——王孟英甘平。补血,充液填精,化气生肌,安神益智;长筋骨,利机关;壮胃养脾,聪耳明目。本身气血所化,初生藉以长成。强壮小儿,周岁即宜断乳,必以谷食,始可培植后天。造物之功,不容穿凿。故大人饮乳,仅能得其滋阴养血,助液濡枯,补胃充肌而已。设脾弱气虚,膏粱湿盛者饮之,反有滑泻酿痰减餐痞闷之虞。且乳无定性,乳母须择肌肤丰白,情性柔和,别无暗疾,不食荤浊厚味者,其乳汁必醲白甘香,否则清稀腥浊,徒增儿病也。
牛、马、蛇肉毒,饮人乳解之。
var isMobile = navigator. ...
药食同源——䴕
文章协议:本文内容仅用于本站作者自学记录和知识存储,请勿随意散播及使用,未听劝告使用或分享造成任何问题与本站作者无关。阅读或分享即表示同意该协议。
类型
性
功效
味
肉类
平
开膈利噎, 平惊, 追劳虫, 已痔漏
甘
功效:开膈利噎, 平惊, 追劳虫, 已痔漏
性味功效《随息居饮食谱》——王孟英甘平。开膈利噎,平惊,追劳虫,已痔漏。牙疳、齿龋,煆末塞之。
var isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
var isEncrypt = document.getElementById('hexo-blog-encrypt');
var allowMobile = true;
if (!i ...