作为后端程序员，我做的网站被 Bulma.css 作者推荐到官网了（有个人经验分享）
Wichna · folyd · 2018-01-19 23:39:12 +08:00 · 17012 次点击这是一个创建于 2486 天前的主题，其中的信息可能已经有所发展或是发生改变。
本人是一位货真价实的后端程序员，业余时间做一些 side project，比如最近两年一直在做的就是一款叫Anyshortcut 的 Chrome 插件。之前帖子有介绍: /t/415551
从刚开始前端一窍不通，设计一窍不通，到一点一点学习坚持，把 Anyshortcut 官网做到了我比较满意的地步。前两天我看到 Bulma.css 的作者把 Anyshortcut 也推荐到Bulma.css 的官网上了。
感兴趣的朋友可以看看我做的官网： https://anyshortcut.com
使用的前端技术：
- bluma.css
- Vue 2.x
- Vue router
设计工具
- Sketch
- Photoshop (女朋友帮我设计的 logo，做了一些图，定的主色调，其他大部分都是我自己的点子，自己设计的)
一些需要登录之后才能看到的页面
用户绑定的快捷键详情
用户订阅成功之后
用户支付方式，即信用卡详情
用户更新信用卡
用户的优惠码页面
个人经验
- 最重要的是多看国外的 SaaS 网站，多学习，不断提高自己的审美，去 Dribbble，Behance 等网站找灵感
- 先确定好主色调，至少选两种字体，一种适合做标题的字体，一种是普通文本字体，然后定好几个标题的大小和颜色。比如 heading, title, subtitle, text, subtext 之类的
- 可以先用一些原型工具设计一下自己脑海中的页面，比如我一直在用的墨刀 (用这个链接注册你我都有优惠，哈哈) 。 大家可以在这看到我最开始设计的原型:https://modao.cc/app/ARvscvpdmhno0NBixRbt0nMTc277hz0
- 一定要用一款成熟度高的 css 框架，比如 bootstrap, bulma.css, 或者一位国人写的spectre.css。如果不用兼容 IE 系列的话，尽量用 Flexbox 布局
- 图片尽量用 svg
- 一些不会写的 UI 控件，可以去 github 或者 codepen 找找借鉴一下
- 自己动手用在 codepen 或者在Web Maker（我自己经常用的 Chrome 插件）实现一下，然后在集成到自己的项目中
有什么问题，欢迎大家一起交流。
第 1 条附言 · 2018-01-20 00:21:24 +08:00
忘了说了，为啥要选Bulma？
其实刚开始是打算用pure.css的，不过感觉这个项目好多年没更新了，所以就放弃了。然后换成了bootstrap 4，当时还是beta版，最大的问题是不方便customize,官方也没有放出customize页面 然后看到了bulma.css, 他最大的优点就是基于Flexbox布局，非常轻量，对个性化，模块化支持非常好，所以就从bootstrap切换到bulma上了。 我是后面才知道国人这款优秀的css框架的。
另外一个建议：
选字体，直接去Google Fonts上面选，尽量选sans serif 类的字体，google fonts在国内没有被墙，放心使用吧
第 2 条附言 · 2018-01-20 00:48:36 +08:00
对了，感兴趣的朋友可以用图片上的推荐码订阅，比如用 PRICETAG 就可以免费订阅一年。
 |
1
feng33 2018-01-19 23:49:50 +08:00
用来做什么的，现在付费用户多吗
|
 |
2
shiny 2018-01-19 23:51:27 +08:00  1
看到了语法错误：Your already added your credit card
|
 |
5
est 2018-01-19 23:58:39 +08:00
赞一个。
|
 |
7
GooMS 2018-01-20 00:10:38 +08:00 via Android
Stripe 怎么纳税？
|
 |
8
oott123 2018-01-20 00:16:14 +08:00 via Android
重点是有个画 logo 的女朋友。
|
 |
11
crysislinux 2018-01-20 00:23:35 +08:00
楼主在国内么，怎么搞定的 stripe，不会搞了 atlas 吧。
|
 |
12
Wichna OP @crysislinux 在国内，绕了弯搞定 Stripe 的，Atlas 试过，成本还是有点高，不适合我的小项目。感兴趣可以看看我另外一个网站，我整理了很多申请 Stripe 的途径 https://paybase.cn/
|
 |
14
ericls 2018-01-20 00:59:21 +08:00 via iPhone
好了 知道你有女朋友了
|
 |
15
wtf94666 2018-01-20 01:36:48 +08:00 via Android
好看 新手设计师自愧不如
|
 |
16
hugee 2018-01-20 01:37:29 +08:00 via Android
高手
|
 |
17
twor 2018-01-20 01:57:36 +08:00 1
非常感谢，我免费订阅 1 年的
不过不好意思问，如何防止自动续费？我看没有取消的选项 |
 |
18
cctrv 2018-01-20 06:05:33 +08:00
+1
我也想知道如何取消自動訂閱。 |
|
20
Wichna OP |
 |
22
yokinzzz 2018-01-20 08:57:43 +08:00 via Android 1
"how does it works"语法错误
|
 |
23
majinjing3 2018-01-20 09:41:23 +08:00 via Android
支持～
|
|
25
Wichna OP @majinjing3 谢谢支持
|
 |
