追求卓越一諾千金

藍藍設計-厦门临时工招聘,2011年成立_易点彩票网手机版双色球预测最准确,主創清華團隊--|麦饭石水,專注軟件和互聯網ui設計開發-__英特杰。擅長企業信息化管理--|蘑菇街2013新款冬装、監控||昆明三对夫妇群原图、大數據軟件UIUE谘詢和設計開發服務|||金华职业教务网。立足UI-|小动脉电影网,好好學習_|青岛大哥骂雅阁女,天天進步___256买彩票iPhone版!


細說B端後台產品UI設計那些小結

2019-6-20 分享達人 Bs界麵設計文章及欣賞



如果您想訂閱本博客內容-_易彩快三,每天自動發到您的郵箱中|雅丽婷左旋肉碱, 請點這裏B端後台產品UI設計的工作小結-|-注册送彩票彩金大全,總結一些常見問題-|外地车北京限行、解決方法以及自己的經驗__|丽谯楼。


寫在前麵

作為一個新時代全能打雜__钱学森女儿,日常工作包括移動端-||掌上助手彩票、PC端的UI設計以及各類平麵視覺設計--|长官爱人19楼,其中自然少不了令人“禿”然的B端後台產品設計---365彩票为什么登录不了。

畢業兩年來一直都做著B端產品的UI設計工作_||sky浪翻云,參與過的後台產品設計麵對的主要客戶有公司內部|-海豚音是哪首歌、各大企業以及政府機構__索爱a8。工作和學習的過程中走過不少彎路|-淘1站,也在不同的項目中不斷反思和總結|-诺亚舟电子词典。把自己的一些想法和經驗分享出來_-|门德尔松随想回旋曲,總結自己工作中遇到的問題和解決的方法_||湖南移动梦网营业厅,記錄自己思考和理解的過程-|金立gn106游戏下载,也希望對即將或正在從事B端後台產品設計的你有一點點啟發或幫助--_优信彩票快三。

希望在日後的工作和學習中||永盛国际手机彩票游戏,通過實踐來不斷完善自己對B端後台產品的理解|-2628彩票网页。



目錄

一-|绍兴三味影院、明修棧道C和暗度陳倉B

二||-阜南教育网、後台產品設計思路

三_--缩管加工、後台產品設計規範

四|易中彩票可信?、經驗觀點及設計資源



正文

一-_陈文祥、明修棧道C和暗度陳倉B

1.1初識B端產品和C端產品

按照C端產品和B端產品的專業術語來解釋的話__-五百次回眸,C端Consumer_-|至尊争霸彩票是真的吗,表示為消費者|_-五星体育f1直播、個人用戶或終端用戶設計-||良田万能摄像头驱动,直接麵向普通用戶提供服務來幫助他們實現個人需求-__众博国际app下载。B端Business__锦龙堂,它麵對商業和企業_|-兴洋家纺,是為幫助企業集團等實現商業目的而設計的軟件_-_2019世界杯竞彩足球、工具或者平台|动感最划算。

在我們日常生活中|-happy together fx,在手機上使用的大多是C端產品--阿里旺旺2012卖家版,單一的C端產品通常是為了實現單一的需求--门头沟歌华有线电话,比如看網紅的抖音-俏模牌轻靓减肥胶囊、聽音樂的酷狗|厦门宏基笔记本维修、買車票的12306|__舞女的纯情、社交的微信等_-008彩票论坛II,這些產品有自己的核心功能-|_淘宝网上开店,其他的功能則是附加的--_369彩票平台,倘若沒有這些附加功能_|上海老板手机号码,雖然用戶體驗感會降低-茅台一品天下,但並不會影響產品的核心功能-|_广东高职院校排名。

而麵向B端的產品|_|海南马自达官方网站,我個人稱之為“暗度陳倉”--_qq2011 下载,當個人用戶為實現個人需求產生了一係列動作-|深圳观澜田背花园,往往伴隨著該需求的另一端也會反饋一係列動作__楚州城,即C端產品的後台產品線(BtoC)_-runningman2016,比如淘寶賣家平台|-_泷泽萝拉 七里香、餓了麼商家版等_-小腻腻博客。除此之外-_i7电脑配置清单,還有麵向商家|-0234大发彩票app下载、企業_-诺基亚软格机、業務部門提供的企業級服務產品|_cf易美官网,以及麵對企業或者個人提供的平台級工具產品等|__爱慕卡盟。

雖說我們日常使用的更多是C端產品|孝义广电传媒,但是B端產品對我們的影響也是時時刻刻都存在著的|-爱情连连看陈明月。C端產品在明_--168开奖官方网站,逐漸改變著現代人的生活方式|-2019年005期四不像,B端產品在暗|||水观音擦皮鞋麦词,間接服務於用戶_|-可牛361特警,讓一切流程化秩序化|-邮电局上班时间,並且具有多個主要功能點-_-like to be alone。

——“ToB還是ToC|松江同乐网?這是個問題......”

——“不管ToB還是ToC_|苏州火车站咨询电话,最後都還是ToP(people)|深圳股市大盘。”

1.2B端和C端產品的區別

在我看來__中诚快递网点查询,C端產品以消費互聯網為主|_云端娱乐是真的吗,B端產品以產業互聯網為主---云顶娱乐注册,C端更感性||-仙剑奇侠传关系图,而B端更理性--鲤鱼山火山爆发时间。

從使用者的角度來說——

C端產品關鍵詞包括免費使用-|众发娱乐是违法的吗、迅速上手-_|京珠高速车祸、體驗為王|--阜宁新闻、你能讓我做什麼-_黄岩岛现状;

