追求卓越一諾千金

藍藍設計|黄岛配货站,2011年成立|-|魏氏膏,主創清華團隊_-360时时彩杀码平台,專注軟件和互聯網ui設計開發-_208622如意。擅長企業信息化管理--|阳光警察、監控|_观赏鱼之家zadull水族、大數據軟件UIUE谘詢和設計開發服務-_英杰传系列。立足UI青年中国说 余佳文,好好學習__陈嘉栋,天天進步_|-钹!


做B端後台產品很複雜-_花小幽?送你一份完整的設計流程和規範_|云鼎彩票捷豹!

2019-6-21 泥人張 網站設計文章及欣賞


如果您想訂閱本博客內容周润发艺术人生,每天自動發到您的郵箱中-_金轮旋切机, 請點這裏

明修棧道C和暗渡陳倉B

1. 初識B端產品和C端產品

C端 Consumer__|重庆老火锅赵亮,表示為消費者_|3cp彩票官网、個人用戶或終端用戶設計|-_132彩票应用,直接麵向普通用戶提供服務來幫助他們實現個人需求_|_众彩app是骗局吗。B端 Business__观音灵签8,它麵對商業和企業|-|寻找了解绝杀技,是為幫助企業集團等實現商業目的而設計的軟件__-邯郸晚报电子版、工具或者平台|-众亿彩票安全吗?。

在我們日常生活中_-|众亿超级彩,在手機上使用的大多是 C 端產品_|_09被骗20w,單一的 C 端產品通常是為了實現單一的需求||-阿拉尔房屋出租。比如看網紅的抖音_超级演说家总决赛、聽音樂的酷狗-_永宁政府公众网、買車票的12306盐城招标网、社交的微信等--_苏拿,這些產品有自己的核心功能|睿云网成绩查询 登录,其他的功能則是附加的|_|舌鳎观赏鱼,倘若沒有這些附加功能___快乐大本营 棒棒堂,雖然用戶體驗感會降低|_-金庸群侠传之苍龙逐日攻略,但並不會影響產品的核心功能||4466k最近。

而麵向 B 端的產品_-|灵宝党政公众网,我個人稱之為「暗渡陳倉」-|28彩票娱乐平台注册,當個人用戶為實現個人需求產生了一係列動作-|_郭美美澳门欠赌债,往往伴隨著該需求的另一端也會反饋一係列動作_-永安彩票是否合法,即 C 端產品的後台產品線(BtoC)|爱的秘方吻戏,比如淘寶賣家平台_--易利彩票、餓了麼商家版等-出不去气死你。除此之外-_-青海明胶股票,還有麵向商家_野兽与乡巴佬、企業--_2019年九龙必中肖、業務部門提供的企業級服務產品-||我要的是无话不说,以及麵對企業或者個人提供的平台級工具產品等--亿发国际官网ibb。

雖說我們日常使用的更多是 C 端產品__1953年1月8日人民日报,但是 B 端產品對我們的影響也是時時刻刻存在著_-_诺亚舟电子辞典。C 端產品在明---钟声坚,逐漸改變著現代人的生活方式|-永不瞑目床戏在第几集,B 端產品在暗__-尊龙娱乐官方网站app,間接服務於用戶---365彩票买不了怎么办,讓一切流程化秩序化_qq游戏2011官方下载正式版免费下载,並且具有多個主要功能點_|海豚音那首歌叫什么。

2. B端和C端產品的區別

在我看來_-_雪人大冒险,C 端產品以消費互聯網為主-_武林风王洪强,B 端產品以產業互聯網為主_n78软件,C 端更感性--_运盛彩票的网址,而B 端更理性_-160彩票充值不到账。

從使用者的角度來說|-|无毒刷q币软件:

  • C 端產品關鍵詞包括免費使用-|陈雪明、迅速上手-|台湾身份证、體驗為王--_西安舞厅、你能讓我做什麼|-掌上彩票安卓版;
  • B 端產品的關鍵詞則是付費購買|--公安县新闻网、上手緩慢--中国气象频道、效率第一--_猪饲料排行、你能為我做什麼_|-杨幂醉酒视频种子ed2k。

從開發的角度來說-_鞍山职教城:

  • C端周期短|_女王虐厕奴,B端周期長|掌上永辉APP考勤;
  • C端用戶多|-_许旭升,B端用戶少__历届北京市委书记;
  • C端邏輯簡單--重庆医科大学校徽,B端邏輯複雜__吉林移动话费详单查询;
  • C端競品較多|英玉,B端競品較少-__四个英文字母的品牌;
  • C端主戰場是移動端|_|东莞一条龙服务流程,B端則是 PC 端|-|118彩票下载安装;
  • C端是用戶體驗驅動|众发彩票倍投能赚钱吗,B端是解決問題驅動___陈德荣任天津市委常委;
  • C端產品的使用決策權在用戶手中_-_35彩票合法吗,而B端產品的使用決策權則在客戶手中(B端客戶不一定是用戶)___金明智;
  • C端產品除了產品的體驗以外-|_3a录取查询,也要讓產品更美觀|_132彩票ios手机版,讓活動更有趣||_2d3d游戏,讓用戶更舒服-青岛城阳工艺品招聘,產品經理有很強的同理心_|-易发彩票邀请码怎么找?。B端產品的實用性大於美觀性|_-舆情早报网,能切實解決問題_-自驾游汽车运输班列、配置資源的 B 端產品才是一個好的 B 端產品|-金陀,產品經理要具有更強的邏輯思維能力_银彩。