26
levywang 2018-01-20 12:26:15 +08:00
为何官网不增加中文呢？
|
 |
28
geekcorn 2018-01-20 12:52:42 +08:00
超棒！
|
 |
29
ashanyue88 2018-01-20 14:03:20 +08:00
Stripe 可以收 RMB 吗？
|
|
31
Wichna OP @ashanyue88 不可以收人民币
|
|
32
Wichna OP @ashanyue88 不过可以申请开通微信或者支付宝，另外还支持 Apple Pay
|
 |
33
suliuyes 2018-01-20 19:11:27 +08:00
bulma 竟然是国人的？？？
|
 |
34
loading 2018-01-20 19:34:01 +08:00
厉害。
虽然其实 Bulma.css 在里面的作用并不是很大，哈哈。 Bulma.css 的命名方式我非常喜欢。 |
 |
35
yoa1q7y 2018-01-20 19:35:02 +08:00 via iPhone
通篇关键字“女朋友”
|
 |
39
Heanes 2018-01-20 23:48:41 +08:00
我也是后端，前端还行，也对设计很感兴趣，但是设计思维还不行😂
|
 |
40
HELLONAV 2018-01-21 16:43:57 +08:00 via Android
厉害了
|
 |
41
renxiangbin 2018-01-21 22:19:01 +08:00
尊敬的楼主先生，有哪些推荐的 SaaS 网站推荐？
|
|
42
Wichna OP @Heanes 哈哈，有时间可以多看看 Dribbble 或者 behance 这类的网站，看到设计好看的网站都研究研究
|
|
44
Wichna OP 1
@renxiangbin SaaS 网站太多了，我提供几个最容易找 SaaS 网站的方法吧：
1. ProductHunt 上面有 SaaS 的类别，里面全是 SaaS 网站 ttps://www.producthunt.com/topics/saas，或者直接搜索 SaaS 关键字 2. 有一个叫 SaaS1000 的网站 http://saas1000.com/ 3. 专门整理 SaaS 网站设计的站 https://www.lapa.ninja/ |
 |
45
kenshin 2018-01-22 10:14:07 +08:00 via Android
学习～ 👍
|
 |
46
bilibiliQQ 2018-01-22 11:03:30 +08:00 via Android
vue 比 jq 难吧！我学 jq 一天入门，vue 三个月了还是一头雾水
|
|
48
Wichna OP @bilibiliQQ vue 确实比 jq 要难，看看 vue 官方文档，应该不用多久就会了啊
|
|
49
renxiangbin 2018-01-22 14:10:25 +08:00
@Wichna 谢谢回复，过去搜过大都是 IBM 之流...支持 Anyshortcut
|
|
50
Wichna OP @renxiangbin 不客气，哈哈，谢谢你的支持🙏
|
 |
51
azoon 2018-01-22 16:38:49 +08:00 1
楼主，你好，这个样式能不能加个前缀啊... |
|
53
azoon 2018-01-22 16:44:23 +08:00 1
Anyshortcut 插件的样式，都应该加个前缀吧，使用了快捷方式的网站的样式都被插件的同名样式覆盖了😅
|
 |
55
quietjosen 2018-01-22 17:27:17 +08:00
不错不错；小伙，接活吗？😂
|
|
56
Wichna OP @quietjosen 哈哈，可以接啊，老板有活吗？🤣
|
|
57
quietjosen 2018-01-22 19:16:30 +08:00
@Wichna 我的产品网站啊，https://Toolinbox.net 看看怎么整得好看些？😂
|
|
58
Wichna OP @quietjosen 你的 i 系列软件不是一两个，数量确实不少，估计后期还有推出新的 i 系列软件？而且这些软件的定位一直都是 mac 平台，如果是做成一个静态网站的话，个人认为官网布局可以适当的参考或学习 apple.com ，然后再根据自己特色的改进或调整（主色调，字体，字号等等）。
|
|
59
quietjosen 2018-01-23 09:06:18 +08:00
|
|
60
Wichna OP @quietjosen 哈哈，不客气，反正加好友了，以后有很多机会交流。
我刚看了 klib 官网，最大的感觉就是太灰了，我认为人的眼睛对鲜艳一点的颜色更感兴趣，更能受到吸引，灰灰的网站，我个人就不愿意停留太久。 |
 |
61
wanwan 2018-01-23 11:30:32 +08:00
这个不错，支持一下。。
|
|
62
quietjosen 2018-01-23 12:58:13 +08:00
|
 |
65
myora 2018-01-23 15:15:06 +08:00
zhushuang+dongxiaocheng?😺
|
|
68
Wichna OP @picturepan2 找到 Spectre.css 的作者了, 作者 2016 年在 V 站发过贴介绍过 Spectre.css https://www.v2ex.com/t/276425
|
 |
69
hanangellove 2018-01-26 10:15:24 +08:00
顶！ d=====(￣▽￣*)b
|
|
70
Wichna OP @hanangellove 感谢😃
|
 |
71
ericbenjaming 2018-02-06 08:18:15 +08:00
JT 是我朋友，哈哈，时间真小。😆
|
|
72
Wichna OP @ericbenjaming 厉害了，阁下在 UK 工作，怎样认识 JT 的？
|
Select Language