B端產品的關鍵詞則是付費購買-_198彩票计划、上手緩慢_-偷税漏税处罚标准2017、效率第一_-_325棋牌上分微信、你能為我做什麼-__射阳中学。

從開發的角度來說——

C端周期短_111彩票官方网登录,B端周期長|-掌信彩网站;

C端用戶多_--相逢是首歌下载,B端用戶少--行政法规可以设定;

C端邏輯簡單--|易彩彩票是诈骗吗,B端邏輯複雜-|易拍宝;

C端競品較多_|_永胜国际投注是真的吗,B端競品較少-|诚毅学院体育教研室;

C端主戰場是移動端|_|芙蓉中路二手房,B端則是PC端||-qq2011官方免费下载;

C端是用戶體驗驅動||36选7开奖怎么算中奖,B端是解決問題驅動|__金寨租房;

C端產品的使用決策權在用戶手中|_|始兴家园,而B端產品的使用決策權則在客戶手中(B端客戶不一定是用戶)|||众赢彩票是真的吗?;

C端產品除了產品的體驗以外_搞笑考卷,也要讓產品更美觀--198彩注册平台官网,讓活動更有趣--_刘玉玲电影flypaper,讓用戶更舒服||2019年每期正版四不像,產品經理有很強的同理心-_038彩票app是正规的吗,B端產品的實用性大於美觀性-_mc水观音擦皮鞋歌词,能切實解決問題|||三九祛痘灵官网、配置資源的B端產品才是一個好的B端產品||重庆电视台少儿频道,產品經理要具有更強的邏輯思維能力|-_陆地蟹。

1.3後台產品常見分類

後台產品按其作用可大致分為兩類--|塔河贴吧,一是支撐前台產品|--亿彩彩票官网首页,二是管理各種資源__米粒资源网。我認為後台產品應當是囊括在B端產品的範圍之內的_--0707彩票怎么样,常見的類型包括||超导空调:

  • C端產品的後台產品線——如淘寶商家版-|丽柜厅直播,餓了麼商家版__2018云联惠骗局已解决,對訂單和用戶進行管理-|艺考生百日冲刺,支持C端產品的業務進展___碧月帆雪;

  • 平台級工具產品——如微信公眾平台_||2000彩注册,對文章和讀者的數據統計和管理-||邯郸晚报电子版;各大互聯網公司的開放平台--|娱乐天地在线登录,如微博開放平台等-3cp上彩票官方;

  • 企業級服務產品——虛擬主機係統(VMware)|__亿彩彩票是真的假的,雲主機管理係統(深信服|_-雷霆扫毒蒙面人是谁、xensystem-_招远一中、騰訊雲)以及各種雲SaaS|--冬虫夏草5x;

  • 企業的業務處理平台——對內有考勤|-|朱晓东我型我秀、報銷等OA辦公係統|-|诺亚舟电子辞典,對外有CRM客戶管理係統|-铁瓷,ERP資源及供應鏈管理係統-|好听的行会名。

二|-|蒙牛纯牛奶广告、後台產品設計思路

2.1初識後台產品設計

說起後台產品|51jiemeng,很容易想到複雜|中国专科学校排名、龐大-_恩施美食、邏輯縝密-_长城彩票,而作為設計師-|优乐彩赢了可以提现吗,苦於競品短缺_|2018大乐透开奖号全部、架構複雜上海哪里可以蹦极,設計的前期工作比設計本身要複雜得多-__三菱suv。

後台產品不同於普通用戶所使用的APP_-2013年考驾照多少钱,它在用戶初次使用和短暫時間內的認知成本是較高的|365天天彩票快三。當用戶用慣了一個音樂類的app-烟熏枣,再給他幾個其他的音樂APP|-_印度电视剧新娘第二部,用戶是可以迅速上手並且輕易解決自己的需求的--星光龙门阵。而後台產品則不然|-东方热线网络测速。

對於後台產品來說|永利网投平台,首先--|苏州怡园,所見之少|_|蛋神奇踪第1部全集,它並不是隨隨便便就可以下載使用的--新乡爱情网,即便你在使用的過程中__永城彩票网平台,也因角色不同而受到權限限製__广州烟草网上订货,一般來講很難像超級管理員一樣接觸到整體功能-|静水天平;其次-|y阅,門檻之高_--易记彩票是什么网站,後台產品的使用者一般都是在該行業沉澱了很久__365电玩棋牌游戏,所以要對後台產品進行設計就需要同樣了解該行業__|许继慎、甚至更能洞察該行業||-陈进平,業務本身的複雜性質決定了後台產品架構也會比較龐大|-十堰物流云帆配货;然後_|众赢彩票下载,無論是工廠商家的進銷存管理__元氏租房信息,還是政府醫院的工作流和業務流-|优盈彩票合法吗,乃至企業內部的產品|||云彩上的翅膀,除了不同行業都有門檻外|-|犇龙庙,對信息和產品也有“保密協議”的使命感|-中国国家主席名单,所謂“隔行如隔山”_|花沫雨,在後台產品更是如此-|-至尊争霸彩票怎么玩;最後__青岛极地海洋世界攻略,後台產品設計往往沒有固定的功能架構和商業模式___qq帅网名,對於產品經理的邏輯思維能力要求更高-||永胜国际福彩,設計師不僅僅是做界麵|__智彩平台不锈钢茶、優化流程_-|锅炉控制箱,也要主動和產品經理溝通交流-__芭蕾舞剧牡丹亭,並對產品進行思考和探索-_|106官方彩票首页。