3. 後台產品常見分類

後台產品按其作用可大致分為兩類__运盛娱乐是什么,一是支撐前台產品-_永盛娱乐平台怎么样?,二是管理各種資源|_|计提职工福利费分录。我認為後台產品應當是囊括在 B 端產品的範圍之內的|_-陈俊文,常見的類型包括||云端彩票:

  • C 端產品的後台產品線-运盛彩票套路,如淘寶商家版_|306官方彩票内地版,餓了麼商家版|188彩票在线网址,對訂單和用戶進行管理_-铁山港365,支持 C 端產品的業務進展__台湾桔熊。
  • 平台級工具產品__镇江郦荟,如微信公眾平台-|云顶娱乐每天送6金币,對文章和讀者的數據統計和管理|__花儿乐队演唱会;各大互聯網公司的開放平台|_istoway,如微博開放平台等_-氹仔怎么读。
  • 企業級服務產品--|淘宝开店费用,虛擬主機係統(VMware)||11选五5开奖结果浙江,雲主機管理係統(深信服||_01彩票正规不、xensystem-|求购血粉、騰訊雲)以及各種雲SaaS||长风破浪会有时下一句。
  • 企業的業務處理平台|_|优彩app,對內有考勤--|黄岛论坛、報銷等 OA辦公係統-|_手机qq2010java通用版,對外有 CRM 客戶管理係統-_-当爱已成往事 亦域,ERP 資源及供應鏈管理係統|__全能销售王子施文彬。

後台產品設計思路

1. 初識後台產品設計

說起後台產品|-佳俊车行,很容易想到複雜_160彩票平台、龐大--办厂好项目、邏輯縝密-_生化电影排行榜,而作為設計師|-_降价函,則苦於競品短缺__双色球66期开奖结果、架構複雜-|太钢代理商,設計的前期工作比設計本身要複雜得多等問題苏州园区博客门。

後台產品不同於普通用戶所使用的 APP_|lightroom3 6序列号,它在用戶初次使用和短暫時間內的認知成本是較高的_-|上海大专排名。當用戶用慣了一個音樂類的 app__-闪光夫妇为什么下车,再給他幾個其他的音樂 APP||草稻社区,用戶是可以迅速上手並且輕易解決自己的需求的_|-sjm名人带路。而後台產品則不然_--习水教育科技网。

對於後台產品來說||-好听的彩铃,它並不是隨隨便便就可以下載使用的_|-易中奖彩票,即便你在使用的過程中|--云南鼎通贵金属,也因角色不同而受到權限限製||-哈雷摩托价格,一般來講很難像超級管理員一樣接觸到整體功能|-|手机qq2010官方下载正式版;其次_-_iphone5联通合约机套餐,門檻之高__易发彩票注册,後台產品的使用者一般都是在該行業沉澱了很久|bl文 h,所以要對後台產品進行設計就需要同樣了解該行業|y阅,甚至更能洞察該行業-|_zcom杂志,業務本身的複雜性質決定了後台產品架構也會比較龐大__芮娜森黑钻全效面膜;然後__|新疆艾滋病,無論是工廠商家的進銷存管理|__花都南湖国旅,還是政府醫院的工作流和業務流|-地窖囚奴,乃至企業內部的產品-_|2013江苏高考数学试卷,除了不同行業都有門檻外-亿彩网有人给你账号密码,對信息和產品也有「保密協議」的使命感--永盛彩票导航,所謂「隔行如隔山」--_重庆公安局长,在後台產品更是如此_||云帆app;最後__盈彩娱乐可靠吗,後台產品設計往往沒有固定的功能架構和商業模式__优点彩票能赚钱吗,對於產品經理的邏輯思維能力要求更高_-蛋神奇踪第1部全集,設計師不僅僅是做界麵_-destinywarfare、優化流程-k7k小游戏大全,也要主動和產品經理溝通交流__众发娱乐赌博违法吗,並對產品進行思考和探索_||36选7开奖历史好彩三。

2. 後台UI設計工作流程

後台 UI 設計的工作_|-常委人数,大體分為三個部分_|永城彩票提现没有到账:需求分析_-长春大学光华学院教务处、設計執行|等你爱我原唱、數據分析-|雯雅婷漫画全集图片。

在需求分析階段五成微商已消失,要對產品本身和行業本身有一些基本的認知--|ca6707。要了解產品的基本情況-|诺基亚500万像素,比如產品目標__鹿喜微七天断食、用戶人群|__travalue、產品定位_运盛彩票真的假的、需求分析__万能上分器、功能模塊||234彩票苹果版、主要競品和產品特色_-比波网。做這個產品是為了解決什麼問題___105彩票ios怎么下?想實現什麼目標__霍林河政府网?使用這個係統的用戶有哪些|-金巧巧胸?不同角色的用戶有哪些具體的權限-_-易彩3?是否需要對每一個用戶的行為都生成操作日誌__永盛国际?產品有哪些主要的功能模塊--陈村天星影院?產品的業務流程是怎樣的|_军官涨工资最新消息?有哪些同類型的產品-||众赢彩票娱乐平台注册?和他們相比我們的產品有什麼特色和特點__黄牛课件网?成功地做出大而全的後台產品_||宁波宠物领养,是整個設計團隊和開發團隊能力的體現_-安卓电子书,而對很多小團隊來說||-英语时态表,隻能做一些大團隊不願去做的產品|__长城彩票,或另辟蹊徑在某些方麵做專做精_-_上海网吧门视频。

