關于偉創 偉創新聞 偉創案例 網站套餐 聯系方式
只做吸引客戶的精品站!

UI設計師懂點前端知識是提高效率的開始

洛陽網絡公司 / 2017/7/22 16:16:32
[核心提示] UI:設計稿的banner圖怎么沒有全部顯示啊?為什么左右兩邊不見了?1920px * 400px的圖被你弄成1600px * 400px了! 前端:你電腦屏幕不夠寬顯示不了啊大姐! UI:給我全部顯示啊,那是精華! 前端:......
UI設計師懂點前端知識是提高效率的開始

UI:設計稿的banner圖怎么沒有全部顯示啊?為什么左右兩邊不見了?1920px * 400px的圖被你弄成1600px * 400px了!
前端:你電腦屏幕不夠寬顯示不了啊大姐!
UI:給我全部顯示啊,那是精華!
前端:......

5分鐘后

前端:大姐,你要的全部顯示。
UI:為什么圖片變這么矮了啊,1920px * 400px的圖被你弄成1600px * 300px了!不夠大氣!
前端:那個誰,java、php,我們去下午茶吧~
UI:¥#@&*%%@#¥
-----------------------------------------------

類似上面的案例就不多說了,還是說一句吧,banner圖在設計時本來就要考慮網頁的可視范圍畢竟瀏覽器有很多種分辨率你要考慮最小和最大分辨率的情況不然就是你的錯!

吶,說好了說一句就是一句吧,馬上進入正題!

我們以往在做網頁設計時都會定一個可視范圍,例如寬1600px的畫布,我們定可視范圍為寬1200px,那么在排版時左右兩邊多出來400px一般情況下我們都不會塞內容進去,那是留給特殊模塊使用的。

類似這樣的功能也有很多,例如很多電商網站都會有一組懸浮按鈕在左邊,1F-服裝,2F-家電,3F-手機……功能都很實用,但都不會是主要內容,主要內容當然顯示在可視范圍內。

那么開篇舉出的banner例子,我這里也詳細說明一下,首先普及一個主流瀏覽器分辨率的知識。

 

 


先忽略移動端,大家可以看到,主流的分辨率是1920,其次是1366,說明大多數人不是在用寬屏的臺式機,就是在用手提電腦,那么banner該怎么設計?別急~

大家把目光移動到我剛剛隨手一截的站酷的那個圖片的上面那段話的第一句話:

“我們以往在做網頁設計時都會定一個可視范圍”

這里重點強調的是“以往”,因為以往沒有響應式設計,什么是響應式設計?就是當分辨率在不同情況下頁面會跟隨發生不同變化。以往大家都是一個分辨率一稿過,不過現在的網站沒有哪幾個不做響應式了,因此,版面也要跟著做多個分辨率的版本。大家先有這個概念,我們繼續剛剛的“以往”的banner設計,就是一個分辨率一稿過的banner。

假如我們定的banner寬是1600px,那么這時就會有2種基本情況,拿一張我2年前做的圖來示范哈:

1、當分辨率是1920時,怎么顯示banner?

左右兩邊因為圖片不夠寬,所以空出來了。假如前端沒有設置好,直接將圖片重復讀取。

2、當分辨率是1366時,怎么顯示banner?

因為屏幕太小的原因,無法顯示全部圖像,兩邊被裁剪掉了,這樣也達不到宣傳效果。

因此,在設計banner時,盡量按1920來設計,再定一個可視范圍,這里建議1200,也就是說,左右兩邊空出來位置是可有可無的設計,如純色、漸變色、裝飾性的花紋等。

這里順便給大家科普一下前端實現這個banner的方法哈。

前提:banner設計寬為1920px,高為400px。

首先前端會定一個高度,這個高度根據banner的高而定,所以定400px,而寬度是不用理會的,因為在前端的世界里background是可以多種設置的。

一般來說,居中展示使用情況是最多,而且也最能適配任何分辨率的(不好意思,上面打錯字了,但我懶得改了哈哈哈哈哈)。

有人問,不能把圖片在任何分辨率都撐滿屏幕嗎?

在任何分辨率下都顯示全圖,這種情況屬于移動端會多一點,還有一種特殊情況就是客戶要求。。。

我在做外單的時候還真遇過這樣的客戶,當時是做企業官網,要求以他(老板)的手提電腦(分辨率1366*768)為主,他說現在很多老板都在用手提電腦,所以我們要以手提電腦的視覺效果為主,并且在banner(banner設計初稿大概1920*600)下面要露出一點點企業介紹的內容又不能太多,很微妙的感覺。。。

我的天,每個瀏覽器的地址欄標簽欄收藏夾欄都不一樣高度,系統的任務欄也是不一樣的高度,這些高度加起來大概在100px上下浮動20px,當時我身邊沒有手提電腦,做不了實際測試,就那banner(最終設計稿大概在1920*460左右)的高度調了差不多1天時間才讓對方滿意,但重點是,你不知道老板都是讓員工去找解決方案的嗎,員工用的電腦難道都是手提電腦嗎。。。

好吧,題外話就不說了,我們的職責是讓客戶滿意!

尊重作者原創 除非特別聲明,偉創科技所有均為偉創原創報道,轉載請注明原文鏈接。
原文地址:http://www.tgpeyz.live/Design/View.asp?id=1062  所屬類別:整合設計
相關內容
偉創網絡技術設計部分享原創干貨設計之九步曲 2018/8/3
UI設計師懂點前端知識是提高效率的開始 2017/7/22
前端開發人員要如何做好自身定位 2015/12/7
資深網絡設計師心態如何平靜、穩定. 2015/11/30
洛陽網絡公司的官網設計要求該如何設定 2015/10/15
猜你喜歡
我們網絡公司招程序員時的態度和方向 2012/12/17
不要過分利用網站圖片標題作為點擊誘因 2013/8/31
企業急需建網站需要考慮的一些因素 2015/4/2
如何將數據量龐大的Excel表導入MySQL 2012/10/30
為你的網站準備一篇正經的公司簡介 2013/4/10
簡潔化網站將越來越受到用戶的喜愛 2014/6/16
清明節放假時間通知 2017/4/1
互聯網2.0是窮人的傳播工具 2013/1/21
偉創科技域名架構師解讀如何注冊短域名 2013/11/9
網站布局及網站顏色搭配的秘訣 2015/7/30
偉創熱點
關于我們
公司簡介
我們的優勢
企業文化
公司愿景
加入偉創
偉創官方博客
金牌項目
網站建設
網站優化
軟件開發
整合設計
網站運營
網站套餐
基礎型網站
展示型網站
商務型網站
購物、商店型網站
FLASH動畫型網站
行業、門戶型網站
幫助中心
客戶中心
公司SEO培訓
seo顧問服務
支付方式
聯系我們
我們的位置
關注我們
新浪微博
騰訊微博
人人小站
QQ空間推薦
花瓣網
建站百科全書
Copyright 2007-2012 LYWHY.Inc Sitemap 豫ICP備12012069號-1
Links
洛陽百科
建站百科
大乐透几点开奖