這大概就是後台產品相關資源較少-_vkke创始人何婧婧、設計難度較大的一些原因|_-浦东科普网。


2.2後台UI設計工作流程

後台UI設計的工作-金稻穗,大體分為三個部分_-卓易彩票是不是没有了:需求分析——設計執行——數據分析_仙剑奇侠传五破解补丁。

  • 在需求分析階段-|_艾尔之光宠物食物,要對產品本身和行業本身有一些基本的認知欧洲古典四大名著。要了解產品的基本情況_||沧州蜜宝团,比如產品目標__-360彩票详情、用戶人群|-_金华艾克医院孙尚见、產品定位_-|四川教育学院温江校区、需求分析-_丧尸围城电影、功能模塊_易旺彩票网正规吗、主要競品和產品特色-|-盈彩网apP。 做這個產品是為了解決什麼問題|||青年中国说余佳文?想實現什麼目標_|铁木真炒锅?使用這個係統的用戶有哪些-_11086移动彩票软件?不同角色的用戶有哪些具體的權限|手机怎么开通gprs?是否需要對每一個用戶的行為都生成操作日誌-|_0368彩票?產品有哪些主要的功能模塊||雅虎宝贝鱼?產品的業務流程是怎樣的--168彩票网站是真的吗?有哪些同類型的產品|--娱乐彩票app?和他們相比我們的產品有什麼特色和特點--000712锦龙股份?成功地做出大而全的後台產品致富彩票网站大全,是整個設計團隊和開發團隊能力的體現-|东环广场电影院,而對很多小團隊來說__红玖木商城,隻能做一些大團隊不願去做的產品|-1995返水05彩票网,或另辟蹊徑在某些方麵做專做精|_顺贷网。

  • 在設計執行階段_|_辽宁都市频道,參照PM給出的功能清單做原型和流程的梳理||肇东张锡才,需要關注的有當前版本規劃-|-陈秋石将军、功能模塊_|速归速归 如果不归、功能類型_|青岛糖球会2016、功能描述|长嫂难为19楼、任務優先級-镭波吧、完成時間等-||苏黎世之秋,交互原型則伴隨著功能描述--陶瓷网坠、規則判定條件|||综艺盛典、觸發條件等內容|_2019六开彩香港开奖结果。原型設計完成-198彩手机平台登录,開始做UI視覺方麵的設計__-陶瓷网坠,而這時後端同步構思需求的實現方案|-_13334彩票网。UI設計師向前端了解實現框架-1588彩票推荐人,方便交接和溝通_--诺基亚官网pc套件。當界麵實現___宋老六,UI設計師應該是最早進行測試的---永城彩票二等奖,力求視覺設計和代碼實現無誤差-_038彩票网络平台。在完成設計執行後---乔氏活络宝,從信息層級_|168彩票安装ios、文字_|长葛市教育局、圖標_-提手上下、圖片等方麵進行設計走查陈雪明,進行多次設計驗證與測試--|106cc彩票21011版本。

  • 數據分析是產品優化迭代的重要依據__|206 217 214 175。進行多番測試和評審後交付客戶(或內部)使用|-长城彩票平台靠谱么,根據產生的具體問題進行不斷迭代|__邮局营业时间,且觀察產品能否通過準確的數據反映問題-众发娱乐彩票是真是假、體現能力-|河南高等教育自学考试考生服务平台,應虛心接納使用者的使用建議並嚴謹思考其合理性--铜皮规格,用戶的使用和反饋是優化產品的重要途徑-_阳曲县政府网。隻有達到了管理和運營的指標-|京东商城打折,後台產品才是真正產生了價值-|_盈彩国际输钱怎么办。



2.3製定設計規範的作用

為後台產品製定設計規範有哪些作用和好處呢朱罗世纪公园2?簡單來說就是對產品好-|105彩票是正规平台吗、對自己好_||陈法蓉三级、對團隊好||154大乐透彩票中奖号码、對客戶好--成都九眼桥猛女资料。

  • 對產品——在項目完成第一版較為穩定的版本時-_众赢彩票是真的吗?,著手製定設計標準-史酷比古墓逃生,統一公司視覺設計規範及某些特定交互設計規範|舍得返利网。同一個項目會有多個設計師的參與--|2628彩票平台登录链接,規範化的設計語言__坏蛋2txt全集下载,避免因設計控件混亂而影響設計輸出||155彩票0;

  • 對自己——組件化同類元素_248彩票平台安全吗,提高工作效率-|qq炫舞极品宠物名字,建立公司產品的組件庫_|南京机场大巴时刻表,以便不同項目的複用及設計延展_|-霍林郭勒天气;在同一個項目中也能更好的把控該項目的視覺規範-|亿人彩票平台可靠吗,提高效率|_易发彩票资金安全吗;

  • 對團隊——設計規範的製定金兰妃,規範了設計團隊的輸出|_-亿彩彩票规律,同時方便了與開發團隊的交接和協作||qq名片互赞群。通過設計規範的製定_|盈利国际娱乐,前端實現也能擁有一套可供複用和擴展的組件庫|_-陕西省职业技能鉴定中心,助力上下遊交接及團隊協作-_-宝塔镇河妖下一句;

  • 對客戶——製定設計規範的同時需要考慮設計延展性--陈桥兵变令人疑,為不同客戶的定製化需求提供更高效的輸出_-_父亲的盾牌。同時在進行產品迭代時__苏州地税局网站,設計規範的組件化調整也大大提高了工作效率-mgcc恶意程序释放文件。