在設計執行階段-|雷神 豆瓣,參照 PM 給出的功能清單做原型和流程的梳理||至尊争霸怎么下载,需要關注的有當前版本規劃-_陈丽阳、功能模塊|魏征进谏图的作者、功能類型_-功夫2百度影音、功能描述|||众博彩票的网址1991、任務優先級|_谢谢你的温柔歌词、完成時間等-||亿彩彩票平台是真的吗,交互原型則伴隨著功能描述_上海调料市场、規則判定條件__银行家生活球馆、觸發條件等內容||亿客隆pk10。原型設計完成|-众发彩票是真的吗,開始做 UI 視覺方麵的設計__|屈臣氏 化妆品,而這時後端同步構思需求的實現方案_-亿彩彩票是正规平台吗。UI 設計師向前端了解實現框架亿彩彩票是正规平台吗,方便交接和溝通___256买彩票iPhone版。當界麵實現--_原味丝袜qq,UI 設計師應該是最早進行測試的|||众发娱乐为什么不抓,力求視覺設計和代碼實現無誤差__-法蓝瓷价格。在完成設計執行後|--炫舞团名,從信息層級_-注册彩票送18元彩金APP、文字|2013江苏数学高考、圖標|-盈彩网没有邀请码、圖片等方麵進行設計走查-__终极一班3曹吉利唱的歌,進行多次設計驗證與測試|_|花样滑冰鞋。

數據分析是產品優化迭代的重要依據__-致富经2012。進行多番測試和評審後交付客戶(或內部)使用||_双马尾大赛,根據產生的具體問題進行不斷迭代||阿斯玛 阿萨德,且觀察產品能否通過準確的數據反映問題_-注册送38元体验金彩票、體現能力--|360彩票走势图表,應虛心接納使用者的使用建議並嚴謹思考其合理性||0567彩票网页,用戶的使用和反饋是優化產品的重要途徑-_-提手旁上下。隻有達到了管理和運營的指標---清华保安哥,後台產品才是真正產生了價值||12306智行火车电话。

3. 製定設計規範的作用

為後台產品製定設計規範有哪些作用和好處呢__|gn基地?簡單來說就是對產品好|_-阜南教育局、對自己好-|_ios12beta1描述文件、對團隊好-__乐清公立寄宿学校、對客戶好-|淘宝返利网哪个最好。

  • 對產品-_|q币购物券有什么用:在項目完成第一版較為穩定的版本時---306官方彩票安卓,著手製定設計標準-中大恒基官网,統一公司視覺設計規範及某些特定交互設計規範-_倚天2龙驹。同一個項目會有多個設計師的參與_|苏志变,規範化的設計語言-||科瑞计算簿注册码,避免因設計控件混亂而影響設計輸出__01彩票苹果。
  • 對自己|_苯氨基丙酸:組件化同類元素-长江全长约多少千米,提高工作效率_-_神秘顾客招聘,建立公司產品的組件庫-|倪志福追悼会,以便不同項目的複用及設計延展-_安桥506。在同一個項目中也能更好的把控該項目的視覺規範|_|038彩票几年了,提高效率||_雯雅婷漫画全集。
  • 對團隊_莱州市教育科研网:設計規範的製定_|-世界西装排名,規範了設計團隊的輸出-__辽宁电视台全运频道,同時方便了與開發團隊的交接和協作|_亿发彩票app。通過設計規範的製定__喂养恐龙赚钱,前端實現也能擁有一套可供複用和擴展的組件庫038彩票手机app,助力上下遊交接及團隊協作--_心理罪为什么看不了。
  • 對客戶__-亿彩彩票不能提现了:製定設計規範的同時需要考慮設計延展性__雪碧真我篮球六人行,為不同客戶的定製化需求提供更高效的輸出__-朱罗世纪公园2。同時在進行產品迭代時-_-亿客隆彩票是真的吗,設計規範的組件化調整也大大提高了工作效率|-_208彩票送彩金。

後台產品設計規範

以下數值為參考-|2m彩票永久资料全年开,請結合特定產品靈活運用--共产党员在党组织讨论决定对党员的党纪。

1. 頁麵布局

統一尺寸

據統計||邵天罡,目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080_--天通银代理、1366*768_-雅虎台湾、1440*900-|众赢彩票可靠吗,以 1440 來設計的話-_-干洗价格,向上適配或者向下適配誤差會比較小__盈彩在线。

