案例解析详情页设计的技巧
案例解析详情页设计的技巧
电商视觉比拼的不仅仅是视觉技巧了，而是怎么让客户愉悦，最重要的是如何让客户在愉悦的同时可以快速地下单。我们自己在设计详情页页面的时候，一定要注意页面设计的基础三原则：
基本原则一：信息图像化
文字是循序渐进的处理，同时能被记住的只有20%，而图片同步被大脑处理能记住的是100%，所以详情页面的描述应尽可能地图像化。
基本原则二：高效表达
内容不要过于臃肿，表达要清晰有条理，简单直接。不要影响到页面打开速度。页面载入时间过长，会影响销量。
基本原则三：要掌握客户最关心的点
你所认为客户最关心的地方，往往并不是客户最关心的;不同的产品客户所需求、所关注的地方不同，不同的产品顾客关注的地方也是各不相同。
了解了设计的基础原则之后，我们一起来看看：一个页面如何从抓住眼球到最终成交的逻辑，让页面深入人心，让页面可以帮助你说服你的消费者。
一、吸引顾客 留住顾客
客户的需求：产品独特的卖点(与别人的产品不同的地方，产品优势)、活动价格优惠、不同的服务(购买产品能得到什么享受、服务)、痛点(解决问题烦恼)等。
比如说，服装类的产品顾客可能关注的是衣服的款式，模特穿着的样子，衣服的尺寸以及衣服的尺码，模特的身材体重以及他穿着的衣服的大小码对比。这样才能得出来自己穿起来是什么样子。
而功能性产品比如说保健品之类的，顾客关注的就是本件产品到底有什么功能。你的产品肯定要一个突出点，比方说缓解疲劳。需要打出来一点吸引人的地方，你的产品与别人的为何不同，优势在于哪里。这里主要可以分为：近期热点事件、网络流行、新概念、主题氛围、生活主张、实际利益、好奇心、品牌的嫁接、新品上市、产品创意、强视觉、名人效益、限时限量等。
以下简单举例：
左边的产品是冬天的衣服。怎么吸引买家看下去?冬天买衣服除了看款式，更重要的是保暖。图片营造出一种温暖的气氛，暖色的背景外加女模特头上的灯光，给人以温暖的感觉，符合顾客心里的想法。
右边的产品是夏天带的防晒头盔，为什么会带?就是因为夏天太晒，但是带上难免会有点热，这时候用冰块的背景和雪山给人以冰凉的感觉，对抗炎热夏天，不仅防晒更强调清凉舒爽。
以上就是主题氛围，主要还是给顾客以代入感。
上图左边的产品是保健品，卖点是可以延缓衰老，这就是顾客所能得到的实际利益。设计上因为是保健品，注重天然、自然，所以背景用的水果，然后前面的女人面带微笑显得很年轻，整体给顾客一种年轻健康的感觉。
右边的图是卸妆水，除了卸妆以外可以细致毛孔，补水紧致，清爽温和，这些都是买卸妆水的顾客所需要的。而实际的功能和利益是需要文字和图片结合的，这类产品一般文案都比较多，所以更要注意文案的排版，一定要有规律，要做到有序、有层次、有重点，同时也别忘了运用背景的烘托效果。文案和背景的绿色清新相呼应，让人深刻地感知到产品的功能性。
上图左边的产品是百岁山矿泉水，不需要过多的修饰，就一句话：水中贵族百岁山，富含多种微量元素。我们的水就是好，就是水中的贵族，就是和别人的不同。此类产品主要吸引人的地方就是文案。
右边的产品是无烟不粘锅，可以看做是生活的主张：你用了这个东西逼格就高了!此类的设计主要是背景烘托文案，突出文案来吸引顾客。也可以放几张顾客使用的照片，强调大家都在使用，引发跟风从众的心理。
上图左边的产品是运动时候带的那种耳机，所以以强视觉的方式展现，就是类似于电影海报的方式，吸引顾客的眼球，让顾客有看下去的欲望。但此类设计比较考验阅历和合成功底，不仅仅需要好看，更需要和产品以及文案相贴合。
右边的产品就是很常见的新品上市，这也是一种很常见的吸引顾客的.方式。人都是有一种喜新厌旧心理和对新鲜事物的好奇心，这类的整体详情页应该围绕新品、新功能、新感受来做一个整体布局。
二、提升顾客兴趣 确认需求
上面提到的只是吸引顾客看下去的方法，顾客看详情页面主要还是想买东西的，因此必须要有顾客想要看到的元素。
产品的参数一定要有，并且写清楚。有的产品还需要测量方法等，方便顾客选择合适的尺码，这样第一显得专业，第二也方便顾客选择合适的尺寸。
鞋类产品最好在产品参数里面加上选码须知。如果产品比正常尺码小的话，一定要标注出来。
产品的细节一定要尽量展示得详细一点。比如：包包的各种角度展示，然后内里、拉链部分。如果是品牌的产品，品牌的LOGO一定要展示清楚，产品的走线一定要展示清楚，这样才能提升产品整体的品质感。
衣服的细节尽可能地展示清楚，也可以在旁边加一个全景展示和细节的对比。排版上面可以不拘一格，更具有引导性，像上图右边使用的就是线的引导。
上图左边的产品是女包，背景里的海鸥、大海、飞扬的女人裙角，给人一种奢华大气的感觉。不用文字描述，就能显示出产品的品质。这就是视觉设计简单易懂的原理，千万不要大篇幅的文字说明，既不显得高端，又会让人抓不住重点。
;绛旓細鍙宠竟鐨勪骇鍝佹槸鏃犵儫涓嶇矘閿咃紝鍙互鐪嬪仛鏄敓娲荤殑涓诲紶锛氫綘鐢ㄤ簡杩欎釜涓滆タ閫兼牸灏遍珮浜!姝ょ被鐨璁捐涓昏鏄儗鏅儤鎵樻枃妗堬紝绐佸嚭鏂囨鏉ュ惛寮曢【瀹備篃鍙互鏀惧嚑寮犻【瀹娇鐢ㄧ殑鐓х墖锛屽己璋冨ぇ瀹堕兘鍦ㄤ娇鐢紝寮曞彂璺熼浠庝紬鐨勫績鐞嗐備笂鍥惧乏杈圭殑浜у搧鏄繍鍔ㄦ椂鍊欏甫鐨勯偅绉嶈虫満锛屾墍浠ヤ互寮鸿瑙夌殑鏂瑰紡灞曠幇锛屽氨鏄被浼间簬鐢靛奖娴锋姤鐨勬柟寮忥紝鍚稿紩椤惧...
绛旓細妗堜緥瑙ｆ瀽 绗旇呮浘缁忔敼鐗堣繃涓涓贰鏌ラ噰闆嗕俊鎭殑浜у搧,閲囬泦鐨勪俊鎭负浜嗕繚璇佺湡瀹炴,鍚庡彴闇瑕佷笓浜哄淇℃伅鍋氬鏍,瀵逛簬搴炲ぇ鐨勬暟鎹,濡傛灉瀹℃牳鍔熻兘璁捐鐨涓嶅悎鐞,灏变細鍙樺緱璐规椂鍙堣垂鍔涖 鑰屾棫鐗堢殑璁捐灏辨槸濡傛,椤甸潰鐨勮璁℃妸閲囬泦鐨勪俊鎭敤鍒楄〃鍛堢幇,瀹℃牳浜哄憳闇瑕佺偣鍑诲垪琛ㄤ腑鐨勫鏍稿皬鎸夐挳杩涘叆璇︽儏椤鎵嶅彲浠ヨ繘琛屽鏍,瀹℃牳涓嬩竴鏉￠渶瑕侀噸澶嶅墠闈㈢殑...
绛旓細鎸戞垬涓锛氬府鍔╂埧涓滄湁鏁堢鐞嗙瀹㈡湡鏈涙垜浠殑骞冲彴涓婃彁渚涗簡鍚勫紡鍚勬牱鐨勬埧婧愶紝姣忔鍏ヤ綇 Airbnb 鐨勪綋楠岄兘鏄嫭涓鏃犱簩鐨勩傜劧鑰岋紝鎴戜滑闈复浜嗕竴涓寫鎴橈紝鎴挎簮璇︽儏椤骞朵笉鎬昏兘鎻愪緵娓呮櫚鐨勭収鐗 鈥 鏈夋椂鏄俊鎭己澶憋紝鏈夋椂鏄煁鍦ㄨ鎯呬腑闅句互鎵惧埌銆 杩欏彲鑳戒細瀵艰嚧鎴垮鍦ㄥ叆浣忔椂鎰熷埌钀藉樊銆傛ā绯婄殑淇℃伅缁撴瀯鍜屽紩瀵奸棶棰橈紝浣挎埧涓滄棤娉曞垽...
绛旓細楂樼骇瀹㈡埛锛100-500涓囷級锛氳棰戝箍鍛婂姞鍏ワ紝璇︽儏椤鍜岄摼鎺ユ洿澶氶夋嫨銆俈IP瀹㈡埛锛>500涓囷級锛1-6寮犲灞傚浘锛岃嚜瀹氫箟H5鏈澶6椤碉紝閾炬帴閫夐」涓板瘜銆傚畾浣嶇簿鍑嗭細鍒╃敤寰俊鐨勭簿鍑嗗畾鍚戝姛鑳斤紝鏍规嵁鐢ㄦ埛骞撮緞銆佹у埆銆佸湴鍩熴佹墜鏈虹郴缁熷拰鍏磋叮鏍囩锛岃繘琛岀簿缁嗗寲鎶曟斁锛屽24涓竴绾ф爣绛惧拰183涓簩绾ф爣绛俱傜瓥鐣ヤ紭鍖栵細鐞嗚В鐢ㄦ埛鐢诲儚锛璁捐寮曚汉...
绛旓細鎴戞嬁鏈嶈涓句緥!鐒跺悗璇︽儏椤绗竴灞忓啓:鐝嶇埍鐜,闃叉璧勬簮娴垂,灏藉彲鑳界殑瀹炵幇璧勬簮鍥炴敹鍒╃敤,鎮ㄥ閲屼竴瀹氭湁鏃х殑琛ｆ湇鐪嬩笉涓婁簡鍚,涓嶆効鎰忕┛浜嗗惂,閭ｄ箞浠婂ぉ鎴戜滑缁欐偍涓涓満浼,鎶婃偍鐨勮。鏈嶆媿鐓у彂缁欐垜浠,鎴戜滑缁欐偍浼扮畻浠锋牸,鏃х殑鏉ユ崲鎴戜滑鐨勬柊琛ｆ湇,鍏ㄥ簵浠绘偍鎸戦,鍙渶閫傚綋琛ヤ环鏍煎嵆鍙,鎴戜滑鏀跺埌鐨勬偍浠殑琛ｆ湇,缁濆ぇ澶氭暟鎴戜滑鎹愰佸埌鐏惧尯...
绛旓細鑰孉&I鏃楄埌搴,浠庡寘鍖呯殑娆惧紡涓惰瑙夌殑璁捐,閮介噰鐢ㄤ簡缁氫附鐨勮壊褰,浠栦滑鏈変笓闂ㄧ殑璁捐鍥㈤槦,涓撲笟鐨勮璁″笀,鑰屼笖姣忎竴娆惧寘鍖呯殑 缂栫粐 鏂瑰紡閮戒笉涓鏍,鍙皳鏄墿灏藉叾鐢,姣忎竴瀛ｅ害閮戒細鎺ㄥ嚭鏂扮殑绯诲垪娆,涓嶅彉鐨勬案杩滄槸鏉愯川銆傝繖浜涢兘宸茬粡鍦ㄤ竴瀹氱▼搴︿笂鏀硅浜嗘秷璐硅呭瀹夊叏甯︾殑鎴愯,鑰屽簵閾虹殑璇︽儏椤,涔熷澶勭獊鍑哄寘鍖呯殑宸ヨ壓鍜屽搧璐,绐佸嚭瀹夊叏...
绛旓細UI璁捐妗堜緥锛氬涓婂浘鎵绀猴紝UI璁捐涓昏鍦ㄤ簬閫氳繃瀵圭敤鎴风晫闈㈢殑鑹插僵锛屽竷灞锛屾枃瀛楁帓鐗堢瓑鏂归潰杩涜璁捐锛屼互淇濊瘉鏁翠綋鐣岄潰鐨勭編瑙傘俇I浜や簰璁捐妗堜緥锛氭垜浠繖杈归夊彇涓涓畝鍗曠殑UI浜や簰浣滀负妗堜緥锛岃繖涓氦浜掔殑鏁堟灉鏄氳繃鐐瑰嚮UI鐣岄潰涓寜閽嚭鐜颁笉鍚岀殑鍥剧墖銆傝繖绉嶅皢浜や簰浣撶幇鍦║I鐣岄潰涓婄殑璁捐锛屽氨鏄疷I浜や簰璁捐銆俇I浜や簰璁捐鍖呭惈浜嗗悇寮...
绛旓細锛1锛夌編宸璁捐甯堥櫎浜嗚杩涜缃戝簵浼樺寲銆佸垎绫诲浘鐗囥佷笂鏋舵帓鐗堬紱杩橀渶瑕佸浜у搧鎷嶆憚鍥剧墖杩涜澶勭悊銆佺編鍖栥佹帹骞匡紱骞舵墽琛屽晢搴楁湁鍏冲箍鍛婂埗浣滐紝缃戝簵鍥炬爣銆佸浘鐗囥佽璁″疂璐璇︽儏椤鍒朵綔锛岀瓑绛夈傦紙2锛夎繕瑕佸涔犲钩闈㈡瀯鎴愬拰鑹插僵鏋勬垚锛岃璇嗗拰鍒嗘瀽澶ч噺鐨勫晢涓氳壊璋冨拰鏉垮紡鏋勬垚銆傚璁捐鑹插僵鐨勮壊鐩稿姣斻佹槑搴﹀姣斻佺函搴﹀姣旇繘琛屽垎鏋愶紝浜嗚В鑹茶皟...
绛旓細鍦璇︽儏椤涓婂氨涓嶄竴鏍蜂簡,鍙互灏藉彲鑳藉湴灞曠ず鍑洪噸鐐逛紭鍔裤 2涓跺崠鐐硅浼告硶 鎶婅鍟嗗搧璇存槑涓婄殑鐗圭偣鐓ф妱涓嬫潵,鐒跺悗鍦ㄦ瘡涓鐐瑰悗鍔犱互寤朵几銆傜畝鍗曠殑璇,灏辨槸鎶婁骇鍝佹參鎱㈢殑涓涓浠嬬粛鍜屽欢浼搞傚綋鐒,杩欎篃鏄渶绗ㄦ湁鏁堢殑鏂规硶銆傝繖涓柟娉曟槸涔嬪墠鍦ㄥ緢澶氬仛鍖栧鍝佹湅鍙嬬殑濂藉弸鍦堥噷鐪嬬殑鍥剧墖銆 3涓朵笁娈靛紡鍐欎綔娉(缁忓吀璇︽儏椤典笓鐢) 杩欐槸浠挎柊闂诲涓...
绛旓細绗笁姝ワ細瀹濊礉璇︽儏椤浼樺寲 瀹為檯涓婅鎯呴〉浼樺寲鏄竴涓郴缁熺殑宸ョ▼锛屾瘯绔熷叧绯诲埌杞寲鐜囷紝鑰岃浆鍖栫巼闇瑕佷笉鏂殑璋冩暣鎵嶈兘瓒嬩簬瀹屽杽銆備絾鏄繖涓嶄唬琛ㄨ锛屽墠鏈熶笉闇瑕佸仛濂借鎯呴〉浼樺寲銆傝嚜鎴戣涓鸿鎯呴〉浼樺寲鍦ㄥ疂璐濆彂甯冧箣鍓嶅氨瑕佸仛濂藉竷灞銆傚墠鏈熶富瑕佸弬鑰冪珵浜夊鎵嬬殑椤甸潰鐒跺悗鍔犱互鎬荤粨鍜屾彁鐐硷紝鎵惧埌灞炰簬鑷繁鐨勭壒鐐广傚綋鐒讹紝杩欎釜璇存硶闈炲父绗肩粺...