三_诺基亚8800s黄金版、後台產品設計規範

*以下內容僅供參考和交流_||玉子金童,圖片內容不代表真實尺寸__|k165次列车时刻表,請結合特定產品靈活使用___武汉体育学院校园网。


3.1頁麵布局

  1. 統一尺寸——據統計-_丧尸新人类,目前PC端用戶屏幕分辨率占比排名前三的是1920*1080|__娱乐天地重庆时时彩APP、1366*768|-|金玫瑰洞下载、1440*900_亿彩彩票是真的吗,以1440來設計的話-2004cad下载,向上適配或者向下適配誤差會比較小--_金娜娜发型。 適配方案——麵向多個客戶-opera酒店管理系统,後台產品設計功能型頁麵的尺寸統一為1440*900--|通辽刘大鹏,按照柵格係統原則向上或向下適配_-幼儿教师年度工作总结;展示型頁麵以1440*900為主-安心奶妈网,同時設計出極端情況(寬度為1280以及寬度為1920)的效果圖--_智彩平台不锈钢茶,力求實現前端實現效果和高保真設計圖誤差最小|-奇瑞s18d。麵向公司內部的後台係統_-薄樱鬼同人羁绊,由於各個職工電腦屏幕是統一采購|-基督教赞美歌曲大全、統一尺寸-_-股市最高点,所以開發適配的分辨率可以統一尺寸進行設計-_-诺基亚6120c软件,這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可(提前和前端溝通好)_093彩票安全吗?。

  2. 頁麵框架——頁麵框架主要分為左右欄布局和上下欄布局--至尊彩输惨了,還有其他的布局--历届北京市委书记。左右欄布局包括頂部欄||_365彩票数据最专业、左側菜單欄--_徐娇演过的电影、主體內容三大區域|瑞士鹿喜微断食,其中頂部菜單欄-|-易彩—彩民福地登录APP、左側菜單欄為固定結構-_长武公众信息网,右側主體內容根據分辨率進行動態縮放__铠甲勇士刑天2后传;上下欄布局包括頂部菜單欄和主體內容兩大區域|_自主卡盟,其中頂部菜單欄為固定結構_|提手上下,主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值||-优乐彩彩票是真的吗;左右欄布局時||_256手机彩票时时彩计划,左側菜單可收縮展開--|李宇春 硬又黑,收縮狀態下固定寬度-w599。

  3. 柵格布局——柵格係統的使用是為了解決自適應和響應式問題-__2011手机qq,從而更好地進行產品設計和產品開發|沈阳网通测速。響應式柵格采用24列柵格體係實現cf卡墙教程,以滿足2-澳门大学内地招生网,3__-赢彩彩票中奖能提现吗?,4-|160彩票网站,5_||欧洲古典四大名著,6分比布局等多種情況--_芭蓓萃怎么样。固定寬度Column-_镇江老兵事件最新进展,將間隔Gutter進行動態縮放-_-最后的格格吻戏。需要柵格化處理的內容的總寬度=23列(1列=1寬度Column+1間隔Gutter)+1寬度Column=24寬度Column+23間隔Gutter_-永盛国际被关了。穀歌規定模塊和結構之間要以8px為基準-_铁瓷,布局間相對間距可采用8px以及8的倍數-_单号吧,但一些小組件(按鈕-_易网彩票下载、間隔|_北京外事职高、輸入框 )可以以4為基準|-|锦上国际区。柵格布局是為了輔助設計___艺龙团购后台,靈活運用|__东港黑社会,不要被它所局限_盐都新闻。

  4. 尺寸設定——一般在整體區域左上角放置產品LOGO及產品名稱--_1号平台下载,大部分係統頂部欄高度48+8n||影印一体机,側邊欄寬度200+8n--藤步阁。我常用的是頂部欄高度56px__乒乓球胶皮价格 优个网,側邊欄寬度200px__盈众彩票合法吗,側邊欄收縮狀態寬度56px--永盛真的会上门吗?,右側的側浮窗寬度400px-_|语笑今生。

  5. 相對間隔——定義主體內容的上下左右邊距|_好听的彩铃,定義主體區域內各模塊的邊距及安全寬度-|铁路托运价格表,超出內容區域的部分采用區域內滾動或整屏滾動__芬迪斯,視情況固定導航欄-__国安部邱进。



3.2標準色

  1. 顏色分為品牌色-|_038彩票网提现快吗?、輔助色||冯绍峰qq号、中性色-_1996平台注册。根據不同產品的不同需求-_|葫芦岛一高中家长汇,可能也會將統計圖--模特庞盼盼、標簽等進行統一標準色設定_|雅迪电动车代言人。

  2. 品牌色即產品主色-_|苏秀文,產品主色的設定直接影響產品氣質和直觀感受-_锦州有线宽带,也是產品直接對外的形象__|尿毒症武警二院专家。品牌色要根據產品特性|_雪在飞、用戶使用場景_--霹雳赛车主题曲、產品定位等進行選取-|_兔瓣影院,盡量做好色彩的延伸性-盈彩官网app下载,可支持換膚|_|58创业加盟。品牌色的應用場景包括操作狀態--长嫂难为19楼、按鈕色---金蝉脱壳造句、可操作圖標等|__娱乐天地有手机版本吗。

  3. 輔助色用於提示其他場景-_盈彩彩票,比如成功_|-36远7走势图、失敗-_|安阳窝窝团购网、警告|长春大学光华学院教务处、無效等-_|殷世航。

  4. 中性色常用於文本-|132彩票在线登录、背景||_永盛彩票网app、邊框_||o记实录刑警、分割線等-_-优选彩票,需要考慮深色背景和淺色背景的差異-_铝矾土骨料,可以選擇同一色相控製透明度變化|||标准间是什么意思,用來表現不同的層級結構--|亿彩彩票是人哄控制吗。

  5. 其他色如統計圖--北京市统计局信息直报网、數據可視化|_标靶药物治疗、多個標簽的不同配色方案根據項目情況單獨設定-_计提职工福利费。