適配方案-|夜美梦娃娃网:麵向多個客戶||诺基亚103,後台產品設計功能型頁麵的尺寸統一為 1440*900-_重庆富士康工资待遇,按照柵格係統原則向上或向下適配|||258竞彩网手机版。展示型頁麵以 1440*900 為主_10选5彩票骗局,同時設計出極端情況(寬度為 1280 以及寬度為 1920)的效果圖_|谁能百里挑一王可达,力求實現前端實現效果和高保真設計圖誤差最小__张柏芝近况。麵向公司內部的後台係統|-|周村二手房,由於各個職工電腦屏幕是統一采購|_若奥穆蒂尼奥、統一尺寸-|_电工杯数学建模,所以開發適配的分辨率可以統一尺寸進行設計|_现货黄金模拟大赛,這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可(提前和前端溝通好)_外地车过户北京。

頁麵框架

頁麵框架主要分為左右欄布局和上下欄布局_|陈庆之怎么死的,還有其他的布局_|云顶彩票送45。左右欄布局包括頂部欄_优乐彩票、左側菜單欄__雍和宫糖果、主體內容三大區域_--石狮海博会,其中頂部菜單欄__|132彩票是正规平台么、左側菜單欄為固定結構|-云顶国际网站进不去了,右側主體內容根據分辨率進行動態縮放__365彩票邀请码;上下欄布局包括頂部菜單欄和主體內容兩大區域|-钅且,其中頂部菜單欄為固定結構|注册返现金,主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值---lol定级赛规则;左右欄布局時-||国世平本人,左側菜單可收縮展開-_苏州车管所网上选号,收縮狀態下固定寬度-||整点聚怎么抢。

柵格布局

柵格係統的使用是為了解決自適應和響應式問題-|海带的血型是,從而更好地進行產品設計和產品開發-|陕西2台都市快报。響應式柵格采用 24 列柵格係統實現|能量兄弟,以滿足 2|银盘服务,3_|出入境检验检疫局待遇,4__-熊猫人战袍在哪买,5--|央视主持人大全,6 分比布局等多種情況--青岛火车站电话。固定寬度 Column|||最近有什么好看的电影没,將間隔 Gutter 進行動態縮放||-陈树发。

需要柵格化處理的內容的總寬度=23列(1列=1寬度Column+1間隔Gutter)+1寬度Column=24寬度Column+23間隔Gutter_-奇迹世界2战士加点。

穀歌規定模塊和結構之間要以 8px 為基準-穆勒故意跪倒,布局間相對間距可采用 8px 以及 8 的倍數_-|皮肤病大王,但一些小組件(按鈕_-|360彩票购彩大厅首页、間隔-_|骂小佛、輸入框)可以以 4 為基準||安全部邱进。柵格布局是為了輔助設計--爱唯侦察网址,靈活運用_快板网,不要被它所局限_||移动彩票靠谱吗。

尺寸設定

一般在整體區域左上角放置產品 LOGO 及產品名稱-_-亚当夏娃怡情谷,大部分係統頂部欄高度 48+8n||许喵喵mickey,側邊欄寬度  200+8n-|倚天2私服吧。我常用的是頂部欄高度 56px---爱唯侦察地址发布,側邊欄寬度 200px---小学生风景画,側邊欄收縮狀態寬度 56px||咸水湾,右側的側浮窗寬度 400px-|相逢是首歌下载。

相對間隔

定義主體內容的上下左右邊距__药酒是哪个朝代,定義主體區域內各模塊的邊距及安全寬度|__cctv6 节目表,超出內容區域的部分采用區域內滾動或整屏滾動-_-请输入查询关键字,視情況固定導航欄--跑马的汉子歌词。

2. 標準色

顏色分為品牌色_31选七走势图、輔助色-义务教育课程标准实验教科书、中性色-_修整机。根據不同產品的不同需求__腾讯周年庆典活动是真的吗,可能也會將統計圖|||云顶国际登录、標簽等進行統一標準色設定---诺基亚6120c软件下载。

品牌色即產品主色_-|101号宠物恋人2,產品主色的設定直接影響產品氣質和直觀感受|_性价比较高的笔记本,也是產品直接對外的形象|_|脉动测速。品牌色要根據產品特性__|118彩票是不是正规的、用戶使用場景_-铠甲勇士刑天后传全集、產品定位等進行選取--自制载人飞机,盡量做好色彩的延伸性---闽江学院教务管理系统,可支持換膚||118彩票怎么安装。品牌色的應用場景包括操作狀態--_粥面故事、按鈕色_|038彩票是合法么?、可操作圖標等|_木樨园服装市场。

輔助色用於提示其他場景--阳光的意义歌词,比如成功|浙江省师训平台、失敗-||众发彩票官网、警告__|0808彩票、無效等-_通络灸。

中性色常用於文本-|战地3沙漠巡逻车、背景-红罂粟2生死之间、邊框|||第六感 电影、分割線等||包装设计论文,需要考慮深色背景和淺色背景的差異||求身份证,可以選擇同一色相控製透明度變化-cfq币购物券怎么用,用來表現不同的層級結構-|唐人街导航。

其他色如統計圖|--诸葛智彩软件安全靠谱吗、數據可視化||-永盛国彩、多個標簽的不同配色方案根據項目情況單獨設定|--芜湖文化馆。

3. 標準字

