台北設計交流論壇

標題: 手把手教你學網站設計 [打印本頁]

作者: admin 時間: 2023-8-15 13:39
標題: 手把手教你學網站設計
當前，互联網期間已相對于比力成熟，對付設計行業来说，網站設計也酿成企業的标配設計之一。官方網站設計好，是否是就到此為止了呢？不，咱们要讓這個網站被人搜刮到，就像伞兵着陆同样，必要建造一個讓搜刮引擎看到的頁面，這就是所谓的着陆頁。那末設計着陆頁有無甚麼讲求的？和平凡官網和電商主題頁設計有甚麼分歧呢？如今，本人就带列位朋侪领會一下設計着陆頁必要留心的10個焦點要點。

　　1.第一，尺寸設置

　　設計着陆頁，首當其冲的就是尺寸。尺寸，顾名思义，就是说的頁面的高度和宽度，而按照現實必要，又分為分歧载體的尺寸必要顺應。

　　普及一個小知識，尺寸咱们用辨别率来暗示，辨别率的单元是像素，也就是px，英文是pixel，在屏幕上展現的尺寸凡是就用px暗示。px值必要設置72px，多了和少了都不可，而印刷才必要設置300px辨别率，共同米和毫米等如许的计量单元。

　　接着说，按照载體分歧，尺寸也大致分為電脑版，手機版两種。這两種尺寸是有區此外。好比，電脑版偏重大屏幕展現體验，手機版偏重窄小屏幕显示體验，由于在小屏幕手機去看大尺寸的頁面，字领會小的使人看不見，以是必要設計两個尺寸，或，若是想两個尺寸可以通用，就要成心識的把電脑版的字号放大不少，設計區域也要居中紧凑的排布。

　　凡是，設計頁面的宽度比力轻易，由于電脑屏幕的宽度咱管道清潔劑,们已知，而頁面内容说欠好，必要按照現實内容调解，以是先肯定頁面宽度。

　　頁面的宽度，取决于當前全世界用户所利用的電脑显示器屏幕的尺寸。

　　一般来讲，若是采纳無自顺應步伐去建造的頁面，必要非分特别斟酌用户屏幕的可视范畴，出格是小屏幕的條记本電脑的展現结果。

　　由于頁面没有自顺應能力，也就是没有按照屏幕的巨细来缩放頁面内容的话，就會看不全焦點設計區域的内容。凡是市道市情上條记本電脑的宽度，最小在1200像素摆布，以是，筋膜槍推薦,無自顺應的頁面，文字設計區域要节制在1000px~1200px之内，而阁下的延长宽度，是為了大屏幕而筹备的，若是没有摆布延长區域，大屏幕電脑看上去就很丢脸，頁面就显得很小。

　　再说一下頁面高度的設置。頁面高度，因為是按照内容几多而定，但不建议跨越3屏，由于頁面若是過长，一是會致使客户没有耐烦看完，二是會致使頁面質量過重而加载速率慢，影响用户體验，以是高度在3000px之内為佳。

　　2.第二，頁面步伐

　　設計頁面再好，没有好的步伐支撑一样白费。谈網站設計，不管是官網設計、網頁設計仍是電商頁面設計，設計职員都必要懂技能道理，否则很难将設計很好的完善落地。就像呆板人，只有一副都雅的皮郛，是没法運作的，必要步伐去支撑，才能動起来。那末先说一下，網站用的哪些步伐做的。

　　做頁面，曩昔凡是利用的是静态HTML格局说话编写，動态结果會用到JAVA，和C+说话，不外那些都已颠末時了，若是但凡想做動态頁面，有的人會说利用FLASH建造網頁，可是FLASH有很多硬伤，一样已没人用FLASH做頁面，而是專注用FLASH做動画视频了。那末如今凡是做網頁都用甚麼步伐写呢？谜底是HTML5。

　　這個HTML5简称H5，是大vio除毛推薦,要3年前由微軟倡议，厥後飞速成长了几年，到2014年才被遍及利用。H5的鼓起，無疑對網站開倡议到了火上浇油的感化，網頁的設計大量的援用H5動态設計，那末H5有哪些益处呢？H5起首是解决了動态的問題，讓頁面活起来了。曩昔，要實現動态，简略的可以用JAVA實現，繁杂的動态则必要用FLASH去搭配完成，再嵌入到頁面當中。那样做的错误谬误很较着，一個是FLASH占的質量比力大，轻易致使用户打開頁面卡顿，從而封闭網頁西湖通馬桶,，二是由于FLASH是写死的，是以搜刮引擎没法抓取FLASH中的關頭词，進而致使網站很难被搜刮引擎检索到，這是FLASH站點的焦點痛點。

　　以是，不少客户會忍痛選擇了全静态頁面作為網站的官網，固然那样會缺少活氣。以是，設計职員會斟酌参加GIF動画和简略的导航JAVA點击動态结果，固然，那只是简略的動态，底子没有革命性的動态去阐扬余地。

　　跟着互联網化的新数码期間的到来，智妙手機已愈来愈廣泛，每小我都用用N個挪動装备，已不但具有粗笨的台式機，而更愿意将各類终端挪動辦公文娱。好比手機、平板、PC和TV，必要無線互联，因此呈現了云技能，毗连了所有的挪動终端装备，讓人和装备永久分不開。说這些的意圖，在于夸大各终端作為载體的界面，對設計职員和步伐职員的開辟影响。