3.3標準字

  1. 後台係統常用的字體_--q币购物券有什么用:windows係統_-锦江区公众信息网,中文Microsoft YaHei_花丸幼稚园gif,英文Arial|_镇江京江晚报;Mac字體--_非主流伤感个人说明,中文PingFang SC__|冰心奶奶的原名,英文Helvetica__锦龙股份股吧;除此之外可以選擇的字體還有segoe UI|阎玺的微博、思源黑體-_易旺彩票网、Hiragino Sans GB等-酷毕犬舍。

  2. 後台係統中常用字體大小為12px|||战地3沙漠巡逻车、13px|__角竹光寿打成语、14px-|车险法、16px___2019肖码期期准、18px|-288彩票、20px|_金华职业技术学院信息工程学院、24px||海葬费用、30px|_|美爱商城。

  3. 行高設定-_易彩乐靠什么挣钱,根據文字大小及使用場景設置行高--|陈大伟博客,一般行高=文字大小+6px/8px__仙剑5破解版。


3.4圖標

  1. 圖標是UI設計中重要組成部分|_苏秀文,一般分為功能圖標和應用圖標|--高中排列组合,以圖形的方式傳達概念永安彩票是否合法,可以降低理解成本_--盈彩彩票注册送18,使得界麵更加協調美觀||南汇酒吧斗殴视频。在後台產品中-|雪弗莱suv,圖標的功能則更偏向輔助性_||剑灵李素梅在哪,輔助用戶對功能的認識__-怎么在淘宝开店。

  2. 除了某些常用的圖標_上海中潭癫痫能治愈,有一些專業性的操作和詞彙則需要設計師進行繪製--_htc a3333,現在比較高效方便的方法是在iconfont提供的圖標模板上用AI繪製|-_东升伟业股票,畫板1024*1024-288彩票靠谱吗,提供圓形|--金坛零距离、正方形|_永盛、矩形形狀(文末提供下載)-|gmod是什么。圖標尺寸按照8的倍數進行延展-18元注册彩金app,繪製完成後生成svg格式文件_虹口区小学排名,提交到阿裏巴巴矢量圖標庫的項目組裏-_|英拉他信雾霾游北京,方便前端調用|-_深圳特色小吃,調整大小和顏色更為方便__观赏鱼之家网站zadull,且能夠優化係統內存和性能_|秦国赵弋。

  3. 分享一個我個人常用的AI使用小習慣|_marta krylova,因為ctrl+q-荆门运动人网、ctrl+w作為退出和關閉我用的不多|_任重姚笛快乐大本营,而且有時候手抖會在保存時候不小心點成了關閉|_038彩票是官网平台吗,所以我無情地把ctrl+q-西青区房管局、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯|-|01彩票真的能赚钱吗。




3.5按鈕

  1. 按鈕是後台產品進行交互設計是重要元素__-木人桩价格,提供給用戶進行點擊操作||上海静安区火灾,是視覺上最引人注目的控件|||聚美优品网站打不开,具有一定的視覺受範性-||被下药后强干漫画全彩。常用按鈕可分為填充按鈕__人受杂交、線性按鈕_||意彩、文字按鈕--_军星网成绩查询。

  2. 按鈕的交互狀態包括默認|_|陇南政府、懸停|灵宝党政网、點擊和不可用--22选大星彩票走势图。

  3. 按鈕根據需求分為不同尺寸||105彩票苹果版怎么没了,大中小三個級別用在不同的場景|__亿彩票安全吗,一般按照8的倍數設定-||038彩票苹果官方版。如高度分別設定為24-_该隐打卡修斯、32_|查开房我帮你、40px|-节氨特。

  4. 規範整理時要規定不同類型按鈕的寬高|||新五丰u鲜、圓角及文字大小_tcl手机a998,同時還要將按鈕的不同狀態展現出來-上海癫痫病中潭医院。

  5. 填充按鈕之間間距最小為10px|_众赢国际是不是黑平台。

3.6導航

  1. 導航的類型有很多種||单位性质,常用的比如頂欄菜單_-鹿喜微断食纤体、側欄菜單|wow瑟银矿、折疊菜單|_骂小佛、下拉菜單--_雅迪电动车代言人、麵包屑-|格力客服系统、分頁__山西电视台小郭跑腿、步驟條__色拉拉、時間軸__|瓯江影城、tab標簽頁__陈炳德简历、膠囊菜單-|2号站彩票代理、徽標數等|--里番a c g全彩。

  2. 各類導航中的字體大小可進行統一設定|雨丝风片。

  3. 頂欄菜單多為一級菜單-_长发速递,點擊切換-|jy男装淘宝店,或作為下拉菜單的父級|_盈彩在线贴吧,將子級菜單合理分類_惠安三中网。

  4. 側欄菜單為垂直導航菜單||_众益彩票简历,可以內嵌子菜單|-意彩国际娱乐。

  5. 下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種--qq2011下载正式版免费下载。

  6. 步驟條引導用戶按照流程來完成任務-11086时时彩官网下载,一般步驟不得少於兩步_-288彩票平台。

  7. 分頁的高度設定為24px_-|众发娱乐app官方下载、30px|_|上海哪有蹦极、32px|--娱乐天地注册,根據應用場景適當增減內容-|掌上购彩app犯法吗,比如設定每頁展示數據的條數__-csolcn、跳轉至指定頁等__|僵尸片排行榜前十名。

  8. 麵包屑用於說明層級結構|__快播加速器,使用戶明確當前所在位置|__打屁屁视频家法,並且可以回到任一上級頁麵|_长春市房地产报。

  9. 徽標數用來通知用戶當前有未讀消息_|清新壁纸,一般出現在圖標的右上角或者跟在文字後麵___有约鞋批发网。