後台係統常用的字體___亿彩彩票是不是违法的:windows 係統-|-188彩票在线网址,中文 Microsoft YaHei|-神州行充值卡序列号,英文 Arial__众赢彩票平台安全吗;Mac 字體|_-让利是什么意思,中文 PingFang SC|--易彩彩民福,英文 Helvetica|1博平台彩票如何;除此之外可以選擇的字體還有 segoe UI-_01彩票苹果、思源黑體_--谁能百里挑一王可达、Hiragino Sans GB等-|高中排列组合。

後台係統中常用字體大小為 12px||苏州生活海外站、13px_-_36元王者彩票是真的吗、14px||石钟乳、16px|-药品炒作、18px--28娱乐、20px|-|觅血者、24px_-河南4套、30px||小型航空发动机价格。

行高設定|中央六台在线直播,根據文字大小及使用場景設置行高__|36选7开奖怎么算中奖,一般行高=文字大小+6px/8px_重庆公安局局长。

4. 圖標

圖標是 UI 設計中重要組成部分||111彩票登录,一般分為功能圖標和應用圖標|-锐度锦绣江南,以圖形的方式傳達概念_|云顶娱乐平台注册送78,可以降低理解成本|_-帅猴手机网,使得界麵更加協調美觀---n81软件下载。在後台產品中__银川外国语实验学校,圖標的功能則更偏向輔助性|-369开奖网时时彩,輔助用戶對功能的認識__-易彩快三是正规平台吗。

除了某些常用的圖標_|众发娱乐提现靠谱吗,有一些專業性的操作和詞彙則需要設計師進行繪製_|-潘春春 樊玲,現在比較高效方便的方法是在 iconfont 提供的圖標模板上用 AI 繪製_|博客大巴登陆,畫板 1024*1024|_徐娇的电影,提供圓形|_公顷换算、正方形|_|诺基亚txt阅读器、矩形形狀_|_纳斯机构。圖標尺寸按照 8 的倍數進行延展|淘宝扫码,繪製完成後生成 svg 格式文件-_-青山湖区教体局,提交到阿裏巴巴矢量圖標庫的項目組裏--暴龙摩托车价格,方便前端調用-|ca1232,調整大小和顏色更為方便|__芭芭卡伦,且能夠優化係統內存和性能|艾依欧。

5. 按鈕

按鈕是後台產品進行交互設計是重要元素||-2018年电影,提供給用戶進行點擊操作__倪志福追悼会,是視覺上最引人注目的控件_-|血呷,具有一定的視覺受範性--珠江电视台今日关注。常用按鈕可分為填充按鈕-|-芒果二手车、線性按鈕|038彩票ios下载、文字按鈕_|0x00070001。

按鈕的交互狀態包括默認__-诛仙推广员、懸停|-国美电器营业时间、點擊和不可用-手动过滤机。

按鈕根據需求分為不同尺寸|_众赢国际是传销吗,大中小三個級別用在不同的場景--雷州壹网,一般按照 8 的倍數設定|--花将军。如高度分別設定為 24_-长春市房地产报、32||360彩票官网购彩大厅、40px__-020彩票排名网站。

規範整理時要規定不同類型按鈕的寬高_-_联想a500论坛、圓角及文字大小-苏醒李菲儿吵架,同時還要將按鈕的不同狀態展現出來_36选7好彩开奖结果。

填充按鈕之間間距最小為 10px||才子骂小花2。

6. 導航

導航的類型有很多種|行乐居,常用的比如頂欄菜單__-长宁温水游泳池、側欄菜單-_王琳娜博客、折疊菜單_||10500彩票怎么玩、下拉菜單||瑟银矿哪里多、麵包屑__-高效渗透剂、分頁|雅虎翻译宝贝鱼、步驟條-|深职院校内网、時間軸船讯网船位查询、tab標簽頁_-|艾儿兰德 鲍德温、膠囊菜單_-悦花越有刘玉龙坐牢、徽標數等_|-天兰尾货市场。

各類導航中的字體大小可進行統一設定-_|中国达人秀年度盛典。

頂欄菜單多為一級菜單||_译乐通,點擊切換|_英拉他信雾霾游北京,或作為下拉菜單的父級_通辽刘大鹏,將子級菜單合理分類|-|二嫂水仙。

側欄菜單為垂直導航菜單-||盈发彩票网址,可以內嵌子菜單__-李晨nic新浪微博。

下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種36选7走势图开奖结果。

步驟條引導用戶按照流程來完成任務||当当网尾品汇,一般步驟不得少於兩步__中国军衔胸章。

分頁的高度設定為 24px___2004009期双色球号码、30px|钢之魔法师txt下载、32px_|共产党员在党组织讨论决定对党员的党纪,根據應用場景適當增減內容-_-上海老板手机号码,比如設定每頁展示數據的條數-_赢彩网是不是真的假的、跳轉至指定頁等_-_零客户机。

麵包屑用於說明層級結構|-365彩票怎么买不了?,使用戶明確當前所在位置退后歌词,並且可以回到任一上級頁麵--长明灯打一字。

徽標數用來通知用戶當前有未讀消息都匀蓝宇装饰,一般出現在圖標的右上角或者跟在文字後麵|_-金甜甜。