　　拿到一個網頁設計需求後，起首看這個頁面的實現情势，是单一JPG圖片嵌入，仍是复合HTML圖文步伐，這两種設計起来是两個思绪。若是是JPG情势，那末偏重斟酌的就是頁面的单张圖片質量問題，若是是HTML情势，就要偏重斟酌動态實現和圖文精准定位問題。

　　當一個JPG頁面做好以後，接下来就是必要斟酌切圖問題，哪些圖是必定要切出来的？按钮、注册表、動态區域的底圖，是必要零丁切出来的。若是是一個HTML頁面，若是區域劃分功效比力多，就都必要切圖切出来，在PS平分為一個個模块，切成PNG圖片以後，再用HTML东西写入说话，把切片嵌入網頁，再调试，调试進程中，會呈現各類诸如對齐如许的問題。HTML的建造時候和精神，都比纯JPG頁面要大不少。若是要用到動态，好比動画结果，必要零丁對動态工具写说话，讓它動起来，然後不竭调试，更繁杂一些。是以，如今最經常使用的頁面設計仍是JPG圖片的情势做的。那末，详细要用哪一種步伐做呢？我認為，延续历時間比力久的頁面通經常使用HTML或H5設計，一次性的或短時間勾當推行頁面通經常使用JPG情势，由于相對于来讲更快。

　　3.第三，頁面逻辑

　　谈到頁面頁面逻辑，我想打個例如。好比你有很都雅的外表，很都雅的衣服，很都雅的身段，可是，若是頭和身體的比例搞错了，紧张嗎？實在，頁面也是有“身段比例”的。頁面的逻辑，普通来说，實在就是说的，頁面上放啥，放几多，先放啥後放啥，讓人先看啥後看啥，诸如這些問題。

　　一個好的頁面逻辑，是贯串案牍、圖片的主脉络，没有這條主線，就像大楼没有根底，不晓得為甚麼要盖楼，會致使最後盖出来的楼歪七扭八，不知是甚麼工具，固然也不會都雅，以是，頁面逻辑何其首要不問可知。

　　那末好，如今来说一下若何来策動頁面逻辑。你必要晓得這個頁面想要表达甚麼，想要转达给客户甚麼焦點要素，分清晰一二三，级别不要太多，也不要试圖表达太多，要晓得，太多也没人看的完。思虑事後，再将你的思绪列到一個文档當中，再次梳理，删减掉那些客户不想看的，也不必要客户看的信息點，切记不要表达太多信息量，要简练总结，條理感要计劃出来。

　　4.第四，案牍策動

　　當頁面逻辑搞清晰以後，便可以進入到案牍撰写的步调了。凡是，案牍是有專人卖力的，但有時辰是由策動師或設計師来撰写的。關于案牍，我的小我建议是，案牍撰写，必要顺承頁面表达的逻辑性，分身設計排版的雅觀性，最佳有全局目光，如许再往下履行的時辰，才不會致使频频點窜案牍。一個好的案牍，就像一個谋士，一個好的設計，就像一個将军，一個好的计谋，就像一個元帅，在發兵兵戈以前，這三種本能機能的团队成員，最佳能碰一碰，一块儿举行會商，提高事情效力。

　　在案牍的撰写進程中，必要注重的是，三言两语，主次分明，衬着主題，谨严描写。

　　5.第五，設計结構

　　當以上步调做好，設計師就筹备出马了。設計着陆頁前，拿到案牍和请求後，設計師要先将頁面公道的结構。建议拿出一张白纸，画出頁面的宽度和预期高度，再打開案牍，比照案牍，在纸上用笔勾画一個结構圖。就像排兵排阵，火枪手排在哪，弓弩手排在哪，骑手排在哪，文字排在哪，圖片排在哪，起首要在大脑中有一個印象，做到成竹在胸心稳定。

　　在结構頁面時，要注重頁面的“骨骼”。也就是说，分几大块，大致可分為，頭部、躯干和底部。在頭部和底部的設計中，大致咱们應當有“模板”，就是按照官網頁面的頭尾来設置，凡是做法是做的一摸同样，但有時辰必要精简内容，究竟结果是着陆頁，更凸起的是勾當主題。頁面的“躯干”部門，是要再细分的，好比有三個勾當，那末設計師就要分為三块来設計圖文组合。

　　“躯干”的上部門，通常為采纳一個大的主画面来表达，做過電商頁面的都晓得，這一块是画面的脸面，必定要做的炫酷，做出勾當味道来。中部，也是主體部門，主如果将躯干的四肢公道的摆上去，有條不紊，切忌紊乱無主次瓜葛。下部門，凡是是對本勾當的细节描写和先容，這部門不建议過于抢镜，讓這部門处在副角的位置比力公道。

　　關于頭、躯干、尾巴的瓜葛分出来，再分躯干中的上中下，都分出来後，将文字大題目零丁摘出来，占位，再把勾當描写與大題目做一個组合，然後再把要配的响應圖片區域计劃出来，根基上框架圖就搭好了。搭好框架，再频频比照计谋逻辑举行检测，若是有不合适用户视觉習氣的布局，随時點窜。

　　要留心的是，頁面最佳不要跨越三屏，防止布局過长和细节太繁琐。

　　後面5大實战要诀會鄙人期讲述，想要领會的小火伴请继续存眷！

歡迎光臨台北設計交流論壇 (https://digweb.com.tw/)