3.7表單

  1. 表單多由一條或多條列表項組成_-昆明桑拿,單一列表項的類型有字段輸入框---风单子、條件選擇器__106彩票。

  2. 字段輸入框的標題和輸入框分布方式包括左右_|_苏州科勒卫浴、上下__|御龙在天野蘑菇、無標題_|093网络彩票。左右分布是常見的對齊方式|_|谜语人的灵蛇,比較適合PC端的使用|__棒针毛衣外套;上下分布增加了表單的整體高度|_|风单子,視情況選擇使用|__讫;無標題經常應用在登錄注冊-|斗战神主题曲 陈奕迅,雖然減少了麵積-_意彩账号怎么获得,但是增加了理解難度-|亿彩彩票是人哄控制吗。

  3. 輸入框的交互狀態包括默認|187是什么号段、輸入結果---安钢大厦、提示錯誤--|包头医学院就业指导网、禁用_-|铁路调度系统、獲取焦點|-十堰物流云帆配货。

  4. 輸入框的尺寸可按照8的倍數進行設定|-快乐大本营落跑甜心剧组,比如24px|-|重庆鸿恩寺儿童公园、32px-_京东电器网上商城店,也可根據係統實際情況進行設定--蹦极事故,我常用的輸入框高度為30px|-_1288彩票网是真的吗,寬度視情況而定|-_038彩票手机版,無圓角_|门头沟电大在线。上下布局的多個輸入框上下間距為20px|-深圳都市频道第一现场直播,有錯誤提示時候豎向增加10px或橫向顯示在輸入框右側(預留出位置)-_|下堂妻七日离婚契约。

  5. 表單中標題文字左對齊|_0199游戏中心大厅,輸入框左對齊-|百佳华系统,標題文字距離輸入框20px(多個長度不同的輸入框算最長的)--01官方彩票;標題文字右對齊||4466k最近10天更新,輸入框左對齊--众盈彩票合法吗,也是常用的方式-|-西单商场打折。輸入框內正文字體14px_-|至尊彩下载,文字和左右兩邊邊框的邊距10px_|众赢彩票新3D。

  6. 選擇器包括單選_-陈光标肩挑钞票捐款、多選|_|无氨显影液、時間選擇_今日山东鸡蛋价格、開關切換__|长春市艺术实验中学、下拉選擇|_长线驱动器、滑塊選擇|||芦山县委书记被免职、旋鈕等|-可可西男装。單選框多為圓形|靖州二手房,複選框多為方形|-欣荣图片。

  7. 搜索框和選擇框的高度為30px或按照8的倍數自行設定--_正品普拉达,通常和輸入框保持一致_|我爱你 爱乐讯。搜索框距離右側按鈕4px--银魂62,內部文字14px--106官网彩。

  8. 單選多選框尺寸16*16px|-|沟槽式法兰,多個選項橫向排列間距16px-_-葫芦岛一高中家长汇,縱向排列間距8px|__易付宝app官方下载。

  9. 開關按鈕外框40*20px-|早餐第一步价格,內部圓形16*16px-赢发彩票平台。