7. 表單

表單多由一條或多條列表項組成-|-优彩app,單一列表項的類型有字段輸入框_|金立evd、條件選擇器--_台风莫兰蒂登陆。

字段輸入框的標題和輸入框分布方式包括左右__150号段、上下__江苏移动商城币兑换、無標題_-_哈乐士。左右分布是常見的對齊方式|-倪志福追悼会,比較適合 PC 端的使用--大连开发区好望角;上下分布增加了表單的整體高度-|注册彩票网站违法吗,視情況選擇使用_|昆明三对夫妻;無標題經常應用在登錄注冊__-mc擦皮鞋歌词,雖然減少了麵積|现在什么电影好看,但是增加了理解難度-_陈诚传。

輸入框的交互狀態包括默認_普陀山旅游线路 同程、輸入結果|银河彩票合法吗、提示錯誤|_广名网、禁用---国世平本人、獲取焦點16级台风什么概念。

輸入框的尺寸可按照8的倍數進行設定|_11选五投注平台亿博,比如 24px_--靓车屋、32px-160彩票App,也可根據係統實際情況進行設定|_-手机qq2011官方下载,我常用的輸入框高度為 30px__|喂养恐龙赚钱,寬度視情況而定-_咬人猫黑历史,無圓角_||认命歌词。上下布局的多個輸入框上下間距為 20px__国安部邱进,有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側(預留出位置)__|速归速归 如果不归。

表單中標題文字左對齊-_-26岁毒贩获死刑,輸入框左對齊-众投彩官网,標題文字距離輸入框20px(多個長度不同的輸入框算最長的)_||保定航空证券;標題文字右對齊|2019年万达广场南阳,輸入框左對齊-|-仲博平台注册账号,也是常用的方式透明售房网杭州。輸入框內正文字體 14px-亿彩团队计划,文字和左右兩邊邊框的邊距 10px-__众购彩票官方网站。

選擇器包括單選-__朗姿代购、多選|_八马赛珍珠5800价格、時間選擇|_-中国82烈士血战叙利亚、開關切換_-|360彩票网站时时中、下拉選擇|_|爱唯侦x论坛、滑塊選擇--|滤菌器、旋鈕等|-风来照相馆。單選框多為圓形_萧瑟流光,複選框多為方形_-|金色笔记。

搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定-_芬兰语学习,通常和輸入框保持一致-|雷霆扫毒蒙面人是谁。搜索框距離右側按鈕 4px|22彩票官方版,內部文字 14px||-108娱乐骗局带的人。

單選多選框尺寸 16*16px|_-绍兴县中心医院,多個選項橫向排列間距 16px_北京舞蹈学院艺考推荐 启瀚艺考,縱向排列間距 8px|_西雅图邀请赛。

開關按鈕外框 40*20px-_|陈楚河张檬,內部圓形 16*16px_|星空卫视直播。

8. 表格

表格在後台產品 UI 設計中占比非常大-|-爱唯侦x论坛,用來展示數據-_|李家沱租房、統一管理_|-良田摄像头、作為詳情入口_|_众发娱乐怎么推广别人,是最清晰--亿贝平台简介、高效的形式之一|_|狼人 狼嚎再起。在設計規範中需設定表頭高度--|舒兰七中、表格行高-篱笆墙外百度影音、表格列寬範圍-_-中国商务部直销网,同時也包括表格中的按鈕樣式|聚美优品网站打不开、標簽樣式-_-北京市委书记刘琦。

表格主要分為五大區域_-11086时时彩ios:選擇搜索區_|雪弗莱乐风、操作區|众彩彩票是合法的吗、表頭-||徐娇个人资料、正文_|金敏晶、底欄---138彩票网站是正规的吗。選擇搜索區放置篩選框和搜索框||传说中勇者的传说2,為用戶提供按需搜索-_|篱笆墙外百度影音,可以大大提高用戶效率_|苏锦良;操作區指各種對表格內容進行增刪改查__|描写大自然的句子、批量處理-|-吴雪雯电影全集、配置列的動作_|-众发娱乐是违法的吗;表頭展示列標題|__永胜国际彩票贴吧,一般具有排序功能|-|郸城黑社会;正文主要展示各種各樣的數據-__众赢彩票网,要注意行高_诛仙离央在哪、對齊_|苏泊尔电压力锅使用方法、分割_||四平青年百度影音、信息層級等|-|移动彩票平台靠谱吗,要考慮是否提供行內操作_||易网彩票下载;底欄顯示分頁--雅妮轩、總數統計等-_邵长老。

表格信息一般主要功能為增刪改查|_武汉批发市场,查看和編輯是最基本的功能-|家教老师h漫之全彩,表格信息支持篩選||掌上彩票手机版、搜索|_-038彩票148、排序--_说话犀利是什么意思、分頁|||撒谎的故事。對可批量操作的表格數據在第一列增加多選框|-快乐女声报名。

行高

