-
Notifications
You must be signed in to change notification settings - Fork 0
/
Design.html
1082 lines (874 loc) · 50.9 KB
/
Design.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Design - West Wong
</title>
<link href="atom.xml" rel="alternate" title="West Wong" type="application/atom+xml">
<link rel="stylesheet" href="asset/css/foundation.min.css" />
<link rel="stylesheet" href="asset/css/docs.css" />
<script src="asset/js/vendor/modernizr.js"></script>
<script src="asset/js/vendor/jquery.js"></script>
<script type="text/javascript">
function before_search(){
var searchVal = 'site: ' + document.getElementById('search_input').value;
document.getElementById('search_q').value = searchVal;
return true;
}
</script>
</head>
<body class="antialiased hide-extras">
<div class="marketing off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<section class="top-bar-section">
<div class="row">
<div style="position: relative;width:100%;"><div style="position: absolute; width:100%;">
<ul id="main-menu" class="left">
<li id=""><a target="_self" href="index.html">Home</a></li>
<li id=""><a target="_self" href="archives.html">Archives</a></li>
</ul>
<ul class="right" id="search-wrap">
<li>
<form target="_blank" onsubmit="return before_search();" action="https://google.com/search" method="get">
<input type="hidden" id="search_q" name="q" value="" />
<input tabindex="1" type="search" id="search_input" placeholder="Search"/>
</form>
</li>
</ul>
</div></div>
</div>
</section>
</nav>
<nav class="tab-bar show-for-small">
<a href="javascript:void(0)" class="left-off-canvas-toggle menu-icon">
<span> West Wong</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a target="_self" href="index.html">Home</a></li>
<li><a target="_self" href="archives.html">Archives</a></li>
<li><label>Categories</label></li>
<li><a href="Design.html">Design</a></li>
<li><a href="Life.html">Life</a></li>
<li><a href="Work.html">Work</a></li>
<li><a href="Misc.html">Misc</a></li>
</ul>
</aside>
<a class="exit-off-canvas" href="#"></a>
<section id="main-content" role="main" class="scroll-container">
<script type="text/javascript">
$(function(){
$('#menu_item_index').addClass('is_active');
});
</script>
<div class="row">
<div class="large-8 medium-8 columns">
<div class="markdown-body home-categories">
<div class="article">
<a class="clearlink" href="15830543056581.html">
<h1>Redesign 之酷家乐 macOS 客户端</h1>
<div class="a-content">
<div class="a-content-text">
<p>@王瑞青</p>
<p>最近发现了<a href="https://www.shejijia.com/">躺平设计家</a>、<a href="https://www.kujiale.com/">酷家乐</a>一类的在线 3D 设计软件（垂直领域），很感兴趣，做了一些研究。现在本人做了一个 macOS 客户端为主的 Redesign 分享给大家（以酷家乐家装编辑软件客户端为主）。</p>
<p>文章目录如下：<br />
<img src="media/15830543056581/%E7%9B%AE%E5%BD%95.png" alt="目录" /></p>
<h2><a id="%E4%BD%BF%E7%94%A8%E4%B8%8E%E5%AD%A6%E4%B9%A0" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>使用与学习</h2>
<p>我先试用了躺平设计家，并学习了部分<a href="https://www.shejijia.com/college/newbie.html">视频教程</a>。之后又使用了酷家乐（并学习了水电部分）。当时最大的感受是酷家乐有行业库的概念封装以及自适应组件，觉得很酷，out-of-the-box 啊。</p>
<p>学习躺平家教程的时候，本人以自己为假象客户，自己做家装设计师为自己服务，来体验软件。做了个户型，如下图：</p>
<p>鸟瞰图：<br />
<img src="media/15830543056581/%E6%88%91%E7%9A%84%E5%A4%A7%E9%98%B3%E5%8F%B0%E4%B9%A6%E6%88%BF-%E9%B8%9F%E7%9E%B0%E5%9B%BE.png" alt="我的大阳台书房-鸟瞰图" /></p>
<p>主卧：<br />
<img src="media/15830543056581/%E6%88%91%E7%9A%84%E5%A4%A7%E9%98%B3%E5%8F%B0%E4%B9%A6%E6%88%BF-%E4%B8%BB%E5%8D%A7.png" alt="我的大阳台书房-主卧" /></p>
<p>次卧儿童房：<br />
<img src="media/15830543056581/%E6%88%91%E7%9A%84%E5%A4%A7%E9%98%B3%E5%8F%B0%E4%B9%A6%E6%88%BF-%E6%AC%A1%E5%8D%A7.png" alt="我的大阳台书房-次卧" /></p>
<p>方案链接（公开可复制）：<a href="https://www.shejijia.com/design/anlixiangqing/my/a9d7f104194b53611437095009305804800">我的大阳台书房</a>，<a href="https://pano.shejijia.com/?spm=a214ky.13373718.0.0.4ebe1989NQ85LE&id=rZyAebhSS43rsAwtgGa6Mf&m=np">点我看全屋漫游</a></p>
<p>初次使用，初始化的项目渲染的效果还是蛮好的，而且还支持 4K，VR 全景图，于是就认真看了看教程，学了下。出于兴趣，在网上搜索相关信息，发现了酷家乐。<br />
于是本人就又细致的体验了一番酷家乐，并把体验感受录入<a href="https://shimo.im/docs/CtrkXytKhdGvQVY8/">在线 3D 设计软件体验收集</a>。<br />
并且本人对这些记录进行整理分类，形成[在线 3D 设计软件体验整理](在线 3D 设计软件体验整理)。</p>
<p>上表问题大致归纳为下图：<br />
<img src="media/15830543056581/%E8%A1%A8%E6%A0%BC%E4%B8%BB%E8%A6%81%E9%97%AE%E9%A2%98%E5%BD%92%E7%B1%BB.png" alt="表格主要问题归类" /></p>
<p>本人基于对 <a href="https://www.figma.com/home">Figma</a> 的了解，决定挑战一下重设计一款垂直领域的在线 3D 设计软件。毕竟好久没练手了。</p>
<p>根据上面的反馈总结，和本人的设计倾向，归纳出以下重设计目标：</p>
<ul>
<li>选择酷家乐而不是躺平家进行重设计</li>
<li>提升酷家乐 macOS 的本地应用体验</li>
<li>兼顾其它平台体验</li>
<li>优化设计界面整体结构</li>
<li>提升交互/视觉一致性</li>
<li>提升设计界面的效率，优化键盘的体验</li>
<li>努力做到 Figma 级别的产品设计</li>
</ul>
<p>你可访问以下地址查看相关资源：<br />
Figma 设计稿：<a href="https://www.figma.com/file/tihOIk0CWf3KsdtaPuWsDH/Kujiale-Redesign?node-id=2%3A2">Kujiale Redesign - Main</a><br />
Figma 交互原型：<a href="">Kujiale Redesign - Main - Prototype</a><br />
交互原型点击录播视频：<a href="https://www.bilibili.com/video/av97431013/">部分交互演示</a></p>
<h2><a id="%E5%BC%80%E5%B9%B2%E5%89%8D" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>开干前</h2>
<h3><a id="%E5%9B%BE%E6%A0%87%E4%B9%9F%E6%98%AF%E4%BD%93%E9%AA%8C%E7%9A%84%E4%B8%80%E9%83%A8%E5%88%86" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>图标也是体验的一部分</h3>
<p>开工前，首先先干一件事，看下图：</p>
<p>桌面图标截图-旧版：<br />
<img src="media/15830543056581/%E6%A1%8C%E9%9D%A2%E5%9B%BE%E6%A0%87%E6%88%AA%E5%9B%BE-%E6%97%A7%E7%89%88.png" alt="桌面图标截图-旧版" /></p>
<p>改成以下：</p>
<p>桌面图标截图-新版：<br />
<img src="media/15830543056581/%E6%A1%8C%E9%9D%A2%E5%9B%BE%E6%A0%87%E6%88%AA%E5%9B%BE-%E6%96%B0%E7%89%88.png" alt="桌面图标截图-新版" /></p>
<p>OK！和谐了。macOS 上国产应用/国外应用的图标都很少注意 macOS 的图标规范。（Apple 很多 App 都采用了标准圆，但并非必须，此处本人依习惯改成圆的）。</p>
<h3><a id="%E6%A2%B3%E7%90%86%E5%8E%9F%E4%BA%A7%E5%93%81%E7%BB%93%E6%9E%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>梳理原产品结构</h3>
<p>为了了解酷家乐的产品，我又看了酷家乐的<a href="https://www.kujiale.com/learningmap#/huxing">教学视频</a>。并且学到了一些除了软件以外的一些家装知识（此处给酷家乐点赞）。边学边用，我把几乎酷家乐的个人版的所有界面都体验了一遍。</p>
<p>现在给出下图的产品结构大纲：<br />
<img src="media/15830543056581/%E5%8E%9F%E7%89%88-%E9%85%B7%E5%AE%B6%E4%B9%90%E5%8A%9F%E8%83%BD%E7%BB%93%E6%9E%84-%E5%A4%A7%E7%BA%B2.png" alt="原版-酷家乐功能结构-大纲" /></p>
<p>其中酷家乐进入不同的行业模式，核心功能和核心菜单会稍有不同。<br />
完整版脑图太大了，以下给出的功能结构详细的脑图：<a href="https://my.mindnode.com/cUsxjYxCnTZUjvTYezs1f8CHFBbx8oFd7qz7vhGm">原版功能结构-各个模式</a>，可在线观看，可下载。</p>
<h2><a id="%E6%96%B9%E6%A1%88%E4%BB%8B%E7%BB%8D" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>方案介绍</h2>
<p>本人接下来将按以下篇目来详解一下我的 Redesign 方案</p>
<ul>
<li>贴近系统篇</li>
<li>整体结构篇</li>
<li>行业模式篇</li>
<li>视图导航篇</li>
<li>鼠标 & 键盘篇</li>
<li>微交互篇</li>
<li>其它篇</li>
</ul>
<h3><a id="%E7%B3%BB%E7%BB%9F%E8%B4%B4%E8%BF%91%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>系统贴近篇</h3>
<h4><a id="%E6%88%91%E5%83%8Fchrome" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>我像 Chrome</h4>
<p>原版：<br />
<img src="media/15830543056581/%E5%B7%A5%E4%BD%9C%E5%8F%B0-%E5%8E%9F%E7%89%88.png" alt="工作台-原版" /></p>
<p>工作台-新版：<br />
<img src="media/15830543056581/%E5%B7%A5%E4%BD%9C%E5%8F%B0-%E6%96%B0%E7%89%88.png" alt="工作台-新版" /></p>
<p>对比：</p>
<ul>
<li>新版的系统窗口操作按钮是统一的，无论在工作台，还是打开设计方案，窗口的关闭、缩小、放大从视觉上交互式都是统一的（软件内），同时也和 macOS 系统是吻合的</li>
<li>新版的标签切换一直在顶部，避免了原版：工作台页面切换标签页在底部，打开设计方案后在顶部，而且打开设计方案后，新设计按钮又没有了。改完后切换标签的体验像 Chrome</li>
<li>新版的顶部标签右侧有个常驻的加号按钮，同时工作台页面内三个字模块的右上角也有快捷的新设计按钮，既有常驻的也有符合工作流程的（列表页表头上加添加按钮）。新建设计的体验像 Chrome 打开新标签页</li>
<li>新版去除了历史记录的倒退前进功能，让 macOS 客户端专注于设计方案本身，其它需要浏览的地方，通过跳转本地浏览器和引导下载 App 实现。避免一些乱七八糟的多窗口多标签的现象</li>
<li>新版的帮助中心常驻右下角，使用统一的菜单，位置更统一，触达更直接。避免了原版乱七八糟的帮助模块（有的是小窗口，有的是帮助中心，有的是客服）</li>
<li>[存疑] 新版简化了一级导航，更贴近移动端的结构</li>
<li>[存疑] 团队项目和新团队的部分是在未体验企业版的情况下以小作坊工作模式设计的。需求存疑</li>
</ul>
<p>通过 Figma 那种对 Chrome 的体验的复刻，降低了用户从浏览器迁移的成本，同时日常使用效率也更高（符合用户习惯）。</p>
<h4><a id="%E7%B3%BB%E7%BB%9F%E5%92%8C%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>系统和内页菜单</h4>
<p>上面说到在窗口标签页的体验上通过复刻 Chrome，降低了使用成本。该软件作为 macOS 客户端，虽然内容是基于网页浏览器的，但也是可以使用系统菜单功能的。<br />
macOS 的菜单栏是常驻屏幕顶部的，利用菲茨定律，点击是很方便的。<br />
同时 Web 里的设计界面也可以同步一分菜单（细微差别）（称之为内页菜单），可以搜索，方便查找功能。</p>
<p>在上面酷家乐原版功能结构-大纲的脑图里，有记录各种操作，以及快捷键。对这些快捷键整理，按以下类目整理：<br />
<img src="media/15830543056581/%E6%96%B0%E7%89%88-%E7%B3%BB%E7%BB%9F%E8%8F%9C%E5%8D%95%20-%20%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95.png" alt="新版-系统菜单-内页菜单" /></p>
<p>完整脑图地址：<a href="https://my.mindnode.com/DptXTTXFRUQoef4X6t7jhdacXHgoaxNtqW3kXP64">新版-系统菜单 & 内页菜单</a></p>
<p>以下放一些内页菜单的图片，你也可以访问<a href="https://www.figma.com/file/tihOIk0CWf3KsdtaPuWsDH/Kujiale-Redesign?node-id=381%3A480">Figma - 内页菜单</a>查看所有内页菜单。本篇内容可配合快捷键篇浏览。</p>
<p>PS：如果不能享受到原生软件的优势，那何不用 Chrome 生成单独窗口的快捷链接呢？（实际上我对很多网站都是这样做的，参见图标也是体验的一部分）。这也是我在设计中采用系统菜单的原因之一。</p>
<p>内页菜单-例子：<br />
<img src="media/15830543056581/%E6%96%B0%E5%A2%9E-%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95.png" alt="新增-内页菜单" /></p>
<p>以下是内页菜单详解：</p>
<h5><a id="%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95%E6%96%87%E4%BB%B6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>内页菜单-文件</h5>
<p><img src="media/15830543056581/%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95-%E6%96%87%E4%BB%B6.png" alt="内页菜单-文件" /><br />
解释：</p>
<ul>
<li>自动保存不再频繁提示，采用类似 Figma 的策略，一直静默的自动保存，只有保存出错才提示用户。用户按 ⌘S 后，会提示：酷家乐会自动保存你的设计方案</li>
<li>用户可以手动保存版本（视为重要版本），需要填写版本信息</li>
<li>历史版本可以重新设计一版（比如可以显示缩略图），此部分略</li>
</ul>
<h5><a id="%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95%E7%BC%96%E8%BE%91" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>内页菜单-编辑</h5>
<p><img src="media/15830543056581/%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95-%E7%BC%96%E8%BE%91.png" alt="内页菜单-编辑" /><br />
解释</p>
<ul>
<li>通用的、高频的编辑操作</li>
<li>软件常用的工具类按钮（此处可根据数据、灵活调整，仅做参考）</li>
</ul>
<h5><a id="%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95%E8%A7%86%E5%9B%BE" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>内页菜单-视图</h5>
<p><img src="media/15830543056581/%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95-%E8%A7%86%E5%9B%BE.png" alt="内页菜单-视图" /><br />
解释：</p>
<ul>
<li>包含
<ul>
<li>主要视图的缩放</li>
<li>对象清理和隐藏显示操作（包含定制对象）</li>
<li>视图显示模式调整</li>
<li>左面板（核心功能）右面板（辅助面板）</li>
</ul>
</li>
<li>在菜单中可以方面的集中找到有关视图的常用选项</li>
<li>增加了快捷键的曝光，有利于用户养成使用快捷的习惯</li>
</ul>
<h5><a id="%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95%E5%AF%B9%E8%B1%A1" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>内页菜单-对象</h5>
<p><img src="media/15830543056581/%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95-%E5%AF%B9%E8%B1%A1.png" alt="内页菜单-对象" /><br />
解释：</p>
<ul>
<li>包含常用的对象操作
<ul>
<li>替换和编辑（地台设计、吊顶设计、墙壁设计、开启定制等（随着选中对象不同而变）</li>
<li>移动缩放、翻转选择、对齐</li>
<li>组操作、显示和锁定</li>
</ul>
</li>
<li>不包含不常用的因对象不同而出现的操作，那一部分交给页面内的智能菜单，避免菜单膨胀</li>
</ul>
<h5><a id="%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95%E5%B8%AE%E5%8A%A9%E5%92%8C%E8%B4%A6%E6%88%B7" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>内页菜单-帮助和账户</h5>
<p><img src="media/15830543056581/%E5%86%85%E9%A1%B5%E8%8F%9C%E5%8D%95-%E5%B8%AE%E5%8A%A9%E5%92%8C%E8%B4%A6%E6%88%B7.png" alt="内页菜单-帮助和账户" /><br />
解释</p>
<ul>
<li>充当快捷入口（帮助可在右下角找到，账户设置可在工作台点击头像）</li>
<li>设置的快捷键是 macOS 统一的 ⌘, （利用系统习惯）</li>
</ul>
<h3><a id="%E5%B8%83%E5%B1%80%E7%BB%93%E6%9E%84%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>布局结构篇</h3>
<p>在调整这个模块的时候，我同时参考了躺平设计家，<a href="https://www.mshejiyun.com/">设计云</a>等同类软件（虽然神似，但有很多差异）（我甚至还研究了一下 <a href="https://www.sketchup.com/">SketchUp</a>）。</p>
<h4><a id="%E6%95%B4%E4%BD%93%E7%BB%93%E6%9E%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>整体结构</h4>
<p>设计界面-躺平家：<br />
<img src="media/15830543056581/%E8%AE%BE%E8%AE%A1%E7%95%8C%E9%9D%A2-%E8%BA%BA%E5%B9%B3%E5%AE%B6.png" alt="设计界面-躺平家" /></p>
<p>设计界面-设计云：<br />
<img src="media/15830543056581/%E8%AE%BE%E8%AE%A1%E7%95%8C%E9%9D%A2-%E8%AE%BE%E8%AE%A1%E4%BA%91.png" alt="设计界面-设计云" /></p>
<p>设计界面-酷家乐原版：<br />
<img src="media/15830543056581/%E8%AE%BE%E8%AE%A1%E7%95%8C%E9%9D%A2-%E5%8E%9F%E7%89%88.png" alt="设计界面-原版" /></p>
<p>设计页面-新版：<br />
<img src="media/15830543056581/Design-FloorPlan.png" alt="设计页面-新版" /></p>
<p>先看一下对比大纲的脑图：<br />
<img src="media/15830543056581/%E5%AF%B9%E6%AF%94-%E6%A0%B8%E5%BF%83%E7%BB%93%E6%9E%84.png" alt="对比-核心结构" /></p>
<p>解释</p>
<ul>
<li>把核心功能模块的入口放到界面左上角，取消浮动收起按钮。核心菜单按钮可以切换菜单，也可以收起/展开核心面板（无需每次都悬停等待浪费时间，避免菜单浮窗组合覆盖页面）。减少左侧面积浪费。支持快捷键（参见鼠标 & 快捷键篇）</li>
<li>核心功能模块的入口和其二级功能导航的热区离得近</li>
<li>精简核心菜单中非编辑相关菜单，文件保存、历史管理、方案信息管理等收入左侧菜单里（参见上文菜单篇）</li>
<li>非编辑类的渲染、图册、导出/下载放入右侧辅助菜单里（让核心菜单更专注）；然后右侧再加上辅助面板相关次要操作</li>
<li>顶部核心菜单区域仅保留核心编辑类操作按钮，并加入智能菜单（选择不同对象即可出现）（智能菜单是浮动还是固定区域可考虑设为设置项）</li>
<li>增加右侧辅助面板宽度，缓解信息显示紧张，配合导航视图的缩小可更方便显示更多属性信息（导航视图切换支持快捷键，参见视图导航篇、鼠标 & 快捷键篇）</li>
<li>视图区域去除缩放操作（本地 macOS 端，使用触摸板即可），只保留核心操作。优化快捷键（参见鼠标 & 快捷键篇）</li>
<li>减少无意义的卡片空隙，去除不协调的顶部和左侧的半透明（用户通过调整核心面板/辅助面板的显示隐藏和导航视图模式来增加可视区域（参见视图导航篇））</li>
</ul>
<p>通过这些改动，让软件结构更加紧凑明了，提升了结构统一性。降低一些交互对用户的干扰，配合快捷键可帮助用户建立更结构化的心理模型。降低使用其它模式下类似结构的流程时的熟悉成本（参见行业模式篇）。同时提升了界面的简洁度，更显专业感。</p>
<h4><a id="%E5%B1%80%E9%83%A8%E7%BB%93%E6%9E%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>局部结构</h4>
<p>局部结构-素材库：<br />
<img src="media/15830543056581/%E5%B1%80%E9%83%A8%E7%BB%93%E6%9E%84-%E7%B4%A0%E6%9D%90%E5%BA%93.png" alt="局部结构-素材库" /></p>
<p>局部结构-我的：<br />
<img src="media/15830543056581/%E5%B1%80%E9%83%A8%E7%BB%93%E6%9E%84-%E6%88%91%E7%9A%84.png" alt="局部结构-我的" /></p>
<p>解释：</p>
<ul>
<li>素材库/我的/楼层属性等标题后后面的二级导航表现一致，且节约空间</li>
<li>统一搜索入口及表现形式</li>
</ul>
<h3><a id="%E8%A1%8C%E4%B8%9A%E6%A8%A1%E5%BC%8F%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>行业模式篇</h3>
<p>行业模式其实就是 Advance Mode 高级模式（地台设计、材质编辑、剖面编辑等也算）。可以让用户专注于某一类定制操作，同时保持默认模式的简洁（降低入门成本及日常使用成本）。</p>
<p>目前主要有五种模式及一些附属模式，如下：<br />
<img src="media/15830543056581/%E5%8E%9F%E7%89%88-%E6%A0%B8%E5%BF%83%E5%92%8C%E5%AE%9A%E5%88%B6%E8%8F%9C%E5%8D%95.png" alt="原版-核心和定制菜单" /></p>
<p>完整脑图：<a href="https://my.mindnode.com/sVmnzsyMMGZsqG4asUB8b3ShNYxzx9WLSrrDxATb">原版-核心和定制菜单</a></p>
<p>多数定制的核心菜单下都会有定制菜单，形成两层菜单的景象。我按照素材（产品/组件/材质等）、我的、快搭（智能设计、全局替换、整体风格、自动水电等）等一级概念，收纳削减一部分定制菜单到核心功能面板里。移除部分菜单，如硬装里的设计模版（默认模式已有快搭）。将其余菜单收纳到更多按钮中。</p>
<p>以下以几个模式为例：</p>
<p>模式-平面快搭-原版：<br />
<img src="media/15830543056581/%E6%A8%A1%E5%BC%8F-%E5%B9%B3%E9%9D%A2%E5%BF%AB%E6%90%AD-%E5%8E%9F%E7%89%88.png" alt="模式-平面快搭-原版" /></p>
<p>模式-平面快搭-新版：<br />
<img src="media/15830543056581/%E6%A8%A1%E5%BC%8F-%E5%B9%B3%E9%9D%A2%E5%BF%AB%E6%90%AD-%E6%96%B0%E7%89%88.png" alt="模式-平面快搭-新版" /></p>
<p>模式-全屋硬装-原版：<br />
<img src="media/15830543056581/%E6%A8%A1%E5%BC%8F-%E5%85%A8%E5%B1%8B%E7%A1%AC%E8%A3%85-%E5%8E%9F%E7%89%88.png" alt="模式-全屋硬装-原版" /></p>
<p>模式-全屋硬装-新版：<br />
<img src="media/15830543056581/%E6%A8%A1%E5%BC%8F-%E5%85%A8%E5%B1%8B%E7%A1%AC%E8%A3%85-%E6%96%B0%E7%89%88.png" alt="模式-全屋硬装-新版" /></p>
<p>模式-全屋家具-原版：<br />
<img src="media/15830543056581/%E6%A8%A1%E5%BC%8F-%E5%85%A8%E5%B1%8B%E5%AE%B6%E5%85%B7-%E5%8E%9F%E7%89%88.png" alt="模式-全屋家具-原版" /></p>
<p>模式-全屋家具-新版：<br />
<img src="media/15830543056581/%E6%A8%A1%E5%BC%8F-%E5%85%A8%E5%B1%8B%E5%AE%B6%E5%85%B7-%E6%96%B0%E7%89%88.png" alt="模式-全屋家具-新版" /></p>
<p>解释</p>
<ul>
<li>各种模式的左上角都有完成返回按钮（参见上篇局部结构）
<ul>
<li>统一退出机制，且和中间的菜单分离</li>
<li>同时也让用户感知到进入模式中，但界面上又不会差距太大，降低干扰</li>
</ul>
</li>
<li>退出后可快速切换其它定制模式</li>
<li>其它结构（二级导航，搜索）各个模式间基本统一，其形式和默认模式也类似（参见上篇局部结构）</li>
<li>定制模式中，精简操作区内容，分化操作流
<ul>
<li>让更智能的操作集合到第三个智能面板里，核心操作区更专注于手工定制</li>
</ul>
</li>
<li>生成等操作会自动区分全屋家具/厨卫，导出按钮也会自动选择对应的种类</li>
</ul>
<h3><a id="%E8%A7%86%E5%9B%BE%E5%AF%BC%E8%88%AA%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>视图导航篇</h3>
<p>我把视图的操作主要分为：</p>
<ul>
<li>软件界面的操作
<ul>
<li>隐藏/显示界面</li>
<li>主副视图的操作</li>
</ul>
</li>
<li>视图显示的调整
<ul>
<li>视图背景的调整</li>
<li>视图显示对象的调整</li>
<li>视图显示的高级调整</li>
</ul>
</li>
</ul>
<p>给出以下脑图：<br />
<img src="media/15830543056581/%E6%96%B0%E7%89%88-%E8%A7%86%E5%9B%BE%E6%93%8D%E4%BD%9C.png" alt="新版-视图操作" /></p>
<p>接下来分视图高级菜单、导航视图菜单、单房间模式三块来细说。</p>
<h4><a id="%E8%A7%86%E5%9B%BE%E9%AB%98%E7%BA%A7%E8%8F%9C%E5%8D%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>视图高级菜单</h4>
<p>新增-视图菜单：<br />
<img src="media/15830543056581/%E6%96%B0%E5%A2%9E-%E8%A7%86%E5%9B%BE%E8%8F%9C%E5%8D%95.png" alt="新增-视图菜单" /></p>
<p>解释</p>
<ul>
<li>常用的显示设置依旧放在主视图的左下角，可以快速使用</li>
<li>把频率较低的主副视图的操作、视图显示的高级调整等放入辅助菜单的视图菜单里
<ul>
<li>缩放和适应画布可用触摸板和快捷键快速完成，在主视图区域隐藏</li>
<li>视图区域大小可以直接输入百分比，点击输入框是会有下拉选项提示 100%，200%，400%</li>
</ul>
</li>
</ul>
<h4><a id="%E5%AF%BC%E8%88%AA%E8%A7%86%E5%9B%BE%E8%8F%9C%E5%8D%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>导航视图菜单</h4>
<p>下面着重讲一下主副视图的操作。导航小视图的下拉菜单包含部分视图菜单中和自己相关的内容：导航视图模式切换+交换主副视图。</p>
<p>下图为悬停后效果：<br />
<img src="media/15830543056581/%E8%A7%86%E5%9B%BE%E8%8F%9C%E5%8D%95-%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95.png" alt="视图菜单-导航菜单" /></p>
<p>及两种显示模式：</p>
<p>视图菜单-弹性伸缩：<br />
<img src="media/15830543056581/%E8%A7%86%E5%9B%BE%E8%8F%9C%E5%8D%95-%E5%BC%B9%E6%80%A7%E4%BC%B8%E7%BC%A9.png" alt="视图菜单-弹性伸缩" /></p>
<p>视图菜单-大图模式：<br />
<img src="media/15830543056581/%E8%A7%86%E5%9B%BE%E8%8F%9C%E5%8D%95-%E5%A4%A7%E5%9B%BE%E6%A8%A1%E5%BC%8F.png" alt="视图菜单-大图模式" /></p>
<p>解释</p>
<ul>
<li>弹性伸缩为默认视图模式，当属性面板的内容过多可以滑动时，在滑动时会自动向上覆盖住导航视图
<ul>
<li>鼠标离开后，3秒后导航视图会自动把属性面板往下推（但保留滑动位置），展开至原始大小</li>
<li>也可以直接悬停在导航视图上，导航视图会直接展开</li>
</ul>
</li>
<li>大图模式为左右拆分主要视区（可悬浮在中间拖动调整大小），会自动隐藏核心面板和属性面板（可手动打开）</li>
<li>小图模式为弹性伸缩的极限值（两行标题高，88dp），可以悬停直接展开覆盖在属性面板（属性面板不会动），失去悬浮等激活操作后，自动收起，变为最小（这样可以强化属性面板，通过悬停召唤导航视图）</li>
</ul>
<h4><a id="%E5%8D%95%E6%88%BF%E9%97%B4%E6%A8%A1%E5%BC%8F" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>单房间模式</h4>
<p>下面讲一下房间的切换操作：</p>
<p>视图菜单-单房间模式：<br />
<img src="media/15830543056581/%E8%A7%86%E5%9B%BE%E8%8F%9C%E5%8D%95-%E5%8D%95%E6%88%BF%E9%97%B4%E6%A8%A1%E5%BC%8F.png" alt="视图菜单-单房间模式" /></p>
<p>解释</p>
<ul>
<li>主副视图的对象选择状态同步显示</li>
<li>默认不显示单房间模式（见前图，可以通过悬浮菜单看到单房间菜单），选择某房间的对象后（包含地台、墙壁、吊顶等）会出现单房间模式按钮，点击即进入该房间的单房间模式（进入单房间模式会隐藏其它房间，相当于聚焦模式）</li>
<li>当导航视图为2D，选中其中的房间会居中最大主视图中对应的房间，并弱化其它房间的显示</li>
</ul>
<h3><a id="%E9%BC%A0%E6%A0%87%E9%94%AE%E7%9B%98%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>鼠标 & 键盘篇</h3>
<p>设计类软件，最核心的操作就是鼠标编辑操作对象，调整视图等。<br />
而键盘则主要用来提升操作效率。</p>
<h4><a id="%E8%A7%86%E5%9B%BE%E6%8E%A7%E5%88%B6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>视图控制</h4>
<p>先来讲一下鼠标/键盘控制主视图。<br />
我研究了一下酷家乐及同类软件的操作逻辑：主要就是键盘ADWS调整方向，QE调整高度。鼠标调整视角和旋转视角，滚轮拉近拉远。归纳出下图脑图：</p>
<p>原版-鼠标 & 键盘操作视图：<br />
<img src="media/15830543056581/%E5%8E%9F%E7%89%88-%E9%BC%A0%E6%A0%87:%E9%94%AE%E7%9B%98%E6%93%8D%E4%BD%9C%E8%A7%86%E5%9B%BE.png" alt="原版-鼠标:键盘操作视图" /></p>
<p>这里有个最大的和 macOS 冲突的地方就是没有很好的利用触控板的双指平面移动和捏合操作。显得非常违反直觉。考虑到和鼠标设备、Windows 的兼容，作出以下的优化方案：</p>
<p>新版-鼠标 & 视图操作：<br />
<img src="media/15830543056581/%E6%96%B0%E7%89%88-%E9%BC%A0%E6%A0%87:%E8%A7%86%E5%9B%BE%E6%93%8D%E4%BD%9C.png" alt="新版-鼠标:视图操作" /></p>
<p>解释</p>
<ul>
<li>核心操作逻辑未变（点拽转视角，右击拖拽平移摄像头）</li>
<li>优化：双指平面移动=右击拖拽平移，捏合操作=滚轮</li>
<li>增加视角快速调节器（参见行业模式篇：模式-全屋硬装-新版，视图右上角），空格键快速复位默认视角（不自动适应画布）</li>
<li>增加相机设置里的调整参数，用类似渲染界面里的图示表示各项数据（并可直观调整）此处略</li>
</ul>
<h4><a id="%E5%BF%AB%E6%8D%B7%E9%94%AE%E5%BF%AB%E9%80%9F%E6%8E%A7%E5%88%B6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>快捷键快速控制</h4>
<p>快捷键上面的内容已有涉及，现做下汇总（并做了新增）：<br />
<img src="media/15830543056581/%E6%96%B0%E7%89%88-%E5%BF%AB%E6%8D%B7%E9%94%AE.png" alt="新版-快捷键" /></p>
<p>解释</p>
<ul>
<li>保留 macOS 系统的统一菜单管理快捷键</li>
<li>尊重常有的快捷键设计
<ul>
<li>⌘G，⇧⌘G 组操作；⌘A，⇧⌘A 选择操作；⇧⌘H 显示/隐藏和 ⌘L 锁定/解锁；</li>
</ul>
</li>
<li>快捷键和位置相呼应，容易记忆学习
<ul>
<li>⌘12345 用于切换核心面板，⌘[ 用户打开/关闭核心面板；⌘] 用户打开/关闭辅助面板</li>
<li>⌘/ 用户打开最左侧的内页菜单并默认搜索；⌘\打开最右侧视图菜单并默认可输入画布百分比</li>
<li>⌘890 用于打开辅助菜单（渲染、图册、导出）</li>
<li>123456用来打开或切换视图相关操作，和视图左下角相呼应
<ul>
<li>1 显示隐藏、2 平面 3 立体、4 材质、5 相机、6 吸附适配</li>
</ul>
</li>
<li>全屋硬装里将高级操作设定为 UIOP，临近在一起</li>
</ul>
</li>
<li>合理重复使用一个按键
<ul>
<li>上图 234 按键的重复</li>
<li>三个导航视图切换使用 ⇧⌘V</li>
<li>重复利用 R 或 L 在不同模式下表达类似的作用， L 在平面快搭里是画区域，画户型里是画墙，全屋硬装里是画线</li>
<li>使用 Tab 切换子模式，比如选择产品/组件、标注是否带引线、画墙时墙线显示</li>
<li>使用 Z 表示测量和参考线（可用 Tab 在量线和量角间切换）</li>
</ul>
</li>
</ul>
<h4><a id="%E4%B8%B0%E5%AF%8C%E7%9A%84%E5%85%89%E6%A0%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>丰富的光标</h4>
<p>酷家乐里画墙的时候，有一个加号和圆底光标，重复了。而且两个图标也重叠了，上面光标移动的时候，下面圆底还会有延迟现象（PS：另外，很多广标都糊了）。<br />
本人依据各种状态为各类状态做了梳理，如下：</p>
<p>新版-光标的状态：<br />
<img src="media/15830543056581/%E6%96%B0%E7%89%88-%E5%85%89%E6%A0%87%E7%9A%84%E7%8A%B6%E6%80%81.png" alt="新版-光标的状态" /></p>
<p>新版-光标的状态的图例如下：<br />
<img src="media/15830543056581/%E5%A4%9A%E7%8A%B6%E6%80%81%E5%85%89%E6%A0%87.png" alt="多状态光标" /></p>
<p>这里需要注意的是，光标仅仅是对当前状态的一次细化，需要目标对象进行配合以及其它对象的配合（比如绘制线段时，端点的吸附）。</p>
<p>再对上图进行一下解释</p>
<ul>
<li>激活状态类的多用箭头+图标，图标表示工具类型，箭头可以更精确的定位（定位点为箭头左上角）</li>
<li>拖动类的图标以重心为定位点，如拖动墙、拉伸对象的操作（因为方向有两边呀）</li>
<li>旋转、平移，也是以重心为定位点，所以从别的光标切换到此类光标时，位置会有所变动</li>
<li>吸取器略特殊，定位点为左下角</li>
</ul>
<h3><a id="%E5%BE%AE%E4%BA%A4%E4%BA%92%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>微交互篇</h3>
<p>细化微交互主要目的：</p>
<ul>
<li>充分利用鼠标的悬浮等操作中间态，降低界面本身的复杂度，精简核心界面</li>
<li>通过反馈、通过各种状态的细分界面为用户塑造更合理的心理模型</li>
<li>降低用户的等待等负面情绪</li>
</ul>
<p>举部分例子：</p>
<ul>
<li>主视图为 3D 鸟瞰、导航视图为平面时，此时移动摄像机，在鸟瞰视图中也可以把平面视图里的旋转轴心和摄像机的图标也同步过来。并在用户停止旋转视角 3 秒后消失。可以更直观的提示用户视图区域是如何旋转的。</li>
<li>一些重要状态的改变（用户主动），通过页面底部居中的浮动提示来告知用户（快速消失）</li>
<li>一些状态的改变（软件自动），通过页面底部居中的浮动提示来告知用户（快速消失）</li>
<li>当按住 ⇧ 激活框选状态时，光标变为箭头+虚线框（参见上文多状态光标）</li>
<li>平面布置模式，划区域功能，没有闭合区域时，最后一个点和起点间用虚线表示未闭合</li>
<li>3D 视图中选择了一面背景墙，此时切换到立面模式，可以直接进入该面的立面模式</li>
<li>画户型中，选择各类构件，这些按钮可以背景色改为淡蓝来体现激活状态</li>
<li>全屋家具/厨卫中选择定制对象，选择缩放。然后在属性框里激活宽深高输入框，此时主视图里对应的方向应该有箭头高亮显示，提示这边会因数字的改变而改变。如果用户想改变的是另一个方向，就可以很方便的知道，然后就点击输入框前面的方向锁定按钮进行切换</li>
<li>放置物体到别的对象上时，可以把别的对象的接触面加上一个线框，表示俩个物体接触了。也可以把相对位置参考标上（比如我在 3D 视图里摆放饰品）</li>
</ul>
<p>未完待续...</p>
<h3><a id="%E5%85%B6%E5%AE%83%E7%AF%87" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>其它篇</h3>
<p>以上方案的内容只尝试解决我上面表格中记录的一部分内容。还有一些主题可成块的并未涉及，比如：</p>
<ul>
<li>选择不同对象时的智能菜单和对应的属性面板</li>
<li>渲染和相册的结构（由于模块比较独立，可以模仿上文结构篇的处理手法，也可重新新设计，但要处理好渲染和相册的关系）</li>
<li>导出面板的设计（如何做到智能快捷？）</li>
<li>各个行业定制功能的详细设计</li>
</ul>
<p>另外部分内容在 Figma 中，因为杂乱量小，没有写入文中。<br />
抽空再更新此文。</p>
<h2><a id="%E6%80%BB%E7%BB%93" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>总结</h2>
<h3><a id="%E5%85%B3%E4%BA%8E%E4%BA%A7%E5%93%81%E6%9C%AC%E8%BA%AB" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>关于产品本身</h3>
<p>这一轮下来，先算是对此类软件有了一些了解。简单的谈一下：</p>
<ul>
<li>酷家乐、躺平设计师、设计云的主体功能和完整度都比较高，但总体上还是满同质化的（不过工具只是该类企业产品及服务的一环）</li>
<li>在核心功能和高级功能的分化上，三家各有特点。设计云作为后来者，在全屋硬装上有着独特理解</li>
<li>酷家乐和设计云在视觉和交互上略强，躺平家视觉上落后较多（视觉冗余太多了）</li>
<li>几家产品存在着明显的互相借鉴（这本身没问题），导致一些不好的交互也继承过去了，也不知是谁先抄的谁</li>
<li>酷家乐和躺平设计家的产品设计有着明显的历史遗留问题（后者更明显），酷家乐已有明显改善，新版比旧版好很多。同时，酷家乐也因此出现了割裂问题，不仅是交互本身的，甚至有技术导致的问题</li>
<li>国际化方面，躺平设计家的版本差异较大，作为一个领域专业软件，这很奇怪</li>
</ul>
<h3><a id="%E5%85%B3%E4%BA%8E%E6%9C%AC%E6%AC%A1redesign" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>关于本次 Redesign</h3>
<p>总的而言：</p>
<ul>
<li>基本完成 Redesign 目标</li>
<li>进行本次 Redesign 时，由于铺的太开，考虑的因素太多（因为想要系统性的进行大改），导致进度缓慢。后改为按点优化，并不要改动太大，进度就慢慢正常了</li>
<li>产品设计上有 Figma 的影子，但距离 Figma 的水准还差一点</li>
<li>设计风格上其实可以延续酷家乐，我图省事就精简了（效果也还不错，不过换皮肤都是小事），但本次设计风格上总体提升了一致性</li>
<li>部分功能因缺乏客户调研和数据，就先按直觉设计了，可能会有一小部分不合实际用户的需求</li>
</ul>
<h2><a id="%E5%8F%B7%E5%A4%96%EF%BC%9A%E8%B5%84%E6%BA%90%E6%94%BE%E9%80%81" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>号外：资源放送</h2>
<p>除了文章开头的在线地址外。本人公开此文附件：</p>
<ul>
<li>你可点击<a href="https://www.figma.com/file/tihOIk0CWf3KsdtaPuWsDH/Kujiale-Redesign/duplicate">复制 Figma 设计源文件</a></li>
<li>你可点击<a href="https://share.weiyun.com/58ma9GX">下载本文的 Markdown，Mindnode 和图片</a></li>
</ul>
<p>另外本人再附送 Figma 的三张图：<br />
这也是本人这次努力的目标！<br />
<img src="media/15830543056581/Figma%20Design%20Principles%20-%20Professional.png" alt="Figma Design Principles - Professiona" /><br />
<img src="media/15830543056581/Figma%20Design%20Principles%20-%20Approachable.png" alt="Figma Design Principles - Approachable" /><br />
<img src="media/15830543056581/Figma%20Design%20Principles%20-%20Thoughtful.png" alt="Figma Design Principles - Thoughtfu" /></p>
<p>Byebye 下期见。</p>
<p>20200318</p>
</div>
</div>
</a>
<div class="read-more clearfix">
<div class="more-left left">
<span class="date">2020/03/01</span>
<span>posted in </span>
<span class="posted-in"><a href='Design.html'>Design</a></span>
</div>
<div class="more-right right">
<span class="comments">
</span>
</div>
</div>
</div><!-- article -->
<div class="article">
<a class="clearlink" href="15695510441547.html">
<h1>iOS、iPadOS、macOS交互设计吐槽</h1>
<div class="a-content">
<div class="a-content-text">
<p>@银河昆虫</p>
<h2><a id="ios%E3%80%81ipados" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>iOS、iPadOS</h2>
<p>案例编号：i1</p>
<p>案例编号 ip1</p>
<h2><a id="macos" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>macOS</h2>
<p>案例编号：m1<br />
<img src="media/15695510441547/Snipaste_2021-08-25_14-35-02.png" alt="Snipaste_2021-08-25_14-35-02" /><br />
左删除，右取消。<br />
明明 iOS 都已经不这么做了，而且 macOS 中也有很多不统一的地方。</p>
<p>案例编号：m2</p>
</div>
</div>
</a>
<div class="read-more clearfix">
<div class="more-left left">
<span class="date">2019/09/27</span>
<span>posted in </span>
<span class="posted-in"><a href='Design.html'>Design</a></span>
</div>
<div class="more-right right">
<span class="comments">
</span>
</div>
</div>
</div><!-- article -->
<div class="article">
<a class="clearlink" href="15552941529924.html">
<h1>产品设计师的协作式未来</h1>
<div class="a-content">
<div class="a-content-text">
<p>@银河昆虫</p>
<p>一个比较时髦的互联网团队用于协调办公点工具及满足的需求：</p>
<ul>
<li>Slack：高效沟通</li>
<li>Trello：任务管理</li>
<li>Google Docs：文档协作，知识库</li>
<li>InVision：原型设计，配合 Sketch，在线评论，在线标注</li>
</ul>
</div>
</div>
</a>
<div class="read-more clearfix">
<div class="more-left left">
<span class="date">2019/04/15</span>
<span>posted in </span>
<span class="posted-in"><a href='Work.html'>Work</a></span>
<span class="posted-in"><a href='Design.html'>Design</a></span>
</div>
<div class="more-right right">
<span class="comments">
</span>
</div>
</div>
</div><!-- article -->
<div class="row">
<div class="large-6 columns">
<p class="text-left" style="padding-top:25px;">
</p>
</div>
<div class="large-6 columns">
<p class="text-right" style="padding-top:25px;">
<a href="Design_1.html">» Next Page</a>
</p>
</div>
</div>
</div>
</div><!-- large 8 -->
<div class="large-4 medium-4 columns">
<div class="hide-for-small">
<div id="sidebar" class="sidebar">
<div id="site-info" class="site-info">
<h1>West Wong</h1>
<div class="site-des"></div>
<div class="social">
<a target="_blank" class="rss" href="atom.xml" title="RSS">RSS</a>
</div>
</div>
<div id="site-categories" class="side-item ">
<div class="side-header">
<h2>Categories</h2>
</div>
<div class="side-content">
<p class="cat-list">
<a href="Design.html"><strong>Design</strong></a>
<a href="Life.html"><strong>Life</strong></a>
<a href="Work.html"><strong>Work</strong></a>
<a href="Misc.html"><strong>Misc</strong></a>
</p>
</div>
</div>
<div id="site-categories" class="side-item">
<div class="side-header">
<h2>Recent Posts</h2>
</div>
<div class="side-content">
<ul class="posts-list">
<li class="post">
<a href="17319103266708.html">创业记 202411</a>
</li>
<li class="post">
<a href="17286907061177.html">2024 冬季书荐</a>
</li>
<li class="post">
<a href="17236807479993.html">2024 秋季书荐</a>
</li>
<li class="post">
<a href="17225879177233.html">创业记 202408</a>
</li>
<li class="post">
<a href="17181637581908.html">2024 夏季书荐</a>
</li>
</ul>
</div>
</div>
</div><!-- sidebar -->
</div><!-- hide for small -->
</div><!-- large 4 -->
</div><!-- row -->
<div class="page-bottom clearfix">
<div class="row">
<p class="copyright">Copyright © 2015
Powered by <a target="_blank" href="http://www.mweb.im">MWeb</a>,
Theme used <a target="_blank" href="http://github.com">GitHub CSS</a>.</p>
</div>
</div>
</section>
</div>
</div>
<style>.mweb-charts{background:#fff;}
body{ box-sizing: border-box;
margin: 0 auto;}
@media print{
pre, code, pre code {
overflow: visible !important;
white-space: pre-wrap !important; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
word-wrap: break-word !important; /* Internet Explorer 5.5+ */
}
html,body{margin:0;padding:4px;}
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: inherit;
font-size: .8em;
padding: 4px .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.4);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
color: inherit;
text-decoration: none;
}
</style>
<style type="text/css">
figure{margin: 0;padding: 0;}
figcaption{text-align:center;}
/* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background:#b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #F7F7F7;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}