3.8表格

  1. 表格在後台產品UI設計中站的比重非常大|__文殊菩萨是男是女,用來展示數據|_众彩软件下载、統一管理|--相信自己 mp3、作為詳情入口-_圈内老鬼,是最清晰|金山抢票软件、高效的形式之一-|n78主题。在設計規範中需設定表頭高度-_3号彩票的软件神器、表格行高_卓易彩票不能买了、表格列寬範圍|中科彩票下载,同時也包括表格中的按鈕樣式||动漫吸奶、標簽樣式|_宋茜微博。

  2. 表格主要分為五大區域|-校园协奏曲:選擇搜索區__雅马哈r6报价、操作區|-_亿彩彩票正规嘛、表頭|-|1博彩票如何、正文-|_快穿之只要x液 全、底欄|-花样少女。選擇搜索區放置篩選框和搜索框|_-csol防沉迷系统,為用戶提供按需搜索|--matlab6 5下载,可以大大提高用戶效率||反间谍工作的主管单位是什么;操作區指各種對表格內容進行增刪改查|-优惠券打印机、批量處理_--里包恩角色歌、配置列的動作__医学基础知识试题;表頭展示列標題||-14位领导彩票作假事件,一般具有排序功能|__苏州联建科技倒闭;正文主要展示各種各樣的數據||词霸豆豆,要注意行高-__许婕、對齊|-|智胜彩票网、分割-||2016贺岁档电影、信息層級等--|宝安教育在线基础教育,要考慮是否提供行內操作|_|车险法;底欄顯示分頁雷文加点、總數統計等|_-至尊彩app网站。 
    表格信息一般主要功能為增刪改查_求购小龙虾,查看和編輯是最基本的功能--永盛国际赢了取不出来,表格信息支持篩選_|-刘玉玲电影flypaper、搜索_||金瑞希、排序双色球最新500期走、分頁|__大公鸡导航。對可批量操作的表格數據在第一列增加多選框-|discoverybuy。

  3. 行高——表格行高可設置為表格內字體高度的2~3倍-_105彩票苹果怎么下,主表格會間隔顯示不同顏色||_碣石佳俊车行,用於區分不同行數據|-|陈奎元简历、加強視覺流引導||青山郭外斜的上一句,展開單行的內置表格可采用純色-|保险代理人资格证查询,選中行應有視覺上的反饋|-|金甲战士大结局。表頭要和表格內容有視覺上的區分-设备管理器没有鼠标。表格行高可采用36_血呷、40_-项城征婚、48_-12306智行火车票网页版、60等_cf千变轮回2017。

  4. 行數——表格行數太多加載速度會降低_||万圣节死亡之旅,延長用戶等待時間|-卜冰;行數太少會導致用戶不斷翻頁||新乡一中,降低使用效率|--苏州26路公交车路线。比較合適的默認表格行數是20或50__德国国家队队徽,用戶可以根據自己需求選擇默認的行數||四川工人日报电子版。設定行數之後-__五星体育回看,如果每頁行數多餘每屏行數|_阮加根,可在表格內引入滾動條-|-易旺彩票可以提现嘛,這時可以固定表頭滾動內容__爵迹风津道14回全文。

  5. 列寬——列寬根據內容字段長短需要有不同且合理的默認值-||雅克蜥,使得表格字段有良好的展示效果___惧龟刷新时间。列內容的長度固定時___远博娱乐,列寬應大於固定寬度(比如時間-__陇南市人民政府网、MD5__-亿贝平台横屏登录地址、SHA1)||兰州摸吧;列內容不固定時|168彩票网站返现正规吗,能預判最大寬度的按照最大寬度設定列寬(比如IP地址-e2140怎么样、MAC地址__|至尊时时彩平台、姓名)-银川到上海火车,不能預判最大寬度的設定列寬按照常用寬度|-众彩app这个软件怎么样,多於內容省略以“...”展示_-|易彩堂合法吗,鼠標懸停出現完整內容(比如詳情_|111彩票官方网登录、描述)_5230最新软件下载。

  6. 列數——表格列不應過多--医疗政策,列數比較多的情況下應該合理進行合並|_瓒妮佛、隱藏-_7 k7k小游戏、刪除或進行優先級處理||千山暮雪粤语。常用的方法有引入配置列|孝感学院录取分数线,用戶可自定義展示必需列以外的其他列|-_父亲的盾牌;隻展示重要信息|-_综合素质作文,下拉展開列查看完整信息_|盈彩彩票是正规的吗;在表格中引入橫向滾動條-__乒羽中心,根據實際情況選擇是否要始終固定基本信息列(如第一列是文件名)和操作列(最後一列的操作)_|花童头。

  7. 對齊方式——表格內的文本應按照文本類型不同進行統一規範|--喜得益,如金額類數值保留相同位數小數__云顶娱乐怎样注册账号,SHA1雖然是一串數字但是其實那並不是數據而是一串編碼|贵州福泉爆炸,所以可以像文文本一樣左對齊|易彩网多少钱可以提现。根據文本內容不同_|-玛雅wang 发信到,對齊方式也應靈活調整-|众博彩票平台怎么样,可采用文本左對齊|众盈娱乐靠谱吗?、數據右對齊-|苜蓿园二手房、金額小數點對齊的方式-_武汉大学珞珈学院教务系统。數據前麵有標簽的-|单单堂,將標簽前置對齊_198彩票官网。類似IP地址|苟各庄住宿、MD5-_和讯基金净值、SHA1|_银彩线假、域名這樣的信息||-波多野结衣种子连接,也可以根據產品需要在文本前麵增加“複製”圖標|__重庆公安局局长,方便用戶調用|-361dya。

  8. 詳情入口——表格內部數據的詳情入口|淘宝网店开店流程,將能點擊下鑽查看詳情的內容以不同顏色表示|-芷江租房,同時在表格行最後一列操作按鈕部分放置一個查看按鈕_|_永盛彩票正规吗。



3.9反饋

  1. 包括彈框|众彩跟单靠谱吗、側滑框_云顶娱乐斗地主送6金币、骨架屏__大学生创业策划书范文、全局提示-|智行彩票平台、警告提示|_丰奈儿、消息提醒-_众发彩票官网、加載狀態等|-让利是什么意思。分為模態框和非模態框|-众赢国际是合法的吗,區別是是否會打斷用戶工作流-_-2240七星彩图规论坛。

  2. 彈框又稱對話框-_白酒包装图片,是疊加在應用主窗口上的彈出式窗口-_-蹦极事故,以對話的方式使用戶參與進來__黄油笔。

  3. 彈框——彈框出現時__-雯艾尔,主題內容增加一層遮罩#000_|_和讯基金净值,透明度50%|-助赢计划软件,避免使用雙層彈框__ct透视器,可同時采用有關閉圖標的彈框和無關閉圖標的彈框|_中国斗鱼论坛,引導用戶對內容進行正確操作-|仙剑五破解补丁。如果設定係統內所有彈框均可以點擊彈框外區域關閉__尊彩app, 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框优信彩票注册,或者再次進行交互梳理-_长虹国际彩票。

  4. 側滑框——又稱抽屜_--移动彩票官11086,出現在右側__-195倍彩票,固定寬度400px-_|双色球66期开奖结果,高度覆蓋在主題內容之上长阳国际城业主论坛,點擊側滑框以外的區域則收起側滑框-_买多网加盟。

  5. 骨架屏——為某些特定數據提供數據加載等待時的占位圖形組合--众盈彩票有人主动带你赢钱正常吗?。

  6. 全局提示——建議停留時間3s|--青岛火车站咨询电话,可根據文字字數調整停留時間|--2002年春晚节目单,文字內容限製在30以內_-中环放电影院。

  7. 警告提示——用不同顏色和樣式展示需要關注的信息_|固件不兼容。

  8. 通知提醒——消息通知和告警信息用通知提醒框_|-辛德维拉,單個消息從頁麵右側以抽屜的方式劃出-谁能百里挑一王可达,用戶可手動關閉||-35彩票APP,或停留3s後自動關閉__-365彩票网站是否正规。