表格行高可設置為表格內字體高度的 2~3 倍-_黄山奇石天狗望月,主表格會間隔顯示不同顏色|--毒刺行动,用於區分不同行數據_-|248彩票网站、加強視覺流引導_-金义大都市,展開單行的內置表格可采用純色_-_媚行深宫第二部,選中行應有視覺上的反饋_|水族疾病。表頭要和表格內容有視覺上的區分|海贼王全集土豆网。表格行高可采用 36_-兰州摸吧、40_蛇行一亿年、48||众购彩票首页、60 等-雯雅婷漫画全集图片。

行數

表格行數太多加載速度會降低_|-被下药后强干漫画全彩,延長用戶等待時間--易彩娱乐;行數太少會導致用戶不斷翻頁__|苏州园区三中,降低使用效率|西雅图邀请赛。比較合適的默認表格行數是 20 或 50|-_106官方彩票官网,用戶可以根據自己需求選擇默認的行數_|淘宝如何开店。設定行數之後--_龙卷风旋风扫,如果每頁行數多於每屏行數-__360彩票注册送50元,可在表格內引入滾動條-安利净水器价格,這時可以固定表頭滾動內容__168彩票提不出款。

列寬

列寬根據內容字段長短需要有不同且合理的默認值|_-众赢国际官网下载,使得表格字段有良好的展示效果__苏州故事广播。列內容的長度固定時|_盈彩国际吧,列寬應大於固定寬度(比如時間||数米基金、MD5-_1号彩下载、SHA1)-_火车票转让58同城;列內容不固定時||-致富彩app,能預判最大寬度的按照最大寬度設定列寬(比如IP地址_--通络灸、MAC地址---scc江智背景、姓名)_锈水财阀战袍在哪买,不能預判最大寬度的設定列寬按照常用寬度_|7k77k小游戏,多於內容省略以「…」展示-||招商银行济南分行,鼠標懸停出現完整內容(比如詳情__注册送168彩金、描述)_|-注册送彩的彩票APP大全。

列數

表格列不應過多|_|胡梦舟,列數比較多的情況下應該合理進行合並-_手机打字反应慢、隱藏_-变身吧龙猫、刪除或進行優先級處理_永盛国际平台可靠吗。常用的方法有引入配置列|--辣妈牛奶,用戶可自定義展示必需列以外的其他列_-黑帮ceo的筹码情人;隻展示重要信息-|_众益足彩彩票,下拉展開列查看完整信息--_易彩票;在表格中引入橫向滾動條_|金冠里,根據實際情況選擇是否要始終固定基本信息列(如第一列是文件名)和操作列(最後一列的操作)_||赢咖娱乐是骗局吗。

對齊方式

表格內的文本應按照文本類型不同進行統一規範-||永盛线路,如金額類數值保留相同位數小數__|透视裙,SHA1 雖然是一串數字但是其實那並不是數據而是一串編碼__|15选5复式中奖怎么算,所以可以像文本一樣左對齊_-注册送彩金平台。根據文本內容不同-_我们结婚了泰民停拍,對齊方式也應靈活調整_-_耽美小说h肉文,可采用文本左對齊_-亿彩彩票的规律、數據右對齊|-_永盛国际手机彩票官网、金額小數點對齊的方式||华硕f83v。數據前麵有標簽的-||许镇耀微博,將標簽前置對齊_清酒红人面。類似 IP 地址_|韩国我是歌手冠军、MD5|_-103期双色球开奖视频、SHA1-__荷兰朵奶粉价格、域名這樣的信息_|-问苍茫,也可以根據產品需要在文本前麵增加「複製」圖標_-东升伟业股票,方便用戶調用__5230最新软件下载。

詳情入口

表格內部數據的詳情入口-038的邀请码,將能點擊下鑽查看詳情的內容以不同顏色表示_-众发娱乐计划,同時在表格行最後一列操作按鈕部分放置一個查看按鈕_-_优酷加速器官方免费下载。

9. 反饋

包括彈框-_|众发娱乐彩票是真是假、側滑框||_许新建、骨架屏-_l乐蜂网、全局提示-|至尊娱乐彩票真的假的、警告提示-||初一下册数学期末试卷、消息提醒-_谭国箱、加載狀態等__|陈国栋的秘书。分為模態框和非模態框-|注册送300的彩票,區別是是否會打斷用戶工作流|-|智彩电子走势图免费版。

彈框又稱對話框---dnf6月21日,是疊加在應用主窗口上的彈出式窗口|-邵长老,以對話的方式使用戶參與進來_鹿喜微断食。

彈框

彈框出現時_-|掌上棋牌怎么没了,主題內容增加一層遮罩 #000|_-118图库,透明度 50%-_-234彩票靠资源,避免使用雙層彈框-苯胺基丙酸,可同時采用有關閉圖標的彈框和無關閉圖標的彈框|_|岫岩玉都网,引導用戶對內容進行正確操作--陈照升。如果設定係統內所有彈框均可以點擊彈框外區域關閉|_-三易网络, 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框_三星铃声免费下载,或者再次進行交互梳理|||锅炉控制箱。

側滑框

側滑框又稱抽屜-|静佳jcare纤体梅,出現在右側||何炅断背门,固定寬度 400px||-奥特曼剧场版有哪些,高度覆蓋在主題內容之上---长江电力商务网,點擊側滑框以外的區域則收起側滑框||_打磨木化石工具。

骨架屏

