中文 
cxbii
deepin
2015-03-12 21:45 deepin Via：
http://planet.linuxdeepin.com/advancing ... -of-icons/
在deepin 2014.2正式面世后，几乎所有见到它新面貌的人第一件事就是给他的颜点赞，全新的扁平化图标设计更加的美观和时尚，然而，更有一部分细心的用户也发现了桌面环境的细节改进：所有图标可以自动对齐了！没错，这个看似微小的变化是经过了我们的开发团队悉心研究，经过了几个版本的过渡，终于在deepin 2014.2中实现了的成果。
那么问题来了，这个看起来是很普通很常见的功能，在实现上有什么困难的地方吗？
初步尝试：任意定位桌面图标
在最早的版本里，deepin的桌面图标是对齐的，静态情况下看起来与现在并无太大差异，但是，当用户用鼠标拖动图标改变其位置的时候，问题就暴露了出来：要移动到指定的位置非常困难，需要非常高的操作精确性。
这是什么原因导致的呢？我们可以这样理解：
要把图标定位在桌面某个位置上，需要划分很多无形的网格，每个图标要占用一个格子，当时桌面版本的网格单元尺寸是92px*92px，也就是说要想将图标拖拽到某一个网格并对齐，就必须要求图标的所有部分都精确的处于这个无形的网格中，否则就会出其不意的飞到附近的其他位置。
为了解决这一问题，在deepin 2014版本中，我们把桌面网格进行了细化，将最小的网格单元变更为23px*23px，一个图标由之前的占用一个格子转变为16个小格子，也就是说图标可以被拖动到鼠标指定的任意位置，这在一定程度上解决了之前拖动挫败的体验，并一直持续采用到上一版本2014.1。
最佳优化：桌面图标自动对齐
但是，仅可以对图标任意移动位置，在操作体验上显然是有很多不足的。那段时间，用户对与图标对齐的意见不断涌现，我们陆续收到诸如这样的反馈：“可以随意摆放图标后桌面变得非常杂乱”、“想要将图标对齐仅靠鼠标拖动不容易完成”等等。
了解到用户更希望桌面的图标是整齐排列的，这样使用起来会方便许多，于是，在计划升级的2014.2版本中，我们立即决定加入自动对齐功能。
在开发过程中，我们的工程师研究了很多种算法，比如当时还不错的“三一算法”，即当图标的3/4被移动到与图标大小相同的网格单元内时，便自动将图标至于此网格中间。但很快我们发现这个算法的效果会受到网格大小的影响：网格细化越细移动效果越好，反之则达不到预期效果。每完成一种方案，我们便开会讨论评估效果，接下来的几天时间，我们又进行各种尝试，终于确定了最佳方案：以图标中心点为圆心寻找规定距离内的网格，将图标放置到最匹配网格内。这个方案在任何情况下都能稳定呈现图标自动对齐的移动效果，并且有很好的体验效果。至此我们终于完成了桌面图标自动对齐的功能，并将其使用到deepin 2014.2。
前进，永不止步
桌面是系统启动后用户看到的第一个界面，也是展示频率最高的界面， 因而桌面的美观和易用显得格外重要，这也是deepin最为关注的重点之一。deepin每一个点滴的进步都离不开开发团队的心血，离不开用户的爱护与鞭策，我们会一直倾听用户的声音，也继续加油努力，让deepin更易用，更美观，更稳定，赢得更多人的喜爱。
============================================
After the official launch of deepin 2014.2, the first thing almost all the people who saw it for the first time were going to do was to give it a praise for its beautiful new appearance: The brand-new flat icon design is more beautiful and stylish. Meanwhile, some careful users also found the improvements in details of the desktop environment: All icons can align automatically! Yes, this seemingly minor change is the result of the careful study of our development team. Through the transition of several versions, finally it was achieved in deepin 2014.2.
Then the question comes: Is there difficulty in implementing this seemingly common feature?
The Preliminary Attempt: To Position Desktop Icons Arbitrarily
In the earliest version, the desktop icons of deepin were aligned, which looked not very different from now in the static situation, but when the user used mouse to drag one of the icons to change its position, the problem arose: To move the icon to the specified position was very difficult and it required a very high operating accuracy.
What causes this problem? We can understand it like this:
To position an icon in a certain place on the desktop needs to divide many invisible grids. Each icon would occupy a grid. The size of the grid cell of the then desktop version was 92px*92px. That is to say, to drag and drop an icon to a certain grid and make it aligned, you must make sure that all parts of the icon is put precisely in this invisible grid, otherwise it would fly to one of the nearby locations by surprise.
To solve this problem, in deepin 2014 versions, we refined the desktop grids, changing the smallest grid cell into 23px*23px. Then an icon occupies 16 small grids rather than the previous 1 grid. That is to say, an icon can be dragged to any specified place by you with the mouse, which, to some extent, solved the frustrating experience of dragging icons before and continued to be used in the previous version 2014.1.
The Best Optimization: Desktop Icons Align Automatically
However, obviously there are many deficiencies in your operating experience of only being able to move the icons to any location. During that period of time, the users’ comments on icons aligning emerged in large numbers, and we received feedback in succession such as these: “The desktop becomes very messy after the icons can be placed arbitrarily.” “It’s difficult to make the icons aligned by only dragging them with the mouse.”
Learning that users hope the desktop icons are neatly aligned, so that they would be a lot easier to use. Then in version 2014.2 which was planned to be upgraded, we immediately decided to add the feature of automatic alignment.
During development, our engineers studied many algorithms, such as the Three-to-One Algorithm which was good at that time. This algorithm is like this: when three fourths of the icon is moved to the grid cell which has the same size as the icon, the icon will be placed into the grid automatically. But soon we found the effect of the algorithm would be affected by the grid size: the smaller the grid is, the better the movement effect would be. Otherwise the expected effect could not be achieved. Each time when we completed a scheme, we would meet to discuss and assess the results. During the next few days, we conducted various attempts, and finally determined the best solution: To find the grid within the predetermined distance with the center of the icon as the circle center and to place the icon into the grid which is best matched. Using this scheme, the movement effect of the icons automatically aligning can be stably shown in any case, and the experience effect is very good. Thus we finally completed the feature of desktop icons automatically aligning and used it in deepin 2014.2.
Go Forward, Never Stop
The desktop is not only the first interface that users see after system is started up, but also the interface that has the highest frequency of being shown, so the beautiful appearance and ease of use of the desktop are particularly important, and this is one of the key points that deepin focus on. Each bit of progress in deepin is inseparable from the efforts of the development team and the love and encouragement of the users. We will always listen to the users’ voice and continue to make efforts to make deepin easier to use, more beautiful, more stable, and win more people’s love.
http://planet.linuxdeepin.com/advancing ... -of-icons/
在deepin 2014.2正式面世后，几乎所有见到它新面貌的人第一件事就是给他的颜点赞，全新的扁平化图标设计更加的美观和时尚，然而，更有一部分细心的用户也发现了桌面环境的细节改进：所有图标可以自动对齐了！没错，这个看似微小的变化是经过了我们的开发团队悉心研究，经过了几个版本的过渡，终于在deepin 2014.2中实现了的成果。
那么问题来了，这个看起来是很普通很常见的功能，在实现上有什么困难的地方吗？
初步尝试：任意定位桌面图标
在最早的版本里，deepin的桌面图标是对齐的，静态情况下看起来与现在并无太大差异，但是，当用户用鼠标拖动图标改变其位置的时候，问题就暴露了出来：要移动到指定的位置非常困难，需要非常高的操作精确性。
这是什么原因导致的呢？我们可以这样理解：
要把图标定位在桌面某个位置上，需要划分很多无形的网格，每个图标要占用一个格子，当时桌面版本的网格单元尺寸是92px*92px，也就是说要想将图标拖拽到某一个网格并对齐，就必须要求图标的所有部分都精确的处于这个无形的网格中，否则就会出其不意的飞到附近的其他位置。
为了解决这一问题，在deepin 2014版本中，我们把桌面网格进行了细化，将最小的网格单元变更为23px*23px，一个图标由之前的占用一个格子转变为16个小格子，也就是说图标可以被拖动到鼠标指定的任意位置，这在一定程度上解决了之前拖动挫败的体验，并一直持续采用到上一版本2014.1。
最佳优化：桌面图标自动对齐
但是，仅可以对图标任意移动位置，在操作体验上显然是有很多不足的。那段时间，用户对与图标对齐的意见不断涌现，我们陆续收到诸如这样的反馈：“可以随意摆放图标后桌面变得非常杂乱”、“想要将图标对齐仅靠鼠标拖动不容易完成”等等。
了解到用户更希望桌面的图标是整齐排列的，这样使用起来会方便许多，于是，在计划升级的2014.2版本中，我们立即决定加入自动对齐功能。
在开发过程中，我们的工程师研究了很多种算法，比如当时还不错的“三一算法”，即当图标的3/4被移动到与图标大小相同的网格单元内时，便自动将图标至于此网格中间。但很快我们发现这个算法的效果会受到网格大小的影响：网格细化越细移动效果越好，反之则达不到预期效果。每完成一种方案，我们便开会讨论评估效果，接下来的几天时间，我们又进行各种尝试，终于确定了最佳方案：以图标中心点为圆心寻找规定距离内的网格，将图标放置到最匹配网格内。这个方案在任何情况下都能稳定呈现图标自动对齐的移动效果，并且有很好的体验效果。至此我们终于完成了桌面图标自动对齐的功能，并将其使用到deepin 2014.2。
前进，永不止步
桌面是系统启动后用户看到的第一个界面，也是展示频率最高的界面， 因而桌面的美观和易用显得格外重要，这也是deepin最为关注的重点之一。deepin每一个点滴的进步都离不开开发团队的心血，离不开用户的爱护与鞭策，我们会一直倾听用户的声音，也继续加油努力，让deepin更易用，更美观，更稳定，赢得更多人的喜爱。
============================================
After the official launch of deepin 2014.2, the first thing almost all the people who saw it for the first time were going to do was to give it a praise for its beautiful new appearance: The brand-new flat icon design is more beautiful and stylish. Meanwhile, some careful users also found the improvements in details of the desktop environment: All icons can align automatically! Yes, this seemingly minor change is the result of the careful study of our development team. Through the transition of several versions, finally it was achieved in deepin 2014.2.
Then the question comes: Is there difficulty in implementing this seemingly common feature?
The Preliminary Attempt: To Position Desktop Icons Arbitrarily
In the earliest version, the desktop icons of deepin were aligned, which looked not very different from now in the static situation, but when the user used mouse to drag one of the icons to change its position, the problem arose: To move the icon to the specified position was very difficult and it required a very high operating accuracy.
What causes this problem? We can understand it like this:
To position an icon in a certain place on the desktop needs to divide many invisible grids. Each icon would occupy a grid. The size of the grid cell of the then desktop version was 92px*92px. That is to say, to drag and drop an icon to a certain grid and make it aligned, you must make sure that all parts of the icon is put precisely in this invisible grid, otherwise it would fly to one of the nearby locations by surprise.
To solve this problem, in deepin 2014 versions, we refined the desktop grids, changing the smallest grid cell into 23px*23px. Then an icon occupies 16 small grids rather than the previous 1 grid. That is to say, an icon can be dragged to any specified place by you with the mouse, which, to some extent, solved the frustrating experience of dragging icons before and continued to be used in the previous version 2014.1.
The Best Optimization: Desktop Icons Align Automatically
However, obviously there are many deficiencies in your operating experience of only being able to move the icons to any location. During that period of time, the users’ comments on icons aligning emerged in large numbers, and we received feedback in succession such as these: “The desktop becomes very messy after the icons can be placed arbitrarily.” “It’s difficult to make the icons aligned by only dragging them with the mouse.”
Learning that users hope the desktop icons are neatly aligned, so that they would be a lot easier to use. Then in version 2014.2 which was planned to be upgraded, we immediately decided to add the feature of automatic alignment.
During development, our engineers studied many algorithms, such as the Three-to-One Algorithm which was good at that time. This algorithm is like this: when three fourths of the icon is moved to the grid cell which has the same size as the icon, the icon will be placed into the grid automatically. But soon we found the effect of the algorithm would be affected by the grid size: the smaller the grid is, the better the movement effect would be. Otherwise the expected effect could not be achieved. Each time when we completed a scheme, we would meet to discuss and assess the results. During the next few days, we conducted various attempts, and finally determined the best solution: To find the grid within the predetermined distance with the center of the icon as the circle center and to place the icon into the grid which is best matched. Using this scheme, the movement effect of the icons automatically aligning can be stably shown in any case, and the experience effect is very good. Thus we finally completed the feature of desktop icons automatically aligning and used it in deepin 2014.2.
Go Forward, Never Stop
The desktop is not only the first interface that users see after system is started up, but also the interface that has the highest frequency of being shown, so the beautiful appearance and ease of use of the desktop are particularly important, and this is one of the key points that deepin focus on. Each bit of progress in deepin is inseparable from the efforts of the development team and the love and encouragement of the users. We will always listen to the users’ voice and continue to make efforts to make deepin easier to use, more beautiful, more stable, and win more people’s love.
Reply Like 0 View the author
Thank you all for the hard work ！