要做一個好的UI設計公司,不僅要在能力上設計能力一直(十幾年幾十年)保持優(yōu)秀穩(wěn)定的保持輸出,以及心態(tài)的平和寬廣。創(chuàng)始人對做公司要有信心,合伙人之間要同甘共苦,遵守規(guī)則,做好表率。
只要持之以恒做好這些,不斷學習。創(chuàng)業(yè)其實也不難。
貪嗔癡慢疑,是人性,
善良信任利他尊重包容也是人性,
一個公司能幾十年長盛不衰,那不僅僅只是設計能力好的問題。
我們在這個過程中也完成了對自己的修煉。
2.全流程設計包括有什么主要內(nèi)容和步驟?
1)明確設計目標,聚焦設計要解決的核心問題
2)明確目標用戶,要明確產(chǎn)品價值要解決的用戶群體,描述用戶畫像,提煉用戶場景,挖掘用戶需求。
從產(chǎn)品應用的具體場景,來研究和理解所涉及到的產(chǎn)品體驗問題。這些可能是產(chǎn)品中已經(jīng)出現(xiàn)的體驗問題,也可能還包括有未滿足的用戶需求問題。通過不同的用戶研究手段,了解已有的用戶行為和使用習慣,進行策略分析,改變原有業(yè)務邏輯不合理的操作路徑,進而提出有針對性的交互設計和視覺設計解決方案。
3)明確資源配比,了解技術方案,進行設計預估
通過項目啟動會了解產(chǎn)品的功能列表和產(chǎn)品規(guī)劃,避免做出現(xiàn)有功能相沖突/重疊的設計,進行合理的設計預估
4)確定方案流程,確定設計方案
方案流程可以是流程圖也可以是交互原型圖。最終完成的是高保真的交互原型、可交付開發(fā)實現(xiàn)的UI demo。在以最終的結果進行專家評審,確認無誤后,進行可用性測試。
5)數(shù)據(jù)對比分析
在有條件的情況下,需要對于設計前后的數(shù)據(jù)進行對比分析,對比前流程與現(xiàn)流程的差異,關注某流程的耗時和步驟。大部分B端產(chǎn)品的設計初衷就是為了某業(yè)務流程的降本增效。關鍵就看設計的產(chǎn)品,在上線后給公司的降低了多少的成本,提高了多少的效率。所以成本和效率也是設計的產(chǎn)品是否合格的關鍵因素所在。B端產(chǎn)品設計可以進行用戶可用性測試,了解設計帶來的實際收益和效果。依托數(shù)據(jù)合理改正方案。
前一段時間,有一個客戶(甲方主管研發(fā)工作的副總)向我提出了這個問題:如何提高公司程序員工程師的UI審美?
他們公司UI設計師只設計其中很小的一部分頁面,大部分頁面要讓程序員自己來做的,程序員開發(fā)出的頁面看起來總是很丑,這是他覺得苦惱的地方。
在聽到這個問題的時候,我很驚訝,覺得這個問題真的是個好問題。我以前關注的都是設計師如何提高自己的審美?沒有想過讓程序員提高自己的審美。
據(jù)我了解,他們公司的程序員非常忙,比我們UI設計公司的加班程度要多很多。我首先想到的是工作都這么辛苦了,能把功能任務完成就很不錯了,也許能顧上提升UI設計審美的時間精力有限。
提高審美,不是短期內(nèi)能夠達到的事情,何況術業(yè)有專攻,工程師們有沒有興趣和精力做這件事情,也是另外的一個問題。
但是,這是一個很好的問題,在一個軟件公司里工程師程序員是占大多數(shù)的,UI設計師相對人數(shù)比較少的。如果大量的工程師能夠把審美提高易用性提高。確實,這個軟件的整個UI水準就會提高。
如何提升整體軟件的UI設計美的水準,讓軟件好用又統(tǒng)一?
我首先想到的是制定好的UI規(guī)范,做好全流程的交互設計原型。通過核心關鍵場景,關鍵頁面的梳理,整理出一套設計語言,規(guī)定好UI規(guī)范。這份工作可以由設計師來做,把所有的字號顏色使用的元素組件都確定好,關鍵的場景和頁面做一些模板,制定一份完善的UI規(guī)范,方便工程師按照這些去復用調(diào)用,降低難度。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍未來將會持續(xù)在平臺上分享關于設計行業(yè)的文章。此外藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,添加vx藍小助ben_lanlan,報下信息,藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設計案例和設計素材等,歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。
大家好,藍藍設計今天和大家分享20款優(yōu)秀的手機界面設計欣賞,共同學習成長!
我們有許多界面設計的案例,因為有保密協(xié)議不方便發(fā)出來。
藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢
希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
目錄
確保我們在vue中實現(xiàn)頁面跳轉到我們所想的頁面
可以看到當我們點擊不同的組件的時候我們實現(xiàn)了路由的功能:在vue中實現(xiàn)頁面的跳轉
注意看,當我點擊的時候上面地址欄中加載了不同的網(wǎng)頁。下面我們來學習下路由的寫法
路由書寫寫法:
在index.js中的router對象中書寫
-
const router = new VueRouter({
-
mode: 'history',//默認是hash模式
-
})
hash模式:
history模式:
兩種模式的區(qū)別:
起步 | Vue RouterVue Router3官網(wǎng)介紹: 起步 | Vue Router
- 下載與導入vue-router
- 導入組件
- 創(chuàng)建routes路由規(guī)則(路徑和頁面一一對應)
- 創(chuàng)建路由對象
- 把路由對象掛載到App.vue
- 在頁面寫路由導航router-link (生成a標簽)
- 在頁面寫路由出口router-view (生成占位盒子,用于顯示頁面內(nèi)容)
下面開始我們相關文件的創(chuàng)建
1.創(chuàng)建我們的腳手架(此時沒有選擇Router):
2.準備我們的App.vue文件:
-
<template>
-
<div>
-
<!-- 頂部導航欄 -->
-
<div class="footer_wrap">
-
<a href="#/find">發(fā)現(xiàn)音樂</a>
-
<a href="#/my">我的音樂</a>
-
<a href="#/friend">朋友</a>
-
</div>
-
<!-- 下面內(nèi)容 -->
-
<div class="top"></div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
methods: {}
-
}
-
</script>
-
-
<style scoped>
-
body,
-
html {
-
margin: 0;
-
padding: 0;
-
}
-
.footer_wrap {
-
position: fixed;
-
left: 0;
-
top: 0;
-
display: flex;
-
width: 100%;
-
text-align: center;
-
background-color: #333;
-
color: #ccc;
-
}
-
.footer_wrap a,
-
span {
-
cursor: pointer;
-
flex: 1;
-
text-decoration: none;
-
padding: 20px 0;
-
line-height: 20px;
-
background-color: #333;
-
color: #ccc;
-
border: 1px solid black;
-
}
-
.footer_wrap a:hover,
-
span:hover {
-
background-color: #555;
-
}
-
-
.top {
-
padding-top: 62px;
-
}
-
-
.footer_wrap .router-link-active {
-
background-color: #000;
-
}
-
</style>
3.在src下面新建views文件夾并創(chuàng)建我們需要的.vue文件
3.1 find.vue
-
<template>
-
<div>
-
<div class="nav_main">
-
<router-link to="/Ranking">排行</router-link>
-
<router-link to="/Recommend">推薦</router-link>
-
<router-link to="/SongList">歌單</router-link>
-
</div>
-
-
<div style="1px solid red;">
-
<router-view></router-view>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'find',
-
}
-
</script>
-
-
<style scoped>
-
.nav_main {
-
background-color: red;
-
color: white;
-
padding: 10px 0;
-
}
-
.nav_main a {
-
text-align: center;
-
text-decoration: none;
-
color: white;
-
font-size: 12px;
-
margin: 7px 17px 0;
-
padding: 0px 15px 2px 15px;
-
height: 20px;
-
display: inline-block;
-
line-height: 20px;
-
border-radius: 20px;
-
}
-
.nav_main a:hover {
-
background-color: brown;
-
}
-
.nav_main .router-link-active{
-
background-color: brown;
-
}
-
</style>
3.2 my.vue
-
<template>
-
<div>
-
<img src="../assets/my.png" alt="" width="100%">
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'my',
-
};
-
</script>
-
-
<style scoped>
-
-
</style>
3.3 friend.vue
-
<template>
-
<div>
-
<ul>
-
<li>這是當前頁面 query 接收到的參數(shù):
-
<span>姓名:{{ $route.query.name }}</span> --
-
<span>年齡:{{$route.query.age}}</span>
-
</li>
-
<li>這是當前頁面 params 接收到的參數(shù):
-
<!-- <span>姓名:{{ $route.params.name }}</span> --
-
<span>年齡:{{ $route.params.age }}</span> -->
-
</li>
-
</ul>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'friend',
-
};
-
</script>
-
-
<style scoped>
-
-
</style>
3.4 notfound.vue
-
<template>
-
<div class="box">
-
<h1>這是一個 404 頁面</h1>
-
<img src="../assets/404.png" alt="">
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'notfound',
-
data() {
-
return {
-
-
};
-
},
-
-
};
-
</script>
-
-
<style scoped>
-
.box {
-
display: flex;
-
flex-direction: column;
-
justify-content: center;
-
align-items: center;
-
}
-
</style>
4.準備圖片素材(所有素材可私信博主獲?。?
5.所有準備工作做完現(xiàn)在開始我們的文件配置
1.下載與導入vue-router
npm i vue-router@3.6.5
導入vue-router (在main.js中)
-
//main.js中導入
-
// 0.導入路由
-
import VueRouter from 'vue-router'
-
// 使用vue的插件,都需要調(diào)用Vue.use()
-
Vue.use(VueRouter)
2.導入組件
@符號代表 /src 文件夾的絕對路徑,在腳手架中文件比較多的時候,使用這個@符號會更加的方便
在main.js中導入
-
// 導入組件
-
import find from '@/views/find.vue'
-
import friend from '@/views/friend.vue'
-
import my from '@/views/my.vue'
-
import notfound from '@/views/notfound.vue'
3.創(chuàng)建路由規(guī)則
路由規(guī)則作用: 設置 url 和 組件 對應的規(guī)則
在main.js中寫入
-
// 路由規(guī)則
-
const routes = [
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound },
-
]
4.創(chuàng)建路由對象
路由對象: 幫你管理這些路由規(guī)則
在main.js中寫入
-
// 創(chuàng)建路由對象
-
const router = new VueRouter({
-
routes// (縮寫) 相當于 routes: routes
-
})
5.掛載路由到根組件
掛載到根組件作用:讓你的整個應用都有路由功能
在main.js中寫入
-
// 掛載路由到根組件
-
new Vue({
-
router,
-
render: h => h(App)
-
}).$mount('#app')
6.在頁面寫路由導航router-link
作用與a標簽一樣實現(xiàn)跳轉,好處:當點擊鏈接的時候自帶一個專屬類名
在App.vue中我們將傳統(tǒng)的a標簽進行替換:
替換a標簽原因:便于我們做專屬效果
我們選中點擊的超鏈接做觸發(fā)效果:
7在頁面寫路由出口router-view
占位盒子,用于渲染路由匹配到的組件
(<router-view> : 是vue內(nèi)置的一個組件,會自動替換成路由匹配的組件 )
好了一個最最最基本的路由就被我們制作完成啦!下面我們來看看效果:
上述的操作有些許麻煩,下面我們來使用我們開發(fā)中常用的自動配置方法
創(chuàng)建腳手架方式與手動配置類似,唯一不同是此處必須選擇Router
對比手動模式:
此刻:腳手架已經(jīng)幫我們創(chuàng)建好了Router路由不需要我們下載與導入vue-router了
只需要寫:
- 導入組件
- 配置路由規(guī)則
- 路由導航
- 路由出口
并且為了進一步的封裝我們的配置信息,我們的配置代碼將寫在router/index.js下,不再是全部寫在main.js下。
1.導入組件(index.js中)
-
import find from '@/views/find.vue'
-
import friend from '@/views/friend.vue'
-
import my from '@/views/my.vue'
-
import notfound from '@/views/notfound.vue'
2.配置路由規(guī)則(index.js中)
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound }
3.路由導航(直接cv我們之前的App.vue文件)
-
<router-link to="/find">發(fā)現(xiàn)音樂</router-link>
-
<router-link to="/my">我的音樂</router-link>
-
<router-link to="/friend">朋友</router-link>
4.路由出口(App.vue中)
-
<div class="top">
-
<router-view></router-view>
-
</div>
效果查看:
自動配置省去了一些固定不變的操作,我們不需要寫繁瑣且固定的代碼,只需要寫不同的代碼。且代碼書寫的位置都給我們設置好了,我們直接遵守該規(guī)范書寫代碼即可
路由重定向官方文檔:重定向和別名 | Vue Router
重定向應用場景
: 頁面輸入根路徑/ , 自動跳轉到首頁
注意點
: 重定向只是修改路徑, 還需要單獨去設置路由匹配規(guī)則
重定向命令:
-
{
-
path: '/',
-
/*
-
(1)重定向只是修改頁面路徑。 輸入 / 會重定向到 /路徑
-
(2)只有component才會讓vue去尋找路由匹配頁面。所以設置了重定向,還需要單獨設置匹配規(guī)則
-
*/
-
redirect: "路徑"
-
},
1. 就拿我們剛才創(chuàng)建的舉例:
實現(xiàn)效果:當我在瀏覽器中打開的時候我沒有輸入任何路徑,vue自動幫我們跳轉到了 my.vue這個頁面組件
2.也可以利用重定向來設置當我們路徑錯誤提示404頁面:
實現(xiàn)效果:當我任意輸入沒有匹配的路徑,自動幫我們跳轉到了notfound.vue這個組件
實現(xiàn)頁面中存在第二級的跳轉
寫法(拿我們上述的案例實操,需要素材可私信博主喔):
①在index.js中引入
-
// 導入二級路由
-
import Ranking from '@/views/second/Ranking.vue'
-
import Recommend from '@/views/second/Recommend.vue'
-
import SongList from '@/views/second/SongList.vue'
②在需要引用的組件中使用:
-
//格式:
-
{
-
path: '路徑', component: 組件名, children: [
-
//此處填寫二級路由的路徑信息
-
]
-
}
-
{
-
path: '/find', component: find, children: [
-
{path:'/',redirect:'/SongList'},
-
{ path: '/Ranking', component: Ranking },
-
{ path: '/Recommend', component: Recommend },
-
{ path: '/SongList', component: SongList }
-
]
-
}
③寫路由導航與出口
查看效果:
可以看到:當我們點擊一級路由之后,我們還可以點擊二級路由到我們的專屬頁面中
有兩種跳轉傳參方式:
- 聲明式導航
- 編程式導航
①query寫法:
在路徑中加參數(shù)信息即可
<router-link to="/路徑?參數(shù)名=參數(shù)值&參數(shù)名=參數(shù)值</router-link>
接收信息:
在觸發(fā)的組件中書寫{{ $route.query.屬性名}}接收
舉個例子:
②params寫法:
在index.jsx文件中寫:參數(shù)名。在需要傳遞的路由路徑中寫參數(shù)值
接收信息:
在觸發(fā)的組件中書寫{{ $route.params.屬性名}}接收
實現(xiàn)效果:
①query寫法:
結構:
-
this.$router.push({
-
path: '/路徑',
-
query: { 屬性名: '屬性值'}
-
})
接收信息:
在觸發(fā)的組件中書寫{{ $route.query.屬性名}}接收
舉個例子:
②params寫法
結構:
-
this.$router.push({
-
name: '我們注冊路徑的組件名',//寫path獲取不到值?。?!
-
query: { 屬性名: '屬性值'}
-
})
注意點:寫path獲取不到值,需要用name
接收信息:
在觸發(fā)的組件中書寫{{ $route.params.屬性名}}接收
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
元宇宙概念自被提出來之后,就引發(fā)了各行各業(yè)的關注,不少行業(yè)也開始與“元宇宙”應用結合,試圖發(fā)掘行業(yè)前進的更多可能。那么,當醫(yī)療行業(yè)和元宇宙碰撞之后,可以產(chǎn)生哪些火花?在醫(yī)療元宇宙場景下,又可能出現(xiàn)哪些應用呢?
在我們之前的文章中,同理心思維,在工作和生活中有著怎樣的應用?關于產(chǎn)品原創(chuàng)和服務設計都有提到“同理心”,今天想來系統(tǒng)地分享一下。它不僅應用在旅行的產(chǎn)品和服務上,還可以應用在每天生活的方方面面,提高我們生活和工作的效率。
偶爾有來咨詢的客戶會詢問:設計需求文檔怎么寫?給我一個模板吧。
加起來,這樣問的客戶也不少,所以藍藍設計錄了一個視頻講解:給設計公司的UI設計需求文檔怎么寫?請看一下這段錄的視頻講解吧!
作者:謝普·??希⊿hep Hyken)
推薦理由:該書以當今客戶服務同質(zhì)化嚴重、客戶對價格敏感等經(jīng)濟環(huán)境為背景,深度解析為何客戶體驗是企業(yè)想脫穎而出的最佳工具。提出7步創(chuàng)造卓越客戶服務體驗的戰(zhàn)略。任何企業(yè)都可以運用這些戰(zhàn)略來提高客戶和員工的忠誠度,從而提供超越預期的服務。這樣可以幫助企業(yè)塑造優(yōu)質(zhì)形象,迅速形成優(yōu)質(zhì)口碑;創(chuàng)造獨特競爭優(yōu)勢,超越簡單價格競爭;提高客戶忠誠,讓客戶購買得更多;讓員工和客戶都引以為傲。
作者:[澳] 羅伯特·杜(Robert·Dew)
推薦理由:本書出發(fā)點在于幫助企業(yè)如何實施、落地以及長期維持,如何獲取長久的市場競爭優(yōu)勢,帶領讀者思考何為客戶體驗、客戶體驗為何重要,以及企業(yè)六大競爭優(yōu)勢的基礎上從如何評估你的客戶體驗、如何打造遞增性客戶體驗升級、如何養(yǎng)成或改變你的客戶體驗三大方面進行詳實具體的介紹和分析,結合諸多案例,圍繞客戶體驗痛點解決的成功的和不太成功的案例,為讀者提供了一個豐富而實用的案例庫、工具包。
作者:李瀟
推薦理由:該書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI設計,也有更進一步的HC X(知識型UGC和信息型UGC)、HH X(人與人的交互體驗)、HB X(人與品牌的交互體驗),具有追求深度、追求卓越、展望未來、兼顧大小的特色,用戶即人,談用戶體驗,自然離不開對人的關注, 作為人的互聯(lián)網(wǎng)從業(yè)者,在打造產(chǎn)品時,如何在兼顧商業(yè)化的同時,用更溫暖的方式去打動人?用戶利益與企業(yè)利益的權衡,是一些產(chǎn)品正在面臨的問題,也是所有產(chǎn)品都難以回避的問題,作者選擇聚焦于“人”,這本書的文字能為身處困境的你帶來有溫度的思考。
作者:[美]肯·布蘭佳(Ken Blanchard)、[美]凱西·卡夫(Kathy Cuff)、[美]維基·哈爾西(Vick Halseyi)
推薦理由:該書作者肯·布蘭佳博士被譽為當今商界洞察力和思想深度的人之一,而他的著作非常貼近商業(yè)現(xiàn)實,往往是通過真實的商業(yè)故事呈現(xiàn)現(xiàn)實情景,闡述其深邃的商業(yè)理念和獨到的管理見解,令讀者在閱讀過程中不知不覺領悟到其中精髓。此次肯·布蘭佳博士在其新作《極致服務——如何創(chuàng)造不可思議的客戶體驗》中依然采用嫻熟的商業(yè)故事敘述手法,讓讀者在故事閱讀中領悟極致服務的理念價值。 極致服務是指要始終如一地提供理想服務留住顧客,從而提高企業(yè)的競爭力。簡單來說,就是企業(yè)通過一系列舉措令顧客感覺到備受關注,以此實現(xiàn)極致服務。
藍藍設計的小編 http://m.yvirxh.cn