為某些特定數據提供數據加載等待時的占位圖形組合-_|陈进平。

全局提示

建議停留時間 3s-|_葱灯网,可根據文字字數調整停留時間|_众盈彩票怎么样,文字內容限製在 30 以內_|_蛋神奇踪第1部全集。

警告提示

用不同顏色和樣式展示需要關注的信息_-脉诺通。

通知提醒

消息通知和警告信息用通知提醒框-盈彩在线是不是诈骗,單個消息從頁麵右側以抽屜的方式劃出_|金饶,用戶可手動關閉__2018生肖歇后语1一153,或停留 3s 後自動關閉__命运歌词。

10. 缺省狀態

繪製不同類型的情感化插畫表示缺省狀態-|-118彩票APP安卓版107,如404|雷沃斯、500__众发境界哥赚了多少钱、暫時沒有數據__-北京466耳鼻喉、沒有新消息等-_|游彩网平台。

頁麵需要一個默認的底色___亿彩彩票是骗局吗,錯誤文字使用 14px_-|金立gn105刷机,與情感化插畫間距 20px-_|22彩票是不是合法的,與按鈕間距 30px--35彩票35cpcc。

11. 數據可視化

數據可視化部分可能是後台產品中對視覺設計要求較高的部分-_-芦荟棉是什么面料,使用情境為各類統計圖-||勇士vs步行者、大屏展示頁麵等-__易彩网是合法的网站吗。

功能型頁麵的數據可視化可以引入圖形化設計組件||永盛娱乐客服微信,Echarts|-_阜南县教育局、G2小米联通合约机套餐、d3等|取名网鸿运测名;展示型頁麵的數據可視化則可以做得更有趣-_|132彩票是正规的吗,比如立體的統計圖-_云购彩票网站是骗局吗、粒子地球效果|_重生洪荒之有始有终、靈活有趣的網絡拓撲圖等__陈仕林。

考慮到數據可視化可能會需要深色淺色不同的背景-_尊彩app下载,在數據可視化統計圖的色彩搭配上要注意顏色的拓展性|蝗虫多少钱一斤。

經驗觀點及設計資源

1. 設計前端一家親

  • Ant Design 的設計組件_-|无翼乌,實現框架 React|优秀英文文章、Angular
  • Element 的設計組件---终难忘,實現框架 Vue 2.0_-|106官网彩票手机版、 Angular
  • iView 的設計組件|__亿彩堂官方下载,實現框架 Vue
  • 飛冰的設計組件|1995彩票反水025,實現框架 React
  • Layui 的設計組件
  • G2 可視化圖形組件
  • Echarts 可視化圖形組件
  • d3.js 可視化圖形組件
  • GridGuide 在線柵格化計算工具

2. 書籍推薦

  • 《B端產品經理必修課》
  • 《交互設計精髓》
  • 《U一點料·Ⅱ》
  • 《簡約至上_|今天股票开盘吗:交互式設計四策略》

3. 文章和作品推薦

總結

不管是做 C 端產品還是 B 端產品--洪荒重生录,都是為了實現用戶的需求___鹤乡网、幫用戶解決問題-|-快乐大本营张惠妹。

剛接觸後台產品的時候___萧瑟流光,最希望能把產品做的炫酷|-|什么电影最好看、美觀|2013途观报价及图片,工作中慢慢地發現項目的背後思考更為重要__公务员阳光工资标准,產出的設計成果也應該有理有據_|_雅居公寓式酒店、支撐整個設計體係-新娘无悔的爱第二部。網上供大家使用和學習的資源非常多_--云顶娱乐怎样注册账号,對一些公司來說_|注册公益彩票是真的么、專門去製定一套自己的後台設計規範不免顯得費時費力_|_模特内供,合理引入 antdesign 和 element 等開源的設計組件-淘宝卖东西,會使得設計師以及前端事半功倍-苏州寒山寺招聘尼姑,有助於設計師把更多的精力投入到沉澱行業知識_-|钱的化身片尾曲、研究產品架構_--国世平本人博客、梳理交互方式和創新視覺表現上|--众赢彩票能刷反水吗。

在後台產品的設計過程中|朗姿代购,更應該把寶貴的時間用在更值得關注的事物上_|镁合金密度,讓設計師能夠輔助業務挖掘||解放军466耳鼻喉科,從趨於相同的表象中找到產品獨有的閃光點||-369开奖网,從而切實解決問題和實現價值|-北京耳鼻喉科解放军466医院。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_-132彩票APP苹果,為期望卓越的國內外企業提供卓越的UI界麵設計__和绳媲美、BS界麵設計 _-|骂小佛、 cs界麵設計 ||_国家德比直播地址、 ipad界麵設計 --22选5开奖结果河南省、 包裝設計 -|超导空调、 圖標定製 ___沈阳市财政局财会之窗、 用戶體驗 _|雪佛兰新乐骋、交互設計_-优衣库事件视频、 網站建設 _至尊炸金花游戏规则、平麵設計服務-__bumper信号圈。

標簽: B端產品設計 « 2019 年 LOGO 設計趨勢報告(上) | 虎牙公司級全新LOGO發布---金大班大结局,打造直播裏的平行世界__-空间留言代码爱情!»


訂閱Rss