pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

設計師的魔法棒:格式塔原理

  格式塔原理——圖形與背景、接近、相似、閉合、連續、簡單、均衡

  ——格式塔心理學科是認知心理學中的一個重要理論,在視覺設計中已經有較大的影響。若去深究格式塔原理,可能需要相當長的時間來學習理解,作為交互設計師和界面設計師,其實只要理解這幾個原理的含義和使用方法,就可以對自己的設計做出指導和支撐了。

  下面來談談我自己對這些原理的理解:

  圖形與背景原理

  ——知覺幫助我們把圖形從背景中分離出來。圖形與背景的對比越大,圖形的輪廓越明顯,則圖形越容易被發覺。

  圖例:當白色方塊越來越大,它就漸漸的退居為背景,而橙色方塊從背景漸漸的變為了圖形。通過面積、顏色、輪廓等等,我們可以較好的把握圖形與背景的關系。

設計師的魔法棒:格式塔原理 三聯教程

  實例:將簽名檔文字灰化,降低與背景的對比,使得簽名檔文字比昵稱和頭像更接近背景,起到了弱化的作用。

  接近原理

  ——距離(位置)相近的各部分趨于組成整體。這是最簡單、也是最常用的原理。

  圖例,知覺上更傾向于意識到“3組圓”,而不是“6個圓”:

  一個最簡單的應用實例:6個一排的按鈕看上去有點多,而且“過”也混在其中了,將6個按鈕的距離分開一點點,就可以將按鈕分為兩組,從而解決了問題。

  另一個案例,產品想要在獎狀面板上加一個分享按鈕,交互建議按鈕放在獎狀外,因為獎狀上加大按鈕容易破壞獎狀原本的整體感(從而可能要修改獎狀),而分享按鈕可能在除獎狀外的多個圖形上用到,導致對按鈕的適應度要求變高:

  方案1——需求(請忽略按鈕顏色和質感,這并不是視覺稿)

  方案2——交互方案(策劃擔心此方案會導致在較花的游戲界面中,按鈕和獎狀看上去不是一個整體)(請忽略按鈕顏色和質感,這并不是視覺稿)

  實際效果——還是覺得“分享給好友”是針對獎狀的,對嗎?這正是“接近原理的力量”(如果再通過程序,給兩塊都加上一些陰影,就更整體了——相似原理)

  相似原理

  ——在某一方面相似的各部分趨于組成整體。

  圖例,知覺上更傾向于意識到“3組圓(接近)”或“2種圓(相似)”,而不是“6個圓”:

  實例:想想看,如果第二排按鈕也是彩色…^_^

  實例:利用相似的樣式,使知覺自己將其編組。這個原理其實已經用的很多,就不多說啦。

  閉合原理

  ——彼此相屬、構成封閉實體的各部分趨于組成整體。

  圖例:知覺上更傾向于意識到“1個圈和1個點”,而不是“9個圓”:

  實例:左右兩個方案哪個看上去更簡潔生動呢?

  連續原理

  ——在知覺過程中人們往往傾向于使知覺對象的直線繼續成為直線,使曲線繼續成為曲線。

  圖例:知覺上會弱化這些分割所帶來的“塊”,而依然意識到“直線、圓、曲線”。

  實例:最常見的就是表格了:

  有時候為了簡化界面,會去掉一些分隔線,導致“連續感”變弱,而“接近感”變強,使得知覺上更傾向于意識到“列”,而用戶理智上當然會想要去看成 “行”,這種理智與情感背道而馳的時候,就會帶來不舒適的感受。此時我們通常會建立一個“連續感“,一個起“引導、學習、輔助閱讀”作用的條狀背景,建立了一個“連續的規律“,當知覺意識到這個規律,不舒適的感受就會大大降低。

  當然“連續“我們也可以解讀為”當知覺輕松的發現一個視覺規律后,傾向于主動的將對象按照規律延續下去“,例如”一排點“

  簡單原理

  ——具有對稱、規則、平滑的簡單圖形特征的各部分趨于組成整體。

  圖例1:知覺上更傾向于意識到“1個對稱的圖案”,而不是“7個符號”:

  圖例2:下面四個圖形的認知難度大約是“圓≈方≤星<多邊形”。

  個人認為,簡單原理還可以解釋為“與過去學習到的規律一樣的、相似的對象更容易認知”,當然這其中也有“連續原理”的知覺連續性。

  均衡原理

  ——知覺傾向于尋求視覺組合中的秩序或平衡。

  圖例:有沒有覺得很不舒服呢?因為知覺會認為大圓更重,而圖形給我們的理解與知覺正好相反。

  如果改成這樣,似乎好了很多,因為“空心“降低了大圓的”重量“。

  實例:圖1中,知覺給我們的感受是“一個整體的小人站在背景上(QQGAME中最多的就是這種Avatar)“,而圖2毫無征兆的”肢解“,打破了圖1帶給我們的整體感,知覺上就會覺得不舒適。圖三則做了一個窗戶,讓角色從窗戶中鉆出來,隱藏了一部分身體,巧妙地滿足了知覺要求的和諧感。

  文章來源:騰訊GDC

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 精密模具加工制造 - 富东懿| 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | 淋巴细胞分离液_口腔医疗器材-精欣华医疗器械(无锡)有限公司 | 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 【灵硕展览集团】展台展会设计_展览会展台搭建_展览展示设计一站式服务公司 | 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 微波萃取合成仪-电热消解器价格-北京安合美诚科学仪器有限公司 | 阻垢剂-反渗透缓蚀阻垢剂厂家-山东鲁东环保科技有限公司 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 模具ERP_模具管理系统_模具mes_模具进度管理_东莞市精纬软件有限公司 | 能耗监测系统-节能监测系统-能源管理系统-三水智能化 | 带式压滤机_污泥压滤机_污泥脱水机_带式过滤机_带式压滤机厂家-河南恒磊环保设备有限公司 | 实验室装修_实验室设计_实验室规划设计- 上海广建净化工程公司 | 筒瓦厂家-仿古瓦-寺庙-古建琉璃瓦-宜兴市古典园林建筑陶瓷厂有限公司 | 今日扫码_溯源二维码_产品防伪一物一码_红包墙营销方案 | 全国国际学校排名_国际学校招生入学及学费-学校大全网 | 一体化净水器_一体化净水设备_一体化水处理设备-江苏旭浩鑫环保科技有限公司 | 全自动包装机_灌装机生产厂家-迈驰包装设备有限公司 | 北京康百特科技有限公司-分子蒸馏-短程分子蒸馏设备-实验室分子蒸馏设备 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 国际高中-国际学校-一站式择校服务-远播国际教育 | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 北京企业宣传片拍摄_公司宣传片制作-广告短视频制作_北京宣传片拍摄公司 | 上海物流公司,上海货运公司,上海物流专线-优骐物流公司 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 洁净实验室工程-成都手术室净化-无尘车间装修-四川华锐净化公司-洁净室专业厂家 | 红立方品牌应急包/急救包加盟,小成本好项目代理_应急/消防/户外用品加盟_应急好项目加盟_新奇特项目招商 - 中红方宁(北京) 供应链有限公司 | 板材品牌-中国胶合板行业十大品牌-环保板材-上海声达板材 | 防伪溯源|防窜货|微信二维码营销|兆信_行业内领先的防伪防窜货数字化营销解决方案供应商 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 新车测评网_网罗汽车评测资讯_汽车评测门户报道| 电磁辐射仪-电磁辐射检测仪-pm2.5检测仪-多功能射线检测仪-上海何亦仪器仪表有限公司 | 周易算网-八字测算网 - 周易算网-宝宝起名取名测名字周易八字测算网 | 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | 珠光砂保温板-一体化保温板-有釉面发泡陶瓷保温板-杭州一体化建筑材料 |