交互设计基本知识整理
交互设计：人与产品（系统/应用/服务等）互动交流沟通的过程设计；产品的输入方式是否直观、简单、清晰、安全；产品的输出方式在不同环境中的适应性、以人类和文化角度表述而易于被理解。基本原则/标准
1、易用性易用性包括：易理解性、易学习性、易操作性。2、交互设计的目标划分·让用户容易理解：层次清晰；功能区块的划分明确；区分可交互元素与不可交互元素；入口要明确，区分优先级；·让用户操作简单：符合常规的操作流程；符合平台的交互特性；产品自身操作的一致性；及时反馈；更短的交互路径；减少用户记忆；减少输入，帮助用户做选择；防错&容错（不可用置灰、格式限制、可撤销）；
3、尼尔森十大可用性原则
1.状态可见原则2.环境贴切原则3.撤销重做原则4.一致性原则5.防错原则6.易取原则7.灵活高效原则8.易扫原则9.容错原则10.人性化帮助原则
4、诺曼的设计学三层次（《设计心理学》）与交互设计目标体验目标/本能层次——想给用户/用户想要什么样的感觉（激发情感、唤醒某种记忆、视觉/听觉/嗅觉等的刺激带来的情感最终目标/行为层次——用户想做什么（使用产品的目的）人生目标/反思层次——用户想要成为什么样的人（品牌形象）
6、满足不同的需求
用户。产品，自我需求
7、用户体验相关设计原则减少用户输入/避免重复、过多的操作（减少页面跳转；重要信息前置-不需要点击就可以看到；先露出一部分，点击后展开，让跳转过程更加自然、顺滑；）交互设计元素与非交互设计元素区分明显防错&容错帮助用户记忆适当引导、提供帮助交互路径清晰、让用户知道自己所处的位置保持一致性文案清晰易懂直觉设计设计流程/方法
其它
1、反馈设计的重要性2、一些必要的关乎设计学的定律奥卡姆剃刀原则：如无必要，勿增实体。菲兹定律：到达目标的时间与移动距离成正比，与目标大小成反比。希克定律：选择越多，选择时间越长。对于设计而言，可以帮助用户选择（默认选择、不可选的情况置灰）、减少选项、或者将选项分类、区分权重、让用户分步选择等。让用户一次面对的选项较少。特斯勒定律：复杂性守恒定律。产品的复杂性守恒不变，想要让用户在使用中变得简单，需要将复杂性转移给程序来处理，减少用户的操作，提高输入效率，让人来做一些决策等简单但是具有控制权的事情。美即好用效应：当产品足够美观、吸引人时，用户可以容忍一些操作上的不方便。比较适合于文艺类、慢生活类的产品。不是故意做得难用，而是在设计决策时，可以为了美观牺牲一些操作效率，如增大留白/显示面积会让浏览效率降低。多尔蒂门槛：系统/产品对于用户的操作响应时间<400ms，才能让用户保持专注，提高沉浸感与效率。一方面对于动效设计而言，时间需要把控，不能过长。另一方面，对于网络、设备性能等引起的等待时间过长，可以考虑使用过渡方式（过渡动画、占位符）来减缓用户的焦虑情绪。雅各布定律：操作方式与主流产品或者同类型方式保持一致，可以让用户更快上手。没有更好的交互方式时，采用通用的方式会让人更容易接受。简洁法则：人的大脑会简化、归纳、过滤外在的信息，方便简单快速的理解外在的世界。邻近原则&相似原则：距离接近/具有相似性特点的对象会被认为是一组。模块内部、模块之间的距离、样式的一致/差异会区分不同的模块。帕累托原则：二八定律。对于大多数事件，80%影响由20%的因素造成。帕金森定律：任何任务都会拖延，直到可用的时间都用完为止。同域原则 ：元素在一个具有明显边界的区域内，会被认为是一组的。类似卡片风格，卡片内的内容被认为是一组。米勒定律：短时记忆，人平均能记住7±2个项目。对于信息展示而言，一次展示的条目不宜过多。冯·雷斯托夫效应：当存在多个相似的对象时，与众不同的那个容易被记住。对于设计而言，这也是“设计点”的所在。突出真正重要的内容。蔡格尼克记忆效应：人们对于未完成的任务的记忆比已完成的更深刻。对于任务的设计，需要同时关注已完成与未完成，促使、激励人们去完成未完成的任务。3、交互设计五要素——
人、动作、工具或媒介、目的和场景构成交互设计的五要素
绛旓細1. 澶氬獟浣浜や簰璁捐鍒╃敤鏂囨湰銆佸浘鍍忋侀煶棰戙佽棰戠瓑澶氱濯掍綋鍏冪礌锛屼互鍙婁氦浜掓妧鏈紝鍒涢犱赴瀵屼簰鍔ㄤ綋楠屻2. 璇ヨ璁￠氳繃鐩磋銆佸惛寮曚汉鐨勬柟寮忥紝浣跨敤鎴疯兘澶熶笌鏁板瓧鍐呭杞绘澗浜や簰锛屾棬鍦ㄤ紶閫掍俊鎭佹彁渚涘ū涔愭垨淇冭繘瀛︿範銆3. 澶氬獟浣撲氦浜掕璁′笉鏄畝鍗曞湴灏嗗绉嶅獟浣撳厓绱犵粨鍚堬紝鑰屾槸閫氳繃宸у璁捐鍒涢犲嚭鍏ㄦ柊鐨勭敤鎴蜂綋楠屻4. 渚嬪锛屽湪...
绛旓細褰撲骇鍝佽妯″ぇ浜嗕箣鍚庡氨闇瑕佸涓骇鍝佽璁″笀鍗忎綔瀹屾垚鏁翠釜浜у搧锛岀敱浜庝笉鍚屼骇鍝佽璁″笀涔嬮棿鐨勮璁＄悊蹇点佽璁℃柟娉曘佽璁′範鎯殑涓嶅悓锛屽崗浣滃畬鎴愮殑浜у搧寰寰浼氬鑷翠骇鍝佷竴鑷存у樊锛岃川閲忓弬宸笉榻愩傝繖涓椂鍊欎細闇瑕佷竴浠浜や簰璁捐瑙勮寖鏉ヨ鑼冨拰鎸囧浜у搧璁捐锛屼粠鑰屼繚璇佷骇鍝璁捐鐨涓鑷存э紝鎻愬崌鏁翠綋浜у搧璐ㄩ噺銆傝嫻鏋滀笌瀹夊崜浜や簰璁捐浣撶幇鍦...
绛旓細Axure RP鐨勫熀鏈氦浜掕璁涓昏閫氳繃鎺т欢浜や簰闈㈡澘鏉ュ疄鐜帮紝瀹冪敤浜庡畾涔夌嚎妗嗗浘涓帶浠剁殑琛屼负锛屽寘鎷畝鍗曢摼鎺ュ拰澶嶆潅鐨凴IA琛屼负锛岃繖浜涗氦浜掑彲浠ュ湪鐢熸垚鐨勫師鍨嬩腑杩涜鎿嶄綔銆傛帶浠朵氦浜掗潰鏉跨敱浜嬩欢锛圗vents锛夈佸満鏅紙Cases锛夊拰鍔ㄤ綔锛圓ctions锛夋瀯鎴愶紝鐢ㄦ埛鐣岄潰鐨勪氦浜掑榧犳爣鐐瑰嚮锛圤nClick锛夈侀紶鏍囨偓鍋滐紙OnMouseEnter锛夊拰榧犳爣绉诲嚭锛...
绛旓細寰堝浜哄湪杩欎釜淇℃伅鐖嗙偢鐨绉诲姩鏃朵唬锛屾洿鎯崇湅鍒颁竴浜涙墍璋撶殑鈥滃共璐р濓紝骞茶揣鍒板簳鏄粈涔堬紝鍙互鐩存帴鎷挎潵涓婃墜鐨勬槸骞茶揣鍚楋紵杩樻槸闇瑕佷綘缁忚繃鍒ゆ柇鍜屾濈淮杞寲鍐嶅鐞嗗緱鍒扮殑灞炰簬鑷繁鐨勫惎鍙戯紵鏈瘒浜や簰妯″紡澶у鍙互鏇村ソ鐨勬濊冿紝褰掔撼銆備负浠涔堝涔浜や簰璁捐妯″紡鍦╠yj鏃舵湡鏈変竴鍙ュ彛鍙锋槸:浜烘湁澶氬ぇ鑳嗭紝鍦版湁澶氬ぇ浜э紝褰㈠鐨勬槸浜烘兂娉曟湁澶氬ぇ...
绛旓細UI璁捐闇瑕佹帉鎻＄殑鐞嗚鐭ヨ瘑锛氶厤鑹茶璁°佺増寮忚璁°佽鑼冭璁°佸垏鍥俱佹墜缁鍩虹鐭ヨ瘑銆備笓涓氬瑕佹帉鎻＄殑钀ラ攢鐭ヨ瘑锛氬績鐞嗗銆佽惀閿瀛︺佹矡閫氬銆佺敤鎴蜂綋楠岀瓑銆傛嫇灞曠煡璇嗙偣锛氫氦浜掗昏緫瀛︺佸垱鎰忔濈淮瀛︺佺鐞嗗銆傚厜浼氳蒋浠朵笉鑳芥垚涓轰竴鍚嶄紭绉鐨刄I璁捐甯,UI璁捐鏄晫闈浜や簰璁捐锛岃繕闇瑕佹帉鎻℃妧娉曞眰闈佹濈淮灞傞潰銆佷綔鍝佸眰鐨勭煡璇銆傛妧娉...
绛旓細鍦ㄨ缁嗚В閲婂濯掍綋浜や簰璁捐鐨姒傚康鍜屽師鍒欐椂锛岄鍏堣鏄庣‘鐨勬槸锛屽濯掍綋浜や簰璁捐涓嶄粎浠呮槸澶氱濯掍綋鍏冪礌鐨勭畝鍗曞爢鐮岋紝鑰屾槸瑕侀氳繃宸у鐨勮璁★紝灏嗚繖浜涘厓绱犳湁鏈哄湴缁撳悎鍦ㄤ竴璧凤紝鍒涢犲嚭涓绉嶅叏鏂扮殑鐢ㄦ埛浣撻獙銆備緥濡傦紝鍦ㄤ竴涓暀鑲茬被搴旂敤绋嬪簭涓紝澶氬獟浣撲氦浜掕璁″彲鑳藉寘鎷娇鐢ㄥ姩鐢诲拰澹伴煶鏁堟灉鏉ヨВ閲婂鏉傜殑姒傚康锛岄氳繃瑙︽懜灞忔搷浣滄潵璁...
绛旓細浠庣浉鍏崇殑宸ヤ綔浜虹兢鏉ョ湅锛屼笉鍚岀殑璁捐宸ヤ綔绫诲瀷锛屾秹鍙婄殑浜虹兢涔熷敖涓嶇浉鍚屻俇I璁捐鐨鐩稿叧浜虹兢涓昏鏄伐浣滀腑鍖呮兜璇ラ儴鍒嗙殑浜猴紝闄や簡涓撲笟鐨刄I璁捐甯堬紝鐣岄潰璁捐甯堬紝缃戦〉璁捐甯堢瓑涔熸槸瀹冪殑宸ヤ綔浜虹兢銆傝浜や簰璁捐娑夊強鐨勪汉缇ゆ洿骞匡紝浜や簰璁捐甯堛乁X璁捐甯堣嚜鐒朵笉鍦ㄨ瘽涓嬨傚彟澶栵紝闇瑕佽〃杈捐璁℃兂娉曠殑浜у搧缁忕悊杩愯惀浜哄憳涔熸槸鍏朵腑涓鍛樸
绛旓細鈥滆闊充氦浜掕璁′粎闈犱功鏈笂鐨勭煡璇鏄笉澶熺殑,鍦ㄥ疄闄呴」鐩腑,闄や簡瑕佷簡瑙ｉ渶姹傘佺洰鏍囩敤鎴蜂互澶,杩樿浜嗚В璇煶璁捐鎵搴旂敤鐨勫満鏅佹妧鏈按骞炽佽澶囬厤缃瓑,浠庤屾湁鐨勬斁鐭㈢殑灞曞紑璁捐銆傛湰鏂囩粨鍚堝弬涓庣殑椤圭洰,灏嗚闊浜や簰璁捐鐨娴佺▼銆佽璁″叧閿偣浠ュ強濡備綍閫氳繃璁捐鍖栬В鎶鏈檺鍒,鍜屽ぇ瀹惰繘琛屽垎浜傗 鐩稿叧鏂囩珷:銆婅闊充氦浜掕璁(涓):VUI鍙戝睍鍙婄壒寰...
绛旓細娴佺▼鍥惧拰淇℃伅鏋舵瀯鍥鹃兘鏄负浜嗚〃杈浜や簰璁捐鐨鏁翠綋閫昏緫璺緞鐨勫伐鍏凤紝涓寮犲ソ鐨勬祦绋嬪浘鎴栦俊鎭灦鏋勫浘瀵逛簬鍥㈤槦娌熼氬拰寮鎷撴濈淮閮芥槸寰堟湁甯姪鐨勩傚眰娆′换鍔″垎鏋愭硶鏄祦绋嬭璁′腑鐨勪竴涓噸瑕佹柟娉曪紝绠鍗曟潵璇达紝灞傛浠诲姟鍒嗘瀽灏辨槸灏嗕竴涓换鍔¤繘琛岀粨鏋勫寲鐨勫垎瑙ｏ紝灏嗙敤鎴峰畬鎴愪换鍔＄殑杩囩▼鎵闇瑕佺殑姣忎竴绉嶆儏鍐靛拰姣忎竴涓姩浣滆繘琛岀粏鍖鏁寸悊銆
绛旓細2銆乁I璁捐鐨璇剧▼鍐呭涓鍏卞垎涓轰簲涓笓涓氭妧鑳藉涔犻樁娈点3銆佷竴涓悎鏍肩殑UI璁捐甯堥櫎浜嗗彲浠ヨ璁″嚭绮剧編鐨勯〉闈紝杩樿璁╃敤鎴烽氳繃椤甸潰鑳藉緱鍒板緢濂界殑浣撻獙锛岃繖灏遍渶瑕乁I璁捐甯堟帉鎻¤瑙夎璁＄煡璇嗗拰浜や簰璁捐鐭ヨ瘑銆備粈涔堟槸UI璁捐锛烾I(UserInterface)锛氬嵆鐢ㄦ埛鐣岄潰銆4銆佸涔犺蒋浠剁煡璇嗗寘鎷帉鎻hotoshop銆丄xure銆両llustrator銆乻ketch銆...