3.10缺省狀態

  1. 繪製不同類型的情感畫插畫表示缺省狀態---意彩怎么注册代理,如404---观赏鱼之家论坛zadull、500|-|2018明星死亡大全、暫時沒有數據--阿玛拉王国武器锻造、沒有新消息等-|-369彩票。

  2. 頁麵需要一個默認的底色-_上海中潭癫痫病医院,錯誤文字使用14px-2019年128期四不像头像,與情感化插畫間距20px--|罕穆尔成分,與按鈕間距30px--|早婚刑克;


3.11數據可視化

  1. 數據可視化部分可能是後台產品中對視覺設計要求較高的部分|_|银彩注册号码,使用情境為各類統計圖__-诺基亚166、大屏展示頁麵等_-葛兰雪。

  2. 功能型頁麵的數據可視化可以引入圖形化設計組件_|众赢彩票导航,Echarts_||太湖花亭湖风景区、G2-_-阜新苏阳事件、d3等_--王的第十七妾;展示型頁麵的數據可視化則可以做的更有趣_2019注册送500彩金,比如立體的統計圖|cctv13在线直播百度影音、粒子地球效果|_168彩票能不能投注、靈活有趣的網絡拓撲圖等--云顶娱乐是不是真的吗。

  3. 考慮到數據可視化可能會需要深色淺色不同的背景--_苹果范冰冰迅雷下载,在數據可視化統計圖的色彩搭配上要注意顏色的拓展性-_-2628彩票。



四|-央视主持人大全、經驗觀點及設計資源

4.1設計前端一家親

  • Ant Design的設計組件__陆贞的身世,實現框架React__镇元大仙的诨号、Angular——https://ant.design/docs/spec/layout-cn

  • Element的設計組件_-|360双色球走势图表大全,實現框架Vue 2.0|众发彩票的账号怎么注册、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

  • iView的設計組件|__和龙市政务信息网,實現框架Vue——https://www.iviewui.com/docs/guide/theme

  • 飛冰的設計組件--_邯郸晚报电子版,實現框架React——https://alibaba.github.io/ice/

  • Layui的設計組件——https://www.layui.com/demo/grid.html

  • G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

  • Echarts可視化圖形組件——https://echarts.baidu.com/

  • d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery

  • 在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0



4.2不醜也要多讀書

  • 《B端產品經理必修課》

  • 《交互設計精髓》

  • 《U一點料·Ⅱ》

  • 《簡約至上:交互式設計四策略》



寫在最後

不管是做C端產品還是B端產品-_|7k7小游戏大全,都是為了實現用戶的需求-q币购物券有什么用、幫用戶解決問題__小时代电影票价。

剛接觸後台產品的UI設計師工作時候__金色数值,最希望能把產品做的炫酷_-氯丹、美觀|__310大赢家足球比分直播,工作中慢慢地發現項目的背後思考更為重要--_断纸机,產出的設計成果也應該有理有據__-恩施美食、支撐整個設計體係|_吉全手机论坛。網上供大家使用和學習的資源非常多|like to be alone,對一些公司來說-吉林移动话费详单、專門去製定一套自己的後台設計規範不免顯得費時費力_|花生油会凝固吗,合理引入antdesign和element等開源的設計組件_-_印特尔,會使得設計師以及設計師的好朋友前端小哥哥事半功倍||_注册送18元彩票,有助於設計師把更多的精力投入到沉澱行業知識||射雕之乞儿传说、研究產品架構__亿赢彩票注册、梳理交互方式和創新視覺表現上_|提手上下。

在後台產品的設計過程中-_-青年工社,更應該把寶貴的時間用在更值得關注的事物上_-锦州社区,讓設計師能夠輔助業務挖掘||众发娱乐怎么推广别人,從趨於相同的表象中找到產品獨有的閃光點|__teemzone钱包怎么样,從而切實解決問題和實現價值-|-白酒包装设计。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--|重庆ume官网,為期望卓越的國內外企業提供卓越的UI界麵設計_05年到18年彩票中奖号码、BS界麵設計 -tcl手机a998、 cs界麵設計 -||银彩娱乐来玩送10app、 ipad界麵設計 _宝贝鱼翻译、 包裝設計 ||熟年本理想、 圖標定製 --教师行为规范、 用戶體驗 -149期大乐透开奖结果、交互設計|-159竞彩足球、網站建設 _qq空间fd模块、平麵設計服務-|-开远一中吧。


標簽: UI設計小結 « 從0到1 —— 一組圖標的誕生 | 前端開發——NodeJs學習»


訂閱Rss